この記事は、HTML5 Advent Calendar 2013、11日目の記事です。
去年の HTML5 Advent Calendar 2012 では、Microdata 関連の記事を書いたんですが、今年も登録してみたものの、見事にネタが無いのでどうしようかなと...... ということで、HTML5 から追加された属性 （要素じゃなく属性の方） の中から、まだあまり広く使われてなさそうな属性さんたちに日の目を見て頂くための紹介記事を書いてみようかと思います。
ちなみに、「あまり広く使われていなさそうな」 は完全に私の独断と偏見ですのでよろしくお願いします。
placeholder 属性
最初なのであまりマイナーっぽくないやつから。その名の通り、入力コントロールに対して、プレースホルダ （入力のヒント） を付与する属性です。input 要素と textarea 要素に対して適用することができます。
実際に適用すると下記のような感じになります。
<label for="reservation-number">ご予約番号</label> <input type="text" name="reservation-number" id="reservation-number" value="" placeholder="01-から始まる6桁の番号（例）01-0001">
ちなみに、placeholder 属性に指定するのは、入力のヒントです。ですから、下記のように本来入力コントロールのラベルとして表示すべきものを placeholder 属性で代用するようなことはしてはいけません。
<!-- 間違った使い方。適切なラベルを与えることがまずは重要 --> <input type="text" name="reservation-number" id="reservation-number" value="" placeholder="ご予約番号">
また、ヒントですから、あまり長ったらしい文章は適しません。仕様書の方にも書かれていますが、短いヒントを指定しましょう。
少し長めの文章で入力する内容を補足してあげた方がよい場合や、placeholder 属性に対応していないブラウザや支援技術向けには、該当入力コントロールのそば （読み上げなどを考慮すると入力コントロールよりソース上は前が望ましい） に、補足となる文章を記述しておいてあげるのもよいでしょう。
あと、「全角で入力」 とか、「ハイフンはなしで」 みたいのは、placeholder 属性で指定するヒントとしてはちょっとどうかなと思います。こういうものはサーバサイドで処理してあげて、ユーザーにあまり入力フォーマットを細かく意識させない作りにしておくべきではないかと思います。
form 属性
入力コントロールは form 要素の子要素として記述することで、そのフォームと関連付けが行われるというのが HTML 4.01 や XHTML 1.x の時の仕様でしたが、HTML5 で form 属性が追加されたことで、入力コントロールが form 要素の外にあったとしても、関連付けを行えるようになりました。
対応しているブラウザであれば、form 属性値に、関連付けたい form 要素に指定した id 属性値を指定してあげれば、その form 要素の子要素でない入力コントロールからでも、入力されたデータを受け取ることができます。
なお、form 属性を指定できる要素は、button、fieldset、input、keygen、label、object、output、select、textarea 要素の各要素です。
pattern 属性
HTML5 では、入力コントロールに対して指定可能な属性がかなり拡張されています。その中で、pattern 属性は簡単な入力バリデートをブラウザ側で行える属性です。JavaScript の正規表現 （完全一致のみ） によって入力された内容が正しいかを検証します。
<label for="part">パート番号</label>
※ パート番号は 1桁の数字の後に大文字アルファベット 3文字 （例：5ABC） という形式です。
<input type="text" pattern="[0-9][A-Z]{3}" id="part" name="part" placeholder="入力例）5ABC" />
上記のように、pattern 属性に [0-9][A-Z]{3} と入力した場合、正規表現としては ^(?:[0-9][A-Z]{3})$ として検証されます。ちなみに、下記の場合はこの属性は無視されます。
- 関連づけられた form 要素に novalidate 属性が付与され、入力内容の検証が無効になっているとき
- 同じ入力コントロール要素に disabled 属性、または readonly 属性が付与されているとき
ただし、入力内容の検証はデータを受け取る際にサーバサイドできちんと行い、この属性による検証は、あくまでデータ送信前の簡易な検証にとどめましょう。
scoped 属性
style 要素に、scoped 属性が指定できるようになりました。scoped 属性付きの style 要素内に記述されたスタイルは、文書全体ではなく、その style 要素の親要素をルートとするサブツリーに対してのみ適用されます。
scoped 属性については、過去に書いた下記の記事を参照してください。scoped 属性についてはブラウザが少しずつ対応し始めています。
manifest 属性
キャッシュ制御のための manifest 属性は、html 要素に指定可能な属性として追加されています。
manifest 属性はキャッシュマニフェスト（Cache Manifest） ファイルの URI を指定します。キャッシュマニフェストファイルは、オフラインでのアクセスに備えてブラウザがあらかじめキャッシュしておく必要がある外部リソースを指定したものです。
manifest 属性については、過去、下記の記事の、一番最後の段落に書いていますので参考まで。
sizes 属性
link 要素に、新しく、sizes 属性が追加されています。sizes 属性は、link 要素によって関連付けられた画像ファイルなどのサイズを指定します。
sizes 属性は rel="icon" が指定された link 要素でのみ使用でき、その値は 「横幅x高さ」 の形式で指定します。
<link rel="icon" href="favicon.png" sizes="16x16" type="image/png"> <link rel="shortcut icon" href="favicon.ico" sizes="16x16 32x32 64x64" type="image/x-icon">
16X16 のように 「x」 は大文字でも大丈夫。また、値は半角スペースで区切ることで複数指定することもできます。これは例えばマルチアイコンのように、1つのファイルに複数サイズの画像が含まれているような場合が考えられますね。
reversed 属性
ol 要素に reversed 属性が追加されました。reversed 属性は ol 要素におけるリストマーカーの順序を逆順にします。
<p> 好きな映画ランキングを 10位から順に </p> <ol reversed> <li>バック・トゥ・ザ・フューチャー</li> <li>インディージョーンズ</li> <li>マトリックス</li> <li>スターウォーズ</li> ...省略... </ol>
逆順の順序リストを作りたい場合はこの属性を使いましょう。ちなみに、XHTML5 では、reversed="reversed"、もしくは reversed="" と記述する必要があります。
seamless 属性
seamless 属性は HTML5 で iframe 要素の属性として追加されました。seamless 属性が指定された iframe 要素で読み込まれたコンテンツは、親ドキュメントに、まるでそのドキュメントの一部のようにレンダリングされます。
例えば、seamless 属性が指定された iframe 要素は下記のような挙動になります。
- iframe 内に読み込まれたリンクを開く場合、親ドキュメント上のリンクとして開く
- 親ドキュメントで指定したスタイルは iframe 内の要素にも継承する
詳しくは過去に、下記の記事を書いていますので、参考にしてみてください。サンプルもありますよ。
contenteditable 属性
contenteditable 属性は該当する要素内の編集可否を指定するグローバル属性として HTML5 で追加されました。グローバル属性ですので、すべての HTML 要素に対して使用することができます。
例えば、html 要素に指定すれば、ページ内のすべてが閲覧者によって編集可能になりますし、下記のように定型文を HTML 文書で作っておいて、必要な箇所を編集して印刷するみたいな使い方もできます。もちろん、途中で保存したりってことをやる場合には、別の仕組みと組み合わせないといけませんが。
<!-- 定型文を HTML 文書で作っておき、必要な箇所を編集して印刷するといったことも可能です --> <article> <h1>第 <span contenteditable="true">23</span> 回 定例会議のお知らせ</h1> <p> 下記の通り、定例会議の開催についてお知らせします。 </p> <dl> <dt>日時</dt> <dd contenteditable="true">2013年6月14日 14時～15時</dd> <dt>会場</dt> <dd contenteditable="true">本社会議室</dd> </dl> ...省略... </article>
ブラウザのロケーションバー （アドレスバー） に下記のように入力すれば、ブラウザをメモ帳代わりに使えるなんて Tips もありましたね。
data:text/html,<html contenteditable>
その他
その他ですが、属性としては以前から存在していたものが、HTML5 ではすべての要素に指定可能な、グローバル属性として再定義された属性もあります。例えば、accesskey 属性とか、tabindex 属性とか、title 属性など。
また、tabindex 属性には、負の値が指定可能になっています。これによって、閲覧者の Tab キーによるフォーカス操作の順列からは除外されます。
あとは、先日、Web Accessibility Advent Calendar 2013 の方で書きましたが、role 属性と aria-** 属性群に関しても、HTML5 で利用可能です。詳しくは下記の記事を参照してみてください。
ということで、HTML5 で新たに追加された属性の中からピックアップしてみました。人によっては別にマイナーじゃねぇわって感じだったかもしれませんが、中にはブラウザのサポートが進むと便利な属性もありますので、仕様書なりをチェックしてみてはいかがでしょうか。
