現在勉強中で知識不足にはご容赦ください。
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要素を2:7の割合に設定
②ddのmargin:0 0;で余白を0
→上記の2つで調整し、1列へすることは出来ます。
知りたい点【2点あります】
①dt(赤):dd(青)=20:80のwidth割合の時、Flew-wrap:wrap;を使って横並びにする方法
②なぜこの黄色の余白が生まれるのか
自分の言ってることがまとまりきっておらず申し訳ありません。
再度内容を更新しましたのでどなたか教えて頂きたいです。
回答1件
あなたの回答
tips
プレビュー