目次
横並びカードのコーディング float編
今となってはあまり使われないかもしれませんが、floatも押さえておきます。HTMLはタイトル以外base.htmlと同じです。
floatの説明はちづみさんのツイートが分かりやすい！
✅なくそう！floatわけわからん！の壁！
html、css初心者泣かせ(自分も泣いた)のfloatについて図解しました。#100DaysOfCode #30DAYSトライアル pic.twitter.com/L2Tm4WMmBr— ちづみ (@098ra0209) 2019年1月16日
.card
base.scssと同じ。
.card__items
overflow: hidden;を指定して、はみ出た部分を隠す設定にします。あとはbase.scssと同じです。
.card__item
カード1つ1つのボックス。ここでfloat: left;を指定します。スマホ版にはfloat: none;と記述します。あとはbase.scssと同じです。
.media
base.scssと同じ。
.media__img
base.scssと同じ。
.media__body
base.scssと同じ。
.media__title
base.scssと同じ。
.media__content
base.scssと同じ。
今回は楽でしたね！次からはHTMLもかなり変わります。
コメント