ひぐらしのなく頃にの「な」のマークアップについて
Rivival Gate、teramakoさん:HTML,CSSは所詮補助で見かけたので興味を持ちました。
id:teramakoさんが書いている
方法1. <span style="color:red;">は採用しません。２の段階でspan要素が入らないからです。方法3. <span class="red">も同様。だって、spanって単体では意味無いんだもの。
と、ありますが、「意味がない」ことをマークアップするのに、逆にspanは使い道があるんじゃないかと思って使っているのが現状です。
The DIV and SPAN elements, in conjunction with the id and class attributes, offer a generic mechanism for adding structure to documents. These elements define content to be inline (SPAN) or block-level (DIV) but impose no other presentational idioms on the content. Thus, authors may use these elements in conjunction with style sheets, the lang attribute, etc., to tailor HTML to their own needs and tastes.
とあるのですが、まさにスタイルのためのコンテナという「意味」はあると思います。しかしながらよく見ると「adding structure to documents」とあるとおり、「class=red」は、果たして構造なのか？という悩ましい問題にぶちあたります。
元の文で
「な」のマークアップ手法について考えるのであれば、そもそも『ひぐらしのなく頃に』の「な」がなんであるのか、それが強調するための表現であるのか、あるいは強調というような意味を持たない赤さを明示するためだけのものであるのかについて考えなければなりません。
と書いてあるのがまさにその通りなんだろうなあと思います。「Googleみたいなロゴ」かもしれませんし・・・。
個人的にちょっと近いな、と思ったのはfirst-letter擬似要素。ここでの例を見ると、class指定ナシのspanが使われています。というわけで、個人的な結論としては、
- マークアップはspanで行う
- 必要に応じてclassをつける
- 今のところ（少なくともcss2.1では）適切なclassなどはあてはまらないので、自分がこうだ、と思った構造に見合う名前のclassを定義する
ということになりました。
ちなみに公式サイトをふらふらしていたらhttp://www.oyashirosama.com/web/story/onikakushi.htm#1のところで「壱」とかが赤くなっていて、ソースを見たらfontでコケた。
