東京都府中市、渋谷区のWEB制作会社Maromaroのブログです

フラットな見出し

  • 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

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

その他の見出し

Heading01

Heading02

Heading03

Heading04

スタイリッシュな見出し

Heading01

Heading02

Heading03

Heading04

コミック風の見出し

Heading01

Heading02

Heading03

Heading04

マテリアルな見出し
見出しの一覧をもっと見る

要素一覧