下線

SAMPLE

COLOR :

コードを表示

HTML

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

CSS

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

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

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

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

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

上下線

SAMPLE

COLOR :

コードを表示

HTML

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

CSS

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

h2 {
  border-top: 2px solid #55A8DC;/*上線*/
  border-bottom: 2px solid #55A8DC;/*下線*/
  color: #323232;
  padding: .3em 0;
}

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

h2 {
  border-top: 2px solid #5E8B6D;/*上線*/
  border-bottom: 2px solid #5E8B6D;/*下線*/
  color: #323232;
  padding: .3em 0;
}

h2 {
  border-top: 2px solid #7B86C6;/*上線*/
  border-bottom: 2px solid #7B86C6;/*下線*/
  color: #323232;
  padding: .3em 0;
}

背景色

SAMPLE

COLOR :

コードを表示

HTML

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

CSS

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

h2 {
  background: #55A8DC;/*背景色*/
  padding: .5em .7em;/*余白*/
  color: #FFF;
}

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

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

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

背景色＋下線

SAMPLE

COLOR :

コードを表示

HTML

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

CSS

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

h2 {
  background: rgba(85,168,220,.07)/*背景色*/
  border-bottom: 3px solid #55A8DC;/*下線*/
  color: #323232;
  padding: .5em .7em;
}

h2 {
  background: rgba(224,116,135,.07);/*背景色*/
  border-bottom: 3px solid #E07487;/*下線*/
  color: #323232;
  padding: .5em .7em;
}

h2 {
  background: rgba(94,139,109,.07);/*背景色*/
  border-bottom: 3px solid #5E8B6D;/*下線*/
  color: #323232;
  padding: .5em .7em;
}

h2 {
  background: rgba(123,134,198,.07);/*背景色*/
  border-bottom: 3px solid #7B86C6;/*下線*/
  color: #323232;
  padding: .5em .7em;
}

左線

SAMPLE

COLOR :

コードを表示

HTML

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

CSS

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

h2 {
  border-left: 3px solid #55A8DC;/*左線*/
  padding: .5em .7em;/*余白*/
  color: #323232;
}

h2 {
  border-left: 3px solid #E07487;/*左線*/
  padding: .5em .7em;/*余白*/
  color: #323232;
}

h2 {
  border-left: 3px solid #5E8B6D;/*左線*/
  padding: .5em .7em;/*余白*/
  color: #323232;
}

h2 {
  border-left: 3px solid #7B86C6;/*左線*/
  padding: .5em .7em;/*余白*/
  color: #323232;
}

左線＋背景色

SAMPLE

COLOR :

コードを表示

HTML

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

CSS

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

h2 {
  border-left: 3px solid #55A8DC;/*左線*/
  padding: .5em .7em;/*余白*/
  background: rgba(85,168,220,.07);/*背景色*/
  color: #323232;
}

h2 {
  border-left: 3px solid #E07487;/*左線*/
  padding: .5em .7em;/*余白*/
  background: rgba(224,116,135,.07);/*背景色*/
  color: #323232;
}

h2 {
  border-left: 3px solid #5E8B6D;/*左線*/
  padding: .5em .7em;/*余白*/
  background: rgba(94,139,109,.07);/*背景色*/
  color: #323232;
}

h2 {
  border-left: 3px solid #7B86C6;/*左線*/
  padding: .5em .7em;/*余白*/
  background: rgba(123,134,198,.07);/*背景色*/
  color: #323232;
}

交差線

SAMPLE

COLOR :

コードを表示

HTML

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

CSS

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

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

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

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

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

二重線

SAMPLE

COLOR :

コードを表示

HTML

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

CSS

h2 {
  /*線の種類（実線） 太さ 色*/
  color: #323232;
  border-bottom: double 6px #323232;
  padding-bottom: .5em;
}

h2 {
  /*線の種類（実線） 太さ 色*/
  color: #323232;
  border-bottom: double 6px #55A8DC;
  padding-bottom: .5em;
}

