これは市松レイアウトですね！炭治郎の服の柄でお馴染みの。コーディングの強化書の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;とし、初期値に戻しておきます。右寄せにすれば完了です。
コメント