スタイルシートの技

文字列に対して二重線や点線を引いたりする

一番基本となるものです。ある文字列に対して下線を引きます。 下線の種類は点線を引きたい場合もあれば、二重線を引きたい場合もあると思いますが、 文字列に下線を引くには、以下のスタイルシートが有効です。

  • text-decoration属性
  • border属性

前者はテキストの装飾専用の属性です。 属性値としては、underline(下線)・line-through（取消線）・overline（上線）・underline overline（上下線）などがあり、 HTML文書でstrong要素で囲まれた文字列に対して下線を引くには、

strong { text-decoration: underline; }

とすれば良い事が分かります。色々と試してみましょう！

underline - 下線
スタイルシートの技
overline - 上線
スタイルシートの技
underline overline - 上下線
スタイルシートの技
line-through - 取消線
スタイルシートの技
blink※1 - 点滅
スタイルシートの技
※1: Netscape Navigator/Firefox/Operaで動作

text-decoration属性は簡単なものしか用意されていません。二重線を引きたい場合にはborder属性に頼る必要があります。 border属性は一般的にはコンテンツを四角で囲ったりするために作られたものですが、これを応用すると色々おもしろい事ができます。 border属性にはそれぞれ囲う長方形のタイプ、幅、色を指定できます。例えば、以下のようなスタイルシートを適応したとしましょう。

<p style="border: solid 2px #ff0000;">スタイルシートの技</p>
スタイルシートの技

「solid」というのが通常の線を表している事になります。この場合は「赤い線を幅2ピクセルで描画」という事になります。 英語でグラフなどを良く書く人はお馴染みですが、「solid」以外には「dotted」（点線）・「dashed」（粗線）・「double」（二重線）などが用意されています。 更にこのborder属性なのですが、実は長方形の四つの個々の辺に対してラインを設定する事も可能です。 その場合には、border-left・border-right・border-bottom・border-topという属性が用意されているのでぜひ積極的に利用してみましょう。 結果的に下線を引くようなスタイルシートは以下のようになります。

<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">
     *.underline  { border-bottom: solid  1px #ff0000; } //下線
      *.dotline    { border-bottom: dotted 1px #ff0000; } //点線
      *.doubleline { border-bottom: double 3px #ff0000; } //二重線
      *.rectangle  { border:solid 1px #ff0000; }          //四角で囲う
   </style>
</head>
<body>
   <h1>テキストの装飾について</h1>
   <p>テキストの装飾はborder属性でもできます。
   <span class="underline">下線</span>を始め、
   <span class="dotline">点線</span>、<span class="double">二重線</span>や、
   テキストを<span class="rectangle">長方形で囲ったり</span>する事もできます。</p>
</body>
</html>
テキストの装飾はborder属性でもできます。下線を始め、点線、 二重線や、長方形で囲ったりする事もできます。

「span」を初めて見た！という方はいらっしゃいますでしょうか… 「span」自体はスタイルシートを用いるために用意されている要素で、 その要素自体は特に意味を持ちません。同じようなものに「div」がありますが、 「span」はインライン要素であるのに対し、「div」はブロック要素で、必ず改行が入ります。 インライン要素とブロック要素の違いが分からない方は上記サンプルの「span」をすべて「div」に変えてみてください。 結果を比較して「そういう事かっ！！」と納得できるはずです。

いかがですか？border属性をうまく使いこなせれば色々とおもしろい事ができるようになります。 また、文字列を下線の間のスペースが気に入らないなぁ…と思った方もいらっしゃるかも知れません。 その場合には心配ご無用で、「padding-bottom」でうまくスペースを調節して下さい。

top