東京都府中市のWeb制作会社が運営するブログです。

見出し

見出しのデザインテンプレート一覧です。

スタイリッシュな見出し

  • RESULT
  • HTML
  • CSS
  • Heading01

    Heading02

    Heading03

    Heading04

  • コピー
    <h1 class="msr_h105">Heading01</h1>
    <h2 class="msr_h205">Heading02</h2>
    <h3 class="msr_h305">Heading03</h3>
    <h4 class="msr_h405">Heading04</h4>
  • コピー
    .msr_h105 {
      border-bottom:1px solid #999999;
      color: #333;
      font-size: 32px;
      margin: 0 0 20px;
      padding: 0 0 8px;
    }
    .msr_h205 {
      border-bottom:1px solid #999999;
      color: #333;
      font-size: 24px;
      margin: 0 0 20px;
      padding: 0 0 8px;
    }
    .msr_h305 {
      border-bottom:1px solid #999999;
      color: #333;
      font-size: 20px;
      margin: 0 0 20px;
      padding: 0 0 8px;
    }
    .msr_h405 {
      color: #333;
      font-size: 20px;
      margin: 0 0 20px;
    }

検証済みブラウザ

  • Edge
  • FF
  • chrome
  • Safari

コミック風の見出し

  • RESULT
  • HTML
  • CSS
  • Heading01

    Heading02

    Heading03

    Heading04

  • コピー
    <h1 class="msr_h104">Heading01</h1>
    <h2 class="msr_h204">Heading02</h2>
    <h3 class="msr_h304">Heading03</h3>
    <h4 class="msr_h404">Heading04</h4>
    
  • コピー
    .msr_h104 {
      border: 5px solid #000000;
      font-size: 32px;
      font-weight: bold;
      margin: 0 0 20px;
      padding: 15px 20px;
    }
    .msr_h204 {
      background: #000000;
      color: #fff;
      font-size: 28px;
      font-weight: bold;
      margin: 0 0 20px;
      padding: 10px 20px;
    }
    .msr_h304 {
      border-left: 5px solid #000000;
      font-size: 20px;
      font-weight: bold;
      margin: 0 0 20px;
      padding:0 0 0 10px;
    }
    .msr_h404 {
      font-size: 20px;
      font-weight: bold;
      margin: 0 0 20px;
    }

検証済みブラウザ

  • Edge
  • FF
  • chrome

マテリアルな見出し

  • RESULT
  • HTML
  • CSS
  • Heading01

    Heading02

    Heading03

    Heading04

  • コピー
    <h1 class="msr_h103">Heading01</h1>
    <h2 class="msr_h203">Heading02</h2>
    <h3 class="msr_h303">Heading03</h3>
    <h4 class="msr_h403">Heading04</h4>
  • コピー
    .msr_h103 {
      background: #1B73BA;
      box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 2px 0px;
      -moz-box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 2px 0px;
      -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 2px 0px;
      box-sizing: border-box;
      color: #fff;
      font-size: 30px;
      margin: 0 0 20px;
      padding: 5px 20px 5px 25px;
      position: relative;
      width: 100%;
    }
    
    /* h1白の三角形 */
    .msr_h103:before {
      border-bottom: 10px solid transparent;
      border-left: 10px solid #FFF;
      border-right: 10px solid transparent;
      border-top: 10px solid transparent;
      content: " ";
      display: block;
      left: 0;
      margin: -10px 0 0 0;
      position: absolute;
      top: 50%;
    }
    .msr_h203 {
      background: #F8F8F8;
      border-top: 2px solid #1B73BA;
      box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 2px 0px;
      -moz-box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 2px 0px;
      -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 2px 0px;
      box-sizing: border-box;
      color: #1B73BA;
      font-size: 20px;
      font-weight: bold;
      margin: 0 0 20px;
      padding: 10px 15px 10px;
    }
    .msr_h303 {
      border-bottom: 2px solid #1B73BA;
      font-size: 18px;
      font-weight: bold;
      margin: 0 0 20px;
      padding-bottom: 5px;
    }
    .msr_h403 {
      border-left: 2px solid #1B73BA;
      font-size: 16px;
      font-weight: bold;
      margin: 0 0 20px;
      padding-left: 5px;
    }

検証済みブラウザ

  • IE9
  • IE10
  • Edge
  • FF
  • chrome
  • Safari

