P-0043 HTML, CSS のあまり知られていない便利な機能

はじめに

HTML ・ CSS にはさまざまな機能が盛り込まれていて、有効に活用すれば非常に便利なのですが、そういう機能の存在自体、一般にはあまり知られていません。そこで、裏技と言うほどでもありませんが、 HTML の便利な機能をいくつかピックアップして紹介しようと思います。

※ HTMLの機能は大概はブラウザごとの実装に依存しています（必ずしも特定のブラウザの実装が絶対とは限らない）が、ここでは話を分かりやすくするため、わざと短絡している場合があります。

PageTop

HTML

blockquote, q 要素の cite 属性の利用 （ HTML 4 〜）

blockquote 要素は長い引用、 q は短い引用を示しますが、 HTML 4 以降、どちらにも共通の属性に cite 属性があります。 cite 属性は引用元文書の URI を記述するためのもので、引用元が Web ページならその URL を、書籍なら URN （本の ISBN コード）を記入する、といった使い方をします。

例：
<p>当サイトのトップページには
<q cite="http://piro.sakura.ne.jp/">Japanese
fonts required to view this site.</q>
という記述がありますが、...

これをブラウザがどういう風に利用するかというと、例えば Mozilla や iCab のような先進的なブラウザは、 cite 属性のある blockquote, q 要素の上でコンテキストメニューを開けばリンクを辿るのと同じ感覚で引用元にジャンプすることができます。残念ながら IE には標準ではこういう機能はありませんが、 WinIE 5.x 以上なら、 Makoto 氏のコンテキストメニュー拡張スクリプトを導入することで同様の操作ができるようになります。

PageTop

汎用属性 id の利用 （ HTML 4 〜）

HTML 4 以降ではほとんどの要素に対し id 属性というものが定義されていて、要素に一意な名前を付けることができます。これはスクリプトの動作対象や、 CSS のスタイル適用対象として利用することが多いですが、同時に、リンク先のアンカー（終点アンカー）としても利用できます。

これまでは <a name="アンカー名"> と書いた位置に <a href="#アンカー名"> というリンクで直接ジャンプする機能しかありませんでしたが、 HTML 4 からは id 属性に <h1 id="Title"> とか <blockquote id="Quote2"> とか書いておくだけで、 前述の例同様 <a href="#id 名"> という書き方でその位置に直接ジャンプできるようになっています。 id 属性はほとんど全ての要素に記述できるので、ページ内の好きな位置に自由にリンクできるというのが大きな利点です。

※ id で指定された位置へのジャンプは IE 4 以降・ Netscape 6 以降などが対応しています（ NN 4.x は未対応）。

※ id 属性には、 id="20010430" のような数字で始まる値は使えません（ name 属性では可能）。 name 属性を単純に id に置換するとこういうミスを犯してしまいがちなので、日記のアンカー等を id 属性にする場合は注意が必要です。

PageTop

label 要素によるフォームの操作性向上 （ HTML 4 〜）

HTML 4 以降で定義されている label 要素を使うと、チェックボックスやラジオボタン等のフォーム部品と説明テキストを関連づけることができます。

<label>確認：<input type="checkbox" id="check" value="Check" /></label>

Netscape 6 などの先進的なブラウザでは、 label 要素を適切に使うことでフォームの操作性を向上させることができます。別項・フォームでは label を使おうで詳しく紹介していますので、そちらも併せて読んで下さい。

PageTop

link 要素は、その HTML 文書と他のリソースとの関係を付記するためのもので、「次のページ」「前のページ」「表紙（先頭のページ）」などを指定することができます。

<link rel="start" href="start.html" title="最初のページ" />
<link rel="next" href="p05.html" title="次のページ" />
<link rel="prev" href="p03.html" title="前のページ" />

iCab や Lynx は、この link の内容を解釈して、ツールバーのような形で利用することができます。まだ実験段階のようですが、 Mozilla 用の拡張ツールバーもあります。

ちなみに rel 属性というのはこの文書から見たリンク先リソースの位置づけで、 rel="next" ならばリンク先文書は「次のページ」だ、ということになります。これとは別に rev 属性というものも指定でき、こちらはリンク先リソースから見たこの文書の位置づけを表します。 rev="prev" ならばこの文書はリンク先文書の「前のページ」だ、ということになり、これは rel="next" と等価で、 <link rel="next" rev="prev" .../> と両方同時に書くこともできます（あまり意味はありませんが）。

PageTop

object 要素によるリソースの埋め込み （ HTML 4 〜）

HTML 4 以降で定義されている object 要素は img, script, applet, embed （ IE/NN の独自拡張）, iframe などの代替となる汎用の埋め込み要素で、画像・音声・ BGM ・動画・スクリプト・別の HTML 文書など、 type 属性で MIME タイプを・ data 属性で埋め込むリソースの URI を指定すれば、何でも埋め込むことができます。

また、 object 要素はそれ自体 img の alt 属性の機能も兼ねていて、入れ子にすることで、埋め込むリソースに対応していないブラウザでも適切な表示ができるようになっています。

<object type="movie/quicktime" data="promotion.mov">
   <object type="text/html" data="promotion.html">
       <a href="promotion.html">製品紹介</a>
   </object>
</object>

この例だと、 QuickTime ムービーが再生できる場合はムービーが表示され、それができなければ promotion.html がインラインフレームで表示され、それもできなければ promotion.html へのリンクが表示されます。

PageTop

CSS

content プロパティの利用 （ CSS 2 〜）

CSS 2 から導入されたプロパティに content というものがあります。これは :before, :after 疑似要素と組み合わせて使うもので、例えば「 q 要素の前後に括弧を自動で表示する」という場合なら、以下のように記述します。

q:before { content: "「"; } /* 開き括弧 */
q:after  { content: "」"; } /* 閉じ括弧 */

content プロパティでは、決まった文字列以外に属性の中身も表示できます。 cite 属性の中身を表示したければ attr(cite) と書けば OK です。定型の文字列と同時に指定すれば、利用の幅は大きく広がります。

blockquote:after { content: "引用元：" attr(cite); }

また、 content プロパティの値には URI 形式も指定でき、ワンポイント画像・定型文・音声などを自動で埋め込むこともできます。

h1:before { content: url(marker.gif); }

関連記事： content で日本語を使う

PageTop

B:Back