「いろいろなウェブサイトで使える汎用的な見出しデザイン集」サンプル

1.太めの左ボーダー

heading-sample 01

// HTML
<h1 id="heading01">heading-sample 01
</h1>

// CSS
#heading01 {
  padding: 15px;
  border-left: solid 5px #4FADFE;
}

2.上下に太さの異なる二重線

heading-sample 02

// HTML
<h1 id="heading02">heading-sample 02
</h1>

// CSS
#heading02 {
  padding: 15px;
  border-top: solid 1px #8DCEFF;
  border-bottom: solid 1px #8DCEFF;
  position: relative;
}
#heading02::before,
#heading02::after {
  content: "";
  width: 100%;
  height: 2px;
  position: absolute;
  left: 0;
  background: #4EA9EE;
}
#heading02::before {
  top: -5px;
}
#heading02::after {
  bottom: -5px;
}

3.中央に水平線

heading-sample 03

// HTML
<h1 id="heading03"><span>heading-sample 03</span>
</h1>

// CSS
#heading03 {
  padding: 15px 15px 15px 0;
  position: relative;
}
#heading03 span {
  padding: 0 5px 0 0;
  background: #fff;
  position: relative;
  width: auto;
  z-index: 10;
}
#heading03::after {
  content: "";
  width: 100%;
  height: 2px;
  left: 0;
  top: 50%;
  background: #C8D4F1;
  position: absolute;
  z-index: 5;
}

4.点線の下ボーダー

heading-sample 04

// HTML
<h1 id="heading04">heading-sample 04
</h1>

// CSS
#heading04 {
  padding: 15px;
  border-bottom: dashed 1px #0049AA;
}

5.二重線の左ボーダーと細い下ボーダー

heading-sample 05

// HTML
<h1 id="heading05">heading-sample 05
</h1>

// CSS
#heading05 {
  padding: 15px;
  border-left: double 5px #5CC3EE;
  border-bottom: solid 1px #B2B2B1;
}

6.細い枠線

heading-sample 06

// HTML
<h1 id="heading06">heading-sample 06
</h1>

// CSS
#heading06 {
  padding: 15px;
  border: solid 1px #BECAEE;
}

7.色の異なる太めの下ボーダー

heading-sample 07

// HTML
<h1 id="heading07">heading-sample 07
</h1>

// CSS
#heading07 {
  padding: 15px;
  border-bottom: solid 5px #A9A9A9;
  position: relative;
}
#heading07::after {
  content: "";
  width: 30%;
  height: 5px;
  position: absolute;
  left: 0;
  bottom: -5px;
  background: #0D71FF;
}

8.角丸の枠線・背景色付きの帯

heading-sample 08

// HTML
<h1 id="heading08">heading-sample 08
</h1>

// CSS
#heading08 {
  padding: 15px;
  border: solid 1px #E3A6A6;
  background: #FFE8E8;
  border-radius: 8px;
}

9.左ボーダーに背景色付きの帯

heading-sample 09

// HTML
<h1 id="heading09">heading-sample 09
</h1>

// CSS
#heading09 {
  padding: 15px;
  border-left: solid 10px #FF86C4;
  background: #F4F4F4;
}

10.背景色付きの帯に折り返し（リボン風）

heading-sample 10

// HTML
<h1 id="heading010">heading-sample 10
</h1>

// CSS
#heading10 {
  padding: 15px;
  background: #FD7056;
  position: relative;
  color: #fff;
}
#heading10::before,
#heading10::after {
  content: "";
  width: 0;
  height: 0;
  border: solid 6px transparent;
  border-top-color: #C24732;
  position: absolute;
  top: 100%;
}
#heading10::before {
  border-right-color: #C24732;
  left: 0;
}
#heading10::after {
  border-left-color: #C24732;
  right: 0;
}

11.背景色付きの帯に上下の点線と上部インナーシャドウ

heading-sample 11

// HTML
<h1 id="heading11">heading-sample 11
</h1>

// CSS
#heading11 {
  padding: 15px;
  background: #F6EEF3;
  border-top: dashed 1px #F770C4;
  border-bottom: dashed 1px #F770C4;
  position: relative;
}
#heading11::before {
  content: "";
  width: 100%;
  height: 1px;
  position: absolute;
  top: -1px;
  left: 0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4) ;
}

12.上ボーダーにグラデーション背景の帯

heading-sample 12

// HTML
<h1 id="heading12">heading-sample 12
</h1>

