Web制作 CSS

【CSS】見出しなど文字の左右に横線を引く方法【4種類のサンプルで解説】

見出しの左右に横線付けたいけどどうすればいいの?

見出しの装飾には色んな種類がありますが、左右に横線を付けるタイプは非常によくあります。

今回は見出しの左右に横線を付ける4つの方法を解説します。

今だけ!5大無料特典あり🎁

コーディングの時給アップにはこちら!


CSSで見出しや文字などテキストの左右に横線を入れる4つの方法

今回解説する方法は以下の4つになります。

  1. 左右に指定した長さの横線
  2. 左右に両端を丸くした横線
  3. 左右いっぱいに伸びた横線
  4. 左右にグラデーションの横線

HTMLは共通でこちらになります。

<h2 class="heading">文字が入ります</h2>

それでは1つずつ解説していきます。

 

左右に指定した長さの横線

こちらがサンプルになります。

See the Pen
Untitled
by junpei (@junpei-sugiyama)
on CodePen.

左右の線は指定しているので、文字の長さが変わっても変わりません。

CSSはこちらです。

/* 左右に横線 */
.heading {
  align-items: center; /* 横線を上下中央 */
  display: flex; /* 文字と横線を横並び */
  justify-content: center; /* 文字を中央寄せ */
}
.heading::before,
.heading::after {
  background-color: #1e90ff; /* 横線の色 */
  content: "";
  height: 5px; /* 横線の高さ */
  width: 60px; /* 横線の長さ */
}
.heading::before {
  margin-right: 15px; /* 文字との余白 */
}
.heading::after {
  margin-left: 15px; /* 文字との余白 */
}

解説は全てコメントアウトで記入していますが、pxで書いている箇所で横線の高さ・幅・文字との余白を調整可能です。

 

左右に両端を丸くした横線

今度は先ほどの横線の両端を丸くしてみます。

See the Pen
左右に指定した長さの横線(両端を丸くする)
by junpei (@junpei-sugiyama)
on CodePen.

先ほどとの違いはborder-radiusだけです(あとは丸みが分かりやすいように高さを倍にしてあります)

/* 左右に横線(両端を丸く) */
.heading {
  align-items: center; /* 横線を上下中央 */
  display: flex; /* 文字と横線を横並び */
  justify-content: center; /* 文字を中央寄せ */
}
.heading::before,
.heading::after {
  background-color: #1e90ff; /* 横線の色 */
  border-radius: 5px; /* 横線の両端を丸く */
  content: "";
  height: 10px; /* 横線の高さ */
  width: 60px; /* 横線の長さ */
}
.heading::before {
  margin-right: 15px; /* 文字との余白 */
}
.heading::after {
  margin-left: 15px; /* 文字との余白 */
}

 

左右いっぱいに伸びた横線

先ほどまでの横線は指定した長さでしたが、今度は左右いっぱいに伸びた横線です。

画面幅いっぱいだと画面外に飛び出ているか判断しにくいので.containerというclassのdivタグで囲って、divタグ内で左右いっぱいにしてみます。

See the Pen
左右いっぱいに伸びた横線
by junpei (@junpei-sugiyama)
on CodePen.

今回は以下のような仕様です。

  • 文字数と関係なく左右いっぱいの横線
  • 画面幅が狭くなれば横線も合わせて短くなる

CodePen左上のHTML・CSSをクリックすると画面幅が狭くなるので、それで横線も自然に狭くなるのが分かります。

CSSはこちらです。

/* 左右いっぱいに伸びた横線 */
.heading {
  align-items: center; /* 横線を上下中央 */
  display: flex; /* 文字と横線を横並び */
}
.heading::before,
.heading::after {
  background-color: #1e90ff; /* 横線の色 */
  border-radius: 5px; /* 横線の両端を丸く */
  content: "";
  flex-grow: 1; /* 横幅いっぱい */
  height: 5px; /* 横線の高さ */
}
.heading::before {
  margin-right: 15px; /* 文字との余白 */
}
.heading::after {
  margin-left: 15px; /* 文字との余白 */
}

