現在勉強中で知識不足にはご容赦ください。
Visual Studio CodeでHTMLとCSSを用いてWeb作成の練習をしております。
実現したいこと
ソースコード
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="web11style.css"> <title>練習</title> </head> <div class="section"> <h2 class="section-title">News</h2> <div class="news-list"> <dl> <dt>2022.XX.XX</dt> <dd>ファッション誌「XXXXXX Vol.3」に掲載していただきました。</dd> <dt>2021.XX.XX</dt> <dd>XX月XX日 「XXXXXX」の販売を開始します。</dd> <dt>2021.XX.XX</dt> <dd>【お知らせ】テキストテキストテキストテキストテキストテキストテキスト</dd> <dt>2020.XX.XX</dt> <dd>ファッション誌「XXXXXX Vol.1」に掲載していただきました。</dd> <dt>2020.XX.XX</dt> <dd>【お知らせ】テキストテキストテキストテキストテキストテキストテキスト</dd> </dl> </div> </body> </html>
CSS
.section{ max-width: 960px; font-size: 0.9rem; margin: 0 auto 130px auto; padding: 0 4%;}.section-title{ text-align: center; font-size: 1.5rem; margin-bottom: 65px;}.news-list dl{ display:flex; flex-wrap:wrap ; padding: 0 50px; margin-bottom: 20px;}.news-list dt{ width: 20%; border-bottom: solid 1px #c8c8c8; padding: 15px;}.news-list dd{ width: 70%; padding: 15px; border-bottom: solid 1px #c8c8c8;}.news-list dt:first-child{ border-top: solid 1px #c8c8c8;}.news-list dd:nth-child(2){ border-top: solid 1px #c8c8c8;}
試したこと
①dt,dd要素を２:７の割合に設定
②ddのmargin:0 0;で余白を０
→上記の2つで調整し、１列へすることは出来ます。
課題点
試したことが正しくないと考えていています。なぜなら各要素へcssを振らないといけなくなり、文字数が多くなるからです。（問題なければそれはそれで大丈夫です…）
Flew-wrap:wrap;を使っていて、もっと簡単に調整が効く方法があれば教えていただきたいです。
0 コメント