こんにちは！Web制作の世界へようこそ。
コードを書いていると、「これ、どうやって並べるのが一番きれいかな？」と悩む場面、たくさんありますよね。特に、HTMLの「リスト」と聞くと、`
- `や`
- `
- `
- `
- `
: 見出し（単語） - `
- `
: 内容（説明） - `と`
- `が縦に積み重なって表示されます。でも、カタログやプロフィール欄のように「左に見出し、右に内容」と並べたいこと、ありますよね。
そんな時、昔は苦労したものですが、今はFlexboxを使えば一瞬です。
Flexboxでスマートに並べる
親要素である`
- `に`display: flex;`を与えるだけ。これで中身が横並びになります。
- `と`
- `が並ぶような表形式に近いものなら、CSS Gridを使うのが最強です。
dl {
display: grid;
grid-template-columns: 120px 1fr; / 左を120px、右を残り全部(1fr)に /
gap: 10px; / 見出しと内容の間の隙間を確保 /
}`grid-template-columns`を使えば、見出しの幅をピクセル指定で固定しつつ、内容は余白に合わせて自動調整してくれるので、レイアウトが崩れる心配がほとんどありません。`gap`を使えば余白の調整も一発です。便利すぎて、初めて知ったときは感動しましたよ！
—
最後に：つまずいたって大丈夫！
CSSのレイアウトは、最初はパズルのように感じるかもしれません。「あれ、思ったように動かない！」と頭を抱える夜もあるでしょう。でも、それはあなたが「きれいに見せたい」と真剣に向き合っている証拠です。
まずは`
- `、`
- `、`
- `を書いてみて、ブラウザで眺めてみてください。そして、`display: flex;`や`display: grid;`を一つずつ試してみる。その繰り返しの先で、きっと「あ、こうすればいいんだ！」という発見が待っています。
Web制作は、失敗すらも「経験値」になる面白い世界です。焦らず、楽しみながらコーディングを楽しんでいきましょうね。また何かわからないことがあれば、いつでも聞いてください！応援しています。
dl {
display: flex;
flex-wrap: wrap; / 内容が増えたら折り返せるように /
border-bottom: 1px solid #eee;
}dt {
width: 30%; / 見出しの幅を固定 /
font-weight: bold;
color: #555;
}dd {
width: 70%; / 残りの幅を内容に /
margin: 0; / ブラウザ標準の余白をリセット /
}ここでのポイント！
`dd`には初期状態でブラウザが余白（margin）を持たせていることが多いので、`margin: 0;`で一度リセットしてあげるのが、レイアウトを崩さないための「現場の知恵」です。—
レスポンシブ：スマホで見たときにどうする？
パソコンでは横並びで美しくても、スマホの狭い画面で無理やり横に並べると、文字がギュウギュウに押しつぶされて読みづらくなってしまいますよね。
そんな時は、メディアクエリを使って、「ある一定の幅より狭くなったら縦積みに戻す」という切り替えを行いましょう。
/ スマホなどの小さな画面のときは縦並びに /
@media (max-width: 600px) {
dt, dd {
width: 100%; / それぞれ横幅いっぱいに広げる /
}
}これだけで、パソコンでは整然と並び、スマホではスマホらしく縦にスッキリと表示されるようになります。「どちらが良いか」ではなく「デバイスに合わせて柔軟に変化させる」。これが今のWeb制作の基本であり、優しさですね。
—
さらに一歩進んだ「CSS Grid」という選択肢
もし、複数の`
- `を思い浮かべる方が多いと思いますが、実は現場でめちゃくちゃ重宝するのが`
- `（記述リスト）
今日は、この`
- `をCSSでかっこよく、そしてレスポンシブにも強くレイアウトするコツを、一緒に紐解いていきましょう。
—
そもそも「記述リスト（dl）」って何者？
`
- `（Definition List）は、いわば「辞書」や「商品スペック表」のようなものです。
例えば、「名前：たろう」「趣味：散歩」といったペアを作りたいとき、ただの`
- `を使うことで「これは見出しと説明のセットですよ」とブラウザや検索エンジンに正しく伝えることができます。これがセマンティック（意味のある）なマークアップというやつですね！
—
現場でよく使う「dtとddを横並びにする」テクニック
初期状態の`
- `は、`
コメント