実現したいこと
・現在真ん中で表示されてるcontectのlabel部分を今の場所で左揃いにしたい
・labelの余白を綺麗に開けたい
発生している問題・分からないこと
cssの書き方がわからない
該当のソースコード
html
1<!DOCTYPE html>2<html lang="ja">3<head>4 <meta name="description" content="動画クリエイター百恵のプロフィールサイトです。"> 5 <meta charset="utf-8">6 <meta name="viewport" content="width=device-width, initial-scale=1.0">7 <link rel="stylesheet" href="style.css">8 <title>Yoshimura momoe</title>9</head>10 11<body>12 <header>13 <div id="menu">14 <h1 id="site-title">Yoshimura Momoe</h1>15 <nav>16 <div id="menu-1">17 <a class="menu-2" href="#work.html">work</a>18 <a class="menu-2" href="#About.html">About</a>19 <a class="menu-2" href="#contact.html">contact</a> <!-- 'clss' to 'class' -->20 </div>21 </nav>22 </div>23 </header>24 25 <main>26 <div id="main-1"></div>27 <video id="video-1" src="image/main.mp4" controls></video>28 <div id="main-2">29 <h2>work</h2>30 31 <p>動画</p>32 <div id="video-2">33 <video class="video-2" src="image/main1.mp4" controls></video>34 <video class="video-2" src="image/main2.mp4" controls></video>35 </div>36 37 38 <p>モーショングラフィック</p>39 <div id="video-3">40 <video class="video-3" src="image/main3.mp4" controls></video>41 <video class="video-3" src="image/main4.mp4" controls></video>42 </div>43 44 <p>グラフィックデザイン</p>45 <div id="image-1">46 <img class="image-1" src="image/main2.png" alt="graphic">47 <img class="image-1" src="image/main3.png" alt="graphic">48 <img class="image-1" src="image/main4.png" alt="graphic">49 </div>50 51 <div id="portfolio">52 <h2>About</h2>53 <div id="portfolio-content">54 <img id="icon" src="image/icons.png" alt="icon">55 <div id="introduction-text">56 <p id="text-3">大阪府在住。動画編集やデザインをメインにフリーランスの活動してます。<br>57 58 </p>59 </div>60 </div>61 </div>62 63 <h2>contact</h2>64 <div id="contact_address">65 <form>66 <label class="text-1">名前</label>67 <input class="text-2" type="text" placeholder="名前を入力して下さい">68 <br>69 <label class="text-1">電話番号</label>70 <input class="text-2" type="text" placeholder="(例)090-0000-0000">71 <br>72 <label class="text-1">メールアドレス</label>73 <input class="text-2" type="text" placeholder="(例)0000@gmail.com">74 <br>75 <label class="text-1">住所</label>76 <input class="text-2" type="text" placeholder="住所を入力して下さい">77 <br>78 <label class="text-1">お問い合わせ内容</label>79 <textarea></textarea>80 </form>81 <br>82 <button id="btn">ボタン</button>83 </div>84 </div>85 </main>86 87 <footer>88 <div id="others">89 <p>© Yoshimura Momoe All rights reserved.</p>90 <img src="image/icons1.png" alt="instagram"> <!-- 'instgram' to 'instagram' -->91 <img src="image/icons2.png" alt="YouTube">92 </div>93 </footer>94</body>95</html>
css
1h1{2 font-size:20px;3}4 5h2{6 text-align: center;7 font-size:20px;8 margin:30px auto;9}10 11p{12 font-size:20px;13 margin:50px;14}15 16#menu {17 display: flex;18 justify-content: space-between;19 align-items: center;20 margin:10px 50px 10px 30px;21}22 23#menu-1 a {24 color: black;25 text-decoration: none; /* リンクの下線を削除する */26}27 28#video-1{29 display: block;30 margin: auto; 31 width:640px;32}33 34#video-2,35#video-336{37 display: flex;38 justify-content: space-between;39 align-items: center;40 margin:auto 50px;41}42 43.video-2,.video-3{44 width:500px;45}46 47#image-1 {48 display: flex; 49 justify-content: space-between;50 flex-wrap: wrap; /* 要素が折り返されるように設定 */51 margin: auto;52 width: fit-content; /* コンテナ幅を中身に合わせる */53}54 55.image-1 {56 width: 300px;57 margin: 10px;58}59 60#portfolio {61 text-align: center; /* Center the content */62}63 64#portfolio-content {65 display: flex;66 justify-content: center;67 align-items: center;68}69 70#icon {71 width: 100px; /* Adjust icon size as needed */72}73 74#text-3{75 font-size:15px;76}77 78#contact_address{79 text-align: center;80}81 82
試したこと・調べたこと
上記の詳細・結果
ソースを書いたが上手くいかなかった
補足
特になし
0 コメント