HTML、CSS　初心者　縦にそろった問い合わせフォームを作りたい

前提

HTML、CSS初学者です。
模写コーディングをしていて、壁にぶつかりました。
Name、Email,Messageと並ぶシンプルな問い合わせフォームを作ろうとしました。
ラベルと入力欄の間には間隔が入っているのですが、間隔をあける方法がわかりません。加えて、ラベルを左揃いにする方法がわかりません。サイトのＨＴＭＬ、ＣＳＳを見ると、dl,dt,ddを使って作成していましたがこの方法はポピュラーなのでしょうか？私の書き方ではお手本のようなフォームは作れないのでしょうか？

以上、質問が多くなってしまいましたが、ご教授いただけると幸いです。

模写しているサイトは、https://code-step.com/demo/html/portfolio1/#　
です。

実現したいこと

入力欄の楯列をそろえたい
ラベルは左よせにしたい

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5    <meta charset="UTF-8">
6    <meta http-equiv="X-UA-Compatible" content="IE=edge">
7    <meta name="viewport" content="width=device-width, initial-scale=1.0">
8    <link rel="stylesheet" href="style.css">
9    <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
10    <title>Document</title>
11</head>
12
13<body>
14
15    <header>
16        <div class="header-left">
17            <a href="index.html"><img src="image/logo.svg" alt="logo"></a>
18        </div>
19        <nav>
20            <ul>
21                <li><a href="#about">About</a></li>
22                <li><a href="#works">Works</a></li>
23                <li><a href="#news">News</a></li>
24                <li><a href="#contact">Contact</a></li>
25                <li><a href="#instagram"><i class="fa-brands fa-instagram"></i></a></li>
26            </ul>
27        </nav>
28    </header>
29    <div class="main-image">
30        <img src="image/mainvisual-pc.jpg" alt="main-image">
31    </div>
32    <div class="wrapper">
33        <div class="about-wrapper">
34            <h2>About</h2>
35                <ul>
36                <li class="name">Xxxxx Ashley</li><br>
37                <li>2th Floor xxxxx Building x-x-x Nishiazabu, Minato-ku, Tokyo 106-0031 Japan</li><br>
38                <li>tel: 000-0000-0000</li><br>
39                <li>url: www.xxxxxx.jp</li><br>
40                <li>mail: xxx@xxxxxx.jp</li>
41            
42            <div class="profile">
43                <li>プロフィールテキストテキストテキストテキストテキストテキストテキストテキストテキストスト テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
44                    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</li>
45                </ul>
46                </div>
47        </div>
48        <div class="works-wrapper">
49            <h2>Works</h2>
50            <div class="works-images">
51                <img src="image/works1.jpg" alt="works1">
52                <img src="image/works2.jpg" alt="works2">
53                <img src="image/works3.jpg" alt="works3">
54                <img src="image/works4.jpg" alt="works4">
55                <img src="image/works5.jpg" alt="works5">
56                <img src="image/works6.jpg" alt="works6">
57            </div>
58        </div>
59        <div class="news-wrapper">
60            <h2>News</h2>
61            <dl>
62                <div class="news1">
63            <dt class="news1-date">2020.XX.XX</dt>
64            <dd class="news1">デザイン雑誌「ＸＸＸＸＸＸ Vol.11』に掲載していただきました。</dd>
65            </div>
66            <dt class="news2-date">2020.XX.XX</dt>
67            <dd class="news2">ＸＸ月ＸＸ日から写真集「ＸＸＸＸＸＸＸ」の販売を開始します。</dd>
68            <dt class="news3-date">2019.XX.XX</dt>
69            <dd class="news3">【イベント開催のお知らせ】テキストテキストテキストテキストテキストテキストテキスト</dd>
70            <dt class="news4-date">2019.XX.XX</dt>
71            <dd class="news4">デザイン雑誌「ＸＸＸＸＸＸ Vol.10』に掲載していただきました。</dd>
72            <dt class="news5-date">2019.XX.XX</dt>
73            <dd class="news5">【個展開催のお知らせ】テキストテキストテキストテキストテキストテキストテキスト</dd>
74        </dl>
75        </div>
76        <div class="contact-wrapper">
77            <h2>Contact</h2>
78            <form action="confirm.php" method="post">
79                <label for="yourname">NAME</label> <input class="yourname" id="yourname" type="text" name="yourname"><br>
80                <label for="email">E-mail</label><input class="email" id="email" type="email" name="email"><br>
81                <label for="message">MESSAGE</label><input class="message" id="message" type="text" name="message"><br>
82                <input class="button" type="submit" value="送信">
83            </form>
84        </div>
85    </div>
86    <footer>&copy;2020 My Work</footer>
87</body>
88
89</html>

html{
    font-size:100%;
}

img{
    max-width:100%;
}
ul{
    list-style: none;
}

a{
    text-decoration: none;
    color:black;
}

li{
    text-decoration: none;
}

header{
    width:820px;
    height:170px;
    margin: 0 auto;
    display: flex;
    line-height:100%;
    justify-content: space-between;
    padding-top:100px;
}

.header-left  img{
    width:116px;
    height:30px;
    margin-top:10px;
}

nav ul{
    display: flex;
}
nav ul li{
    margin-right:30px;
}

.main-image {
    max-width:1920px;
    width:100%;
    height:420px;
}

.about-wrapper{
    margin: 0 auto;
    height:330px;
    width:855px;
    margin-bottom:140px;
}

h2{
    font-size:24px;
    text-align:center;
}

