横並びカードのコーディング Base編
まずはプレーンなタイプからコーディングしていきます。HTMLはカードを6つ作っておきましょう。クラス名が動画と回答例で異なりますが回答例に合わせています。
今回はこれ紹介していいの?っていうくらい実用的な内容になってます。ロジックについてはBRISKのKさん、はにわまんさんのブログが詳しいのでそちらをご参照ください。
条件は以下の通りです。
- タブレット時は2列
- スマホ時は1列
それでは早速CSSの解説に入ります。
.card
背景色に薄いグレーを指定します。色番号はカンプから読み取ります。
.card__items
6つのカードを括るクラス。ここでFlexboxの登場です。flex-wrap: wrap;でアイテムを折り返すようにしておきます。マージンを忘れずに。おまかせちゃんのnote、モリさんのブログに画像付きで詳しい解説がありましたのでリンクしますね。計算式をスニペット登録しておくといいかもしれません。
.card__item
カード1つ1つのボックス。今回の要の部分です。calcと擬似要素を駆使していきます。タブレット版を2列に、スマホ版を1列にします。
.media
カードのインナー。よーく見ると角丸になってる点に注意です。白背景にパディングをとってポラロイドのような見た目にします。テキストの装飾はなしに。transitionプロパティが使われているのは何故でしょうか?これもSlackで質問してみます。
.media__img
カードの画像の部分。中央揃えにして、img要素にvertical-align: bottom;を指定することで隙間をなくします。
.media__body
タイトルと文章を括るクラス。上マージンを少し取ります。
.media__title
文字色とフォントサイズ、太さを変えます。カンプから読み取りましょう。
.media__content
上マージンを少し取ります。フォントの太さを変えます。ここでのポイントは、line-heightの指定の仕方です。行間÷フォントサイズとそのまま式を書く事で指定できます。
自分で書いておいて再現できるか不安ですが、2周目に苦しむことにして今は流します。
コメント