ホームへ

【html/CSS】横線を引く方法

「divに横線を引きたいんだけどどうやるの?」

「文章中に区切り線を引きたい!」

「文字に下線を引きたい!」

横線を引く方法をケース別に紹介します。

要素の上か下に横線を引く場合

【CSS】borderを使う

要素の下に線を引くにはborder-bottom、上に線を引くにはborder-topを指定しましょう。

テキスト
<style>
.example{
    /*コレ*/border-bottom: 1px solid #333;
    padding: 10px;
    background: #dbeff5;
}
</style>
<div class="example">テキスト</div>

borderには線の太さ、種類、色を指定します。

文字と線を離すにはpaddingを指定します。

単に横線を引く場合

【html】hrタグを使う

hrタグはまさに横線を引くためのhtmlタグです。

hrタグをそのまま使うこともできますが、標準では上下にmarginの指定があり、borderが上にも下にも引かれていて合計2pxの線幅になってしまっています。

marginとborderを下記のように調整することをおススメします。


<style>
hr{
    border: none;
    border-bottom: 1px solid #333;
    margin: 0;
}
</style>
<hr>

border: noneでいったんすべての線を消します。

それからborder-bottom(またはborder-top)で横線を引きます。

文字の下に線を引く場合

【html】uタグを使う

uタグは下線を引くhtmlタグです。uで囲った部分だけ下線になります。

下線を引きたいテキスト引かないテキスト
<div><u>下線を引きたいテキスト</u>引かないテキスト</div>

【CSS】text-decoration:underlineを使う

CSS text-decoration:underlineを指定すると下線を引けます。

上記uタグと同じ効果です。

下線を引きたいテキスト引かないテキスト
<style>
.example2{
    text-decoration: underline;
}
</style>
<div><span class="example2">下線を引きたいテキスト</span>引かないテキスト</div>

要素の幅より小さい線を引く場合

【CSS】beforeやafterを使う

疑似要素であるbeforeやafterをhr代わりに使うこともできます。

テキスト
<style>
.example3{
    padding: 20px;
    background: #dbeff5;
    position: relative;
}
.example3::before{
    content: "";
    display: block;
    width: 200px;
    height: 0;
    border-bottom: 1px solid #333;
    position: absolute;
    bottom: 15px;
    left: 10px;
}
</style>
<div class="example3">テキスト</div>

beforeやafterは疑似要素と言って各htmlタグにつき一つずつ使うことができます。

本来はテキストの前後に文字を追加するための要素ですが、これをdivのように使うことができます。

display: blockでブロック要素にしてwidthで幅を指定します。heightは0です。

border-bottomで横線を指定します。

position: absoluteで任意の位置に調整します。

【まとめ】横線を引く方法

要素の上か下に横線を引く場合

  • 要素の下に線を引くにはborder-bottom
  • 上に線を引くにはborder-top

単に横線を引く場合

  • html hrタグ

文字の下に線を引く場合

  • html uタグ
  • CSS text-decoration:underline

要素の幅より小さい線を引く場合

  • beforeかafterを使う

以上、横線を引く方法でした。

マンガで読める関連記事