スタイルシートの技

文字間隔を好みに合わせて調節する

文字の間隔を空けたりする事もスタイルシートなら可能です。 文字を書いて、その間を全角スペースで埋めるなんて事はしないようにしましょう！ 文字数が少なく、ちょっとお洒落なページを作成したい時などには必須のテクニックです。ぜひ覚えましょう。

<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
   <meta http-equiv="content-style-type" content="text/css">
   <title></title>
   <style type="text/css">
      dt           { margin-top: 0.5em; font-weight: bold; }
      *.charspace1 { letter-spacing: 0.25em; }
      *.charspace2 { letter-spacing: 0.5em; }
      *.charspace3 { letter-spacing: 1em; }
   </style>
</head>
<body>
   <h1>選曲リスト</h1>
   <dl>
      <dt>禁区</dt>
         <dd class="charspace1">私からサヨナラしなければ...</dd>
      <dt>飾りじゃないのよ涙は</dt>
         <dd class="charspace2">私は泣いた事がない　灯の消えた街角で...</dd>
      <dt>DESIRE〜情熱〜</dt>
         <dd class="charspace3">Get up×4, Burning love...</dd>
   </dl>
</body>
</html>
選曲リスト
禁区
私からサヨナラしなければ...
飾りじゃないのよ涙は
私は泣いた事がない　灯の消えた街角で...
DESIRE〜情熱〜
Get up×4, Burning love...

見やすくするためにdt要素は太字（font-weight: bold;）指定した上で、上マージンを0.5文字分としています。 それぞれ上の俳句から文字間隔が0.25文字分、0.5文字分、1文字分の間隔が空いている事が確認できましたか？ ウェブサイトなどのタイトルが英語の場合などは微妙に間を空けてやるとしっくりしたデザインになります。 ぜひ試してみて下さい。

top