プレースホルダとHTML5のplaceholder属性
プレースホルダとHTML5のplaceholder属性 HTML5で導入されたplaceholder属性によって、フォームの入力欄にプレースホルダを設定できるようになりました。さて、この「プレースホルダ」とはそもそもなんなのでしょうか。また、プレースホルダにはどのようなテキストを書けばよいのでしょうか。 プレースホルダってなに? フォームの入力欄に、薄い灰色のテキストが表示されているものを見かけます。あのテキストや、テキストを提供する仕組みは、プレースホルダと呼ばれています。 Safariではアドレスバーに“Go to this address”、検索バーに“Google”というプレースホルダが設定されている。 「プレースホルダ (“placeholder”)」 とは、「実際のものに代わって現れるもの」を意味します。たとえば、Webサイトのテンプレートを作る際に、実際のページにはないテキス
“マークアップ”するということ ～ HTML5勧告に寄せて ～
HTMLを適切な要素を使って書いていくことは実はそれほど難しくはない。しかし過剰に要素を使わずに、かつスタイリングすることも意識して、と適切に“マークアップ”するのはなかなかの修練を必要とする。いったい“マークアップ”するということはどういうことなのだろうか、そしてどのような思考の元に行えば良いのだろうか。 HTML5での変化 著作権表示のマークアップ small要素 footer要素とsmall要素 p要素とdiv要素 footer要素とp要素 スタイリングとの兼ね合い マークアップするということ HTML5での変化 コンテンツに則した素直な形でマークアップできること。 HTML5で変わることや変わったことは多くあるが、それらをおおまかに俯瞰するとこのような言葉に集約できる。そのために様々な要素や属性が追加され、既存の実装をなるべく壊さない形で要素の意味に変更が加えられた。これらの変化は
HTML5の仕様策定が完了 勧告に向け相互互換性向上進める
W3CがHTML5の仕様策定を完了。最終的な勧告に向け、ブラウザフラグメンテーション問題の解決に取り組む。 World Wide Web Consortium（W3C）は12月17日（現地時間）、HTML5とCanvas 2Dの仕様策定を完了したと発表した。最終的な標準化となるHTML5勧告の公開は2014年中に予定している。 最終的な勧告に向け、Webブラウザごとに表示や動作が異なるフラグメンテーション問題の解決に取り組む。ブラウザ間での相互互換性に加え、オーサリングツールや電子メールクライアント、サーバ、コンテンツマネージメントシステム、その他Webツールなどで確実に実現できるよう、さまざまな活動を実施するという。 既に標準化の次のラウンドを視野に入れ、HTML5.1とCanvas 2D, Level 2の第1草案も発表した。
header 要素 - html5doctor - HTML5.JP
サイト内検索 この記事は、html5doctor に掲載されている記事「The header element」を日本語訳したものです。この記事では、header 要素の正しい使い方が解説されています。 原文タイトル The header element 原文ページ URL http://html5doctor.com/the-header-element/ 著者 Richard Clark 氏 原文投稿日 2009-06-16 一部、直訳ではなく意訳した部分がございます。原文と表現が異なることがございますので、ご了承ください。この本日本語訳には、翻訳上の誤りがある可能性があります。したがって、内容について一切保証をするものではありません。正確さを求める場合には、必ず各記事の原文を参照してください。当方は、この文書によって利用者が被るいかなる損害の責任を負いません。もし誤りなどを見つけたら、
img要素のwidth、height属性について再考してみた - Webtech Walker
img要素にwidth、height属性を指定するかどうかは常に悩んでいて、以前にもブログでみなさんに質問したりもしましたが、自分なりの一つの答えにたどり着きました。 画像の幅、高さの情報というのは以下の2通りの情報があると思います。 画像の大きさを構造上表すメタデータとしての情報 見た目の大きさを表す情報 それぞれについて考えてみます。 画像の大きさを構造上表すメタデータとしての情報 以前書いた質問のエントリーにいただいたコメントで以下のようなものがありました。 静止画像である写真や絵画は、IT化以前の歴史上、サイズを表記してきました。美術館に行くとわかりますが、絵の説明は「題名、作者名、発表年、画材、所有者（収蔵美術館）名、『サイズ』」になっています。もちろんここで表記するサイズはピクセルではなくキャンバスの号数かセンチ単位ですが。このことから考えると、現実世界において画像の大きさは重
犯してはいけないHTMLタグの過ち10個
【追記】 HTML5ではインラインとブロックの要素分類がなくなり、代わりに、メタデータ、フロー、セクション、ヘッディング、フレージング、エンベッディッド、インタラクティブというコンテンツの種類が定義されています。 2. 画像に代替テキストのalt属性が入っていない <img src="sample.gif" /> alt属性は、Webページに表示されるすべての画像に必須の要素ですので、必ず使用する必要があります。 <img src="sample.gif" alt="サンプル" /> 必須の要素ですので、特にテキストで表示する必要がない場合でも、alt=""としておく必要があります。 【追記】 HTML5では「Images whose contents are not known(どのような内容かわからない画像)」に限り、alt属性を省略することができます。写真共有サイトにユーザーが画像を
【スマホ集中連載 第4回】 "HTML5とCSS3で何ができる？" 〜メリット・デメリットを徹底研究！ : LINE Corporation ディレクターブログ
※この記事はChromeで見るのがおすすめです。 こんにちは。新規開発グループ ディレクター兼マークアップエンジニアの浜です。 スマホ連載の第4回目は、HTML5とCSS3という実装寄りの内容になります。とは言っても難しいコードはあまり出てきません。「HTML5とCSS3で何ができるのか」という事をメインに、知っておくと、構成書を作る時のアイディアベースになったりデザイナー・マークアップエンジニア（コーダー）と打ち合わせをする際に話しやすくなる内容をお送りします。 記事のアウトラインは以下です。 そもそも、HTML5とCSS3ってもう使えるの？ HTML5とCSS3を使うメリットは？ HTML5とCSS3で何ができるの？ そもそも、HTML5とCSS3ってもう使えるの？ 使えます。 （※ここから先は、その根拠について説明します。必要ない方は、次の章に飛んでしまっても構いません） 現在のスマ
HTML / XHTMLで使用されるエンティティ文字一覧
エンティティ文字の一覧を表示します。全てのブラウザでこれらのエンティティ文字が使用できる訳ではありません。事前にチェックするようにしてください。 また、この一覧は全てのエンティティ文字を網羅しているわけではありません。代表的なものに限っています。 表示される文字名前での表現数値での表現説明
text-decorationの仕様を理解する - Web標準普及プロジェクト
text-decorationの仕様を理解する この文書内に登場する「テキストの装飾」とは、テキストに下線、上線、取消線を付加するか否かを制御することを指します。 これらはtext-decorationプロパティによって設定できますが、これは一見単純な指定のようですが実際はかなり複雑です。 誤解の多い仕様ですので、少し詳しく紹介します(ここでは下線についてばかり説明していますが上線、取消線についても適宜読み替えてください)。 アンカーテキストの下線を消すには ものの本によるとアンカー(リンク)の下線を消すことは良くないことだ、と書かれています。 確かに下線があるとアンカーのように見える、という人は多いと思いますが、アンカーに下線が無いサイトが最近は多いですし、 また、下線が無いことによってアンカーを見失うということも(あまり)無いのであえてこの方法を紹介します。 いきなり正解を書くと次のよ
まずは基本から・HTML5のCanvasについて参考になったサイトまとめ
WebデザインHTML5 Canvas ようやくHTML5に興味を持ち 始めました。サンプルを以前 記事にして、凄いなーと思っ ていましたが、なかなか時間 がなく、先延ばしに。 ようやくHTML5に興味を持ち始めました。 サンプルを以前記事にして、凄いなーと 思っていましたが、なかなか時間がなく、 先延ばしに。で、ようやく頭に入れ始めま した。なにするにも行動が遅くて困ります。 HTML5でも話題になっているCanvasを勉強し始めました。そんな中で、勉強の参考になりそうなサイトをブクマしたのでこれから学ぼう、とお考えの方とシェアしたいと思ってエントリー。 というわけで、基本的な情報がほとんどです。大量の情報を見ても混乱するのである程度絞っています。 html5.jp リファレンスサイトです。リンク先はcanvasカテゴリに。ここからスタート、というか最後までたぶんお世話になりそう。 ht
【レビュー】HTMLのidとclassでいい名前をつけるテクニック | エンタープライズ | マイコミジャーナル
SitePoint: New Articles, Fresh Thinking for Web Developers and Designers HTMLを書く際に悩むことは多々あるが、中でも悩ましいことのひとつにidやclassで指定する「名前」がある。idやclass属性はCSSやJavaScriptで対象となる要素を特定するために使われる。わかりやすく一貫性がある名前をつけることは、WebプログラマやWebデザイナにとって欠かすことができないスキルであり、悩ましいところでもある。 How To Compose HTML ID and Class Names like a RockstarにおいてMeitar Moscovitz氏がidやclassの名前をつけるひとつの方法を紹介している。短くまとまっており参考になる。同記事では次のテクニックが紹介されている。まず、名前を考える段階で次
URLの終りに「/」(スラッシュ)は必要?、不要?
http://www.suzukikenichi.com と http://www.suzukikenichi.com/ URLの終りに「/」(スラッシュ)を付けた方がいいのか、付けない方がいいのか、付いたときと付かないときでは何か違いがあるのか。 誰もが1度は疑問に思ったことがあるはずです。 URLの末尾に付ける「/」のことを「トレイリングスラッシュ(trailing slash)」と技術的に呼びます。 トレイリングスラッシュのあり・なしについて、ウェブマスター向け公式ブログでGoogleが説明しました。 補足を交えながら要点をまとめて解説します。 まず、トレイリングスラッシュのあり・なしによるウェブサーバーの一般的な振る舞いの違いです。 http://example.com/foo/ （トレイリングスラッシュあり） http://example.com/foo （トレイリングスラッシュ
html5 ざっくりメモ
html5 関係無いのも有るかもですが、個人的にhtml5の要点をまとめたメモ。 ほんとにざっくり書いているので、何か期待しても何も出ません＞＜ 日本語が含まれる場合、title要素は charset の後（次）。 address要素は連絡先情報に使う。 例えば企業サイトの各支店の住所一覧とかに使うのはNG。ブログとかで、上手い店とかの住所にaddressを使うのもNG。 あくまでも、そのサイトの管理者への連絡先。なので、copyrightに使うのもNG。 copyrightはsmall要素が妥当。 なので、p small copyright って感じになる。 nav要素はあくまでも主要なナビゲーションに使う。 主要なってのは具体的にはグローバルナビゲーションやローカルナビゲーション。 なので、関連リンク一覧とか、ページ内にあるちょっとしたリンクに使うのはNG。 hgroup要素は、見出し
HTML5 における HTML4 からの変更点
この文書は「HTML5 differences from HTML4 (W3C Working Draft 25 May 2011)」の日本語訳です。 原文の最新版 は、この日本語訳が参照した版から更新されている可能性があります。 この日本語訳は参考情報であり、正式な文書ではないことにご注意ください。また、翻訳において生じた誤りが含まれる可能性があります。他の仕様の訳については Web 標準仕様 日本語訳一覧 を参照してください。 更新日: 2011-09-15 公開日: 2011-05-26 翻訳者: 矢倉 眞隆 <yakura-masataka@mitsue.co.jp> HTML5 における HTML4 からの変更点 2011年5月25日付 W3C 草案 (Working Draft) この版: http://www.w3.org/TR/2011/WD-html5-diff-2011
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
エンジニアtype 技術者のキャリアを考えるWebマガジン - 転職＠type
Initializr - HTML5 project - template
HTMLやCSSが手間なく書けるZen Coding | Zen Coding 1-1 | HTML+CSSコーディングが10倍速くなるZen Coding
フォームのテキストエリアをより使いやすくするテクニック集
http://www.machu.jp/posts/20100416/p01/
HTML5 & The Web Platform
