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

ボックス

カード型ボックスのデザインテンプレート一覧です。

スタイリッシュなボックス

  • RESULT
  • HTML
  • CSS
  • コピー
    <div class="msr_box05">
      <a href="#">
        <img src="/stylerecipe_img/dummy_img03.png" width="230" height="110" alt="img"/>
        <h3 class="ttl">box</h3>
        <p>テキストテキストテキストテキストテキストテキストテキストテキスト</p>
      </a>
    </div>
  • コピー
    .msr_box05 {
      width: 232px;
    }
    .msr_box05 a{
      border:1px solid #999999;
      box-sizing: border-box;
      color: #333333;
      display:block;
    }
    .msr_box05 a *{
      transition: 0.2s opacity ease-in-out;
      -o-transition: 0.2s opacity ease-in-out;
      -moz-transition: 0.2s opacity ease-in-out;
      -webkit-transition: 0.2s opacity ease-in-out;
    }
    .msr_box05 p {
      font-size: 14px;
      line-height: 1.6;
      padding: 8px;
    }
    .msr_box05 .ttl {
      font-size: 18px;
      line-height: 1.6;
      padding: 8px 8px 0;
    }
    .msr_box05 a:hover *{
      opacity: 0.8;
    }

検証済みブラウザ

  • Edge
  • FF
  • chrome
  • Safari

マテリアルなボックス

  • RESULT
  • HTML
  • CSS
  • コピー
    <div class="msr_box03">
      <a href="#">
        <h3 class="ttl">box</h3>
        <img src="/stylerecipe_img/dummy_img03.png" width="230" height="110" alt="img"/>
        <p>テキストテキストテキストテキストテキストテキストテキストテキスト</p>
      </a>
    </div>
  • コピー
    .msr_box03 {
      background-color: #1B73BA;
      width: 230px;
    }
    .msr_box03 a{
      box-sizing: border-box;
      box-shadow: 0px 2px 2px rgba(0,0,0,0.2);
      -moz-box-shadow: 0px 2px 2px rgba(0,0,0,0.2);
      -webkit-box-shadow: 0px 2px 2px rgba(0,0,0,0.2);
      color: #000000;
      display:block;
      position: relative;
      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_box03 img {
      box-shadow: 0px 2px 2px rgba(0,0,0,0.2);
      -moz-box-shadow: 0px 2px 2px rgba(0,0,0,0.2);
      -webkit-box-shadow: 0px 2px 2px rgba(0,0,0,0.2);
      display: block;
    }
    .msr_box03 p {
      background-color: #FFFFFF;
      font-size: 13px;
      line-height: 1.6;
      padding: 8px;
    }
    .msr_box03 .ttl {
      background-color: #1B73BA;
      box-shadow: 0px 2px 2px rgba(0,0,0,0.2);
      -moz-box-shadow: 0px 2px 2px rgba(0,0,0,0.2);
      -webkit-box-shadow: 0px 2px 2px rgba(0,0,0,0.2);
      color: #FFFFFF;
      font-size: 16px;
      line-height: 1.6;
      padding: 8px;
      position: relative;
    }
    
    /* 青の三角形 */
    .msr_box03 .ttl:before {
      border: 7px solid transparent;
      border-top: 7px solid #1B73BA;
      box-sizing: border-box;
      content: "";
      height: 7px;
      left: 50%;
      margin:0 0 0 -7px;
      position: absolute;
      top: 100%;
      width: 14px;
    }
    .msr_box03 a:hover{
      opacity: 0.8;
    }

検証済みブラウザ

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

フラットなボックス

  • RESULT
  • HTML
  • CSS
  • コピー
    <div class="msr_box02">
      <a href="#">
        <img src="/stylerecipe_img/dummy_img02.png" width="230" height="150" alt="img"/>
        <h3 class="ttl">box</h3>
        <p>テキストテキストテキストテキストテキストテキストテキストテキスト</p>
      </a>
    </div>
  • コピー
    .msr_box02 {
      background-color: #1B73BA;
      width: 230px;
    }
    .msr_box02 a{
      box-sizing: border-box;
      display:block;
      position: relative;
      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_box02 p {
      color: #FFFFFF;
      font-size: 13px;
      line-height: 1.6;
      padding: 0 20px 8px 8px;
    }
    .msr_box02 .ttl {
      color: #FFFFFF;
      font-size: 16px;
      font-weight: bold;
      line-height: 1.6;
      padding: 8px 20px 4px 8px;
    }
    .msr_box02 a:after {
      background-image: url(/stylerecipe_img/flat_white_box01.png);
      background-repeat: no-repeat;
      bottom: 5px;
      content: " ";
      display: inline-block;
      *display:inline;
      *zoom:1;
      height: 20px;
      position: absolute;
      right: 5px;
      width: 20px;
    }
    .msr_box02 a:hover{
      opacity: 0.8;
    }

検証済みブラウザ

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

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

無難なボックス

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