フタのついた箱みたいなボックスの形ですね。ウィジェットと呼ばれたりします。
ニュース系のコーディング Widget編 HTML
まずは大きく2つのボックスを作ります。「おしらせ」と「ブログ」の2つですね。
その中をさらにheadとbodyに分けます。head内に見出しと「more…」、body内にメタ情報とタイトルを入れます。それをそれぞれ3つに複製すれば出来上がりです。かなり入れ子が複雑で深くなりますがVS Codeのインデントを見ながら構造を確認していきましょう。
ニュース系のコーディング Widget編 CSS
.news-widget
ニュースセクション全体を括るクラス。特に指定はありません。
.news-widget__inner
ニュースセクションのインナー。特に指定はありません。
.news-widget__items
2つのボックスを括るクラス。2つのボックスをFlexboxで横並びにします。上マージンを広めにとります。SP版ではdisplay: block;にして縦並びに。マージンを狭めにします。
.news-widget__item
そろそろお馴染みになってきた、DAY13の「（100% / カード枚数 – 余白の幅 * 余白の数 / カード枚数 )」がここでも使えますね。50％だから計算が楽！例によって最後の余白のみなくします。(PC/SP両方)スマホ版では幅100％にして縦並び表示に。margin-bottomでボックスとボックスの間を空けます。
.info-widget
ボックス1つ1つを括るクラス。周りにボーダーを引いて角丸にします。はみ出した部分は隠す設定に。入れ子にして「ブログ」のブロックの方のボーダーカラーも指定します。BEMのModifierが出てきました。
.info-widget__head
ボックスの見出しとリンクの塊。背景色を指定します。パディングをとって高と幅を出します。position: relative;にし、あとで出てくる「more…」の配置の準備をします。上記と同じように入れ子にして「ブログ」の方の見出しの背景色も指定します。
.info-widget__heading
ボックスの見出し。フォントを大きめ、太めの白文字にします。
.info-widget__link
リンク(「more…」の部分)posithion: absolute;を設定し、top、right、translateで位置を調整します。aタグをボタン化します。
.info-widget__body
それぞれのボックス内の3つのトピックを括るクラス。左右のパディングをとります。
.info-widget__items
それぞれのボックス内の3つのトピックのインナー。特に指定はありません。
.info-widget__item
トピックのひとつひとつ。メタ情報とタイトルに分かれています。ここでもdisplay: flex;の出番です。下線を引きます。例によって最後のボーダーのみnoneにします。上下のパディングを少しとります。
.info-widget__meta
幅を100pxで固定します。positionは相対配置にします。
.info-widget__time
line-heightを指定。.m-attentionに擬似要素でラベルをくっつけます。ここで出てくる top、leftはなぜ要るのか、calcが使われているのは何故かがよくわかりませんでした。これも後でSlackで質問します。
.info-widget__title
トピックスのタイトル。幅は100％からメタ情報の幅を引く式です。line-heightは行間÷フォントサイズの式で指定します。フォントを太めにし、左パディングを少しつけます。aタグにリンク時の挙動を指定したら完了です。
これでニュース系のコーディングは終わりです。DAY 17 テーブルとGoogleMap（iframe）埋め込みのコーディングです。
コメント