目次
横並びカードのコーディング Inline-Block編
HTMLはBase編と同じです。今回はdisplay: inline-block;を使ってカードを横並びにします。
displayプロパティについてはサルワカさんの記事がこれ以上ないくらいわかりやすいです。
.card
base.scssと同じ。
.card__items
6つのカードを括るクラス。Flexboxでは親要素でdisplayを使いますが、inline-blockの場合は子要素で使う点に注意です。上マージンが56pxと少しだけ狭いですね。なぜだろう？他はbase.scssと同じです。
追記：font-size: 0;の指定にはこんな意味があったんですね！
.card__item
カード1つ1つのボックス。ここでdisplay: inline-block;の出番です。フォントサイズを指定します。calcと擬似要素を駆使していきます。タブレット版を2列に、スマホ版を1列にします。
.media
base.scssと同じ。
.media__img
base.scssと同じ。
.media__body
base.scssと同じ。
.media__title
base.scssと同じ。
.media__content
base.scssと同じ。
コメント