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

2022年5月27日2023年2月18日

下の方にページネーションがついているタイプです。情報量が多いサイトでよく使われていますね。

ニュース系のコーディング Pagenation編 HTML

1行に3つのブロックが並んでいます。前回と同様日付とボタンは固定幅で、タイトルのみ可変にします。

下にページネーションを作ります。現在の表示ページをpagination__link–currentとします。

英単語の意味メモ

ニュースのセクションを括るクラス。特に指定はありません。

ニュースのセクションのインナー。特に指定はありません。

5つのトピックを包むクラス。幅とマージンを指定しておきます。最大幅も指定。

ひとつ一つのトピック。下ボーダーを引きます。

ページネーションを括るクラス。上マージンを広く空けます。

日付、タイトル、リンクを括るクラス。display: flex;で中身を横並びにします。パディングとります。SP版ではパディングを狭めにし、display: block;で縦並びにします。スマホ版の表示イメージはこんな感じ。

日付のクラス。widthを固定幅で指定します。上パディングを少しとります。SP版では幅を100％にし、上マージンをなくします。

タイトルのクラス。幅はcalcで指定。100％から日付とリンクの固定幅を引く数式を記述します。line-heightも行間÷フォントサイズの式で。上パディングを少し空けます。SP版では上パディングをなしに、上マージンを少し空けます。

moreリンクのクラス。widthを固定幅で指定します。SP版では幅100％で縦並びに。text-align: right;の指定が入ってるのはなぜだろう？マージンを少しとります。a要素をボタン化します。これまでと同じ要領でできます。

ページネーションのインナー。Flexboxを使って数字のボックスを横並びにします。justify-contentとalign-itemsを両方centerに。

ページネーションの1つ1つ。最後の要素を除いて右マージンをとります。SP版では狭めにします。a、span要素を正方形のボタンにします。min-widthで最小幅を指定しておきます。

a要素にリンク時の挙動を設定します。背景は透過。現在の表示ページがわかるようにspanタグに背景色をつけます。&.pagination__link–currentは使いませんでしたね。こちらに書いてもOKでしょう。

次はウィジェット編です。

よかったらシェアしてね！