フォントのマークアップ

目次

  1. 要旨
  2. 強調
    1. 片方で十分
    2. strong への統一
  3. フォント情報
    1. 弱調のために small を
    2. 区別のために i を
    3. その他の装飾
  4. 参考リソース

要旨

強調

 HTML4.01 等においては、強調のために em と strong という二段階の要素が用意されています。しかしながら、例えば私がそうなのですが、どちらか一つで十分だという人も多いでしょう。その場合、ほとんどの人は em だけに留めているのではないでしょうか。(ちょっと前までの私がそうでした。)しかし、使用言語が日本語ならば、 strong の方に統一すべきではないかと思うのです。

片方で十分

 強調というのは少数だからこそ効果を発揮します。強調が多すぎると、いったい本当に大切な情報がどこなのか、読み手に混乱を与えることになってしまいますし、人間の注意喚起も分散してしまうからです。
 ですから、もともと em と strong の2段階があると言っても、 em の段階で文章に占める割合はごくごく小さいものになるはずです。その中で特に特に強調したいものが strong ということになるのでしょうが、そうすると strong 要素にすべき箇所は本当に限られた部分にしか過ぎません。しかし、そんなに限られた部分であるなら、もっと工夫ができるのではないでしょうか? 例えば、見出しにするとか、文章のはじめの方に持ってくるとか……もしかすると、わざわざ em からさらに区別する必要はないかもしれませんね。

 そこで問題は「では em と strong のどちらを使うか?」という話になります。

strong への統一

 ここで、仕様書ではEM:強調を示す。STRONG:より強い強調を示す。(原文:EM: Indicates emphasis. STRONG: Indicates stronger emphasis.)となっていますから、順当に考えると「 em だけでいいか」となりそうですね。

 けれども私は、 strong の方に統一すべきだと思います。なぜなら、多くのブラウザのデフォルトスタイルが「 em が斜体、 strong が太字」となっているからです。そして、日本語は、斜体にするとむしろ読みにくくなる場合が多く、太字の方が強調に相応しいと考えられるからです。
 例えば CSS を滅茶苦茶に解釈するブラウザへの最も簡便な対処法として、 CSS そのものを読み込ませなくしている方も多いでしょうからわかると思いますが、ブラウザのデフォルトスタイルを考慮しておくことも重要なのです。また、伝統的に「 em が斜体、 strong が太字」というレンダリングをしていたサイトが多く、かつ、例えば英語圏では斜体もちゃんと強調としての意味をもつことを考えれば、将来的にもこのデフォルトスタイルが維持される可能性は高いでしょう。

 ということで、日本語によりフィットした装飾として、強調は strong としていた方がよりよいと思うのです。そして、strong がより強い強調を示すとしても、このような比較級は強調する要素が二つあるときのみ意味を持ちますから、 strong だけの使用にもそれほど不自然はない、と私は思います。

フォント情報

 あるテキストを特に“弱調”したり、他と区別した場合、 span 要素を濫用するよりも、“物理要素”に適切なクラスを付与してマークアップした方がよいでしょう。もちろん、その必要がなければ、文章表現に盛り込んでしまって十分なことも多いでしょう。
 なお、これら small 等の有効利用については後述の参考リソースSMALL、B、I、BIG要素について @ Personnel)に既出です。

弱調のために small を

 HTML4.01 等では“弱調”のための要素はありません。そこで、 CSS そのものが解除される可能性も考えて、ブラウザのデフォルトスタイルでも多少の情報が伝達できることを期待して( CSS 装飾のためだけの span を使うよりは) small 要素を用いた方がよいのです。

※これについては参考リソースSMALL、B、I、BIG要素について @ Personnel)に詳細な解説がありますから割愛します。

区別のために i を

 同様に、 HTML4.01 等では“区別”のための要素はありません。そこで、 CSS そのものが解除される可能性も考えて、ブラウザのデフォルトスタイルでも多少の情報が伝達できることを期待して( CSS 装飾のためだけの span を使うよりは) i 要素を用いた方がよいのです。この場合は対象が英字であった方が使いやすいですが、斜体であること自体に特別な意味はなくてもよいと思います。

 例えば、プログラム言語の関数の説明を考えてみましょう。

function(var var1, var var2)

var2 は省略可能です。

 ここで、2番目の引数 var2 が省略可能だったとします。(上記には一つしか例示がありませんが、同じようにたくさんの関数を解説していきたいとして)どのようにマークアップするのが適切でしょうか?
 省略可能なだけで“弱調”したいわけではありません。サブタイトルとか、そういう意味合いではないのですから。かといって強調するわけでも決してありません。要するに、 var1 等と等価に近いのですが、 var1 とはまた異なる情報だということです。
 そこで i 要素を用いてみましょう。

function(var var1, var var2)

var2 は省略可能です。

 これなら、装飾を統一できますし、ブラウザのデフォルトスタイルになっても安心、というわけです。

 なお、上記のような i 要素の用法を採用するなら、なおさら強調を strong に統一しておくのが意味をもつでしょう。(ただし、英語圏の読者などが混乱する恐れはあります。)

※ 日本語の強調には斜体は適切でなく、したがって他の要素の装飾に斜体を使っていないだろう、という前提のもとでの記述です。

その他の装飾

 その他の b 要素などについては、 CSS で定義する別の装飾と重複する恐れ等があり、情報伝達の妨げになりそうですから、安易に使わない方が賢明だと思います。(ただし、たとえば数学に関する記述で、慣習的に太字で書くベクトルなどには使用してもよいかもしれません。)

参考リソース

SMALL、B、I、BIG要素について @ Personnel
管理人:そふぃあ さん
CSS による装飾を前提として span を使うよりも small を使った方がよい場合がある等の記述です。また、装飾的記号を利用する方法の紹介もあります。他のページもそうですが、非常に参考になります。
著作・制作/永施 誠
e-mail; webmaster@stardustcrown.com