ホームページを作成する上での質問で、よく「1ピクセルの線を引きたいんだけど」というものがあります。
スタイルシートを使えば、高さ(太さ)1ピクセルの線を引くことは非常に簡単です。 しかし、指定の方法が分からずに困ってしまう方も多いようですね。

今回は、太さ1ピクセルの線など、自由な幅の線を引く方法をご紹介致しましょう。

高さ1ピクセル(1px)の線を引くには?

初心者の方々がよく考える解決策として、「ボックスの高さを1ピクセルにしようとする」というものがあります。
例えば、div要素(<div>~</div>)で作るボックスの高さを1ピクセルにして、そのボックスに背景色を指定することで、「1ピクセルの線」を描こう、と考えてしまうわけです。

この方法では、残念ながらうまくいかない場合があります(※1)。 そもそも、「デザインはスタイルシートで行いましょう」という、HTMLとスタイルシートの思想的にも誤っている感じ(※2)がします。

※1:div要素に対して heightプロパティに「1px」を指定したスタイルを適用させても、高さが1ピクセルにならない場合があります。
※2:デザインである「線」を引くためだけに、HTML中に「ダミーのdiv要素」を記述することになるため。(ただ、実際にはそうそうシンプルにはいかず、ダミーの要素は様々な場面でよく使われるわけですが…。)

では、どうすれば良いのでしょうか?

枠線を使う

1ピクセルの線を引きたい場合は、枠線を描く方法を応用するのがスマートでしょう。

スタイルシートでは、ボックス(※)に枠線を引くことができます。 枠線とは、ボックスの周囲を囲む線のことですが、線のデザインは、上下左右で別々に指定することができます。 これを使えば、簡単に1ピクセルの線を引くことができます。縦線でも横線でも。

※ここでの「ボックス」とは、p要素で作る「段落」や、h1要素で作る「見出し」、ul要素で作る「リスト」や、img要素で指定する「画像」などを指します。

枠線を使って横線を描くイメージ

1ピクセルの線を引く例

例えば、横線を引きたい箇所の直前にある段落に対して、「下側の枠線だけを描画」させれば、1ピクセルの横線を手軽に引けます。

スタイルシート:
<style="text/css">
   p.line { border-bottom: 1px solid blue; }
</style>
HTML:
<p class="line">
   この段落の下部に1ピクセルの線が...
</p>

border-bottomプロパティを使えば、ボックスの下側の枠線だけを描くことができます。これで、段落の下側に1ピクセルの線が引けます。以下に、見え方の例を示します。
※段落の上に引きたければ、border-topプロパティを使用します。

この段落の下部に1ピクセルの線が引かれているはずです。

線と文字を離すには?

上記の例では、段落の文字と横線との距離が非常に近いですね。
もう少し距離を取りたい場合はどうすれば良いでしょうか?
これもスタイルシートで簡単に解決します。

文字と線を離す解決策は次のページで! →