【Tips】制作の現場でよく使う！シンプルなタイトル

下線 中央揃え

文字の下に細めの短い線を引いたタイトルです。

BOTTOM LINE TITLE


.h1 {
  position: relative;
}
.h1::before {
  content: '';
  width: 56px;
  height: 1px;
  position: absolute;
  margin: 0 auto;
  left: 0;
  right: 0;
  bottom: -30px;
  background-color: #333;
}

下線 中央揃え カラー

文字の下に細めの短い線を引いたタイトルのカラーバージョンです。

BOTTOM LINE TITLE

BOTTOM LINE TITLE

BOTTOM LINE TITLE

BOTTOM LINE TITLE


.h1 {
  position: relative;
}
/* 赤 */
.h1::before {
  ・・・中央揃えと同じ・・・
  background-color: red;
}
/* 黄 */
.h1::before {
  ・・・中央揃えと同じ・・・
  background-color: yellow;
}
/* 青 */
.h1::before {
  ・・・中央揃えと同じ・・・
  background-color: blue;
}
/* 緑 */
.h1::before {
  ・・・中央揃えと同じ・・・
  background-color: green;
}

下線 中央揃え 太線

太めの下線です。

BOTTOM LINE TITLE


.h1 {
  position: relative;
}
.h1::before {
  ・・・中央揃えと同じ・・・
  height: 6px;
}

下線 左揃え

短い細めの線の左揃えです。

BOTTOM LINE TITLE


.h1 {
  position: relative;
}
.h1::before {
  content: '';
  width: 56px;
  height: 1px;
  position: absolute;
  left: 0;
  bottom: -30px;
  background-color: #333;
}

下線 左揃え カラー

左揃えの線のカラーバージョンです。

BOTTOM LINE TITLE

BOTTOM LINE TITLE

BOTTOM LINE TITLE

BOTTOM LINE TITLE


.h1 {
  position: relative;
}
/* 赤 */
.h1::before {
  ・・・左揃えと同じ・・・
  background-color: red;
}
/* 黄 */
.h1::before {
  ・・・同上・・・
  background-color: yellow;
}
/* 青 */
.h1::before {
  ・・・同上・・・
  background-color: blue;
}
/* 緑 */
.h1::before {
  ・・・同上・・・
  background-color: green;
}

左線

文字の左に線を引いたタイトルです。

LEFT LINE TITLE


.h1 {
  border-left: solid 5px #202020;
  line-height: 1;
  padding: 7px 0 7px 18px;
}

左線 細め

文字の左に細めの線を引いたタイトルです。

LEFT LINE TITLE


.h1 {
  ・・・左線と同じ・・・
  border-left: solid 2px #202020;
}

左線 長め

線を長くして文字との間に余白を多くとった見出しに適したタイトルです。

LEFT LINE TITLE


.h1 {
  ・・・左線と同じ・・・
  padding: 17px 0 17px 32px;
}

左線 長め 背景色あり

左線に背景色を設定したタイトルです。

LEFT LINE TITLE


.h1 {
  ・・・左線と同じ・・・
  background-color: #f6f6f6;
  padding: 17px 0 17px 32px;
}

左線＋下線

左線と下線をあわせたタイトルです。

LEFT LINE TITLE


.h1 {
  ・・・左線と同じ・・・
  border-bottom: solid 1px #202020;
}

サブタイトル 上 左寄せ

サブタイトルを上に左寄せで配置したタイトルです。

SUBHEAD MAIN TITLE HEADLINE 


<h1>
  <span>SUBHEAD</span>
  MAIN TITLE HEADLINE
</h1>



.h1 {
  font-size: 26px;
  line-height: 1;
}
.h1 span {
  display: block;
  font-size: 14px;
  margin-bottom: 15px;
}

サブタイトル 下 左寄せ

サブタイトルを下に左寄せで配置したタイトルです。

MAIN TITLE HEADLINE SUBHEAD 


<h1>
  MAIN TITLE HEADLINE
  <span>SUBHEAD</span>
</h1>



.h1 {
  font-size: 26px;
  line-height: 1;
}
.h1 span {
  display: block;
  font-size: 14px;
  margin-top: 15px;
}

サブタイトル 下 中央寄せ

サブタイトルを下に中央寄せで配置したタイトルです。

MAIN TITLE HEADLINE SUBHEAD 


<h1>
  MAIN TITLE HEADLINE
  <span>SUBHEAD</span>
</h1>



.h1 {
  font-size: 26px;
  line-height: 1;
}
.h1 span {
  display: block;
  font-size: 14px;
  margin-top: 20px;
  text-align: center;
}

サブタイトル 下 中央寄せ 太字

サブタイトルを下に中央寄せで配置してメインタイトルだけ太字にしたバージョンです。

MAIN TITLE HEADLINE SUBHEAD 


<h1>
  MAIN TITLE HEADLINE
  <span>SUBHEAD</span>
</h1>



.h1 {
  font-size: 26px;
  font-weight: bold;
  line-height: 1;
}
.h1 span {
  display: block;
  font-size: 14px;
  font-weight: normal;
  margin-top: 20px;
  text-align: center;
}

タイトル 日本語と英語

メインタイトルが英語、サブタイトルが日本語のパターンです。

Company 会社概要 


<h1>
  Company
  <span>会社概要</span>
</h1>



.h1 {
  font-size: 34px;
  line-height: 1;
}
.h1 span {
  display: block;
  font-size: 14px;
  margin-top: 15px;
}

メインタイトルが日本語、サブタイトルが英語の中央揃えのパターンです。

お客様の声 Voice 


<h1>
  お客様の声
  <span>Voice</span>
</h1>



.h1 {
  font-size: 34px;
  line-height: 1;
  text-align: center;
}
.h1 span {
  display: block;
  font-size: 14px;
  margin-top: 20px;
}

メインタイトルが日本語、サブタイトルが英語の横に並べるパターンです。

SERVICE サービス 


<h1>
  SERVICE
  <span>サービス</span>
</h1>



.h1 {
  font-size: 34px;
  line-height: 1;
}
.h1 span {
  display: inline-block;
  font-size: 14px;
  line-height: 2.5;
  margin-left: 15px;
  vertical-align: top;
}