シンプル見出しデザイン

下線

SAMPLE

COLOR :

CSS

<style type="text/css">
h5 {
  font-size: 20px !important;/*文字のサイズ*/
  border-bottom: 2px solid #323232;/*下線*/
  color: #323232;
  padding-bottom: .5em;
  margin-bottom: 15px;
}
</style>
上下線

SAMPLE

COLOR :

CSS

<style type="text/css">
h5 {
  font-size: 20px !important;/*文字のサイズ*/
  border-top: 2px solid #323232;/*上線*/
  border-bottom: 2px solid #323232;/*下線*/
  color: #323232;
  padding: .5em 0;
  margin-bottom: 15px;
}
</style>
背景色

SAMPLE

COLOR :

CSS

<style type="text/css">
h5 {
  font-size: 20px !important;/*文字のサイズ*/
  background: #323232;/*背景色*/
  padding: .5em .7em;/*余白*/
  color: #FFF;
  margin-bottom: 15px;
}
</style>
背景色 + 下線

SAMPLE

COLOR :

CSS

<style type="text/css">
h5 {
  font-size: 20px !important;/*文字のサイズ*/
  background: rgba(50,50,50,.07);/*背景色*/
  border-bottom: 3px solid #323232;/*下線*/
  color: #323232;
  padding: .5em .7em;
  margin-bottom: 15px;
}
</style>
左線

SAMPLE

COLOR :

CSS

<style type="text/css">
h5 {
  font-size: 20px !important;/*文字のサイズ*/
  border-left: 3px solid #323232;/*左線*/
  padding: .5em .7em;/*余白*/
  color: #323232;
  margin-bottom: 15px;
}
</style>
左線 + 背景色

SAMPLE

COLOR :

CSS

<style type="text/css">
h5 {
  font-size: 20px !important;/*文字のサイズ*/
  border-left: 3px solid #323232;/*左線*/
  padding: .5em .7em;/*余白*/
  background: rgba(50,50,50,.07);/*背景色*/
  color: #323232;
  margin-bottom: 15px;
}
</style>
交差線

SAMPLE

COLOR :

CSS

<style type="text/css">
h5 {
  font-size: 20px !important;/*文字のサイズ*/
  position: relative;
  display: inline-block;
  padding: .3em 1em;
  border-top: solid 1px #323232;
  border-bottom: solid 1px #323232;
  color: #323232;
  margin-bottom: 15px;
}
h5:before,
h5:after {
  content: '';
  position: absolute;
  top: -7px;
  width: 1px;
  height: -webkit-calc(100% + 14px);
  height: calc(100% + 14px);
  background-color: #323232;
}
h5:before {
  left: 7px;/*左線*/
}
h5:after {
  right: 7px;/*右線*/
}
</style>

装飾見出しデザイン

二重線

SAMPLE

COLOR :

CSS

<style type="text/css">
h5 {
  font-size: 20px !important;/*文字のサイズ*/
  /*線の種類(実線) 太さ 色*/
  color: #323232;
  border-bottom: double 6px #323232;
  padding-bottom: .5em;
  margin-bottom: 15px;
}
</style>
マーカー

SAMPLE

COLOR :

CSS

<style type="text/css">
h5 {
  font-size: 20px !important;/*文字のサイズ*/
  color: #323232;
  background: linear-gradient(transparent 75%, rgba(50,50,50,.3) 75%);
  margin-bottom: 15px;
}
</style>
ツートーンカラー

SAMPLE

COLOR :

CSS

<style type="text/css">
h5 {
  font-size: 20px !important;/*文字のサイズ*/
  position: relative;
  color: #FFF;
  padding: .8em;
  background: linear-gradient(rgba(50,50,50,.9) 0%, rgba(50,50,50,.85)  50%, rgba(50,50,50,1)  50%) ;
  margin-bottom: 15px;
}
</style>
角丸ツートーンカラー

SAMPLE

COLOR :

CSS

<style type="text/css">
h5 {
  font-size: 20px !important;/*文字のサイズ*/
  position: relative;
  color: #FFF;
  padding: .8em;
  padding-left: 1.3em;
  background: linear-gradient(rgba(50,50,50,.9) 0%, rgba(50,50,50,.85)  50%, rgba(50,50,50,1)  50%) ;
  border-radius: 50em 50em 50em 50em;
  margin-bottom: 15px;
}
</style>
グラデーション背景

SAMPLE

COLOR :

CSS

<style type="text/css">
h5 {
  font-size: 20px !important;/*文字のサイズ*/
  position: relative;
  padding: .8em;
  color: #323232;
  border: 1px solid rgba(50,50,50,.2);
  background: linear-gradient(#FFF 0%, rgba(50,50,50,.1) 100%);
  margin-bottom: 15px;
}
</style>
角丸グラデーション背景

SAMPLE

COLOR :

CSS

<style type="text/css">
h5 {
  font-size: 20px !important;/*文字のサイズ*/
  position: relative;
  padding: .8em;
  color: #323232;
  border: 1px solid rgba(50,50,50,.2);
  background: linear-gradient(#FFF 0%, rgba(50,50,50,.1) 100%);
  border-radius: 50em 50em 50em 50em;
  margin-bottom: 15px;
}
</style>
吹き出し

SAMPLE

COLOR :

CSS

<style type="text/css">
h5 {
  font-size: 20px !important;/*文字のサイズ*/
  position: relative;
  padding: .8em .8em .8em 1.2em;
  color: #FFF;
  background: #323232;
  border-radius: 50em 50em 50em 50em;
  margin-bottom: 15px;
}
h5:after {
  position: absolute;
  content: '';
  top: 100%;
  left: 40px;
  border: 10px solid transparent;
  border-top: 13px solid #323232;
  width: 0;
  height: 0;
}
</style>
リボン

SAMPLE

COLOR :

CSS

<style type="text/css">
h5 {
  font-size: 20px !important;/*文字のサイズ*/
  position: relative;
  padding: .8em;
  color: #fff;
  background: #323232;
  margin-bottom: 15px;
}
h5:after {
  position: absolute;
  content: '';
  top: 100%;
  left: 0;
  border: none;
  border-bottom: solid 10px transparent;
  border-right: solid 40px rgba(50,50,50,.5);
}
</style>