ブログデザイン備忘録～カードデザイン

　Webページでカード(タイル)デザインのサイトをよく見かけると思うが、CSSのFlexboxを用いて簡単に実装できる例がいろいろなサイト(例えばカードデザインのポイントと実装方法 | Webクリエイターボックス)で紹介されており、少し試してみることにした。

カード自体のデザインは、例えば写真、見出し、説明という構成で以下のようなHTML構造のとき

<section class="card">
  <img class="card-img" src="" alt="">
  <div class="card-content">
    <h1 class="card-title">カードの見出し</h1>
    <p class="card-text">カードの説明。</p>
  </div>
</section>

境界がわかるようにbox-shadowを用いて影を設定するとカードっぽく見えるようになる。border-radiusで角を落としておくと丸みのあるデザインになる。 widthやheightは%で設定しておくとある程度ウィンドウサイズに適用できるが、きっちりデザインするにはpx単位でメディアクエリで対応したほうがよいかもしれない。

.card {
  width: 20%;
  height:100%;
  background: #fff;
  border-radius: 8%;
  box-shadow: 0 5% 5% #ccc;
}
.card-img{
  border-radius: 8% 8% 0 0;
  max-width: 100%;
  height: auto;
}

カードをとりあえず中央に2枚配置するには以下のようにする。justify-content:center;とalign-items:center;で中央寄せにする。

.container{
  display:flex;
  justify-content:center;
  align-items:center;
}

このままだと2枚のカードの間隔ないのでmargin-rightでカードの間隔を調整する。もしカードに対応するコンテンツがたくさんある場合は、justify-content:space-between;とする方が楽。

.card {
  margin-right:5%;
}

マウスオーバー時に動きを加えつつ、色味をグレイからカラーに変化させるためにtransformとfilterを:hoverで変化するように設定する。

.card {
 transition-duration: 0.4s;
 filter: grayscale(100%);
}
.card:hover{
  transform:translateY(-5px);
  filter: grayscale(0%);
}

全体を実装した例を以下に示す。 1xだとレイアウトが崩れてしまうので、x0.5またはx0.25やコード表示を消すとそれらしいレイアウトになる。

See the Pen Card design by ATATAT (@atatat) on CodePen.

つれづれなる備忘録

日々の発見をあるがままに綴る

ブログデザイン備忘録～カードデザイン