【html/CSS】横線を引く方法【区切り線,divや文字の下線】

「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を使う

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