本記事では、CSSで文字の左右に線を付ける方法について解説しています。見出しなどに使うとおしゃれなページに仕上がります。
HTML/CSSの学習におすすめ書籍
1冊ですべて身につくHTML&CSSとWebデザイン入門講座
メリット
- HTMLとCSSの基本が体系的に学べる
- Webデザインの基本が学べる
- 1つのWebサイトを作りながら学べる
ポチップ
先輩くん
Amazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ!
初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね!
全プログラマー必見!
変数名/関数名にもう悩まない!
変数名/関数名にもう悩まない!
リーダブルコード
メリット
- 美しいコードが書けるが自然と書けるようになる
- 他の開発者が理解しやすいコードになる
著:Dustin Boswell, 著:Trevor Foucher, 解説:須藤 功平, 翻訳:角 征典
¥2,640 (2023/07/23 02:48時点 | Amazon調べ)
目次
文字の左右に線を付ける
完成形は以下のとおりです。
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;
}