本記事では、CSSで文字の左右に線を付ける方法について解説しています。見出しなどに使うとおしゃれなページに仕上がります。
ITエンジニア特化の転職サイト!
自社内開発求人に強い【クラウドリンク】
HTML/CSSの学習におすすめ参考書
1冊ですべて身につくHTML&CSSとWebデザイン入門講座
文字の左右に線を付ける
完成形は以下のとおりです。
HTML
<p class="sample">サンプル</p>
左右に線を付けたいタグを用意します。今回はクラスsampleが付与されているpタグを用意しました。
CSS
/* ↓① */
.sample{
display:flex;
align-items: center;
justify-content: center;
}
/* ↓② */
.sample::before,
.sample::after{
content: "";
flex-grow:1;
border-top: 1px solid black;
}
/* ↓③ */
.sample:before {
margin-right: 1rem;
}
.sample:after {
margin-left: 1rem;
}
- .sampleに適用している「display:flex」「align-items:center」「justify-content: center」は、上下左右を中央揃えします。
- .sampleの擬似要素(::before,::after)で、線を作成します。flex-growで伸縮率を1対1にすることで、2つの線の長さを均等にします。
- 文字とピッタリに線が入っているので余白を設けます。
線の長さを自分で決める
先ほど紹介したコードは線の長さが幅いっぱいでしたが、線の長さを自分で決めたい場合は線を表示している擬似要素に幅を指定し、flex-glowを削除します。
.sample::before,
.sample::after{
content: "";
width:100px;
border-top: 1px solid black;
}