h2 {
  /*線の種類（実線） 太さ 色*/
  color: #323232;
  border-bottom: double 6px #E07487;
  padding-bottom: .5em;
}

h2 {
  /*線の種類（実線） 太さ 色*/
  color: #323232;
  border-bottom: double 6px #5E8B6D;
  padding-bottom: .5em;
}

h2 {
  /*線の種類（実線） 太さ 色*/
  color: #323232;
  border-bottom: double 6px #7B86C6;
  padding-bottom: .5em;
}

マーカー

SAMPLE

COLOR :

コードを表示

HTML

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

CSS

h2 {
  color: #323232;
  background: linear-gradient(transparent 75%, rgba(50,50,50,.3) 75%);
}

h2 {
  color: #323232;
  background: linear-gradient(transparent 75%, rgba(85,168,220,.3) 75%);
}

h2 {
  color: #323232;
  background: linear-gradient(transparent 75%, rgba(224,116,135,.3) 75%);
}

h2 {
  color: #323232;
  background: linear-gradient(transparent 75%, rgba(94,139,109,.3) 75%);
}

h2 {
  color: #323232;
  background: linear-gradient(transparent 75%, rgba(123,134,198,.3) 75%);
}

ツートーンカラー

SAMPLE

COLOR :

コードを表示

HTML

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

CSS

h2 {
  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%) ;
}

h2 {
  position: relative;
  color: #FFF;
  padding: .8em;
  background: linear-gradient(rgba(85,168,220,.9) 0%, rgba(85,168,220,.85)  50%, rgba(85,168,220,1)  50%) ;
}

h2 {
  position: relative;
  color: #FFF;
  padding: .8em;
  background: linear-gradient(rgba(224,116,135,.9) 0%, rgba(224,116,135,.85)  50%, rgba(224,116,135,1)  50%) ;
}

h2 {
  position: relative;
  color: #FFF;
  padding: .8em;
  background: linear-gradient(rgba(94,139,109,.9) 0%, rgba(94,139,109,.85)  50%, rgba(94,139,109,1)  50%) ;
}

h2 {
  position: relative;
  color: #FFF;
  padding: .8em;
  background: linear-gradient(rgba(123,134,198,.9) 0%, rgba(123,134,198,.85)  50%, rgba(123,134,198,1)  50%) ;
}

角丸ツートーンカラー

SAMPLE

COLOR :

コードを表示

HTML

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

CSS

h2 {
  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;
}

h2 {
  position: relative;
  color: #FFF;
  padding: .8em;
  padding-left: 1.3em;
  background: linear-gradient(rgba(85,168,220,.9) 0%, rgba(85,168,220,.85)  50%, rgba(85,168,220,1)  50%) ;
  border-radius: 50em 50em 50em 50em;
}

h2 {
  position: relative;
  color: #FFF;
  padding: .8em;
  padding-left: 1.3em;
  background: linear-gradient(rgba(224,116,135,.9) 0%, rgba(224,116,135,.85)  50%, rgba(224,116,135,1)  50%) ;
  border-radius: 50em 50em 50em 50em;
}

h2 {
  position: relative;
  color: #FFF;
  padding: .8em;
  padding-left: 1.3em;
  background: linear-gradient(rgba(94,139,109,.9) 0%, rgba(94,139,109,.85)  50%, rgba(94,139,109,1)  50%) ;
  border-radius: 50em 50em 50em 50em;
}

h2 {
  position: relative;
  color: #FFF;
  padding: .8em;
  padding-left: 1.3em;
  background: linear-gradient(rgba(123,134,198,.9) 0%, rgba(123,134,198,.85)  50%, rgba(123,134,198,1)  50%) ;
  border-radius: 50em 50em 50em 50em;
}

グラデーション背景

SAMPLE

COLOR :

コードを表示

HTML

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

CSS

h2 {
  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%);
}

