DAY2:XDから横並びのカードのコーディング

以下のXDのデザインカンプをレスポンシブ込でコーディングしてください。DAY1で作成したメインビジュアルの続きとして追加する形になります。

https://xd.adobe.com/spec/58f684bc-2fd2-4b50-561c-712a9d4bd30c-2ec7/
※ パスワードはSlackの「#トライアル課題」にピン留めしています。

XDの使い方は、こちらの「共有されたXDの使い方」の項目を参考にしていただけたらと思います。

Adobe XDのデザインカンプをURLで共有するメリットと使い方(※コーダー視点)

コーディングに必要な値はデザインカンプから取得できます。その他の条件としては、以下の条件で作成してください。

  • タブレット時は2列
  • スマホ時は1列

参考になりそうな記事

デザインカンプから横並びのカードなどを再現する時にわたしがよく使っているnth-childcalcの組み合わせです。計算ばっかですが、、、

CSSの「calc」と「nth-child」を組み合わせて余白を意識した横並び

余裕があったら…

※ 別のHTMLファイルに作成してください。

別の横並び系CSSを試す

改行ありで使える横並びには、以下の3つのパターンがあります。

  • display: flex;
  • display: inline-block;
  • float: 〇〇

今回のコーディングで使っていない上記の横並び系CSSを使って同様に再現できるかやってみてください。

カードの他のパターンのコーディング

カードの他のパターンもいくつか作ってみました。こちらも余裕があったらチャレンジしてみてください。
https://xd.adobe.com/spec/e25505bc-fa86-4093-4448-a5321aff099a-9464/

このページが役に立ったら
いいね!お願いします

運営の励みになります...。

関連の記事