CSSレイアウト[TIPS]
文字間・単語間の空き
印刷物の場合に、表組みで「日時」「開催地」などの語句を組む時、 字面の左右を合わせるために全角スペースを挿入する事があるが、 HTMLでこれをやると、音声ブラウザで言葉が正しく読み上げられなくなる。 また、単語間のスペースは、テキスト検索の場合にも不都合が生じる。
文字間や単語間にスペースを入れたい時はCSSを使うこと。
文字間を空ける
文字間を空けるには「letter-spacing:」プロパティを使用する。この↓表組みの左セルは、CSSで文字間を調整している。
| 会場 | 1丁目公園 |
| 開催期間 | 毎月第３日曜日 |
| 料金 | 大人1,000円 子供500円 |
| 駐車場 | なし（最寄りに公共駐車場あり 詳しくはこちら→） |
| お問い合わせ | 開催事務局 TEL:0120-000000 |
文字間の指定
.letter2 {
letter-spacing:2em;
}
.letter05 {
letter-spacing:0.5em;
}
.letter2 {
letter-spacing:2em;
}
.letter05 {
letter-spacing:0.5em;
}
CSSは上右のとおり。
（この表組みのCSSを全部確認したい場合→CSS_Layout/tips/css/spacing.css）
<table width="410" border="0" cellpadding="0" cellspacing="0">
<tr><td class="letter2">会場</td><td>1丁目公園</td>
</tr>
<tr><td class="letternone">開催期間</td><td>毎月第３日曜日</td>
</tr>
<tr><td class="letter2">料金</td><td>大人1,000円 子供500円</td>
</tr>
<tr><td class="letter05">駐車場</td><td>なし（最寄りに公共駐車場あり 詳しくはこちら→）</td>
</tr>
<tr><td class="letternone">開催事務局 TEL:0120-000000</td>
</tr>
</table>
<tr><td class="letter2">会場</td><td>1丁目公園</td>
</tr>
<tr><td class="letternone">開催期間</td><td>毎月第３日曜日</td>
</tr>
<tr><td class="letter2">料金</td><td>大人1,000円 子供500円</td>
</tr>
<tr><td class="letter05">駐車場</td><td>なし（最寄りに公共駐車場あり 詳しくはこちら→）</td>
</tr>
<tr><td class="letternone">開催事務局 TEL:0120-000000</td>
</tr>
</table>
単語間を空ける
単語間を空けるには「word-spacing:」プロパティを使う。下記は、3種類の単語間指定をしたもの。
word word word word word word ←word-spacing:0.5em
word word word word word word ←word-spacing:1em
word word word word word word ←word-spacing:2em
単語 単語 単語 単語 単語 単語 ←word-spacing:0.5em
単語 単語 単語 単語 単語 単語 ←word-spacing:1em
単語 単語 単語 単語 単語 単語 ←word-spacing:2em
word word word word word word ←word-spacing:1em
word word word word word word ←word-spacing:2em
単語 単語 単語 単語 単語 単語 ←word-spacing:0.5em
単語 単語 単語 単語 単語 単語 ←word-spacing:1em
単語 単語 単語 単語 単語 単語 ←word-spacing:2em
「単語」の区切りには「半角スペース」を入れておき。その後CSSのword-spacingで空きを確定させる。
ちなみに「 」で区切ると、単語としてでは無く、1行として認識される。そのためウィンドウを縮小しても単語間で改行されない行になる。また「 」を認識しないブラウザもあるので、無闇に使わないほうがよい。