見出し(タイトル)には様々なデザインがあるかと思いますが、その中でも左右に線があるデザインは結構多いです。
今回は見出し(タイトル)の左右に線を入れる方法を紹介いたします。
タイトル(見出し)の文字の左右に線を入れる方法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;で横並びにする方法です。
この方法だと、左右の線の色を変えたり、左右それぞれの線を角丸にしたりと変更ができます。
さいごに
いかがでしたでしょうか。
各装飾のやり方を覚えておくと、スムーズにデザインを再現できるようになりますので、ぜひ覚えておいてください。
