授業記録をHTMLで書くとき、教師と生徒の発言内容の行頭を揃えるために、いくつかの方法があります。
| 教師 | （発言内容）○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○ |
|---|---|
| 生徒 | （発言内容）○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○ |
| 教師 | ○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○ |
| 生徒 | ○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○ |
<table> <tr><th nowrap>教師<td>（発言内容）○○○○○○○○○○○○○ ○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○ ○○○○○○○○○○○○○○○○○○○○○○○○○○ <tr><th>生徒<td>（発言内容）○○○○○○○○○○○○○ ○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○ ○○○○○○○○○○○○○○○○○○○○○○○○○○ <tr><th>教師<td>○○○○○○○○○○○○○ ○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○ ○○○○○○○○○○○○○○○○○○○○○○○○○○ <tr><th>生徒<td>○○○○○○○○○○○○○ ○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○ ○○○○○○○○○○○○○○○○○○○○○○○○○○ </table>発言者名と発言内容との間を少し空けるためだけなのに
<table cellspacing="10">とか <table cellpadding="10">とすると、セル内容の上下左右すべてが空いてしまいます。
<td style="padding-left:0.5em">とすべての td にスタイルを指定するのも、 なんだかなぁと思います。 そういうときは、スタイルシートで
<style>
tr{vertical-align:top}
td{padding-left:0.5em}
</style>
としておくと、発言者名と発言内容との間を少し空けることだけができます。
それに、すべての tr に
<tr valign=top>としないですみます。
<dl compact> <dt>教師<dd>○○○○○○○○○○○○○○○○○○○○○○ ○○○○○○○○○○○○○○○○○○○○○○○○○○○○○ ○○○○○○○○○○○○○○○○○○○ <dt>生徒<dd>○○○○○○○○○○○○○○○○○○○○○○ ○○○○○○○○○○○○○○○○○○○○○○○○○○○○○ ○○○○○○○○○○○○○○○○○○○ </dl>
dl に compact属性を指定すると、全角２文字なら期待した表示になります。
ただ、dl は定義リストとして使うのが正しいので、このような使い方はまずいと思います。（単なる「見出し付き箇条書き」だと考えるなら、最も適していると思いますが）
Another application of DL, for example, is for marking up dialogues, with each DT naming a speaker, and each DD containing his or her words.とあるそうで、dl compact で OK! です。（ただし、話者名は全角２文字まで）
DL要素の応用として、例えば対話のマーク付けがある。 DT要素で話者名を示し、DD要素に話の内容を入れておく。
<ol type="A"> <li value="20">○○○○○○○○○○○○○○○○○○○○○○ ○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○ ○○○○○○○○○○○○○○○○○○ <li value="19">○○○○○○○○○○○○○○○○○○○○○○ ○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○ ○○○○○○○○○○○○○ </ol>むりやり、「Ｔ」と「Ｓ」を表示させています。
<div class="cli2">教師 ○○○○○○○○○○○○○○○○○○ ○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○ ○○○○○○○○○○○○○○○○○○○○○○○○○○○○○</div> <div class="cli1">Ｔ ○○○○○○○○○○○○○○○○○○○ ○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○ ○○○○○○○○○○○○○○○○○○○○○○○○○○○○</div> <div class="cli1">Ｓ ○○○○○○○○○○○○○○○○○○○ ○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○ ○○○○○○○○○○○○○○○○○○○○○○○○○○○○</div> </div>スタイルシートで
<style>
.cli2 {text-indent:-2.9em;margin-left:2.9em;}
.cli1 {text-indent:-1.5em;margin-left:1.5em;}
</style>
を設定しておいて、divタグ内で class="cli1" と属性をつけるだけです。
cli1は、全角１文字用
cli2は、全角２文字用
text-indent:-2.9emで、1行目を2.9文字分マイナスインデント（左に飛び出させる）すると同時に、margin-left:2.9emで、1行目を含んだ全体の左側に2.9文字分の余白を作る
ということをやっています。
大阪教育大学 国語教育講座 野浪正隆研究室 ↑ページTop ←戻る