見出し

1. シンプルな見出し

<div class="gsss_btn"><a href="#" class="btn-square-shadow">BUTTON</a></div>

.gsss_h h1.ul_only {
  /*線の種類（実線） 太さ 色*/
  border-bottom: solid 3px black;
}

<div class="gsss_h"><h1>美しい見出しのデザイン</h1></div>

.gsss_h h1.dot_color {
  color: #6594e0;/*文字色*/
  /*線の種類（点線）2px 線色*/
  border-bottom: dashed 2px #6594e0;
}

<div class="gsss_h">
  <h1 class="double_line">美しい見出しのデザイン</h1>
</div>

.gsss_h h1.double_line {
  /*線の種類（二重線）太さ 色*/
  border-bottom: double 5px #FFC778;
}

<div class="gsss_h">
  <h1 class="both_lines">美しい見出しのデザイン</h1>
</div>

.gsss_h h1.both_lines {
  color: #364e96; /*文字色*/
  padding: 0.5em 0; /*上下の余白*/
  border-top: solid 3px #364e96; /*上線*/
  border-bottom: solid 3px #364e96; /*下線*/
}

<div class="gsss_h">
  <h1 class="bg_simple">美しい見出しのデザイン</h1>
</div>

  .gsss_h h1.bg_simple {
  background: #c2edff;/*背景色*/
  padding: 0.5em;/*文字まわり（上下左右）の余白*/
}

<div class="gsss_h">
  <h1 class="around_line">美しい見出しのデザイン</h1>
</div>

.gsss_h h1.around_line {
  color: #364e96;/*文字色*/
  border: solid 3px #364e96;/*線色*/
  padding: 0.5em;/*文字周りの余白*/
  border-radius: 0.5em;/*角丸*/
  }

<div class="gsss_h">
  <h1 class="bg_underline">美しい見出しのデザイン</h1>
</div>

.gsss_h h1.bg_underline {
  padding: 0.5em;/*文字周りの余白*/
  color: #010101;/*文字色*/
  background: #eaf3ff;/*背景色*/
  border-bottom: solid 3px #516ab6;/*下線*/
  }

<div class="gsss_h">
  <h1 class="left_line">美しい見出しのデザイン</h1>
</div>

.gsss_h h1.left_line {
  padding: 0.25em 0.5em;/*上下 左右の余白*/
  color: #494949;/*文字色*/
  background: transparent;/*背景透明に*/
  border-left: solid 5px #7db4e6;/*左線*/
  }

<div class="gsss_h">
  <h1 class="left_line_bg">美しい見出しのデザイン</h1>
</div>

.gsss_h h1.left_line_bg {
  padding: 0.5em;/*文字周りの余白*/
  color: #494949;/*文字色*/
  background: #fffaf4;/*背景色*/
  border-left: solid 5px #ffaf58;/*左線（実線 太さ 色）*/
  }

<div class="gsss_h">
  <h1 class="bar_3_dim">美しい見出しのデザイン</h1>
</div>

.gsss_h h1.bar_3_dim {
  padding: 0.4em 0.5em;/*文字の上下 左右の余白*/
  color: #494949;/*文字色*/
  background: #f4f4f4;/*背景色*/
  border-left: solid 5px #7db4e6;/*左線*/
  border-bottom: solid 3px #d7d7d7;/*下線*/
  }

<div class="gsss_h">
  <h1 class="s_box_shadow">美しい見出しのデザイン</h1>
</div>

.gsss_h h1.s_box_shadow {
  padding: 0.5em;
  background: aliceblue;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.23);
  }

2. おしゃれな見出し

<div class="gsss_h">
  <h1 class="tag_style">美しい見出しのデザイン</h1>
</div>

.gsss_h h1.tag_style {
  color: #505050;/*文字色*/
  padding: 0.5em;/*文字周りの余白*/
  display: inline-block;/*おまじない*/
  line-height: 1.3;/*行高*/
  background: #dbebf8;/*背景色*/
  vertical-align: middle;
  border-radius: 25px 0px 0px 25px;/*左側の角を丸く*/
  }
  .gsss_h h1.tag_style:before {
  content: '●';
  color: white;
  margin-right: 8px;
}

<div class="gsss_h">
  <h1 class="speech_bubble">美しい見出しのデザイン</h1>
</div>

.gsss_h h1.speech_bubble {
  position: relative;
  padding: 0.6em;
  background: #e0edff;
  }
  .gsss_h h1.speech_bubble:after {
  position: absolute;
  content: '';
  top: 100%;
  left: 30px;
  border: 15px solid transparent;
  border-top: 15px solid #e0edff;
  width: 0;
  height: 0;
}

<div class="gsss_h">
  <h1 class="stich_style">美しい見出しのデザイン</h1>
