シンプル見出しデザイン

下線

SAMPLE

COLOR :

HTML

<h2>ここに文章</h2>

CSS

h2 {
  border-bottom: 2px solid #272727;/*下線*/
  color: #272727;
  padding-bottom: .5em;
}
上下線

SAMPLE

COLOR :

HTML

<h2>ここに文章</h2>

CSS

h2 {
  border-top: 2px solid #272727;/*上線*/
  border-bottom: 2px solid #272727;/*下線*/
  color: #272727;
  padding: .3em 0;
}
背景色

SAMPLE

COLOR :

HTML

<h2>ここに文章</h2>

CSS

h2 {
  background: #272727;/*背景色*/
  padding: .5em .7em;/*余白*/
  color: #FFF;
}
背景色 + 下線

SAMPLE

COLOR :

HTML

<h2>ここに文章</h2>

CSS

h2 {
  background: rgba(39,39,39,.05);/*背景色*/
  border-bottom: 3px solid #272727;/*下線*/
  color: #272727;
  padding: .5em .7em;
}
左線

SAMPLE

COLOR :

HTML

<h2>ここに文章</h2>

CSS

h2 {
  border-left: 3px solid #272727;/*左線*/
  padding: .5em .7em;/*余白*/
  color: #272727;
}
左線 + 背景色

SAMPLE

COLOR :

HTML

<h2>ここに文章</h2>

CSS

h2 {
  border-left: 3px solid #272727;/*左線*/
  padding: .5em .7em;/*余白*/
  background: rgba(39,39,39,.05);/*背景色*/
  color: #272727;
}
交差線

SAMPLE

COLOR :

HTML

<h2>ここに文章</h2>

CSS

h2 {
  position: relative;
  display: inline-block;
  padding: .3em 1em;
  border-top: solid 1px #272727;
  border-bottom: solid 1px #272727;
  color: #272727;
}
h2:before,
h2:after {
  content: '';
  position: absolute;
  top: -7px;
  width: 1px;
  height: -webkit-calc(100% + 14px);
  height: calc(100% + 14px);
  background-color: #272727;
}
h2:before {
  left: 7px;/*左線*/
}
h2:after {
  right: 7px;/*右線*/
}
マーク1

*アイコンの設定が必要です。設定はこちら

SAMPLE

COLOR :

HTML

<h2>ここに文章</h2>

CSS

h2 {
  position: relative;
  color: #272727;
  padding-left: 1.3em;
  line-height: .7em;
}
h2:before {
  font-family: "Font Awesome 5 Free";
  content: "\f058";
  position: absolute;
  font-size: 1em;
  left: 0;
  top: 0;
  font-weight: 500;
}
マーク2

*アイコンの設定が必要です。設定はこちら

SAMPLE

COLOR :

HTML

<h2>ここに文章</h2>

CSS

h2 {
  position: relative;
  color: #272727;
  padding-left: 1.3em;
  line-height: .7em;
}
h2:before {
  font-family: "Font Awesome 5 Free";
  content: "\f138";
  position: absolute;
  font-size: 1em;
  left: 0;
  top: 0;
  font-weight: 600;
}
ラベル

*アイコンの設定が必要です。設定はこちら

SAMPLE

COLOR :

HTML

<h2>ここに文章</h2>

CSS

h2 {
  position: relative;
  color: #272727;
  background: rgba(39,39,39,.07);
  padding: .3em .5em;
  margin: 2em 0 .3em 0;
  border: 1px solid #272727;
}
h2:after {
  position: absolute;
  font-family: "Font Awesome 5 Free", sans-serif;
  content: '\f00c Point';
  background: #272727;
  color: #FFF;
  left: -1px;
  bottom: 100%;
  border-radius: 5px 5px 0 0;
  padding: .3em 1.6em;
  font-size: .5em;
  font-weight: 600;
}
先頭にアイコン

*アイコンの設定が必要です。設定はこちら

SAMPLE

COLOR :

HTML

<h2>ここに文章</h2>

CSS

