水平線と文字を中央に配置する5つの方法 (HTML/CSS)

水平線と文字を中央に配置するCSSテクニック

擬似要素とborder-bottomプロパティ

この方法は、beforeまたはafter擬似要素を使用して、水平線を表現します。

<p>見出し</p>

p {
  text-align: center;
}

p::before {
  content: "";
  display: block;
  width: 50px;
  height: 1px;
  border-bottom: 1px solid #ccc;
  margin: 0 auto;
}

この例では、p要素に対してtext-align: center;を指定することで文字を中央に配置し、::before擬似要素を使用して水平線を表現しています。

利点:

• シンプルで軽量な方法
• すべてのブラウザでサポートされている

• 線の長さを調整するのが難しい
• デザインの自由度が低い

border-bottomプロパティとmarginプロパティ

この方法は、border-bottomプロパティとmarginプロパティを使用して、水平線と文字を中央に配置します。

<p>見出し</p>

p {
  text-align: center;
  border-bottom: 1px solid #ccc;
  margin: 0 auto;
  padding: 10px 0;
}

この例では、p要素に対してborder-bottomプロパティとmargin: 0 auto;を指定することで、水平線を中央に配置しています。

flexboxレイアウト

この方法は、flexboxレイアウトを使用して、水平線と文字を中央に配置します。

<div class="container">
  <h1>見出し</h1>
  <hr />
</div>

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

hr {
  width: 100%;
  border-top: 1px solid #ccc;
}

この例では、container要素に対してdisplay: flex;とjustify-content: center;、align-items: center;を指定することで、水平線と文字を中央に配置しています。

• レスポンシブデザインに対応しやすい

CSS Gridレイアウト

<div class="container">
  <h1>見出し</h1>
  <hr />
</div>

.container {
  display: grid;
  place-items: center;
}

hr {
  width: 100%;
  border-top: 1px solid #ccc;
}

クロスブラウザ対応

上記の方法はすべて、最新のブラウザで動作します。しかし、古いブラウザにも対応したい場合は、以下の点に注意する必要があります。

• flexboxレイアウトとCSS Gridレイアウトは、古いブラウザではサポートされていないため、ポリフィルが必要になる場合があります。
• border-bottomプロパティとmarginプロパティを使用する場合は、IE8 以前では水平線が中央に配置されない可能性があります。

水平線と文字を中央に配置するには、いくつかの方法があります。それぞれの方法には利点と欠点があるので、目的に合

擬似要素とborder-bottomプロパティ

<p>見出し</p>

p {
  text-align: center;
}

p::before {
  content: "";
  display: block;
  width: 50px;
  height: 1px;
  border-bottom: 1px solid #ccc;
  margin: 0 auto;
}

border-bottomプロパティとmarginプロパティ

<p>見出し</p>

p {
  text-align: center;
  border-bottom: 1px solid #ccc;
  margin: 0 auto;
  padding: 10px 0;
}

flexboxレイアウト

<div class="container">
  <h1>見出し</h1>
  <hr />
</div>

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

hr {
  width: 100%;
  border-top: 1px solid #ccc;
}

CSS Gridレイアウト

<div class="container">
  <h1>見出し</h1>
  <hr />
</div>

.container {
  display: grid;
  place-items: center;
}

hr {
  width: 100%;
  border-top: 1px solid #ccc;
}

水平線と文字を中央に配置するその他の方法

positionプロパティとabsolute

<div class="container">
  <h1>見出し</h1>
  <hr />
</div>

.container {
  position: relative;
}

h1 {
  text-align: center;
}

hr {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  border-top: 1px solid #ccc;
}

background-imageプロパティ

この方法は、background-imageプロパティを使用して、背景画像として水平線を設定します。

<h1>見出し</h1>

h1 {
  text-align: center;
  background-image: linear-gradient(to right, #ccc 50%, transparent 50%);
  background-size: 100% 1px;
  background-position: center center;
  background-repeat: no-repeat;
}

SVG

この方法は、SVGを使用して水平線を表現します。

<h1>見出し</h1>
<svg viewBox="0 0 100 1">
  <line x1="0" y1="0.5" x2="100" y2="0.5" stroke="#ccc" />
</svg>