使って欲しい 3 つの HTML 5 — ruby, details, scoped style

HTML 5 には面白い新機能が沢山ある。その中で、特にブロガーが使うのに便利そうな 3 つの新機能について紹介したい。

ルビ

ruby 要素はテキストにルビを振る。古い HTML 時代から存在しているので、見かけることは多いけれど、HTML5 のルビはシンプルなフォーマットで書く様になっている。

<ruby>文字 <rt>ルビ</rt></ruby>

たったこれだけ。ただし、これだとルビ非対応のブラウザーでルビ文字が連続して現れる。例えば、次の様に入力すると

<ruby>都 <rt>みやこ</rt></ruby>

非対応ブラウザーでは

都みやこ

と表示されてしまう。これは見苦しいので、次のテンプレートをぼくは使っている。

<ruby>文字<rp> (</rp><rt>ルビ</rt><rp>) </rp></ruby>

こうしておくと、ルビ対応なブラウザーでは rp 要素内が消え、非対応なブラウザーでは rp 要素の中身が現れる。サンプルを一つ。

<ruby>都<rp> (</rp><rt>みやこ</rt><rp>) </rp></ruby>

非対応ブラウザーの出力は次の通り。

都 (みやこ) 

Google Chrome の出力は次の通り。

details 要素

details 要素を使うと、「詳細はこちらをクリック」「続きはこちらをクリック」みたいなことが JavaScript なしで出来るようになる。使用例として、過去記事「Google 乗換案内がバスルートをサポート」で「地域別サポートバス会社一覧 - 49 社（五十音順）」を隠しているのでよければ触ってみて欲しい。

文字部分をクリックすると、サポートバス会社一覧が表示される。

details 要素の書式は次の通り。

<details>
<summary>サマリー文字</summary>
詳細...
隠したい文章...
</details>

JavaScript を使わなくて良いのがオススメ・ポイント。なお、非対応ブラウザーでは details 要素内は「見えて」しまう。ユーザー・アクションがない限り絶対に見せたくない、という用途には向いていない。

スコープのある CSS Style

普通、CSS はスタイル・シートを別ファイルに持つかウェブ・ページの先頭で指定する。けれどブログでは、この記事でだけ使いたい CSS スタイルが欲しい場合がある。

先日、新しい iPad と Google Nexus 7 の違いをテーブルに書いた。そして優れている方を「青文字」で書いた。scoped style を使わないなら、次の様に書く。

<td style="color: blue;">優れている</td>

このやり方は二つの点でスマートじゃない。一つは、何故優れている方が青字なのかが分からない点。もう一つは、色を青から赤に変えようとした時に置換に頼らなければならない点。特に後者はケアレスミスを招きやすい。今回の例では、blue を red に置換すると「bluetooth」が「redtooth」に誤置換される恐れがある。

そこで、scoped style を使う。書式例は次の通り。

<table border="1">
<style scoped="scoped">
  .better { color: blue; }
</style>
<tr><th>解像度</th><td class="better">264 dpi</td><td>216 dpi</td></tr>
...
</table>

こう書くと、ソースコードを見て 264 dpi が better だと分かるし、色を変えたい場合は scoped style の CSS を書き直すだけで良い。

そうそう、「スコープ」の説明もしておこう。style 要素に scoped 属性を上記の様に設定すると、一つ上の親の要素の中でだけ、そのスタイルは適用される。上記の例では style 要素の親は table 要素だから、table 要素の中でだけスタイルが適用される。

こういうスタイルは、全体のスタイル・シートで決定することが難しい。もしかして、better の他に worse があるかもしれないし、良し悪しの比較ではなく別のことに色を付けているかもしれない。それはブログの記事によって変わるもの。scoped style は正にそういう悩みを抱えるブロガーにピッタシの機能。

サポート・ブラウザーについて

デスクトップ版の Google Chrome と iPad の Safari が上記の機能を全てサポートしていることを確認した。

なお、ブラウザーに限らず Google Reader では、全ての機能がサポートされていないことも確認した (2012-10-01 現在)。この点に関しては、一刻も早い Google のサポートを期待したい。

あとがき

ルビに details 要素に scoped style は一年位い前からこのブログでよく利用している。フィード・リーダーがサポートしてくれていないのは痛いけれど、それにも増して「書きやすい・読みやすい」というメリットがある。

少くとも Blogger のテンプレートは HTML 5 なのでこれら要素を使うことに問題はない。また、他の HTML 5 じゃないブログでも、おそらく HTML 5 の書き方をしてもブラウザーが良きにはからってくれると思う。よければ試してみて欲しい。