h2 {
  position: relative;
  font-size: 18px;/*文字の大きさ*/
  color: #272727;
  background: rgba(39,39,39,.05);
  padding: .25em .5em;
  border-left: solid 2em #272727;
}
h2:before {
  font-family: "Font Awesome 5 Free";
  content: "\f303";
  position: absolute;
  color: #FFF;
  font-weight: 600;
  left: -1.5em;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

装飾見出しデザイン

二重線

SAMPLE

COLOR :

HTML

<h2>ここに文章</h2>

CSS

h2 {
  /*線の種類(実線) 太さ 色*/
  color: #272727;
  border-bottom: double 6px #272727;
  padding-bottom: .5em;
}
マーカー

SAMPLE

COLOR :

HTML

<h2>ここに文章</h2>

CSS

h2 {
  color: #272727;
  background: linear-gradient(transparent 75%, rgba(39,39,39,.3) 75%);
}
ドットマーク + 背景色

*アイコンの設定が必要です。設定はこちら

SAMPLE

COLOR :

HTML

<h2>ここに文章</h2>

CSS

h2 {
  position: relative;
  color: #FFF;
  background: #272727;
  padding-left: 2.2em;
  border-radius: 5px;
  line-height: 2.5em;
}

h2:before {
  font-family: "Font Awesome 5 Free";
  content: "\f111";
  position: absolute;
  left: .7em;
  font-weight: 600;
}
ドットマーク + 角丸背景

*アイコンの設定が必要です。設定はこちら

SAMPLE

COLOR :

HTML

<h2>ここに文章</h2>

CSS

h2 {
  position: relative;
  color: #FFF;
  background: #272727;
  padding-left: 2.5em;
  border-radius: 50em 50em 50em 50em;
  line-height: 2.4em;
}

h2:before {
  font-family: "Font Awesome 5 Free";
  content: "\f111";
  position: absolute;
  left: 1em;
  font-weight: 600;
}
ツートーンカラー

SAMPLE

COLOR :

HTML

<h2>ここに文章</h2>

CSS

h2 {
  position: relative;
  color: #FFF;
  padding: .8em;
  background: linear-gradient(rgba(39,39,39,.9) 0%, rgba(39,39,39,.85)  50%, rgba(39,39,39,1)  50%) ;
}
角丸ツートーンカラー

SAMPLE

COLOR :

HTML

<h2>ここに文章</h2>

CSS

h2 {
  position: relative;
  color: #FFF;
  padding: .8em;
  padding-left: 1.3em;
  background: linear-gradient(rgba(39,39,39,.9) 0%, rgba(39,39,39,.85)  50%, rgba(39,39,39,1)  50%) ;
  border-radius: 50em 50em 50em 50em;
}
グラデーション背景

SAMPLE

COLOR :

HTML

<h2>ここに文章</h2>

CSS

h2 {
  position: relative;
  padding: .8em;
  color: #272727;
  border: 1px solid rgba(39,39,39,.2);
  background: linear-gradient(#FFF 0%, rgba(39,39,39,.1) 100%);
}
角丸グラデーション背景

SAMPLE

COLOR :

HTML

<h2>ここに文章</h2>

CSS

h2 {
  position: relative;
  padding: .8em;
  color: #272727;
  border: 1px solid rgba(39,39,39,.2);
  background: linear-gradient(#FFF 0%, rgba(39,39,39,.1) 100%);
  border-top-left-radius: 50em;
  border-top-right-radius: 50em;
  border-bottom-left-radius: 50em;
  border-bottom-right-radius: 50em;
}
吹き出し

SAMPLE

COLOR :

HTML

<h2>ここに文章</h2>

CSS

h2 {
  position: relative;
  padding: .8em .8em .8em 1.2em;
  color: #FFF;
  background: #272727;
  border-radius: 50em 50em 50em 50em;
}
h2:after {
  position: absolute;
  content: '';
  top: 100%;
  left: 40px;
  border: 10px solid transparent;
  border-top: 13px solid #272727;
  width: 0;
  height: 0;
}
リボン

SAMPLE

COLOR :

HTML

<h2>ここに文章</h2>

CSS

h2 {
  position: relative;
  padding: .8em;
  color: #fff;
  background: #272727;
}
h2:after {
  position: absolute;
  content: '';
  top: 100%;
  left: 0;
  border: none;
  border-bottom: solid 10px transparent;
  border-right: solid 40px rgba(39,39,39,.5);
}
その他ブログサービスのデザイン