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

無難なボックス

  • RESULT
  • HTML
  • CSS
  • コピー
    <div class="msr_box01">
      <a href="#">
        <img src="/stylerecipe_img/dummy_img01.png" width="210" height="140" alt="img"/>
        <h3 class="ttl">box</h3>
        <p>テキストテキストテキストテキストテキストテキストテキストテキスト</p>
      </a>
    </div>
  • コピー
    .msr_box01 {
      background-color: #1B73BA;
      width: 230px;
    }
    .msr_box01 a{
      background-color: #FFFFFF;
      border: 1px solid #B9B9B9;
      box-sizing: border-box;
      color:#000000;
      display:block;
      padding: 8px;
      transition: 0.2s ease-in-out;
      -o-transition: 0.2s ease-in-out;
      -moz-transition: 0.2s ease-in-out;
      -webkit-transition: 0.2s ease-in-out;
    }
    .msr_box01 img{
      margin:0 0 5px;
    }
    .msr_box01 .ttl {
      font-size: 16px;
      line-height: 1.6;
    }
    .msr_box01 p {
      font-size: 13px;
      line-height: 1.6;
    }
    .msr_box01 a:hover{
      opacity: 0.8;
    }

検証済みブラウザ

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

その他のボックス

ボックスの一覧をもっと見る

要素一覧