// CSS
#heading12 {
  padding: 15px;
  background-image: -webkit-gradient(
  linear,
  left top,
  left bottom,
  color-stop(0, #fefefe),
  color-stop(1, #e9e9e9)
  );
  background-image: -o-linear-gradient(bottom, #fefefe 0%, #e9e9e9 100%);
  background-image: -moz-linear-gradient(bottom, #fefefe 0%, #e9e9e9 100%);
  background-image: -webkit-linear-gradient(bottom, #fefefe 0%, #e9e9e9 100%);
  background-image: -ms-linear-gradient(bottom, #fefefe 0%, #e9e9e9 100%);
  background-image: linear-gradient(to bottom, #fefefe 0%, #e9e9e9 100%);
  border-top: solid 3px #E61414;
  border-bottom: solid 1px #ddd;
  border-right: solid 1px #ddd;
  border-left: solid 1px #ddd;
}

13.一部に背景色がついた帯（マーカー風）

heading-sample 13

// HTML
<h1 id="heading13">heading-sample 13
</h1>

// CSS
#heading13 {
  padding: 15px;
  background-image: -webkit-gradient(
  linear,
  left bottom,
  left top,
  color-stop(0, rgba(255, 216, 247,1.0)),
  color-stop(0.45, rgba(255, 216, 247,1.0)),
  color-stop(0.45, rgba(255, 255, 255,0)),
  color-stop(1, rgba(255, 255, 255,0))
  );
  background-image: -o-linear-gradient(top, rgba(255, 216, 247,1.0) 0%, rgba(255, 216, 247,1.0) 45%, rgba(255, 255, 255,0) 45%, rgba(255, 255, 255,0) 100%);
  background-image: -moz-linear-gradient(top, rgba(255, 216, 247,1.0) 0%, rgba(255, 216, 247,1.0) 45%, rgba(255, 255, 255,0) 45%, rgba(255, 255, 255,0) 100%);
  background-image: -webkit-linear-gradient(top, rgba(255, 216, 247,1.0) 0%, rgba(255, 216, 247,1.0) 45%, rgba(255, 255, 255,0) 45%, rgba(255, 255, 255,0) 100%);
  background-image: -ms-linear-gradient(top, rgba(255, 216, 247,1.0) 0%, rgba(255, 216, 247,1.0) 45%, rgba(255, 255, 255,0) 45%, rgba(255, 255, 255,0) 100%);
  background-image: linear-gradient(to top, rgba(255, 216, 247,1.0) 0%, rgba(255, 216, 247,1.0) 45%, rgba(255, 255, 255,0) 45%, rgba(255, 255, 255,0) 100%);
}

14.矢印付きの吹き出し型

heading-sample 14

// HTML
<h1 id="heading14">heading-sample 14
</h1>

// CSS
#heading14 {
  padding: 10px 15px;
  background: #FFBEA2;
  border-radius: 30px;
  color: #fff;
  position: relative;
}
#heading14::after {
  content: "";
  width: 0;
  height: 0;
  border: solid 15px transparent;
  border-top-color: #FFBEA2;
  position: absolute;
  top: 100%;
  left: 15%;
}

15.先頭にマークと下ボーダー

heading-sample 15

// HTML
<h1 id="heading15">heading-sample 15
</h1>

// CSS
#heading15 {
  padding: 5px 30px;
  border-bottom: solid 1px #BABABA;
  position: relative;
}
#heading15::before {
  content: "";
  width: 20px;
  height: 20px;
  border: double 5px #48DD9A;
  border-radius: 100%;
  position: absolute;
  left: 0;
  top: 25%;
}

16.先頭にマーク

heading-sample 16

// HTML
<h1 id="heading16">heading-sample 16
</h1>

// CSS
#heading16 {
  padding: 5px 30px 5px 45px;
  position: relative;
}
#heading16::before,
#heading16::after {
  content: "";
  position: absolute;
}
#heading16::before {
  width: 30px;
  height: 30px;
  background: #B7FFA8;
  left: 0;
  top: 0;
}
#heading16::after {
  width: 20px;
  height: 20px;
  background: #67D44F;
  left: 15px;
  top: 15px;
}

17.ナンバリングのマークに下点線

heading-sample 17

// HTML
<h1 id="heading17">heading-sample 17
</h1>

// CSS
#heading17 {
  padding: 5px 30px 15px 50px;
  position: relative;
  border-bottom: dotted 1px #aaa;
}
#heading17::before,
#heading17::after {
  position: absolute;
}
#heading17::before {
  content: "";
  width: 40px;
  height: 40px;
  border-radius: 100%;
  background: #9BCC90;
  left: 0;
  top: 0;
}
#heading17::after {
  content: "1";
  font-size: 30px;
  color: #fff;
  left: 12px;
  top: -5px;
}

18.チェックマークが付いたリスト風

heading-sample 18

// HTML
<h1 id="heading18">heading-sample 18
</h1>

// CSS
#heading18 {
  padding: 15px 30px 15px 40px;
  position: relative;
}
#heading18::before {
  content: "";
  width: 25px;
  height: 15px;
  border-left: solid 6px #6DCB9B;
  border-bottom: solid 6px #6DCB9B;
  position: absolute;
  left: 0;
  top: 20px;
  transform: rotate(-45deg);
}

＞＞戻る