Flew-wrap:wrap; dd/dtを横並びに表示したいけど、謎の余白が……

現在勉強中で知識不足にはご容赦ください。
Visual Studio CodeでHTMLとCSSを用いてWeb作成の練習をしております。

実現したいこと

dl,dt,ddでFlew-wrap:wrap;を用いて年表をもっと簡単に作成したい。

　　　　　　　　　　　　　　　　　　　　↓理想図
イメージ説明

ソースコード

HTML
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <link rel="stylesheet" href="web11style.css">
8    <title>練習</title>
9</head>
10    <div class="section">
11        <h2 class="section-title">News</h2>
12        <div class="news-list">
13            <dl>
14                <dt>2022.XX.XX</dt>
15                <dd>ファッション誌「XXXXXX Vol.3」に掲載していただきました。</dd>
16                <dt>2021.XX.XX</dt>
17                <dd>XX月XX日    「XXXXXX」の販売を開始します。</dd>
18                <dt>2021.XX.XX</dt>
19                <dd>【お知らせ】テキストテキストテキストテキストテキストテキストテキスト</dd>
20                <dt>2020.XX.XX</dt>
21                <dd>ファッション誌「XXXXXX Vol.1」に掲載していただきました。</dd>
22                <dt>2020.XX.XX</dt>
23                <dd>【お知らせ】テキストテキストテキストテキストテキストテキストテキスト</dd>
24            </dl>
25        </div>
26</body>
27</html>

CSS
1.section{
2    max-width: 960px;
3    font-size: 0.9rem;
4    margin: 0 auto 130px auto;
5    padding: 0 4%;
6}
7.section-title{
8    text-align: center;
9    font-size: 1.5rem;
10    margin-bottom: 65px;
11}
12.news-list dl{
13    display:flex;
14    flex-wrap:wrap ;
15    padding: 0 50px;
16    margin-bottom: 20px;
17}
18.news-list dt{
19    width: 20%;
20    border-bottom: solid 1px #c8c8c8;
21    padding: 15px;
22}
23.news-list dd{
24    width: 70%;
25    padding: 15px;
26    border-bottom: solid 1px #c8c8c8;
27}
28.news-list dt:first-child{
29    border-top: solid 1px #c8c8c8;
30}
31.news-list dd:nth-child(2){
32    border-top: solid 1px #c8c8c8;
33}

試したこと

①dt,dd要素を２:７の割合に設定
②ddのmargin:0 0;で余白を０
→上記の2つで調整し、１列へすることは出来ます。

知りたい点【２点あります】

①dt（赤）:dd（青）=20:80のwidth割合の時、Flew-wrap:wrap;を使って横並びにする方法
②なぜこの黄色の余白が生まれるのか
イメージ説明

自分の言ってることがまとまりきっておらず申し訳ありません。
再度内容を更新しましたのでどなたか教えて頂きたいです。

m.ts10806

2022/09/11 05:07

どういうレイアウトを目指しているか図示いただけますか？

hatena19

2022/09/11 05:38 編集

> ぜなら各要素へcssを振らないといけなくなり、文字数が多くなるからです。 dt,dd を横並びにしたいが、 ①dt,dd要素を２:７の割合に設定 ②ddのmargin:0 0;で余白を０の方法より、もっとCSSの記述量が少ない方法はないか、という質問ですか。それとも、タイトルには「謎の余白が……」とありますが、この余白をなくしたいという質問でしょうか。もしそうなら、この余白は具体的にどこの余白のことでしょうか。

行動規範の内容に同意します

回答1件

ベストアンサー

CSSの記述量をなるべく少なくdtとdlを横並びさせたいというのが質問の趣旨なら、
dt に float: left; を設定でどうでしょう。

css
1.news-list dl{
2    padding: 0 50px;
3    margin-bottom: 20px;
4}
5.news-list dt{
6    float: left;
7    border-bottom: solid 1px #c8c8c8;
8    padding: 15px;
9}
10.news-list dd{
11    padding: 15px;
12    border-bottom: solid 1px #c8c8c8;
13}

知りたい点①について

dt dd の幅が余白も含めて100%かそれより若干少なめになるように設定します。
ただし、その場合、paddingやborderの幅も計算にいれる必要が出てくるので、いろいろ複雑になってきます。
そこで box-sizing: border-box; を設定して幅をpaddingやborderの幅も含めて計算するように指定します。(この辺の説明は長くなるので検索して調べてください。)

コード例

css
1* {
2  box-sizing: border-box;
3  margin: 0;
4}
5.news-list dl{
6    display: flex;
7    flex-wrap: wrap ;
8    padding: 0 50px;
9    margin-bottom: 20px;
10}
11.news-list dt{
12    width: 20%;
13    border-bottom: solid 1px #c8c8c8;
14    padding: 15px;
15}
16.news-list dd{
17    width: 80%;
18    padding: 15px;
19    border-bottom: solid 1px #c8c8c8;
20    margin: 0;
21}

知りたい点②について
dl dd はブラウザデフォルトの左右マージンを持っていますが、それですね。
それがあるために、幅が100%を超えて折り返されることになります。

上記のコードは、全称セレクタで margin: 0; としてブラウザデフォルトのマージンをリセットしてます。

おまけ

dt dl を flew-wrap で横並びする方法は上記のようにいろいろ複雑になります。
今なら、grid を使う方法がお勧めですね。
dlの方で列幅を設定すれば、dt dd の幅の設定は不要になります。

コード例

css
1* {
2  box-sizing: border-box;
3  margin: 0;
4}
5
6.news-list dl{
7    display: grid;
8    grid-template-columns: 150px 1fr;
9    padding: 0 50px;
10    margin-bottom: 20px;
11}
12.news-list dt{
13    border-bottom: solid 1px #c8c8c8;
14    padding: 15px;
15}
16.news-list dd{
17    padding: 15px;
18    border-bottom: solid 1px #c8c8c8;
19}