コピペでできる!CSSとhtmlだけの下線をデザインしたシンプルな見出しデザイン15選

CSS HTML
 2017.12.29
 2024.07.03

htmlとcssだけでできる下線装飾の見出し15選です。
見出し次第で、記事の読みやすさは大きく変わります。
おもに、下線をデザインするだけのシンプルな見出しのみです。

色は好みで変えていただければ、かまいません。
また、基本htmlは<h1>タグを使用していますが、<h2>〜<h6>などにそのまま変更することができます。

紹介している<h1>タグには、クラス名(.cp_h1title)を付与していますが、こちらも
css部分を下記のように変更すれば、クラスをつけずに使用することも可能です。

h1 {cssの中身}

色には6桁の16進数のカラーコード(#000000)も使えますが、他に、

  • 3桁の16進数カラーコード(#000)
  • RGB色相・彩度・明度(rgb(0,0,0))
  • RGBA色相・彩度・明度・透明度(rgb(0,0,0,1))

なども使用できます。
RGBA値での指定は、サポートしていないブラウザだと、透明度だけが無視されるのではなく、色指定そのものが認識されずに無効となるので注意が必要です。

browser:  ✔︎ ✔︎ ✔︎ 

下線の装飾 [15種]

下線を装飾したものです。指定する種類によって印象が違うものになります。

点線の下線

ニャン易度

見出しテキスト

<h1 class="cp_h1title">見出しテキスト</h1>
.cp_h1title {
	border-bottom: 2px dashed #29B6F6;
}

ドットの下線

ニャン易度

見出しテキスト

<h1 class="cp_h1title">見出しテキスト</h1>
.cp_h1title {
	border-bottom: 2px dotted #F4511E;
}

二重の下線

ニャン易度

見出しテキスト

<h1 class="cp_h1title">見出しテキスト</h1>
.cp_h1title {
	border-bottom: 3px double #0097A7;/*上1px+間1px+下1px*/
}

二重の下線(線種を変える)

ニャン易度

見出しテキスト

<h1 class="cp_h1title">見出しテキスト</h1>
.cp_h1title {
	position: relative;
	padding: .3em;
}
.cp_h1title::before {
	position: absolute;
	content: '';
	bottom: 0;
	left: 0;
	border-top: 1px dotted #E91E63;/*上の線*/
	border-bottom: 2px solid #E91E63;/*下の線*/
	width: 100%;
	height: 6px;/*空けたい隙間+上の線+下の線*/
}

影を利用した二重の下線

ニャン易度

見出しテキスト

<h1 class="cp_h1title">見出しテキスト</h1>
.cp_h1title {
	border-bottom: 3px solid #64B5F6;/*上の線*/
	box-shadow:0px 6px 0px 0px #0D47A1;/*下の線*/
}

文字の下のみ色を変える

ニャン易度

見出しテキスト

<h1 class="cp_h1title">見出しテキスト</h1>
.cp_h1title{
	position: relative;
	overflow: hidden;
}
.cp_h1title::before,
.cp_h1title::after{
	position: absolute;
	content: "";
	bottom: 0;
	width: 100%;
}
.cp_h1title:before{
	border-bottom: 4px solid #F4511E;/*文字下のライン*/
}
.cp_h1title:after{
	border-bottom: 4px solid #FFAB91;/*文字以外のライン*/
}

指定の長さのみ色を変える

ニャン易度

見出しテキスト

<h1 class="cp_h1title">見出しテキスト</h1>
.cp_h1title{
  border-bottom: solid 4px #4DD0E1;/*ベースのライン*/
  position: relative;
}
.cp_h1title:after {
  position: absolute;
  content: '';
  bottom:-4px;/*ラインの太さを変えたらこちらも同様に「-」をつけて変更*/
  left:0;
  border-bottom: solid 4px #006064;/*色を変えたいライン*/
  width: 15%;/*色を変えたいラインの長さ*/
}

指定の長さ以降の下線をストライプに

ニャン易度

見出しテキスト

<h1 class="cp_h1title">見出しテキスト</h1>
.cp_h1title{
  position: relative;
}
.cp_h1title::before,
.cp_h1title::after {
  content: '';
  position: absolute;
  bottom: -4px;/*ラインの太さを変えたらこちらも同様に「-」をつけて変更*/
  left: 0;
  height: 4px;/*ラインの太さ*/
  width: 100%;
  background-color: #E91E63;/*一番上のラインの色*/
}
.cp_h1title::before {
  z-index: 1;/*重なり順を一番上に指定*/
  width: 15%;/*色を変えたいラインの長さ*/
}
.cp_h1title::after {
  background: repeating-linear-gradient(45deg, #fff, #fff 2px, #E91E63 2px, #E91E63 4px);/*ストライプの指定*/
}

二種類の下線を一つに表示

ニャン易度

見出しテキスト

<h1 class="cp_h1title">見出しテキスト</h1>
.cp_h1title {
  position: relative;
  border-bottom: 2px solid #7986CB;/*下の細いライン*/
}
.cp_h1title::after {
  position: absolute;
  bottom: -3px;
  left: 0;
  content: '';
  width: 15%;/*被せるラインの長さ*/
  height: 6px;/*被せるラインの太さ*/
  background-color: #303F9F;/*被せるラインの色*/
}

グラデーションの下線

ニャン易度

見出しテキスト

<h1 class="cp_h1title">見出しテキスト</h1>
    .cp_h1title{
      position: relative;
    }
    .cp_h1title::before {
      position: absolute;
      content: '';
      bottom: 0;
      width: 100%;
      height: 5px;/*ラインの太さ*/
      background: linear-gradient(135deg, #1E88E5 0%,#039BE5 25%,#00ACC1 50%,#00897B 75%,#43A047 100%);/*グラデーションの設定*/
    }

グラデーションを利用して途中で消える下線

ニャン易度

見出しテキスト

<h1 class="cp_h1title">見出しテキスト</h1>
.cp_h1title{
  position: relative;
}
.cp_h1title:after {
  content: "";
  display: block;
  height: 4px;/*ラインの太さ*/
  background: linear-gradient(to right, #E91E63, transparent);
}

左向きの矢印が入った下線

ニャン易度

見出しテキスト

<h1 class="cp_h1title">見出しテキスト</h1>
.cp_h1title {
  position: relative;
  padding-left: 25px;
}
.cp_h1title:before,
.cp_h1title:after {
  position: absolute;
  content: '';
  bottom: 0;
}
.cp_h1title:before {
  left: 0;
  width: 15px;/*三角形の横サイズ*/
  height: 15px;/*三角形の縦サイズ*/
  background-color: #1E88E5;/*三角形の色*/
  clip-path: polygon(100% 0%, 100% 100%, 0% 100%);/*三角形を指定*/
}
.cp_h1title:after {
  left: 15px;
  width: calc(100% - 15px);/*ライン全体の長さ:100%のラインから三角の15px分をマイナスする*/
  border-bottom: solid 4px #1E88E5;/*ラインの指定*/
}

ストライプの下線

ニャン易度

見出しテキスト

<h1 class="cp_h1title">見出しテキスト</h1>
.cp_h1title {
  position: relative;
}
.cp_h1title:after {
  position: absolute;
  content: '';
  bottom: 0;
  left: 0;
  width: 100%;
  height: 6px;/*ラインの太さ*/
  background-image: repeating-linear-gradient(-45deg, #FF7043, #FF7043 3px, #fff 3px, #fff 6px);/*ストライプの指定*/
}

蛍光マーカー風下線を引いた上に文字を載せる

ニャン易度

見出しテキスト

<h1 class="cp_h1title">見出しテキスト</h1>
.cp_h1title {
  position: relative;
  z-index: 0;
}
.cp_h1title::before {
  position: absolute;
  content: '';
  width: 100%;
  height: 100%;
  background: linear-gradient(transparent 60%, #F8BBD0 60%);
  z-index: -1;
  transform: skew(20deg, 0deg);/*ラインの傾斜角度*/
}

文字の上から蛍光マーカーのようにを引く

ニャン易度

見出しテキスト

<h1 class="cp_h1title">見出しテキスト</h1>
.cp_h1title{
  position: relative;
}
.cp_h1title:before{
  position: absolute;
  content: '';
  bottom: 3px;/*被せるラインの位置*/
  left: 0px;
  height: 15px;/*ラインの太さ*/
  width: 100%;/*ラインの長さ*/
  background-color: rgba(144, 202, 249,0.5);/*ラインの色*/
  transform: skew(20deg, 0deg);/*ラインの傾斜角度*/
}
組み合わせ次第でシンプルでも見やすい見出しが作れますね。

copypet.jp

CSS3などで新たに追加された要素・装飾方法など、日々コードを書いていないと忘れてしまったり、ささっとプロトタイプを作る時などちょっとしたことに時間をかけている暇はない。そんな時に「あ〜、あれストックしときゃよかったなぁ」って困った自分用のストックブログです。カスタマイズなどがしやすいよう、昨今のweb制作に取り入れられる一般的なコードを中心に掲載しています。

More Info

こんな記事はいかがですか?