30days

カードの作り方【デイトラ解説】

こんにちは、Web制作フリーランスで活動しているヒロ(@hirokiweblax)です。

毎日1セクションのデイトラ解説です。
本日はカードセクションをやっていこうと思います!

正直カードの作り方はHPcodeに乗っているので、あまり書くことがありません。
なので、その他のコーディングで悩みそうなポイントを書いています。

本日のポイント

・calc関数
・擬似クラスnth-child

ピクセルパーフェクト、レスポンシブは行ってないので、コーディング時の参考ぐらいに思ってくれれば幸いです。
ご質問があれば答えますのでDMでお問い合わせください。@hirokiweblax

完成形の確認

完成系

HTML

<section id="card">
<div class="inner">
  <div class="title">
    <h2>Card</h2>
    <div class="title-line"></div>
  </div>
  <div class="cards">
    <div class="card">
      <div class="card-img"><img src="img/card-img.svg" alt="ダミー"></div>
      <div class="card-txt">
        <div class="card-txt-txtl">
          タイトルタイトル
        </div>
        <div class="card-txt-txts">
          テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card-img"><img src="img/card-img.svg" alt="ダミー"></div>
      <div class="card-txt">
        <div class="card-txt-txtl">
          タイトルタイトル
        </div>
        <div class="card-txt-txts">
          テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card-img"><img src="img/card-img.svg" alt="ダミー"></div>
      <div class="card-txt">
        <div class="card-txt-txtl">
          タイトルタイトル
        </div>
        <div class="card-txt-txts">
          テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card-img"><img src="img/card-img.svg" alt="ダミー"></div>
      <div class="card-txt">
        <div class="card-txt-txtl">
          タイトルタイトル
        </div>
        <div class="card-txt-txts">
          テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card-img"><img src="img/card-img.svg" alt="ダミー"></div>
      <div class="card-txt">
        <div class="card-txt-txtl">
          タイトルタイトル
        </div>
        <div class="card-txt-txts">
          テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card-img"><img src="img/card-img.svg" alt="ダミー"></div>
      <div class="card-txt">
        <div class="card-txt-txtl">
          タイトルタイトル
        </div>
        <div class="card-txt-txts">
          テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
        </div>
      </div>
    </div>
  </div>
</div><!-- .inner -->
</section>

 

CSS

#card{
  padding:77px 0 117px 0;
  background-color:#EFEFEF;
  .inner{
    max-width: 1086px;
    width: 100%;
    margin: 0 auto;
  }

  .title{
    text-align: center;
    h2{
      color:#333333;
      font-size: 60px;
      font-weight: bold;
    }
  }

  .title-line{
    margin: 54px auto 0 auto;
    width:105px;
    height:3px;
    background-color: #3F51B5;
  }
  .cards{
    display: flex;
    flex-wrap:wrap;
    margin-top: 68px;
  }
  .card{
    padding: 16px 16px 32px 16px;
    width: calc(33.33333333% - 20px);
    background-color:white;
    margin-right: 30px;
    margin-bottom: 20px;
    &:nth-child(3n){
      margin-right: 0;
    }
  }

  .card-txt-txtl{
    color:#6F7579;
    font-size: 20px;
    font-weight: bold;
    margin-top: 29px;
  }

  .card-txt-txts{
    color:#6F7579;
    font-size: 16px;
    font-weight: bold;
    margin-top: 24px;
    line-height: 24px;
  }
  *, *:before, *:after {
    -webkit-box-sizing: border-box;
    box-sizing: border-box
  }
}

タイトル作成

今回のタイトル作成時には2点ポイントがあります。
タイトル上の余白はpaddingで作る
線はdiv要素で作成

セクションの境目から「Card」まで余白があると思いますが、ここはpaddingで指定してあげてください。

#card{
  padding:77px 0 117px 0;
  background-color:#EFEFEF;
}

 

ちなみにmargin-topで余白を作ろうとするとこうなります

ここは決め事として、セクションの一番親要素にpaddingをつけると覚えときましょう。
セクションの一番下の余白も同様にpaddingで余白を作ります。

線の作り方は色々ありますが、今回はdiv要素にbackground-colorで作りました。

.title-line{
    margin: 54px auto 0 auto;
    width:105px;
    height:3px;
    background-color: #3F51B5;
  }

リンク先はhr要素で作っていますが、divでも構いません。
僕は馴染みのあるdivを使っています。

カードの作り方

カードの作り方はHPcodeにまとまっているのでそちらを参考にしてください。
ぶん投げるようですが、はにわまんさんの方が圧倒的にわかりやすいので、、、

ちなみにSassでも演算が使えますが、同じ単位でしか計算できません
今回のように%とpxが混ざるような場合はcalcを使いましょう。

最後にbox-sizingを覚えておきましょう。

box-sizing:border-box;を指定しないとカードの幅が
width + paddingの値になってしまいます。
カードが2列になってしまう人はこれが原因かもしれません。

デフォルトのbox-sizing:content-boxはなかなか使うことがないので、
コーディングの最初に全体にbox-sizingを指定することをオススメします。

僕は以下のコードをreset.cssに書いて必ず読み込まれるようにしています。

*, *:before, *:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box
}

 

これで終了です、お疲れ様でした。

補足

Codepen

See the Pen
カード
by hiro (@hirog)
on CodePen.

See the Pen
カード
by hiro (@hirog)
on CodePen.