前提
HTML、CSS初学者です。
模写コーディングをしていて、壁にぶつかりました。
Name、Email,Messageと並ぶシンプルな問い合わせフォームを作ろうとしました。
ラベルと入力欄の間には間隔が入っているのですが、間隔をあける方法がわかりません。加えて、ラベルを左揃いにする方法がわかりません。サイトのHTML、CSSを見ると、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">デザイン雑誌「XXXXXX Vol.11』に掲載していただきました。</dd> 65 </div> 66 <dt class="news2-date">2020.XX.XX</dt> 67 <dd class="news2">XX月XX日から写真集「XXXXXXX」の販売を開始します。</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">デザイン雑誌「XXXXXX 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>©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件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2022/12/23 00:12