タイトル(見出し)の文字の左右に線を入れる方法【CSS】

最終更新日:

公開日:2024-07-19

記事内に広告が含まれています。
タイトル(見出し)の文字の左右に線を入れる方法【CSS】

見出し(タイトル)には様々なデザインがあるかと思いますが、その中でも左右に線があるデザインは結構多いです。
今回は見出し(タイトル)の左右に線を入れる方法を紹介いたします。

タイトル(見出し)の文字の左右に線を入れる方法1

1つ目の方法は、疑似要素を見出しの後ろに横幅100%で配置する方法です。
そのままでは見出しに被ってしまうので見出し部分だけspanで囲って背景色を設定しています。

<p><span>見出し(タイトル)</span></p>
p {
	text-align: center;
	position: relative;
}
p span {
	display: inline-block;
	padding: 0 20px; /* 見出しの左右の余白 */
	background-color: #fff;
    position: relative;
    z-index: 1;
}
/* :after または :before */
p:after {
	content: "";
	width: 100%; /* 横幅いっぱい */
	height: 1px; /* 線の高さ */
	display: block;
	background-color: #000;
	position: absolute;
	top: 50%;
	left: 0;
    transform: translateY(-50%); /* 縦位置中央 */
}

見出し(タイトル)

要素の重なり順や、見出し部分に背景色を指定するので、複雑な背景の場合は使用出来ない場合があります。
その場合は次の方法をお試しください。

タイトル(見出し)の文字の左右に線を入れる方法2

<p>見出し(タイトル)</p>
p {
    display: flex; /* 見出しと線を横並びにする */
	align-items: center; /* 線の縦位置中央 */
}
p:before,
p:after {
    content: "";
    height: 1px; /* 線の高さ */
    flex-grow: 1; /* 横幅いっぱい */
    background-color: #000;
}
p:before {
    margin-right: 20px; /* 文字との余白 */
}
p:after {
    margin-left: 20px; /* 文字との余白 */
}

見出し(タイトル)

上記はdisplay:flex;で横並びにする方法です。
この方法だと、左右の線の色を変えたり、左右それぞれの線を角丸にしたりと変更ができます。

さいごに

いかがでしたでしょうか。
各装飾のやり方を覚えておくと、スムーズにデザインを再現できるようになりますので、ぜひ覚えておいてください。

おすすめ記事

当ブログ運営者 ヒデ

北海道札幌市在住のフリーランスでWeb制作を行っているヒデです。Webコーディング(HTML・CSS・JSなど)やWordpressのカスタマイズ等のテクニック、困った時に確認できる分かりやすい解説を目標にして情報を発信していければと思っています。

当サイトに関するご意見・ご感想・ご要望または仕事のご依頼は以下のフォームよりお願い致します。

お問い合わせ お仕事のご依頼
PAGE TOP