ほとんど先ほどまでと同じですが、大きく違うのはflex-grow: 1;です。

これが左右の伸び方の比率 (フレックス伸長係数)を設定するプロパティで、これを1にすることで左右いっぱいにしています。

またflex-grow: 1;を設定することで、先ほどまであったjustify-content: center;で中央寄せする必要はなくなります。

 

左右にグラデーションの横線

最後に左右にグラデーションの横線を付けてみます。

ベースは『左右に両端を丸くした横線』です。

See the Pen
左右にグラデーションの横線
by junpei (@junpei-sugiyama)
on CodePen.

ベースとなる『左右に両端を丸くした横線』との違いはbackground: linear-gradient();でグラデーションを指定しているところです。

/* 左右にグラーデションの横線 */
.heading {
  align-items: center; /* 横線を上下中央 */
  display: flex; /* 文字と横線を横並び */
  justify-content: center; /* 文字を中央寄せ */
}
.heading::before,
.heading::after {
  border-radius: 5px; /* 横線の両端を丸く */
  content: "";
  height: 5px; /* 横線の高さ */
  width: 60px; /* 横線の長さ */
}
.heading::before {
  background: linear-gradient(to right, green, yellow); /* 左のグラデーション */
  margin-right: 15px; /* 文字との余白 */
}
.heading::after {
  background: linear-gradient(to right, yellow, green); /* 右のグラデーション */
  margin-left: 15px; /* 文字との余白 */
}

今回のグラデーションは線形グラデーションのlinear-gradientを使いましたが、円形グラデーションのradial-gradientを使うことも出来ます。

グラデーションについては以下の記事を参照下さい。

参考記事
【コピペOK!】CSSグラデーションの作り方まとめ
【コピペOK!】CSSグラデーションの作り方まとめ

続きを見る

以上になります。

あわせて読む
【CSS】見出しなど文字の左右に斜めの線を引く方法【サンプル付きで解説】
【CSS】見出しなど文字の左右に斜めの線を引く方法【サンプル付きで解説】

続きを見る

あわせて読む
【CSS】見出しなど文字の幅より短い下線を引く方法【サンプル付きで解説】
【CSS】見出しなど文字の幅より短い下線を引く方法【サンプル付きで解説】

続きを見る

 

コーディングの時給と作業効率を上げる!
2年間の実務で実際に使ったコードをまとめた『コーディング&WordPressメモまとめ集』をBrainで公開しています。
  • コピペで使えるWordPressの各テンプレート
  • 実務でよく使う見出し一覧
  • 実務でよく使うテキストのhoverアニメーション
  • 実務でよく使うボタン内の矢印9種類
  • Contact Form 7の色々・・・
などなど、他にもコピペで使えるコードがたくさん載せてあるので、時短=時給アップに繋がります。
さらに『コードのまとめ方が参考になった』というレビューも多数頂いているので、これを元に自分なりの"メモまとめ集"を作るという使い方も出来ます。
レビューは390件以上あるので、気になる方は以下のボタンからチェックしてみて下さい👇

今だけ!5大無料特典あり🎁

販売ページとレビューを見てみる


ブログランキング・にほんブログ村へ
  • この記事を書いた人

じゅんぺい

タイ・バンコク在住のWeb制作フリーランス兼ブロガー▶︎37歳からWeb制作を開始▶︎コーディングとWordPressのオリジナルテーマ制作でこれまで80件以上納品▶︎Web制作中心の当ブログは月間最高8.4万PV▶︎Twitterのフォロワーは6100人▶︎コーディングとWordPressのコンテンツを販売し、3日で500部突破&250万円&人気1位獲得 → 累計700部&420万円突破

-Web制作, CSS
-