WEBCRE8.jp > 比べる > [HTML5 入門]実制作で迷わない為のマークアップ例：会話文

[HTML5 入門]実制作で迷わない為のマークアップ例：会話文

この記事は約9分ぐらいで読めます

HTML5を使うことで文書構造的を意識したマークアップが出来ます。このシリーズではwebでよく使われる表現のマークアップ例を考えてみます。第一回は会話文です。

文書構造を意識したマークアップ例

今回から始める不定期連載です。HTMLのコーディングのやり方はリファレンスサイト等で例文を用いて行われることが多いですが、どうも抽象的だったり、実際の運用に即していない印象のものが多く見られるように感じています。

仕様に関する解説やコードの書き方も、遠まわしだったり、「だから結局どう書けばいいの？」という感は拭えません。また、ドキュメント自体が書かれた地域の文化を基準にしており、我々日本のweb制作現場の実際にそぐわない場合もありますよね。

こういったことについて、一つ一つ実際の事例や具体的な使われ方を挙げながらHTML、CSSのコーディングについて解説したいと思います。

また、この連載にはブログの記事と同じく私個人のHTML5のマークアップに対する考え方が強く織り交ぜられることと思います。もし見解の相違などありましたらご意見頂きたいと考えています。

シンプルな二人の会話文のマークアップ

ということで今回は会話文について。

会話文は通常単なる段落である

会話する事は本文の文章の形の一つである

まず、会話文というものを文章の中でどう表現出来るか考えてみましょう。例えばAさんとBさんが喋っている場合

「今日、雨が降らないと良いですね」とAさんが言うと、「彼女がいるので、残念ながらそれは叶わないでしょう」とBさんが答えた。

「今日、雨が降らないと良いですね」
Aさんが言うと
「彼女がいるので、残念ながらそれは叶わないでしょう」
とBさんが答えた。

A「今日、雨が降らないと良いですね」
B「彼女がいるので、残念ながらそれは叶わないでしょう」

といったような書き方が考えられます。

いずれの場合も、この会話はコンテンツ内の単なる文章であり、pタグでマークアップされることに違和感はないでしょう。

三番目の書き方が少し特殊ですね。この場合段落内の通常のテキストと話者の名前は文章表現上の役割が違うので、bタグで囲みます。

HTML
<p><b class="talker">A</b>「今日、雨が降らないと良いですね」<br>
<b class="talker">B</b>「彼女がいるので、残念ながらそれは叶わないでしょう」</p>

CSS
.talker {
font-weight: bold ;
padding-right: 0.5em ;
}

話者を表現した会話文のマークアップ例

アイコン付きの会話文のマークアップ

次に、似顔絵やアバター等のアイコン等で話者を表現する場合のマークアップです。

アイコンのみ

話者がアイコンのみで表される会話文の表示例

アイコンのみで何かを表す場合、それはアイコン自体がそれの名前と代替されるものであるべきだと考えます。画像が表示されない場合はalt属性でわかるよう、かつ表示されていてもtitle属性のツールチップ等でそれが何なのかを表現します。

話者のアイコンのマークアップは、具体的には

b要素の中にimg要素を入れる
b要素に背景画像をつける

といったパターンが考えられます。

HTML
<p class="dialogue">
<b class="talker"><img src="http://placekitten.com/60/60" alt="A" title="Aのアイコン"></b>
「今日、雨が降らないと良いですね」</p>
<p class="dialogue">
    <b class="talker"><img src="http://placekitten.com/g/60/60" alt="B" title="Bのアイコン"></b>
「彼女がいるので、残念ながらそれは叶わないでしょう」</p>

CSS
.dialogue {
    padding:10px 10px 10px 80px ;
    margin-bottom: 10px ;
    width:400px ;
    background:#ccc ;
    position: relative ;
    min-height: 100px ;
}

b {
    margin-left: -70px ;
    padding-top: 10px ;
    position: absolute ;  
}

アイコン付き会話文のマークアップ例(アイコンにimgタグを使用した場合)

デモを見る

アイコン+名前

次に、話者をアイコンと名前の両方で表現する場合。

b要素に背景画像をつけ、テキストで名前を表記する
b要素の中に擬似要素で何らかのアイコンを表示し、テキストで名前を表記する

といった方法が考えられます。

どちらの場合もアイコン自体は意味を持たず、テキストの情報をより伝達しやすくするためのものになります。webフォントを使ったアイコンであったりも使えますね。

アイコンのみで伝える場合とそうでない場合の差

アイコンは上記のように、それだけで文字の代わりを果たすタイプのものと、文字の意味することを修飾するものとがあると思います。この話は昨晩の記事[CSS]擬似要素の実用的な使用用途のまとめでも触れていますが、別途記事を書く予定です。引っ張ってますけどちょっと長い説明が必要なのでｗ

Q＆Aのマークアップ

Q＆Aは一見会話のようではありますが、質問文という項目に対する回答という記述を述べているのでdlタグでマークアップされるのが相応しいでしょう。

ただし会話文、Q＆A、この二つを分けているのはあくまで文書中の扱われ方です。Q＆Aは大抵サイトやサービスの質問ページで使われるものでそれぞれの項目は一つ一つ別々の事例を扱っています。例えば、先生と生徒の質問と答えで話が進行していく文章などでは、内容が質問であっても会話と見做すのが自然でしょう。

全体での文脈においてどう扱われているかが重要です。

HTML
<dl class="faq">
    <dt>これは山手線ですか</dt>
    <dd>いいえ、山手線です</dd>
    <dt>これは山手線ですか</dt>
    <dd>とんでもない、山手線です</dd>
    <dt>これは埼京線ですか</dt>
    <dd>そうです、山手線です</dd>
</dl>

CSS
.faq dt::before {
    content: "Q:" ;
}
.faq dd::before {
    content: "A:" ;
}

質問文のマークアップ例

デモを見る

他にも実際に考えられるパターンとしては質問文が見出しで回答が内容、といった構成も見られると思いますし、それでも問題ないと思います。

終わりに

いかがだったでしょうか。ここまで難しく考えなくても別にコーディングは出来るんですけど…でもマークアップするかを迷う時ってありますよね。そういう時、この場合はこう、この場合はこう、というような見本としてこの記事が成立すればいいなと思っています！★

好評だったら続けていきたいですね！

追記

後で気付いたんですが、この記事で言いたいのは文書構造的に正しいマークアップを出来るかって話だったので言葉の表現なんかを変更しました。セマンティックを語るにはまだまだ知識不足ですｗ

ウェブクリ８.jp