HTML & CSS：cssだけできれいな見出しを作る！シンプル編～

画像無しでcssだけでキレイな見出しを作る！

注）このページのサンプルcssには、異なるデザインをサンプルとして表示するため、サイト全体のcssを消すための記述を入れています。

サンプル１：見出しの両端にシングルラインを配置する

見出しの両端に1本線を入れる。見出し文が長くなると、両端の線は見出し文の縦位置中央配置される
見出し文が短い場合の例：

見出しの両端にシングルラインを配置する

見出し文が長い場合の例：

見出しの両端にシングルラインを配置する 見出し文が長い場合 見出しの両端にシングルラインを配置する 見出し文が長い場合

/*見出しの両端に1本の線を入れる*/
.article h3.single-line {
  position: relative;
  display: inline-block;
  padding: 0 55px;
  border: none;
  background-color: transparent;
}

.article h3.single-line:before, .article h3.single-line:after {
  content: '';
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 45px;
  height: 1px;
  background-color: black;
}

.article h3.single-line:before {
  left:0;
}
.article h3.single-line:after {
  right: 0;
}

サンプル２：見出しの両端にダブルラインを配置する

見出しの両端に2本線を入れる。見出し文が長くなると、両端の線は見出し文の縦位置中央配置される
見出し文が短い場合の例：

見出しの両端にダブルラインを配置する

見出し文が長い場合の例：

見出しの両端にダブルラインを配置する 見出し文が長い場合 見出しの両端にダブルラインを配置する 見出し文が長い場合

/*見出しの両端に2本の線を入れる*/
.article h3.double-line {
  position: relative;
  display: inline-block;
  padding: 0 55px;
 border-bottom: none;
}

.article h3.double-line:before, .article h3.double-line:after {
  content: '';
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 45px;
  height: 2px;
  border-top: solid 1px black;
  border-bottom: solid 1px black;
}

.article h3.double-line:before {
  left:0;
}
.article h3.double-line:after {
  right: 0;
}

サンプル３：見出しの両端にスラッシュを配置する

見出しの両端にスラッシュを入れる。見出し文が長くなると、両端のスラッシュの縦位置中央配置される
見出し文が短い場合の例：

見出しの両端にスラッシュを配置する

見出し文が長い場合の例：

見出しの両端にスラッシュを配置する 見出し文が長い場合 見出しの両端にスラッシュを配置する 見出し文が長い場合

/*両端にスラッシュを付ける*/
.article h3.slash {
  position: relative;
  display: inline-block;
  padding: 0 45px;
 border-bottom: none;
}
.article h3.slash:before, .article h3.slash:after {
  content: '';
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 44px;
  height: 2px;
  background-color: black;
  -webkit-transform: rotate(-60deg);
  transform: rotate(-60deg);
}
.article h3.slash:before {
  left:0;
}
.article h3.slash:after {
  right: 0;
}

サンプル４：見出しの周囲にラインを配置する

見出しの周囲にラインを配置する。見出し文が長くなると、枠の縦位置中央配置される
見出し文が短い場合の例：

見出しの周囲にラインを配置する

見出し文が長い場合の例：

見出しの周囲にラインを配置する 見出し文が長い場合 見出しの周囲にラインを配置する 見出し文が長い場合

/*ラインで囲む*/
.article h3.fourlines {
  position: relative;
  padding: 0.25em 1em;
  border-top: solid 2px black;
  border-bottom: solid 2px black;
}
.article h3.fourlines:before, .article h3.fourlines:after {
  content: '';
  position: absolute;
  top: -7px;
  width: 2px;
  height: -webkit-calc(100% + 14px);
  height: calc(100% + 14px);
  background-color: black;
}
.article h3.fourlines:before {
  left: 7px;
}
.article h3.fourlines:after {
  right: 7px;
}

サンプル５：見出しの両端に大かっこを配置する

見出しの両端に大かっこを配置する。見出し文が長くなると、枠の縦位置中央配置される
見出し文が短い場合の例：

見出しの両端に大かっこを配置する

見出し文が長い場合の例：

見出しの両端に大かっこを配置する 見出し文が長い場合 見出しの両端に大かっこを配置する 見出し文が長い場合

/*大かっこ*/
.article h3.brackets {
  position: relative;
  line-height: 1.4;
  padding:0.25em 1em;
  display: inline-block;
  top:0;
border-bottom: none;
}

.article h3.brackets:before, .article h3.brackets:after { 
  position: absolute;
  top: 0;
  content:'';
  width: 8px;
  height: 100%;
  display: inline-block;
}
.article h3.brackets:before {
  border-left: solid 1px black;
  border-top: solid 1px black;
  border-bottom: solid 1px black;
  left: 0;
}
.article h3.brackets:after {
  content: '';
  border-top: solid 1px black;
  border-right: solid 1px black;
  border-bottom: solid 1px black;
  right: 0;
}