【HTML/CSS】テキストの左右にボーダーを設定する方法

こんにちは、Ryohei（@ityryohei）です！

CSSで見出しや段落テキストの左右にボーダーを設定する方法のご紹介です。

見出しやタイトルテキストの左右にボーダーが表示されているデザインは、サイトを閲覧しているとよく見かけるデザインになります。実際には、下記のような表示となります。

See the Pen
Border Left Right Text 1 | CSS by ryoy (@intotheprogram)
on CodePen.

本記事の内容

• テキストの左右に単色のボーダーを設定する

では、解説していきます。

テキストの左右に単色のボーダーを設定する

テキストの左右に単色のボーダーを設定する方法になります。HTMLはシンプルに必要なタグのみを記述します。

HTML

<h1>Border</h1>

CSS

続いてCSSを記述します。

h1 {
  display: flex;
  align-items: center;
}

h1:before,
h1:after {
  content: "";
  width: 100%;
  height: 2px;
  background: #000;
  flex-grow: 1;
}

h1:before{
  margin: 0 20px 0 0;
}

h1:after{
  margin: 0 0 0 20px;
}

各行について詳しく解説していきます。

CSS（1～4行目）

h1 {
  display: flex;
  align-items: center;
}

h1をflexコンテナに指定して、内部のflexアイテムを横並びにします。align-itemsで縦方向の位置を中央に揃えています。

CSS（6～12行目）

h1:before,
h1:after {
  content: "";
  width: 100%;
  height: 2px;
  background: #000;
}

h1の疑似要素にボーダーのスタイルを設定しています。ボーダーの幅(高さ)は「height: 2px」の値を増やすことで太くなります。

CSS（14～16行目）

h1:before{
  margin: 0 20px 0 0;
}

表示されているテキストから見て、左側のボーダーとテキストのマージンを指定しています。

CSS（18～20行目）

h1:before{
  margin: 0 20px 0 0;
}

表示されているテキストから見て、右側のボーダーとテキストのマージンを指定しています。

以上、見出しテキストの左右にボーダーを設定するのご紹介でした！

この記事を書いた人

Ryohei

Webエンジニア / ブロガー

福岡のWeb制作会社に務めるWebエンジニアです。エンジニア歴は10年程で、好きな言語はPHPとJavaScriptです。本サイトは私がインプットしたWebに関する知識を整理し、共有することを目的に2015年から運営しています。Webに関するご相談があれば気軽にお問い合わせください。

お問い合わせはこちら

Follow @itpryohei