</div>

  .gsss_h h1.stich_style {
  background: #dfefff;
  box-shadow: 0px 0px 0px 5px #dfefff;
  border: dashed 1px #96c2fe;
  padding: 0.2em 0.5em;
  color: #454545;
  }

<div class="gsss_h">
  <h1 class="stich_white">美しい見出しのデザイン</h1>
</div>

  .gsss_h h1.stich_white {
  background: #dfefff;
  box-shadow: 0px 0px 0px 5px #dfefff;
  border: dashed 2px white;
  padding: 0.2em 0.5em;
  }

<div class="gsss_h">
  <h1 class="turn_over">美しい見出しのデザイン</h1>
</div>

.gsss_h h1.turn_over {
  position: relative;
  background: #dfefff;
  box-shadow: 0px 0px 0px 5px #dfefff;
  border: dashed 2px white;
  padding: 0.2em 0.5em;
  color: #454545;
  }
  .gsss_h h1.turn_over:after {
  position: absolute;
  content: '';
  left: -7px;
  top: -7px;
  border-width: 0 0 15px 15px;
  border-style: solid;
  border-color: #fff #fff #a8d4ff;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
}

<div class="gsss_h">
  <h1 class="band">美しい見出しのデザイン</h1>
</div>

.gsss_h h1.band {
  position: relative;
  padding: 0.5em;
  background: #a6d3c8;
  color: white;
}

.gsss_h h1.band::before {
  position: absolute;
  content: '';
  top: 100%;
  left: 0;
  border: none;
  border-bottom: solid 15px transparent;
  border-right: solid 20px rgb(149, 158, 155);
}

<div class="gsss_h">
  <h1 class="highlight_marker">美しい見出しのデザイン</h1>
