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

無難な見出し

  • 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
  • このエントリーをはてなブックマークに追加

その他の見出し

Heading01

Heading02

Heading03

Heading04

スタイリッシュな見出し

Heading01

Heading02

Heading03

Heading04

コミック風の見出し

Heading01

Heading02

Heading03

Heading04

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

要素一覧