授業記録を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属性を指定すると、全角2文字なら期待した表示になります。
ただ、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! です。(ただし、話者名は全角2文字まで)
DL要素の応用として、例えば対話のマーク付けがある。 DT要素で話者名を示し、DD要素に話の内容を入れておく。
<ol type="A"> <li value="20">○○○○○○○○○○○○○○○○○○○○○○ ○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○ ○○○○○○○○○○○○○○○○○○ <li value="19">○○○○○○○○○○○○○○○○○○○○○○ ○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○ ○○○○○○○○○○○○○ </ol>むりやり、「T」と「S」を表示させています。
<div class="cli2">教師 ○○○○○○○○○○○○○○○○○○ ○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○ ○○○○○○○○○○○○○○○○○○○○○○○○○○○○○</div> <div class="cli1">T ○○○○○○○○○○○○○○○○○○○ ○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○ ○○○○○○○○○○○○○○○○○○○○○○○○○○○○</div> <div class="cli1">S ○○○○○○○○○○○○○○○○○○○ ○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○ ○○○○○○○○○○○○○○○○○○○○○○○○○○○○</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は、全角1文字用
cli2は、全角2文字用
text-indent:-2.9emで、1行目を2.9文字分マイナスインデント(左に飛び出させる)すると同時に、margin-left:2.9emで、1行目を含んだ全体の左側に2.9文字分の余白を作る
ということをやっています。
大阪教育大学 国語教育講座 野浪正隆研究室 ↑ページTop ←戻る