h2 {
  position: relative;
  padding: .8em;
  color: #323232;
  border: 1px solid rgba(85,168,220,.2);
  background: linear-gradient(#FFF 0%, rgba(85,168,220,.5) 100%);
}

h2 {
  position: relative;
  padding: .8em;
  color: #323232;
  border: 1px solid rgba(224,116,135,.2);
  background: linear-gradient(#FFF 0%, rgba(224,116,135,.5) 100%);
}

h2 {
  position: relative;
  padding: .8em;
  color: #323232;
  border: 1px solid rgba(94,139,109,.2);
  background: linear-gradient(#FFF 0%, rgba(94,139,109,.5) 100%);
}

h2 {
  position: relative;
  padding: .8em;
  color: #323232;
  border: 1px solid rgba(123,134,198,.2);
  background: linear-gradient(#FFF 0%, rgba(123,134,198,.5) 100%);
}

角丸グラデーション背景

SAMPLE

COLOR :

コードを表示

HTML

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

CSS

h2 {
  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;
}

h2 {
  position: relative;
  padding: .8em;
  color: #323232;
  border: 1px solid rgba(85,168,220,.2);
  background: linear-gradient(#FFF 0%, rgba(85,168,220,.5) 100%);
  border-radius: 50em 50em 50em 50em;
}

h2 {
  position: relative;
  padding: .8em;
  color: #323232;
  border: 1px solid rgba(224,116,135,.2);
  background: linear-gradient(#FFF 0%, rgba(224,116,135,.5) 100%);
  border-radius: 50em 50em 50em 50em;
}

h2 {
  position: relative;
  padding: .8em;
  color: #323232;
  border: 1px solid rgba(94,139,109,.2);
  background: linear-gradient(#FFF 0%, rgba(94,139,109,.5) 100%);
  border-radius: 50em 50em 50em 50em;
}

h2 {
  position: relative;
  padding: .8em;
  color: #323232;
  border: 1px solid rgba(123,134,198,.2);
  background: linear-gradient(#FFF 0%, rgba(123,134,198,.5) 100%);
  border-radius: 50em 50em 50em 50em;
}

吹き出し

SAMPLE

COLOR :

コードを表示

HTML

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

CSS

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

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

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

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

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

リボン

SAMPLE

COLOR :

コードを表示

HTML

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

CSS

h2 {
  position: relative;
  padding: .8em;
  color: #fff;
  background: #323232;
}
h2:after {
  position: absolute;
  content: '';
  top: 100%;
  left: 0;
  border: none;
  border-bottom: solid 10px transparent;
  border-right: solid 40px rgba(50,50,50,.5);
}

h2 {
  position: relative;
  padding: .8em;
  color: #fff;
  background: #55A8DC;
}
h2:after {
  position: absolute;
  content: '';
  top: 100%;
  left: 0;
  border: none;
  border-bottom: solid 10px transparent;
  border-right: solid 40px rgba(85,168,220,.5);
}

h2 {
  position: relative;
  padding: .8em;
  color: #fff;
  background: #E07487;
}
h2:after {
  position: absolute;
  content: '';
  top: 100%;
  left: 0;
  border: none;
  border-bottom: solid 10px transparent;
  border-right: solid 40px rgba(224,116,135,.5);
}

h2 {
  position: relative;
  padding: .8em;
  color: #fff;
  background: #5E8B6D;
}
h2:after {
  position: absolute;
  content: '';
  top: 100%;
  left: 0;
  border: none;
  border-bottom: solid 10px transparent;
  border-right: solid 40px rgba(94,139,109,.5);
}

h2 {
  position: relative;
  padding: .8em;
  color: #fff;
  background: #7B86C6;
}
h2:after {
  position: absolute;
  content: '';
  top: 100%;
  left: 0;
  border: none;
  border-bottom: solid 10px transparent;
  border-right: solid 40px rgba(123,134,198,.5);
}