今回は、「CSSで横線一杯に線を引いたタイトルの実装方法」について紹介します。

タイトル要素だけ親要素の幅を超えて線を引きたい時に便利な方法なので、是非参考にしてみてください。

［CSS］横線一杯に線を引いたタイトルの実装方法

完成形はこちらです。

See the Pen
by ゆーじろー (@yujiron)
on CodePen.

それでは早速コードを見ていきましょう！

HTML

<div class="title">
    <h2>タイトルが入ります。</h2>
</div>

やり方としては、まず親要素titleを用意します。

次に、タイトルタグであるh2を用意しましょう。

CSS

.title {
    border-top: 1px solid orange;
    border-bottom: 1px solid orange;
}
.title h2 {
    max-width: 1000px;
    margin: 0 auto;
    padding: 30px;
    font-size: 16px;
}

親要素titleに対して上下にborderを指定します。

そしてタイトルタグであるh2に対して横幅や上下左右の余白を指定します。

そうすることで、線横一杯になりつつ、タイトルに余白を持たせることができます。

まとめ

以上が、「CSSで横線一杯に線を引いたタイトルの実装方法」でした。