</div>

  .gsss_h h1.highlight_marker {
  background: linear-gradient(transparent 70%, #a7d6ff 70%);
}

<div class="gsss_h">
  <h1 class="change_color">美しい見出しのデザイン</h1>
</div>

.gsss_h h1.change_color{
  border-bottom: solid 3px skyblue;
  position: relative;
  }
  .gsss_h h1.change_color:after {
  position: absolute;
  content: " ";
  display: block;
  border-bottom: solid 3px #ffc778;
  bottom: -3px;
  width: 30%;
}

<div class="gsss_h">
  <h1 class="change_color_blue">美しい見出しのデザイン</h1>
</div>

.gsss_h h1.change_color_blue {
  border-bottom: solid 3px #cce4ff;
  position: relative;
  }
  .gsss_h h1.change_color_blue:after {
  position: absolute;
  content: " ";
  display: block;
  border-bottom: solid 3px #5472cd;
  bottom: -3px;
  width: 20%;
}

<div class="gsss_h">
  <h1 class="arrow_style">美しい見出しのデザイン</h1>
</div>

.gsss_h h1.arrow_style {
  position: relative;
  padding-left: 25px;
  }
.gsss_h h1.arrow_style:before {
  position: absolute;
  content: '';
  bottom: -3px;
  left: 0;
  width: 0;
  height: 0;
  border: none;
  border-left: solid 15px transparent;
  border-bottom: solid 15px rgb(119, 195, 223);
}
.gsss_h h1.arrow_style:after {
  position: absolute;
  content: '';
  bottom: -3px;
  left: 10px;
  width: 100%;
  border-bottom: solid 3px rgb(119, 195, 223);
}

<div class="gsss_h">
  <h1 class="sharp">美しい見出しのデザイン</h1>
</div>

.gsss_h h1.sharp {
  position: relative;
  padding: 5px 5px 5px 42px;
  background: #77c3df;
  font-size: 20px;
  color: white;
  margin-left: -33px;
  line-height: 1.3;
  z-index:-1;
  }
  .gsss_h h1.sharp:before {
  position: absolute;
  content: '';
  left: -2px;
  top: -2px;
  border: none;
  border-left: solid 40px white;
  border-bottom: solid 79px transparent;
  z-index:-2
}

<div class="gsss_h">
  <h1 class="both_sharp">美しい見出しのデザイン</h1>
</div>

.gsss_h h1.both_sharp {
  position: relative;
  padding: 5px 26px 5px 42px;
  background: #fff0d9;
  font-size: 20px;
  color: #2d2d2d;
  margin-left: -33px;
  line-height: 1.3;
  border-bottom: solid 3px orange;
  z-index: -2;
}

.gsss_h h1.both_sharp:before {
  position: absolute;
  content: '';
  left: -2px;
  top: -2px;
  width: 0;
  height: 0;
  border: none;
  border-left: solid 40px white;
  border-bottom: solid 79px transparent;
  z-index: -1;
}

.gsss_h h1.both_sharp:after {
  position: absolute;
  content: '';
  right: -3px;
  top: -7px;
  width: 0;
  height: 0;
  border: none;
  border-left: solid 40px transparent;
  border-bottom: solid 79px white;
  z-index: -1;
}

<div class="gsss_h">
  <h1 class="bg_stripe">美しい見出しのデザイン</h1>
</div>

.gsss_h h1.bg_stripe {
  color: #010079;
  text-shadow: 0 0 5px white;
  padding: 0.3em 0.5em;
  background: -webkit-repeating-linear-gradient(-45deg, #cce7ff, #cce7ff 3px, #e9f4ff 3px, #e9f4ff 7px);
  background: repeating-linear-gradient(-45deg, #cce7ff, #cce7ff 3px, #e9f4ff 3px, #e9f4ff 7px);
}

<div class="gsss_h">
  <h1 class="stripe_left_line">美しい見出しのデザイン</h1>
</div>

.gsss_h h1.stripe_left_line {
  color: #010079;
  padding: 0.3em 0.5em;
  text-shadow: 0 0 5px white;
  border-left: solid 7px #010079;
  background: -webkit-repeating-linear-gradient(-45deg, #cce7ff, #cce7ff 3px,#e9f4ff 3px, #e9f4ff 7px);
  background: repeating-linear-gradient(-45deg, #cce7ff, #cce7ff 3px,#e9f4ff 3px, #e9f4ff 7px);
  }

<div class="gsss_h">
  <h1 class="stripe_up_down">美しい見出しのデザイン</h1>
</div>

.gsss_h h1.stripe_up_down {
  color: #6cb4e4;
  text-align: center;
  padding: 0.25em;
  border-top: solid 2px #6cb4e4;
  border-bottom: solid 2px #6cb4e4;
  background: -webkit-repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#e9f4ff 3px, #e9f4ff 7px);
  background: repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#e9f4ff 3px, #e9f4ff 7px);
  }

<div class="gsss_h">
  <h1 class="stripe_down">美しい見出しのデザイン</h1>
</div>

.gsss_h h1.stripe_down {
  position: relative;
}
.gass_h h1.stripe_down:after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 7px;
background: -webkit-repeating-linear-gradient(-45deg, #6ad1c8, #6ad1c8 2px, #fff 2px, #fff 4px);
background: repeating-linear-gradient(-45deg, #6ad1c8, #6ad1c8 2px, #fff 2px, #fff 4px);
}

<div class="gsss_h">
  <h1 class="stripe_bubble">美しい見出しのデザイン</h1>
</div>

.gsss_h h1.stripe_bubble {
  position: relative;
padding: 0.6em;
background: -webkit-repeating-linear-gradient(-45deg, #fff5df, #fff5df 4px,#ffe4b1 3px, #ffe4b1 8px);
background: repeating-linear-gradient(-45deg, #fff5df, #fff5df 4px,#ffe4b1 3px, #ffe4b1 8px);
border-radius: 7px;
}
.gsss_h h1.stripe_bubble:after {
position: absolute;
content: '';
top: 100%;
left: 30px;
border: 15px solid transparent;
border-top: 15px solid #ffebbe;
width: 0;
height: 0;
}

<div class="gsss_h">
  <h1 class="lines-side">美しい見出しのデザイン</h1>
</div>

.gsss_h h1.lines-side {
  position: relative;
  display: inline-block;
  padding: 0 55px;
}

.gsss_h h1.lines-side:before,
.gsss_h h1.lines-side:after {
  content: '';
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 45px;
  height: 1px;
  background-color: black;
}

.gsss_h h1.lines-side:before {
  left: 0;
}

.gsss_h h1.lines-side:after {
  right: 0;
}

<div class="gsss_h">
  <h1 class="double_side">美しい見出しのデザイン</h1>
</div>

.gsss_h h1.double_side {
  position: relative;
  display: inline-block;
  padding: 0 55px;
}

.gsss_h h1.double_side:before,
.gsss_h h1.double_side:after {
  content: '';
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 45px;
  height: 2px;
  border-top: solid 1px black;
  border-bottom: solid 1px black;
}

.gsss_h h1.double_side:before {
  left: 0;
}

.gsss_h h1.double_side:after {
  right: 0;
}

<div class="gsss_h">
  <h1 class="s_underline">美しい見出しのデザイン</h1>
</div>

.gsss_h h1.s_underline {
  position: relative;
  display: inline-block;
  margin-bottom: 1em;
  }
  .gsss_h h1.s_underline:before {
  content: '';
  position: absolute;
  bottom: -15px;
  display: inline-block;
  width: 60px;
  height: 5px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  background-color: black;
  border-radius: 2px;
}

<div class="gsss_h">
  <h1 class="slash">美しい見出しのデザイン</h1>
</div>

.gsss_h h1.slash {
  position: relative;
  display: inline-block;
  padding: 0 45px;
  }
  .gsss_h h1.slash:before, .gsss_h h1.slash:after {
  content: '';
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 44px;
  height: 2px;
  background-color: black;
  -webkit-transform: rotate(-60deg);
  transform: rotate(-60deg);
}
.gsss_h h1.slash:before {
  left:0;
}
.gsss_h h1.slash:after {
  right: 0;
}

<div class="gsss_h">
  <h1 class="cross_line">美しい見出しのデザイン</h1>
</div>

.gsss_h h1.cross_line {
  position: relative;
  padding: 0.25em 1em;
  border-top: solid 2px black;
  border-bottom: solid 2px black;
  }
  .gsss_h h1.cross_line:before, .gsss_h h1.cross_line:after {
  content: '';
  position: absolute;
  top: -7px;
  width: 2px;
  height: -webkit-calc(100% + 14px);
  height: calc(100% + 14px);
  background-color: black;
}
.gsss_h h1.cross_line:before {
  left: 7px;
}
.gsss_h h1.cross_line:after {
  right: 7px;
}

<div class="gsss_h">
  <h1 class="corner_circle">美しい見出しのデザイン</h1>
</div>

.gsss_h h1.corner_circle {
  position: relative;
  padding: 0.25em 1em;
  border: solid 2px black;
  border-radius: 3px 0 3px 0;
  }
  .gsss_h h1.corner_circle:before, .gsss_h h1.corner_circle:after {
  content: '';
  position: absolute;
  width:10px;
  height: 10px;
  border: solid 2px black;
  border-radius: 50%;
}

.gsss_h h1.corner_circle:after {
  top:-12px;
  left:-12px;
}
.gsss_h h1.corner_circle:before {
  bottom:-12px;
  right:-12px;
}

<div class="gsss_h">
  <h1 class="leaf">美しい見出しのデザイン</h1>
</div>

.gsss_h h1.leaf {
  position: relative;
  color: #158b2b;
  font-size: 20px;
  padding: 10px 0;
  text-align: center;
  margin: 1.5em 0;
  }
  .gsss_h h1.leaf:before {
  content: "";
  position: absolute;
  top: -8px;
  left: 50%;
  width: 150px;
  height: 58px;
  border-radius: 50%;
  border: 5px solid #a6ddb0;
  border-left-color: transparent;
  border-right-color: transparent;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

<div class="gsss_h">
  <h1 class="thin_bra">美しい見出しのデザイン</h1>
</div>

<style>
  .gsss_h h1.thin_bra {
    position: relative;
    line-height: 1.4;
    padding: 0.25em 1em;
    display: inline-block;
  }

  .gsss_h h1.thin_bra:before,
  .gsss_h h1.thin_bra:after {
    content: '';
    width: 20px;
    height: 30px;
    position: absolute;
    display: inline-block;
  }

  .gsss_h h1.thin_bra:before {
    border-left: solid 1px #ff5722;
    border-top: solid 1px #ff5722;
    top: 0;
    left: 0;
  }

  .gsss_h h1.thin_bra:after {
    border-right: solid 1px #ff5722;
    border-bottom: solid 1px #ff5722;
    bottom: 0;
    right: 0;
  }
</style>

<div class="gsss_h">
  <h1 class="big_bra">美しい見出しのデザイン</h1>
</div>

.gsss_h h1.big_bra {
  position: relative;
  line-height: 1.4;
  padding:0.25em 1em;
  display: inline-block;
  top:0;
  }
  .gsss_h h1.big_bra:before, .gsss_h h1.big_bra:after {
  position: absolute;
  top: 0;
  content:'';
  width: 8px;
  height: 100%;
  display: inline-block;
}
.gsss_h h1.big_bra:before {
  border-left: solid 1px black;
  border-top: solid 1px black;
  border-bottom: solid 1px black;
  left: 0;
}
.gsss_h h1.big_bra:after {
  content: '';
  border-top: solid 1px black;
  border-right: solid 1px black;
  border-bottom: solid 1px black;
  right: 0;
}

<div class="gsss_h">
  <h1 class="dot_big_bra">美しい見出しのデザイン</h1>
</div>

.gsss_h h1.dot_big_bra {
  position: relative;
  line-height: 1.4;
  padding:0.25em 1em;
  display: inline-block;
  top:0;
  }
  .gsss_h h1.dot_big_bra:before, .gsss_h h1.dot_big_bra:after {
  position: absolute;
  top: 0;
  content:'';
  width: 8px;
  height: 100%;
  display: inline-block;
}

.gsss_h h1.dot_big_bra:before {
  border-top: dotted 1px #535aaa;
  border-left: dotted 1px #535aaa;
  border-bottom: dotted 1px #535aaa;
  left: 0;
}

.gsss_h h1.dot_big_bra:after {
  content: '';
  border-top: dotted 1px #535aaa;
  border-right: dotted 1px #535aaa;
  border-bottom: dotted 1px #535aaa;
  right: 0;
}

<div class="gsss_h">
  <h1 class="box_3dim">美しい見出しのデザイン</h1>
</div>

.gsss_h h1.box_3dim {
  position: relative;
  padding: 0.35em 0.5em;
  background: #b6e9ff;
  color: #393939;
  }
  .gsss_h h1.box_3dim:before {
  content: " ";
  position: absolute;
  top: -16px;
  left: 0;
  width: -webkit-calc(100% - 16px);
  width: calc(100% - 16px);
  height: 0;
  border: solid 8px transparent;
  border-bottom-color: #b2ddf0;
}

<div class="gsss_h">
  <h1 class="big_first">美しい見出しのデザイン</h1>
</div>

.gsss_h h1.big_first:first-letter {
  font-size: 2em;
  color: #7172ac;
}

3. グラデーションを使った見出し

<div class="gsss_h">
  <h1 class="gra_underline">美しい見出しのデザイン</h1>
</div>

.gsss_h h1.gra_underline {
  position: relative;
  padding: 0.25em 0;
  }
  .gsss_h h1.gra_underline:after {
  content: "";
  display: block;
  height: 4px;
  background: -webkit-linear-gradient(to right, rgb(230, 90, 90), transparent);
  background: linear-gradient(to right, rgb(230, 90, 90), transparent);
}

<div class="gsss_h">
  <h1 class="gra_underline_change">美しい見出しのデザイン</h1>
</div>

.gsss_h h1.gra_underline_change {
  position: relative;
  padding: 0.25em 0;
  }
  .gsss_h h1.gra_underline_change:after {
  content: "";
  display: block;
  height: 4px;
  background: -webkit-linear-gradient(to right, rgb(255, 186, 115), #ffb2b2);
  background: linear-gradient(to right, rgb(255, 186, 115), #ffb2b2);
}

<div class="gsss_h">
  <h1 class="gra_bg">美しい見出しのデザイン</h1>
</div>

.gsss_h h1.gra_bg {
  position: relative;
  padding: 0.1em 0.5em;
  background: -webkit-linear-gradient(to right, rgb(255, 186, 115), transparent);
  background: linear-gradient(to right, rgb(255, 186, 115), transparent);
  color: #545454;
  }

<div class="gsss_h">
  <h1 class="gra_shadow_hr">美しい見出しのデザイン</h1>
</div>

.gsss_h h1.gra_shadow_hr {
  position: relative;
  padding: 0.2em 0.5em;
  background: -webkit-linear-gradient(to right, rgb(255, 124, 111), #ffc994);
  background: linear-gradient(to right, rgb(255, 124, 111), #ffc994);
  color: white;
  font-weight: lighter;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.56);
  }

<div class="gsss_h">
  <h1 class="gra_bg_ver">美しい見出しのデザイン</h1>
</div>

.gsss_h h1.gra_bg_ver {
  position: relative;
  padding: 0.3em 0.5em;
  background: -webkit-linear-gradient(to top, rgb(137, 184, 255), #c5ceff);
  background: linear-gradient(to top, rgb(137, 184, 255), #c5ceff);
  color: #495193;
  }

<div class="gsss_h">
  <h1 class="gra_ref">美しい見出しのデザイン</h1>
</div>

.gsss_h h1.gra_ref {
  position: relative;
  color: #6eb0f9;
  line-height: 1.4;
  -webkit-box-reflect: below -10px -webkit-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0) 10%,rgba(0, 0, 0, 0.6));
  }

4. アイコンフォントを使った見出し

<div class="gsss_h">
  <h1 class="check_mark">美しい見出しのデザイン</h1>
</div>

.gsss_h h1.check_mark {
  position: relative;
  padding-left: 1.2em;/*アイコン分のスペース*/
  line-height: 1.4;
  }
  .gsss_h h1.check_mark:before {
  font-family: "Font Awesome 5 Free";
  content: "\f00c";/*アイコンのユニコード*/
  font-weight: 900;
  position: absolute;/*絶対位置*/
  font-size: 1em;/*サイズ*/
  left: 0;/*アイコンの位置*/
  top: 0;/*アイコンの位置*/
  color: #5ab9ff; /*アイコン色*/
  font-weight: 900;
}

<div class="gsss_h">
  <h1 class="chevron_mark">美しい見出しのデザイン</h1>
</div>

.gsss_h h1.chevron_mark {
  position: relative;/*相対位置*/
  padding: 0.5em 0.5em 0.5em 1.5em;/*アイコン分のスペース*/
  line-height: 1.4;/*行高*/
  color: #ff6a6a;/*文字色*/
  border-top: dotted 1px gray;
  border-bottom: dotted 1px gray;
  background: #fffff4;
  }
  .gsss_h h1.chevron_mark:before {
  font-family: "Font Awesome 5 Free";/*忘れずに*/
  content: "\f138";/*アイコンのユニコード*/
  font-weight: 900;
  position: absolute;/*絶対位置*/
  font-size: 1em;/*サイズ*/
  left: 0.25em;/*アイコンの位置*/
  top: 0.5em;/*アイコンの位置*/
  color: #ff6a6a; /*アイコン色*/
}

<div class="gsss_h">
  <h1 class="html_style">美しい見出しのデザイン</h1>
</div>

.gsss_h h1.html_style:before,
  .gsss_h h1.html_style:after {
    position: relative;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    display: inline-block;
    font-size: 1.0em;
    color: #ff6a6a;
  }

  .gsss_h h1.html_style:before {
    content: "\f053";
    /*アイコン種類*/
    padding-right: 0.5em
  }

  .gsss_h h1.html_style:after {
    content: "\f054";
    /*アイコン種類*/
    padding-left: 0.5em
  }

<div class="gsss_h">
  <h1 class="bubble_icon">美しい見出しのデザイン</h1>
</div>

.gsss_h h1.bubble_icon {
  position: relative;/*相対位置*/
  padding-left: 1.2em;/*アイコン分のスペース*/
  line-height: 1.4;/*行高*/
  }
  .gsss_h h1.bubble_icon:before {
  font-family: "Font Awesome 5 Free";
  content: "\f075";/*アイコンのユニコード*/
  font-weight: 900;
  position: absolute;/*絶対位置*/
  font-size: 1em;/*サイズ*/
  left: 0;/*アイコンの位置*/
  top: 0;/*アイコンの位置*/
  color: #5ab9ff; /*アイコン色*/
}

<div class="gsss_h">
  <h1 class="check_flat">美しい見出しのデザイン</h1>
</div>

.gsss_h h1.check_flat {
  position: relative;
  color: white;
  background: #81d0cb;
  line-height: 1.4;
  padding: 0.5em 0.5em 0.5em 1.8em;
}
.gsss_h h1.check_flat:before {
font-family: "Font Awesome 5 Free";
content: "\f14a";
font-weight: 900;
position: absolute;
left : 0.5em; /*左端からのアイコンまでの距離*/
}

<div class="gsss_h">
  <h1 class="code_icon">美しい見出しのデザイン</h1>
</div>

.gsss_h h1.code_icon {
  position: relative;
  padding-left: 30px;
  color: #153c6e;
}
.gsss_h h1.code_icon:before {
position: absolute;
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f121";
background: #c9e2ff;
color: #153c6e;
font-size: 15px;
border-radius: 50%;
left: 0;
width: 25px;
height: 25px;
line-height: 25px;
text-align: center;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}

<div class="gsss_h">
  <h1 class="with_tab_check">美しい見出しのデザイン</h1>
</div>

.gsss_h h1.with_tab_check {
  position: relative;
  color: black;
  background: #d0ecff;
  line-height: 1.4;
  padding: 0.25em 0.5em;
  margin: 2em 0 0.5em;
  border-radius: 0 5px 5px 5px;
}

.gsss_h h1.with_tab_check:after {
  /*タブ*/
  position: absolute;
  font-family: "Font Awesome 5 Free", 'Quicksand', 'Avenir', 'Arial', sans-serif;
  font-weight: 900;
  content: '\f00c Check';
  background: #2196F3;
  color: #fff;
  left: 0px;
  bottom: 100%;
  border-radius: 5px 5px 0 0;
  padding: 3px 7px 1px;
  font-size: 0.7em;
  line-height: 1;
  letter-spacing: 0.05em
}

<div class="gsss_h">
  <h1 class="with_tab_point">美しい見出しのデザイン</h1>
</div>

.gsss_h h1.with_tab_point {
  position: relative;
  border-top: solid 2px #80c8d1;
  border-bottom: solid 2px #80c8d1;
  background: #f4f4f4;
  line-height: 1.4;
  padding: 0.4em 0.5em;
  margin: 2em 0 0.5em;
}

.gsss_h h1.with_tab_point:after {
  /*タブ*/
  position: absolute;
  font-family: "Font Awesome 5 Free", 'Quicksand', 'Avenir', 'Arial', sans-serif;
  font-weight: 900;
  content: '\f0a7\ POINT';
  background: #80c8d1;
  color: #fff;
  left: 0px;
  bottom: 100%;
  border-radius: 5px 5px 0 0;
  padding: 5px 7px 3px;
  font-size: 0.7em;
  line-height: 1;
  letter-spacing: 0.05em;
}

<div class="gsss_h">
  <h1 class="icon_on_top">美しい見出しのデザイン</h1>
</div>

.gsss_h h1.icon_on_top {
  position: relative;
  background: #f1f8ff;
  padding: 0.25em 0.5em;
  border-left: solid 2em #5c9ee7;
}

.gsss_h h1.icon_on_top:before {
  font-family: "Font Awesome 5 Free";
  content: "\f303";
  position: absolute;
  padding: 0em;
  color: white;
  font-weight: 900;
  left: -1.35em;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

<div class="gsss_h">
  <h1 class="inspiration">美しい見出しのデザイン</h1>
</div>

.gsss_h h1.inspiration {
  position: relative;
  padding-left: 35px;
}
.gsss_h h1.inspiration:before {
  position: absolute;
  font-family: "Font Awesome 5 Free";
  content: "\f0eb";
  background: #ffca2c;
  color: white;
  font-weight: 900;
  font-size: 15px;
  border-radius: 50%;
  left: 0;
  width: 25px;
  height: 25px;
  line-height: 25px;
  text-align: center;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
.gsss_h h1.inspiration:after {
  /*吹き出しのちょこんと出た部分*/
  content: '';
  display: block;
  position: absolute;
  left: 20px;
  height: 0;
  width: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 12px solid #ffca2c;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

<div class="gsss_h">
  <h1 class="circle_bar">美しい見出しのデザイン</h1>
</div>

.gsss_h h1.circle_bar {
  position: relative;
  background: #ffd98a;
  padding: 2px 5px 2px 25px;
  font-size: 20px;
  color: #474747;
  border-radius: 0 10px 10px 0;
}

.gsss_h h1.circle_bar:before {
  font-family: "Font Awesome 5 Free";
  content: "\f135";
  display: inline-block;
  line-height: 40px;
  position: absolute;
  padding: 0em;
  color: white;
  background: #ffa337;
  font-weight: 900;
  width: 40px;
  text-align: center;
  height: 40px;
  line-height: 40px;
  left: -1.35em;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  border: solid 3px white;
  border-radius: 50%;
}

<div class="gsss_h">
  <h1 class="shadow_circle">美しい見出しのデザイン</h1>
</div>

.gsss_h h1.shadow_circle {
  position: relative;
  background: #f4f4f4;
  padding: 2px 5px 2px 20px;
  font-size: 20px;
  color: #474747;
  border-radius: 0 10px 10px 0;
}

.gsss_h h1.shadow_circle:before {
  font-family: "Font Awesome 5 Free";
  content: "\f041";
  display: inline-block;
  line-height: 40px;
  position: absolute;
  padding: 0em;
  color: white;
  background: #ff6363;
  font-weight: 900;
  width: 40px;
  text-align: center;
  height: 40px;
  line-height: 40px;
  left: -1.35em;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  border-radius: 50%;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.29);
}

<div class="gsss_h">
  <h1 class="shadow_circle_3dim">美しい見出しのデザイン</h1>
</div>

.gsss_h h1.shadow_circle_3dim {
  position: relative;
  background: #eff4ff;
  padding: 2px 5px 2px 20px;
  font-size: 20px;
  color: #474747;
  border-radius: 0 10px 10px 0;
}

.gsss_h h1.shadow_circle_3dim:before {
  font-family: "Font Awesome 5 Free";
  content: "\f041";
  display: inline-block;
  line-height: 40px;
  position: absolute;
  padding: 0em;
  color: white;
  background: #81a1e4;
  font-weight: 900;
  width: 40px;
  text-align: center;
  height: 40px;
  line-height: 40px;
  left: -1.35em;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  border-radius: 50%;
  box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.29);
  border-bottom: solid 2px #4967b4;
}

<div class="gsss_h">
  <h1 class="flash">美しい見出しのデザイン</h1>
</div>

.gsss_h h1.flash {
  position: relative; /*相対位置*/
  padding-left: 0.8em; /*アイコン分のスペース*/
  line-height: 1.4; /*行高*/
}

.gsss_h h1.flash:before {
  font-family: "Font Awesome 5 Free";
  content: "\f246"; /*アイコンのユニコード*/
  font-weight: 900;
  position: absolute; /*絶対位置*/
  font-size: 1em; /*サイズ*/
  left: 0; /*アイコンの位置*/
  top: 0; /*アイコンの位置*/
  color: silver; /*アイコン色*/
  -webkit-animation: blink 0.5s ease-in-out infinite alternate;
  animation: blink 0.5s ease-in-out infinite alternate;
}

@-webkit-keyframes blink {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

5. かわいい見出し

<div class="gsss_h">
  <h1 class="cute_corner">美しい見出しのデザイン</h1>
</div>

.gsss_h h1.cute_corner {
  background: #b0dcfa; /*背景色*/
  padding: 0.5em;/*文字周りの余白*/
  color: white;/*文字を白に*/
  border-radius: 0.5em;/*角の丸み*/
  }

<div class="gsss_h">
  <h1 class="simple_circle_r">これは例文です(色1)</h1>
  <h1 class="simple_circle_y">これは例文です(色2)</h1>
  <h1 class="simple_circle_b">これは例文です(色3)</h1>
  <h1 class="simple_circle_g">これは例文です(色4)</h1>
</div>

.gsss_h h1[class^="simple_circle"] {
  position: relative;
  /*相対位置*/
  padding-left: 1.5em;
  /*アイコン分のスペース*/
  line-height: 1.4;
  /*行高*/
  color: black;
  /*文字色*/
}

.gsss_h h1[class^="simple_circle"]:before {
  font-family: "Font Awesome 5 Free";
  /*忘れずに*/
  content: "\f111";
  /*アイコンのユニコード*/
  font-weight: 900;
  position: absolute;
  /*絶対位置*/
  font-size: 1.4em;
  /*サイズ*/
  left: 0;
  /*アイコンの位置*/
  top: -0.2em;
  /*アイコンの位置*/
}

.simple_circle_r:before {
  color: #ffa7a1;
}

.simple_circle_y:before {
  color: #ffdfa1;
}

.simple_circle_b:before {
  color: #a1ceff;
}

.simple_circle_g:before {
  color: #b1eab8;
}

<div class="gsss_h">
  <h1 class="thinking">美しい見出しのデザイン</h1>
</div>

.gsss_h h1.thinking {
  position: relative;
  padding: 8px 15px;
  margin-left: 40px;
  background: #def3ff;
  border-radius: 20px;
}

.gsss_h h1.thinking:before {
  font-family: "Font Awesome 5 Free";
  content: "\f111";
  font-weight: 900;
  position: absolute;
  font-size: 15px;
  left: -40px;
  bottom: 0;
  color: #def3ff;
}

.gsss_h h1.thinking:after {
  font-family: "Font Awesome 5 Free";
  content: "\f111";
  font-weight: 900;
  position: absolute;
  font-size: 23px;
  left: -23px;
  bottom: 0;
  color: #def3ff;
}

<div class="gsss_h">
  <h1 class="pad">美しい見出しのデザイン</h1>
</div>

.gsss_h h1.pad {
  position: relative;/*相対位置*/
  padding-left: 1.2em;/*アイコン分のスペース*/
  line-height: 1.4;/*行高*/
  color: #7b6459;/*文字色*/
}

.gsss_h h1.pad:before {
  font-family: "Font Awesome 5 Free";
  content: "\f1b0";/*アイコンのユニコード*/
  font-weight: 900;
  position: absolute;/*絶対位置*/
  font-size: 1em;/*サイズ*/
  left: 0;/*アイコンの位置*/
  top: 0;/*アイコンの位置*/
  color: #ff938b; /*アイコン色*/
}

<div class="gsss_h">
  <h1 class="bg_circle">美しい見出しのデザイン</h1>
</div>

.gsss_h h1.bg_circle {
  position: relative;
  color: #333;
  display: inline-block;
  margin: 47px 0;
  text-shadow: 0 0 2px white;
}
.gsss_h h1.bg_circle:before {
  content: "";
  position: absolute;
  background: #ffd69d;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  z-index: -1;
}

<div class="gsss_h">
  <h1 class="bg_circle_stich">美しい見出しのデザイン</h1>
</div>

.gsss_h h1.bg_circle_stich {
  position: relative;
  color: #333;
  display: inline-block;
  margin: 47px 0;
  text-shadow: 0 0 2px white;
}

.gsss_h h1.bg_circle_stich:before {
  content: "";
  position: absolute;
  background: #a9e1ff;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  top: 50%;
  border: dashed 1px white;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: -1;
  box-shadow: 0px 0px 0px 5px #a9e1ff;
}

<div class="gsss_h">
  <h1 class="bg_circle_top">美しい見出しのデザイン</h1>
</div>

.gsss_h h1.bg_circle_top {
  position: relative;
  color: #333;
  text-shadow: 0 0 2px white;
}
.gsss_h h1.bg_circle_top:before {
  content: "";
  position: absolute;
  background: #9de5ff;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  top: 50%;
  /* border: dashed 1px white; */
  left: -15px;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: -1;
}

<div class="gsss_h">
  <h1 class="bg_circle_filled">美しい見出しのデザイン</h1>
</div>

.gsss_h h1.bg_circle_filled {
  position: relative;
  color: #333;
  text-shadow: 0 0 2px white;
  background: #e0f3ff;
  z-index: -4;
  border-radius: 0 10px 10px;
}

.gsss_h h1.bg_circle_filled:before {
  content: "";
  position: absolute;
  background: #9de5ff;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  top: 50%;
  left: -15px;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: -1;
}