特に『ひぐらしのなく頃に』に詳しい方、あるいは HTML/XHTML に関する知識をお持ちの方がおられましたら是非お教えいただきたいのですけれども、『ひぐらしのなく頃に』の「な」のマークアップってどうやったらいいんでしょう。「くだらねー」と怒られそうですが、最近のすごい疑問。
私はこの作品についてはアニメを見た程度しか知らないですし、HTML に関しても仕様書を読んだ程度の知識しか持ち合わせていないもので、正直まったくどうやったらいいのかが分からず困っています。お暇でしたら少し考えていただければと思いますし、識者の方がおられましたらひとつお答えをいただければさらにうれしいです。
当たり前ながら一応書いておきますが、もう時代は変わりましたし、これはなにも昔みたいな原理主義チックな押し付けをするためのアーティクルではありません。第一、こんなブログツール全盛期の時代に HTML の話なんて流行らないでしょう。ゆえに、単に「どれが一番いいか?」という純粋な疑問であります。もちろん私自身いまでも不思議マークアップをしている人間で大変恐縮なのですが、ここは是非、啓蒙してやるつもりでツッコミを入れていただけるとありがたい限りです。
思いついた方法
取り敢えず思いついた方法を列挙します。前提条件として DOCTIPE 宣言は、
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
を使用します。つまり font 要素は使えません。
方法1. <span style="color:red;">
ひぐらしの<span style="color:red;">な</span>く頃に
いちばん簡単な方法。
Style Attribute Module、いわゆるインラインスタイルで「な」を赤く表示させます。「な」の赤さをなんとしても表現するという限定目的下では使えそうな方法ですが、この表現ではあまり意味がない気がします。そもそも XHTML1.1 では非推奨 ですし、XHTML1.0 basic だったりすると使用禁止です。
方法2. <em>
ひぐらしの<em>な</em>く頃に
単なる強調であるものとし、class 属性を与えません。サンプルが間違っていたので修正しました。
方法3. <span class="red">
ひぐらしの<span class="red">な</span>く頃に
span 要素でクラス化します。意図としては、明確な意味を与えずにクラス化によっ［赤い］という意味を与えます。
方法4. <em class="red">
ひぐらしの<em class="red">な</em>く頃に
em 要素でクラス化します。強調された［赤い］意味を与えます。
方法5. <img src="******.png" alt="ひぐらしのなく頃に" />
<img src="******.png" alt="ひぐらしのなく頃に" />
イメージは 
のようなものを使います。
つまり、あきらめます。赤さに関するマークアップを放棄します。
CSS
別に CSS は本問題には関係ないのですが、ついでにこんな感じで link 要素で CSS を参照させれば「な」は赤く表示されます。
* { font-style:normal; text-decoration:none; color:black; }
.red , em { color:red; }
なんでこんなに悩んでいるか
「な」のマークアップ手法について考えるのであれば、そもそも『ひぐらしのなく頃に』の「な」がなんであるのか、それが強調するための表現であるのか、あるいは強調というような意味を持たない赤さを明示するためだけのものであるのかについて考えなければなりません。通常のマークアップ理論に基づき通常の文章のマークアップをこなすだけならばこの問題は容易に解決できます。強調のような論理的意味合いがあるのであれば強調すればよいわけですし、そうでなく単に赤くする装飾でしかないのであればなにもマークアップしないのが取り敢えず妥当な落ち着きどころとなります。ただの装飾でればその部分に意味を与える必要はありませんし、そもそも与えることはできないからです。
もちろん他の方々の方法は別かもしれませんが、私は普段「これは装飾だからいらんな」「これは強調だから強調するか」というようなプロセスで文字列を明示していきます。
ところが困ったのは、この「な」の場合にはその赤さそのものに論理的意味合いが含まれているのではないかと考えたからです。私はほんの少ししかこの作品に触れていないのですけれども、惨劇と悲劇のはじまる頃という意味合いを、あるいは血のイメージを伝えるという目的がある（のだと思う）のですけれども、これを単に赤色という装飾手法だから表現しないことにすべきかどうかが疑問なのです。もし装飾ではないのならばこの部分には「な」という［赤い］という意味合いを少しでも与えてやるべきなのではないか、たとえ class を付すことで多少の意味合いさえ持たせられないとしても、red という値を与えるべきなのではないのか、などと考えてしまうのです。
通常、マークアップは信念的な面があって、「これは段落なんだ!」と強く思い込んでいるのであれば、文脈上見出しっぽいものでさえ段落となります。あるいは、強調だと思うのならば強調するべきです。だから今回の件にしても、たとえば私がこれは強調された［赤い］文字列なんだと思い込みさえすれば方法4がそれはそれで限定的な正義なのですが、私が書いたものではない（しかもタイトル）ものについてはやはりそうはいかないですし、実際私はそれだけの自信を持てずにいます。［赤い］に意味があるのならば、それを文章構造体に組み込むべきなのかと思ってしまうのです。そしてそもそも red なんていう一見して装飾的な class 名が妥当であるかどうかさえ自信がないのです。
つまるところ
結論としての疑問は、
- 「な」ってなあに? （強調か否か）
- 「な」に与えてやるべき class の値は red でよいの?
となります。「俺が教えてやろう」という方がおられましたら是非に。
といいますか、この作品そのものもそうですけれど、本当にマークアップというのは何年やっても「ふしぎふしぎー」がいっぱいですね。いつになっても難しいです。
Comment （コメント）
http://ab-3.net/2006/07/font_color_equal_red.html
ちなみにこのページで『な』を着色してる方法は、方法１～５のどれでもありません。
私はこれ見てコケました♪
客観的に言えばロゴのデザインであってそれ以上ではないでしょう。
「ロゴから自分が受ける主観的印象」以上のものを求めたければ、当該ロゴの諸権利を保持している方やその団体の広報に意図を問い合わせるしかないと思います。
>「な」に与えてやるべき class の値は red でよいの?
基本的に何のマークアップもせずに表記するのが情報としては正しいでしょう。
どうしても「疑似的に表現したい」、という事であれば、
<span class="higurashi-title">
ひぐらしの<span class="higurashi-em">な</span>く頃に
</span>
<style>.higurashi-title .higurashi-em { color: red; }</style>
という所でしょうか。
「きちんと表現したい」のであれば、画像を使う事やVMLの使用を検討すべきかと思います。
VMLはもう古いですね、何も考えずに書いたらVMLと手が打ってしまいました(^^;
今ならSVGでしょうね。ネイティブサポートしているブラウザも増えていますし。
<style>em.higurashi { color: red; }</style>
ひぐらしの<em class="higurashi">な</em>く頃に
<?xml version="1.0" encoding="EUC-JP"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-JP" />
<title>ひぐらし</title>
</head>
<style title="text/css">
<!--
.red_color {
color: #FF0000;
}
-->
</style>
<body>
ひぐらし<span class="red_color">な</span>く頃に
</body>
</html>
ちなみにマークアップの際のid/classの使い分けの説明は、こちらが一番分かりやすいと思います。
http://www.k3.dion.ne.jp/~outside/kisotisiki/taisyou/class-id.html
あと、HTML＋CSSについてはこちらのサイトが参考になるでしょう。
http://www.aichan.biz/html/
http://www.htmq.com/index.htm
HTMLの勉強ついてはgoogleで[html 入門]とやれば、いくらでも出てくると思います。
僕はData１にひぐらしの ＜赤＞な＜／赤＞ く頃にを格納
んで文章中にひぐらし～があれば置き換えるって
考えたけど・・・HTMLでつかえねーじゃん！
以上VB馬鹿の考えでしたｗ