一時期は、 dialog 要素と dl 要素でマークアップできると言われていた会話文ですが、
terkel.jpさんのところでも、
指摘されているとおり、HTML 5 の仕様では、
「dl 要素は同じ内容を持つ dt 要素が複数存在すべきではない。
」となっているので、
dl 要素で会話文をマークアップできません
(dt 要素に発言者を入れると、同じ人が発言したときに dt 要素の内容が重複するため)。
では、どうやって会話文をマークアップすればいいでしょうか、自分なりに考えてみました。 現行 dialog および dl 要素の代わりに、 p 要素を使うことが提案されているため、それをベースに考えます。 会話文をマークアップする際に、マークアップしないといけない構造は、 話者と話した内容です。ですから、パッと思いつくとすると以下のようなマークアップになると思います。
<p class="chat">
<span class="speaker">A</span>
<span class="utterance">やあ、お元気ですか。</span>
</p>
<p class="chat">
<span class="speaker">B</span>
<span class="utterance">うん、元気だよ。そっちはどうだい？</span>
</p>
このマークアップの難点は、話者をアイコン画像で表示したい時に、下の例のようにアイコンの右上から話した内容が始まらず、右下から始まってしまう点にあります。こうなると、会話文が 2 行になるとアイコン画像の横に文字が入るスペースがあるのに、アイコン下に文字が入ってしまいます。
じゅげむ じゅげむ ごこうのすりきれ かいじゃりすいぎょの すいぎょうまつ うんらいまつ ふうらいまつ くうねるところにすむところ やぶらこうじのぶらこうじ ぱいぽ ぱいぽ ぱいぽのしゅーりんがん しゅーりんがんのぐーりんだい ぐーりんだいのぽんぽこぴーの ぽんぽこなーの ちょうきゅうめいのちょうすけ
この対処法としては、暫定案ですが、 p.chat 要素の class 要素に、 話者のクラス(A さんであれば、 A クラス)を作って CSS の background で画像を表示する方法があると思います。 以下が、その場合のサンプルコードです。
<style type="text/css">
.chat {
padding-left: 60px;
margin-bottom: 20px;
}
.A { background: url("Aさんの 50x50px のアイコン画像の URL") no-repeat top left;}
.B { background: url("Bさんの 50x50px のアイコン画像の URL") no-repeat top left;}
.speaker { display: none; }
.utterance:before { content: "「";}
.utterance:after { content: "」";}
</style>
<p class="chat A">
<span class="speaker">A</span>
<span class="utterance">やあ、お元気ですか。</span>
</p>
<p class="chat B">
<span class="speaker">B</span>
<span class="utterance">うん、元気だよ。そっちはどうだい？</span>
</p>
この解決策によって、右下から会話が始まらないで済むようになります。 ただし、この方法は、予め話者と話者のアイコンが分かっておらず、 動的に変更する必要がある場合、マークアップが面倒になります。 float および position プロパティを使う方法も考えられますが、どれも一長一短です。 この記法の気に入っているところは、シンプルで直感的な構造であり、 スタイルシートをオフにしても、きちんと話者と話した内容が表示されるところです。
とりあえず、今は、このマークアップで進めて、また良い方法が見つかり次第、 このページに追記していきたいと思います。
