デイトラWeb制作コース中級編DAY16 ニュース系のコーディング③

.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）埋め込みのコーディングです。