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

総合スコア32195

回答へのコメント

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

aaasss

総合スコア53

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

ただいまの回答率
86.02%

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

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

質問する

ホームページのjqueryが突然動かなくなりました。

回答2

クリップ1

更新

2023/03/15

Q&A

受付中

メニューを閉じた時に起こるアニメーションをリンクをクリックしても起こしたい！

回答2

クリップ0

更新

2023/03/17

Q&A

解決済

カード型のレイアウトを整えたい

回答3

クリップ0

更新

2023/03/12

Q&A

受付中

複数の六角形の要素を結合して、cssを適用させたい

回答1

クリップ1

更新

2023/03/16

Q&A

解決済

cssにbackground-imageで画像を表示させる時、height:0;とpadding-top:○○％を使う場合と、height:○○px;で表示させる場合の違いについて

回答1

クリップ0

更新

2023/03/20

Q&A

解決済

flexを設定しているのに,justify-content: center;が効かない原因がわからないです。

回答1

クリップ0

更新

2023/03/12

Q&A

解決済

justify-content: space-between; 余白が反映されない

回答2

クリップ0

更新

2023/02/26

Q&A

解決済

HTML CSS SP時２段目の要素だけ真ん中に寄せたい

回答1

クリップ0

更新

2023/03/13

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

トップ HTML5に関する質問

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

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

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