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

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

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

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

CSS

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

解決済

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

sho05
sho05

総合スコア1

HTML

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

CSS

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

1回答

0リアクション

1クリップ

224閲覧

投稿2022/09/11 05:02

編集2022/09/11 08:23

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

実現したいこと

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

                    ↓理想図
イメージ説明

ソースコード

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要素を2:7の割合に設定
②ddのmargin:0 0;で余白を0
→上記の2つで調整し、1列へすることは出来ます。

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

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

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

以下のような質問にはリアクションをつけましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

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の記述量が少ない方法はないか、 という質問ですか。 それとも、タイトルには「謎の余白が……」とありますが、この余白をなくしたいという質問でしょうか。もしそうなら、この余白は具体的にどこの余白のことでしょうか。

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
86.12%

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

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

質問する

関連した質問

同じタグがついた質問を見る

HTML

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

CSS

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