.about-wrapper ul li{
    text-align:left;
    display: inline-block;
    font-size:14.4px;
}

.about-wrapper li :first-child{
    margin-bottom:30px;
}

.about-wrapper p{
    text-align:left;
    display: inline-block;
}
.name{
    margin-bottom:30px;
}
.profile{
    margin-top:30px;
}

.works-wrapper h2{
    margin-bottom:80px;
}
.works-images{
    margin: 0 auto;
    width:860px;
    display:flex;
    flex-wrap:wrap;
    justify-content: space-between;
    gap:30px 30px;
}

.works-images img{
    height:170px;
    width:31%;
}

.works-wrapper{
    margin-bottom:165px;
}

.news-wrapper{
    text-align:center;
    margin:0 auto;
    width:855px;
    margin-bottom:135px;
}


.news-wrapper dt{
    float:left;
    border-bottom:1px solid gray;
    line-height:3;
    font-size:14.4px;
}

.news-wrapper dd{
    border-bottom:1px solid gray;
    line-height:3;
    font-size:14.4px;
}
.contact-wrapper h2{
    margin-bottom:80px;
}
.contact-wrapper{
    width:860px;
    margin:0 auto;
    text-align:center;
    margin-bottom:130px;
}

.yourname{
    width:730px;
    height:45px;
    margin-bottom:10px;
    font-size:14.4px;
}
.email{
    width:730px;
    margin-bottom:10px;
    height:45px;
    font-size:14.4px;
}
.message{
    height:160px;
    width:730px;
    font-size:14.4px;
}
.button{
    margin-top:40px;
    width:200px;
    height:50px;
    background-color:#24292e;
    color:white;
}
.button:hover{
    background-color:white;
    color:#24292e;
    border:#24292e 1px solid;
}

footer{
    background-color:#24292e;
    color:white;
    font-size:12px;
    text-align:center;
    padding:10px;
}

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

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

回答2件

ベストアンサー

ラベルに共通な幅を設定すればいいでしょう。ラベルはインライン要素なので幅の設定はできないので、display: inline-block;でインラインブロックに変更する必要があります。

レスポンシブ対応も考えるとpxの絶対単位ではなく％の相対単位で指定した方がいいでしょう。

提示のコードから最小限の変更でのサンプルコードは下記のようになります。

css
1.contact-wrapper h2 {
2  margin-bottom: 80px;
3}
4.contact-wrapper {
5  max-width: 860px;
6  width: 100%;
7  margin: 0 auto;
8  text-align: center;
9  margin-bottom: 130px;
10}
11.contact-wrapper label {
12  display: inline-block;
13  width: 16%;
14  text-align: left;
15}
16.contact-wrapper input {
17  width: 80%;
18}
19.yourname {
20  height: 45px;
21  margin-bottom: 10px;
22  font-size: 14.4px;
23}
24.email {
25  margin-bottom: 10px;
26  height: 45px;
27  font-size: 14.4px;
28}
29.message {
30  height: 160px;
31  font-size: 14.4px;
32}
33.contact-wrapper .button {
34  margin-top: 40px;
35  width: 200px;
36  height: 50px;
37  background-color: #24292e;
38  color: white;
39}
40.contact-wrapper button:hover {
41  background-color: white;
42  color: #24292e;
43  border: #24292e 1px solid;
44}

ただ、現代的にコードにするなら、FlexかGridを使ってレイアウトする方がいいでしょう。
シンプルかつ自由度が高いものになります。レスポンシブ対応もシンプルにできます。

投稿2022/12/22 09:22

hatena19

総合スコア34362

poipoipain

2022/12/23 00:12

回答ありがとうございます。現状のコードから期待通りの形へできないかと悩んでいたので、こちらをベストアンサーとさせていただきます。もう一方も回答ありがとうございました。

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

とりあえず気になったのは、dlの間にdivが挟まっている以下の部分でしょうか。
手本のサイトには存在しないので取り除いていいかと思います。

html
1<dl>
2                <div class="news1">

あと、dtにもddにも横幅が指定されていない上、floatで並べてあるので、綺麗に揃っていないのだと思います。floatはちょっとクセのある動きをしますので気をつけてください（どうクセがあるのかはググってください）。

模写コーディングという作業のルールがわからないのですが、開発者ツール（デペロッパーツール）を使ってもよいのであれば、使った方がいいと思います。
以下の2つについてはそれで分かります。

間隔をあける方法がわかりません
リストラベルを左揃いにする方法がわかりません。

開発者ツールを使わないのであれば、以下のようなキーワードでGoogle検索してください。
HTML・CSSに関する疑問のほとんどはGoogle検索で出てきますので、分からないと思ったらすぐググってください。

CSS 横幅
dl レスポンシブ

dl, dt, ddがポピュラーかどうか、というのはあいまいで難しい質問ですが…。
「html dl」などでググり、以下のようなサイトを覗いてみてください。

<dl>: 説明リスト要素 [https://developer.mozilla.org/ja/docs/Web/HTML/Element/dl](url)

最新のブラウザではサポートされているかどうかや、どのような場合に使用すべきかなどが書かれていますので、こちらの内容を参考にして、使用が適切かどうか判断してください。

投稿2022/12/22 09:18

編集2022/12/22 09:21

退会済みユーザー

総合スコア0

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.31%

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

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

質問する

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

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

HTML、CSS　初心者　縦にそろった問い合わせフォームを作りたい

前提

実現したいこと

発生している問題・エラーメッセージ

該当のソースコード

試したこと

補足情報（FW/ツールのバージョンなど）

関連した質問