テーブル形のリスト

ニュースの概要を掲載するために、日付を左側に、テキストを右側に分けて表示するモジュールを作成する

テーブルのように見えるが、HTML にはテーブル関連のタグではなく、説明リストを使用する

説明リストを使ってテーブル形のレイアウトを作る

<dl> <dt> <dd> を組み合わせて作る説明リストを使って、テーブルのような見た目のレイアウトを作成する

テーブルを使うよりも HTML が各段にシンプルになるので、良く使われるテクニックのひとつ

CSS にはフレックスボックスを使う

CSS のソースコードもシンプルで、説明リストの親要素(<dl>)に display: flax; を適用するだけで、<dt>、<dd> が横一列に並ぶ

テンプレートファイル

home.html
style.css