サイト内検索

small と hr 要素

この記事は、html5doctor に掲載されている記事「The small & hr elements」を日本語訳したものです。

一部、直訳ではなく意訳した部分がございます。原文と表現が異なることがございますので、ご了承ください。この本日本語訳には、翻訳上の誤りがある可能性があります。したがって、内容について一切保証をするものではありません。正確さを求める場合には、必ず各記事の原文を参照してください。当方は、この文書によって利用者が被るいかなる損害の責任を負いません。もし誤りなどを見つけたら、当サイトのお問い合わせより連絡いただければ幸いです。

small と hr 要素

私たちは <i> and <b> を診察したばかりだ。これらはプレゼンテーショナルな HTML4 要素だったが、セマンティックな人生を送るべく新たに息を吹き返すことになった。HTML5 では、セマンティクスを授かるべく、すっかり変わってしまった要素が、さらに 2 つある。それは <small><hr> だ:

  • <small> — テキストを小さくするためのものだったが、注釈や細目に使われることになった。(W3C:Markup, WHATWG)
  • <hr> — 水平罫線だったが、テキストの中で段落レベルのテーマの変わり目に使われることになった。(W3C:Markup, WHATWG)

<small> 要素

small 要素は、免責条項や警告といった、いわゆる "細目" を表します。

<small>注釈に使えるようになった。ページの中心となるテーマではないコンテンツに使う点は <aside> と同じだが、インラインで使うのだ。一般的な例として、インラインで法律用語に使える。例えば、ページのフッターに入れる著作権表記や免責条項や使用許諾情報だ。これは帰属にも使える。ただし、ブロック・レベルのコンテンツに使ってはいけない(段落やリストなど)。メイン・コンテンツとして見なされてしまうからだ。

Using the small element for license information
フォントの使用許諾の要件に満たすため <small class="font-license"> を使う。

<small><a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/">Creative Commons Attribution Share-alike license</a></small>

rel="license" を入れた Creative Commons license のリンクに <small> を使う。

<small> テキストは、前後のテキストより小さくする必要はない。テキストを小さくしたいだけなら、CSS を使うのだ。<small> はインラインのコンテンツにしか使えない。最後に、<small><em><strong> のセマンティクスに影響を与えない。

<hr> 要素

hr 要素は段落レベルのテーマの変わり目を表します。

"段落レベル" っていうのは、テキストのブロックの間のことだ。サイトのセクションを区切るのに使うことはできない。代わりに、<hr> は、文章のセクションの中や、小説のシーンの間で、異なるトピックを区切るのだ。Hixie に相談してみたら、私は段落のコンテンツ・モデルを誤解していることが分かった(間違いを後悔している)。実際には、<hr> は "セクションが終わり、次が始まる" ことを意味することが分かった。つまり、セマンティクス上、</section><section> と同じだ。<section> のような要素は、もともとすでにこれを表しているわけだから、<hr> はテーマの区切りと言っても良いだろう。文章のセクションの中や、小説のシーンの間で、異なるトピックを区切るのだ。しかし、これは、<p> が使えるところならどこでも使うことができる。今日では(ブラウザーのデフォルトのレンダリングでは)広く使われているわけではないが、CSS を使ってイメージに置き換えてもよいだろう:

Horizontal rule (hr) separator, replaced using CSS with a background image
<hr> のスタイリング。CSS を使って、ボーダーを消し、マージンと背景画像を加える。例:
hr {height: 24px; background: url('flourish.png') no-repeat 50% 50%; margin: 3em 0; border: 0;}

IE7 以前は画像の周りにボーダーを入れてしまうと言われているけれども、これには回避策を使うことができる。もう一つの方法として、IE7 以下向けのスタイルシートを使って、まるごと非表示にしてしまうのもよいだろう。もし話の移り変わりがはっきりとしているなら(例えば、ウェブログのコメントの間など)、または、その使用目的が単にプレゼンテーショナルなものに過ぎないのであれば、代わりに別の要素で CSS のボーダーや背景イメージを使おう。

Cork’d title with decorative background image
Cork’d.com はタイトルに装飾的なの CSS 背景画像を使っている。これは、<hr> を使うのに良い場所とはいえない。

まとめ

HTML4 がリリースされたとき、プレゼンテーショナルな要素 <basefont>, <font>, <s>, <strike>, <u> は 、すでに、CSS の役割だとして、非推奨となっていた。HTML5 は、<big><tt> を削除することで、これを成し遂げた。

残りの HTML4 のプレゼンテーショナルな要素、つまり、長いこと忘れられていた <small><hr>先週の <i><b> も含めて)は、HTML5 で再定義され、それらの典型的な使い方にあわせて、役に立つメディア非依存のセマンティクスを持ったのだ。あなたは、これらの要素を使うかい? ぜひコメントしてほしい!

この記事は Oli Studholmeによって執筆されました。彼は日本の大阪でフリーランスのデザイナーとして働いています。彼は現在、HTML5 と CSS3 に関する日本語の書籍に携わっています。Web Directions East conference運営者の一員であり、世界を変えようと企んでいます(シー!それは秘密)。oli.jp, tweets (@boblet), そして、ときどき tumbles を書いてます。宜しくね!^^