質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

482閲覧

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

sho05

総合スコア1

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

1クリップ

投稿2022/09/11 05:02

編集2022/09/12 14:39

現在勉強中で知識不足にはご容赦ください。
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;を使って横並びにする方法
②なぜこの黄色の余白が生まれるのか
イメージ説明

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2022/09/11 05:07

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

2022/09/11 05:38 編集

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

回答1

0

ベストアンサー

CSSの記述量をなるべく少なくdtdlを横並びさせたいというのが質問の趣旨なら、
dtfloat: 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}

投稿2022/09/11 05:53

編集2022/09/11 09:16
hatena19

総合スコア33620

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

sho05

2022/09/11 08:29

hatena19さん ご回答いただきありがとうございます。floatでの編集はスムーズに横並びに出来ました!助かりました。 ですが、他の方でflew-wrapで書かれているサイトがあり自分も使ってみたいと思って苦戦しておりました…
sho05

2022/09/12 05:39

hatena19さん 教えていただき本当にありがとうございまいました。使いたいコードで作り上げることが出来ました!! また新しい情報まで教えていただき本当にありがとうございます。もっと勉強します!!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問