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

市松レイアウト

これは市松レイアウトですね!炭治郎の服の柄でお馴染みの。コーディングの強化書のP100に出ています。


英単語の意味メモ。

  • alternate…交互に行う
  • reverse…逆行
目次

横並びカードのコーディング Voice編 HTML

カードの中身を大きく画像と見出し&テキストのブロックに分けます。二番目のブロックにvoice-card–reverseを指定して見出し&テキストが先に来るようにします。

横並びカードのコーディング Voice編 CSS

.voice

base.scssの.cardと同じ。

.voice__inner

base.scssの.card__innerと同じ。

.voice__items

上マージンが広めになっています。

.voice__item

上マージンを広めにとり、&:first-child(一番上のカード)のみマージン0に。

.voice-card

カードの1枚1枚。ここでFlexboxの登場です。白背景にボックスシャドウを忘れず。SP版は display: block;にして縦並びにします。

.voice-card–reverse

今回の要の部分です。2番目のカードだけ見出し&テキストのブロックが先に来るようにします。flex-direction: row-reverse;と書くだけで反対になります。

.voice-card__img

PC版では画像とテキスト半々の画面になるため50%、SP版では幅100%にします。

.voice-card__body

こちらはテキストを括るクラス。画像と同じくPC版で横幅を50%、SP版で100%にします。文字色をグレーに。あとで右下に回答者名を入れるためposition: relative;にしておきます。

ここのパディングは、カンプでは上下左右とも32pxとなっていますが、回答例では違っていますね。これもSlackで質問します。

.voice-card__lead

フォントを太め、大きめに設定します。数値はカンプから読み取りましょう。

.voice-card__content

リードとの間を開けるため上マージンを少し取ります。line-heightは行間÷文字サイズの式を入れます。

.voice-card__auther

position: absolute;で回答者名を右下に入れます。位置をrightとbottomで調節します。タブレット版の調整を忘れずに。SP版ではposition: static;とし、初期値に戻しておきます。右寄せにすれば完了です。

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

この記事を書いた人

コメント

コメントする

CAPTCHA


目次