デイトラWeb制作コース中級編DAY13 横並びカードのコーディング①

目次

横並びカードのコーディング 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周目に苦しむことにして今は流します。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

コメント

コメントする

CAPTCHA


目次