フラットな見出し

  • RESULT
  • HTML
  • CSS
  • Heading01

    Heading02

    Heading03

    Heading04

  • コピー
    <h1 class="msr_h102">Heading01</h1>
    <h2 class="msr_h202">Heading02</h2>
    <h3 class="msr_h302">Heading03</h3>
    <h4 class="msr_h402">Heading04</h4>
  • コピー
    .msr_h102 {
      background: #1B73BA;
      box-sizing: border-box;
      color: #FFFFFF;
      font-size: 30px;
      margin-bottom: 30px;
      padding: 8px 10px;
      position: relative;
      width: 100%;
    }
    
    /* h1青の三角形 */
    .msr_h102:before {
      border: 10px solid transparent;
      border-top: 10px solid #1B73BA;
      content: "";
      height: 0;
      left: 10px;
      position: absolute;
      top: 100%;
      width: 0;
    }
    .msr_h202 {
      border-bottom: 2px solid #1B73BA;
      box-sizing: border-box;
      font-size: 24px;
      font-weight: bold;
      margin: 0 0 20px;
      padding: 7px 0 2px 0;
    }
    
    /* h2アイコン */
    .msr_h202:before {
      background-image: url(/stylerecipe_img/flat_arrow_blue01.png);
      background-repeat: no-repeat;
      content: " ";
      display: inline-block;
     *display:inline;
     *zoom:1;
      height: 20px;
      padding: 0 12px 2px 0;
      vertical-align: middle;
      width: 10px;
    }
    .msr_h302 {
      font-size: 18px;
      font-weight: bold;
      margin: 0 0 20px;
    }
    
    /* h3アイコン */
    .msr_h302:before {
      background-image: url(/stylerecipe_img/flat_arrow_blue01.png);
      background-repeat: no-repeat;
      background-size: 8px 15px;
      content: " ";
      display: inline-block;
     *display:inline;
     *zoom:1;
      height: 15px;
      padding: 0 10px 2px 0;
      vertical-align: middle;
      width: 8px;
    }
    .msr_h402 {
      font-size: 16px;
      margin: 0 0 20px;
    }
    
    /* h4アイコン */
    .msr_h402:before {
      background-image: url(/stylerecipe_img/flat_arrow_blue01.png);
      background-repeat: no-repeat;
      background-size: 6px 11px;
      content: " ";
      display: inline-block;
     *display:inline;
     *zoom:1;
      height: 11px;
      padding: 0 10px 2px 0;
      vertical-align: middle;
      width: 6px;
    }

検証済みブラウザ

  • IE9
  • IE10
  • Edge
  • FF
  • chrome
  • Safari

画像へのパスは任意のものに書き換えてください!
使用している画像はこちら

無難な見出し

  • RESULT
  • HTML
  • CSS
  • Heading01

    Heading02

    Heading03

    Heading04

  • コピー
    <h1 class="msr_h101">Heading01</h1>
    <h2 class="msr_h201">Heading02</h2>
    <h3 class="msr_h301">Heading03</h3>
    <h4 class="msr_h401">Heading04</h4>
  • コピー
    .msr_h101 {
      background: linear-gradient(#FEFEFE, #F3F5F5);
      background: -o-linear-gradient(#FEFEFE, #F3F5F5);
      background: -ms-linear-gradient(#FEFEFE, #F3F5F5);
      background: -moz-linear-gradient(#FEFEFE, #F3F5F5);
      background: -webkit-linear-gradient(#FEFEFE, #F3F5F5);
      background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #F3F5F5), color-stop(0.00, #FEFEFE));
      border: 1px solid #AAAAAA;
      border-radius: 3px;
      box-sizing: border-box;
      font-size: 22px;
      margin: 0 0 20px;
      padding: 8px 10px 8px 26px;
      position: relative;
      width: 100%;
    }
    
    /* h1青の縦ライン */
    .msr_h101:before {
      background-color: #1B73BA;
      border-radius: 3px;
      content: " ";
      display: inline-block;
      height: 60%;
      left: 10px;
      margin-right: 10px;
      position: absolute;
      top: 20%;
      width: 6px;
    }
    .msr_h201 {
      background: linear-gradient(#F3F5F5, #fff);
      background: -o-linear-gradient(#F3F5F5, #fff);
      background: -ms-linear-gradient(#F3F5F5, #fff);
      background: -moz-linear-gradient(#F3F5F5, #fff);
      background: -webkit-linear-gradient(#F3F5F5, #fff);
      background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #fff), color-stop(0.00, #F3F5F5));
      border-bottom: 2px solid #1B73BA;
      box-sizing: border-box;
      font-size: 18px;
      margin: 0 0 20px;
      padding: 7px 0 5px 10px;
    }
    .msr_h301 {
      border-bottom: 2px solid #1B73BA;
      font-size: 18px;
      margin: 0 0 20px;
      padding-bottom: 5px;
    }
    .msr_h401 {
      font-size: 16px;
      margin: 0 0 20px;
    }
    
    /* h4青の縦ライン */
    .msr_h401:before {
      background-color: #1B73BA;
      border-radius: 2px;
      content: "";
      display: inline-block;
      height: 15px;
      margin-right:  8px;
      vertical-align: middle;
      width: 4px;
    }

検証済みブラウザ

  • IE10
  • Edge
  • FF
  • chrome
  • Safari
  • このエントリーをはてなブックマークに追加