HTML/CSS

【CSS】文字の左右に線を付ける方法

本記事では、CSSで文字の左右に線を付ける方法について解説しています。見出しなどに使うとおしゃれなページに仕上がります。

HTML/CSSの学習におすすめ参考書
1冊ですべて身につくHTML&CSSとWebデザイン入門講座

参考書が苦手な人はUdemyの動画がおすすめ
ちゃんと学ぶ、HTML+CSS&JavaScript入門講座

動画情報
作成者たにぐち まこと
学習時間9時間
受講者数43,706人
レビュー (9,232件)
動画の詳細はこちら

文字の左右に線を付ける

完成形は以下のとおりです。

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; 
}
  1. .sampleに適用している「display:flex」「align-items:center」「justify-content: center」は、上下左右を中央揃えします。
  2. .sampleの擬似要素(::before,::after)で、線を作成します。flex-growで伸縮率を1対1にすることで、2つの線の長さを均等にします。
  3. 文字とピッタリに線が入っているので余白を設けます。

線の長さを自分で決める

先ほど紹介したコードは線の長さが幅いっぱいでしたが、線の長さを自分で決めたい場合は線を表示している擬似要素に幅を指定し、flex-glowを削除します。

.sample::before,
.sample::after{
  content: "";
  width:100px;
  border-top: 1px solid black;
}

ブログランキング・にほんブログ村へ PVアクセスランキング にほんブログ村