ホームをモジュールに分割する

3つに分割してできたヒーローコンテナ、メインコンテナ、ニュースコンテナ、それぞれに含まれるコンテンツをさらに細かくモジュールに分割する

ヒーローコンテナのモジュール

ヒーローコンテナに含まれるのは 1枚の大きな写真画像

ページの上部に表示する、目を引く画像のことをヒーロー画像と呼ぶが、これをビューポートの幅一杯に伸縮するように作る

CSS のポジション機能を使って写真画像の上にロゴの画像を重ねて配置する

メインコンテナには合計6つのモジュールがあり、さまざまな CSS テクニックを駆使して作成する

そのうち Labo 253 で取り上げるカード型レイアウトでは、CSS の比較的新しい機能であるグリッドレイアウトを使用する

Labo 252 でもグリッドレイアウトの機能を一部使用し、少ない CSS 記述量でテキストをボックスの上下左右中央揃えで配置する

ニュースコンテナには見出しとテーブル形のリスト、2つのモジュールが含まれる

両方同時に、Labo 256 で取り上げる

このうちテーブル形のリストでは、箇条書きの一種である <dl> <dt> <dd> を使った HTML を、テーブルのように整形して表示する

フレックスボックスを利用して 2つの要素を橫に並べる