制作者の活動(PR)。

アイドル女優・堀北真希ちゃんはうさぎの耳が似合うと思って創造した女子大生キャラクタ
主な作品

オリジナルキャラクタを用いた作品の一例

会話のマークアップ。

HTMLに於いて、会話はどのようにマークアップすれば良いかを考えて見ました。

会話のマークアップ・目次。

具体例。

以下、実際にマークアップされる会話例として制作者が描いた姉妹が携帯電話で母と通話している場面を描いたイラストの中に書いた通話内容を挙げておきます。

「あ、お母さん？　由子です。今着いたところー。」
「お姉ちゃーん、由香も」
「あ、今由香に代わるから」

会話ブロックは<ol>要素とすべき。

一連の会話はブロックと見る事が出来ます。

つまり、ブロックレヴェル要素となります。

では、どのブロックレヴェル要素が良いでしょうか。

各台詞をそれぞれ段落としても良いのですが、纏まった台詞の集まりなら、リスト形式が最適でしょう。

つまり、

のいずれかとするのが順当でしょう。

但し、台詞の流れには順序があるので、その事を考えると<ol>要素を置いて他に無いと考えられます。

以上の事を考えると、以下のようなマークアップが考えられます。

<ol class="talk">
    <li>「あ、お母さん？　由子です。今着いたところー」</li>
    <li>「お姉ちゃーん、由香も」</li>
    <li>「あ、今由香に代わるから」</li>
    </ol>

尚、<ol>要素は多くのウェブブラウザのデフォルトスタイルでは行頭に通し番号が付きますが、これは現行のブラウザならCSSで簡単に消す事が出来ますので、邪魔にはならないでしょう。

別解・<dl>要素で話者と台詞を列挙する。

今回の例では話者の名前は付けておりませんが、シナリオみたいに話者と台詞を併記したい場合もあるかも知れません。

そのような場合でも<ol>要素とする事は可能ですが、マークアップの観点からすれば会話全体を<dl>要素とし、話者を<dt>要素、台詞を<dd>要素とする事が出来ます。

但し、<dl>要素には順序の概念が無いので、その意味では<ol>要素の方が良いような気もします。

ともあれ、<dl>要素としてマークアップするのであれば、以下のようなマークアップが考えられます。

<dl class="talk ordered">
    <dt>由子</dt>
    <dd>「あ、お母さん？　由子です。今着いたところー」</dd>

    <dt>由香</dt>
    <dd>「お姉ちゃーん、由香も」</dd>

    <dt>由子</dt>
    <dd>「あ、今由香に代わるから」</dd>
    </dl>

尚、<dl>要素のクラス名に orderd を付け足しているのは、通常<dl>要素には順序という概念が無いためです(気休めでしかありませんが)。

蛇足・台詞は、常に<q>要素として良いのか？

台詞でも誰かが実際に言った言葉であるのなら、会話からの引用と言う事で、<q>要素でマークアップしても良さそうです。

ただ、今回の場合、架空の話しなので引用元はありません。

従って、<q>要素としてマークアップする事は馴染まないと判断し、生テキストに引用符を付けております。

しらぎくのウェブサイト作成入門サイトマップ

ページ外へのご案内。

marguerite.site@gmail.com