(HTML,CSS)高さ1ピクセルの線を引きたいよく「1ピクセルの線を引きたいんだけど」という質問を受けます。すれば引けるでしょうか?ボックスの高さを1ピクセルにしようと考えたのではうまくいきません。自由な太さの線を引く方法をご紹介致しましょう。文宏ホームページ作成ガイドホームページを作成する上での質問で、よく「1ピクセルの線を引きたいんだけど」というものがあります。スタイルシートを使えば、高さ(太さ)1ピクセルの線を引くことは非常に簡単です。指定の方法が分からずに困ってしまう方も多いようですね。今回は、太さ1ピクセルの線など、自由な幅の線を引く方法をご紹介致しましょう。高さ1ピクセル(1px)の線を引くには?初心者の方々がよく考える解決策として、「ボックスの高さを1ピクセルにしようとする」というものがあります。div要素(<div>~</div>)で作るボックスの高さを1ピクセルにして、そのボックスに背景色を指定することで、「1ピクセルの線」を描こう、と考えてしまうわけです。この方法では、残念ながらうまくいかない場合があります(※1)。そもそも、「デザインはスタイルシートで行いましょう」という、HTMLとスタイルシートの思想的にも誤っている感じ(※2)がします。heightプロパティに「1px」を指定したスタイルを適用させても、高さが1ピクセルにならない場合があります。※2:デザインである「線」を引くためだけに、HTML中に「ダミーのdiv要素」を記述することになるため。(ただ、実際にはそうそうシンプルにはいかず、ダミーの要素は様々な場面でよく使われるわけですが...。)では、どうすれば良いのでしょうか?枠線を使う1ピクセルの線を引きたい場合は、枠線を描く方法を応用するのがスマートでしょう。スタイルシートでは、ボックス(※)に枠線を引くことができます。枠線とは、ボックスの周囲を囲む線のことですが、線のデザインは、上下左右で別々に指定することができます。これを使えば、簡単に1ピクセルの線を引くことができます。※ここでの「ボックス」とは、p要素で作る「段落」や、h1要素で作る「見出し」、ul要素で作る「リスト」や、img要素で指定する「画像」などを指します。横線を引きたい箇所の直前にある段落に対して、「下側の枠線だけを描画」させれば、1ピクセルの横線を手軽に引けます。この段落の下部に1ピクセルの線が...</p>border-bottomプロパティを使えば、ボックスの下側の枠線だけを描くことができます。これで、段落の下側に1ピクセルの線が引けます。以下に、見え方の例を示します。※段落の上に引きたければ、border-topプロパティを使用します。この段落の下部に1ピクセルの線が引かれているはずです。線と文字を離すには?上記の例では、段落の文字と横線との距離が非常に近いですね。距離を取りたい場合はどうすれば良いでしょうか?これもスタイルシートで簡単に解決します。About公式SNS日々の生活や仕事を楽しむための情報を毎日お届けします。