Q&A
ご提示のコードを試してみましたが、「<p>がcontainerからはみ出る」という問題が再現できませんでした。
ですので、ご提示いただいていない部分のコードに原因があるかと思います。
また、「text-align:left;が効かない」とのことですが、ご提示のスクリーンショット2つについて、私の目にはテキストが左寄せになっているように見えました。
おそらく、問題の認識が共有できていないと思いますので、どのような状態にしたいのか、もう少し詳しくご提示いただけますか？
前提・実現したいこと
HPトップページの模写コーディング練習を行っています。(デイトラの無料コーティング練習素材)
画像通りのトップページレイアウトにすることが目標です。
見本の画像はこちら
発生している問題
①「デイトラとは」画像右側の文章の右端が、ヘッダーの右端と揃わない。
②「お問い合わせ」のメールアドレスが、左寄せにならない。
当方確認画面はこちら
該当のソースコード
HTML
1<!DOCTYPE html> 2<html lang="ja" dir="ltr"> 3 <head> 4 <meta charset="utf-8"> 5 <title>practice</title> 6 <link rel="stylesheet" href="css/stylesheet.css"> 7 </head> 8 <body> 9 <header> 10 <div class=" head container"> 11 <h1>30DAYSトライアル</h1> 12 <nav> 13 <ul> 14 <li><a href="#">デイトラとは</a></li> 15 <li><a href="#">コース一覧</a></li> 16 <li><a href="#">お問い合わせ</a></li> 17 </ul> 18 </nav> 19 </div> 20 </header> 21 22 <div class="top-wrapper"> 23 <img src="img/main-vsual.png" alt="トップページ画像"> 24 </div> 25 26 <div class="greeting"> 27 <div class="container"> 28 <h2>デイトラとは</h2> 29 <div class="greeting-contents"> 30 <img src="img/about.png" alt=""> 31 <div class="greeting-text"> 32 <p>デイトラとは、無料で・迷わず・楽しく学べるプログラミング学習アプリです。毎日 33 設定された課題をこなしていくだけで、未経験から30日でプログラミングスキルが身につきます。</p> 34 <p>1日1題30日でプロのWebエンジニアを目指しましょう！</p> 35 </div> 36 </div> 37 </div> 38 </div> 39 40 <div class="courses"> 41 <div class="container"> 42 <h2>コース一覧</h2> 43 <div class="all-courses"> 44 <div class="course"> 45 <img src="img/web_first.png" alt="さいしょ"> 46 <p>HTML/CSS/Bootstrap</p> 47 </div> 48 <div class="course"> 49 <img src="img/web_second.png" alt="にばんめ"> 50 <p>HTML/CSS/Javascript/jQuery</p> 51 </div> 52 <div class="course"> 53 <img src="img/web_third.png" alt="さんばんめ"> 54 <p>PHP/Wordpress</p> 55 </div> 56 </div> 57 </div> 58 </div> 59 60 <div class="contact-wrapper"> 61 <div class="container"> 62 <h2>お問い合わせ</h2> 63 <p>さぁ、今日から30日間を始めよう！</p> 64 <input type="email" placeholder="メールアドレス" class="mail" style="text-align:left"><br> 65 <input type="submit" class="btn" value="無料で始める"> 66 </div> 67 </div> 68 <footer> 69 <div class="foot container"> 70 <p>Copyright(C) 2020 東京フリーランス ALL Rights Reserved.</p> 71 </div> 72 </footer> 73 </body> 74</html> 75
CSS
1@charset "Shift_JIS"; 2 3/*============================================ 4全般的なスタイル 5============================================*/ 6* { 7 margin:0; padding:0; /*全要素のマージン・パディングをリセット*/ 8 color:#325266; /*文字色*/ 9 box-sizing: border-box; 10} 11body { 12 text-align:center; /*IE6以下でセンタリングするための対策*/ 13 font-family: Segoe UI; 14} 15 16ul li{ 17 list-style: none; 18 font-weight:bold; 19} 20 21p,a{ 22 font-size:1.2em; 23 text-decoration: none; 24 font-weight:bold; 25} 26 27 28.container{ 29 width:1450px; 30 margin:0 auto; 31} 32 33h2{ 34 font-size:2em; 35 padding:70px 0; 36} 37 38input{ 39 outline:none; 40} 41 42 43/*============================================ 44header部分 45============================================*/ 46.head{ 47 display: flex; 48 justify-content: space-between; 49 height: 100px; 50 align-items: center; 51} 52 53.head ul{ 54 display:flex; 55 margin-left:auto; 56} 57 58.head a{ 59 margin-right:50px; 60 color:black; 61} 62 63/*============================================ 64greeting部分 65============================================*/ 66 67.greeting-contents{ 68 display: flex; 69} 70 71.greeting-contents img{ 72 width:50%; 73 padding-right:20px; 74} 75 76.greeting-contents p{ 77 text-align:left; 78 padding-left:20px; 79} 80 81/*============================================ 82courses部分 83============================================*/ 84.all-courses{ 85 display: flex; 86} 87 88.course{ 89 padding:0 0.5px; 90} 91 92.course p{ 93 text-align: left; 94} 95 96.course img{ 97 width:80%; 98 float:left; 99} 100 101/*============================================ 102contact部分 103============================================*/ 104.mail{ 105 border-radius: 80px; 106 display:inline-block; 107 padding:30px 400px; 108 outline: none; 109 font-size:1em; 110} 111 112.mail::placeholder{ 113 text-align: left; 114} 115 116.btn{ 117 background-color: #e47474; 118 color:white; 119 font-size:1.5em; 120 margin:50px 0 90px 0; 121 padding:20px 100px; 122 border-radius: 8px; 123 border:none; 124 cursor:pointer; 125} 126 127/*============================================ 128footer部分 129============================================*/ 130 131.foot{ 132 border-top:1px solid #eee; 133} 134 135.foot p{ 136 padding:30px 0 90px 0; 137 text-align: right; 138 color:black; 139 font-weight: normal; 140} 141
試したこと
①：親要素としてcontainerというclass属性を作成して、widthを指定しました。
②：mailのplaceholderを「text-align:left」と指定しました。
補足情報（FW/ツールのバージョンなど）
使用しているテキストエディタはAtomです。
あー、すみません、text-align:left はプレースホルダについてなのですね。把握しました。
回答1件
0
ベストアンサー
こんにちは。
①「デイトラとは」画像右側の文章の右端が、ヘッダーの右端と揃わない。
「ヘッダー」とは header要素のことかと思いますが、ご提示のコードでは header要素は width: auto ですので、画面サイズと同じになっているかと思います。
一方で、「<p>がcontainerからはみ出る」ともあり、「親要素としてcontainerというclass属性を作成して、widthを指定しました」とありますので、これは header要素の幅とは一致しません。
なお、ご提示のコードを試してみたところ、「<p>がcontainerからはみ出る」という現象は再現しませんでした。
②「お問い合わせ」のメールアドレスが、左寄せにならない。
プレースホルダが input要素のコンテンツ幅いっぱいに広がっていますので、左寄せでも右寄せでも見え方は変わらないです。
ですので、input要素に width を指定してみてはいかがでしょうか。
なお、padding: 30px 400px となっていますので、水平方向のパティングを減らすことも検討してみてください。
投稿2020/11/20 06:42
総合スコア36138
こんにちは、回答ありがとうございます。
①については、headerの中にcontainerクラスを入れ子にして、「デイトラ」部分にもcontainerクラスを入れ子にしていたので、同じ幅になるのでは？と思い質問させていただきました。しかし、見本画像を再度確認したところ、右端部分はそろっていなくて良いようでした。すみません。
②については、おっしゃるとおりwidthの設定とpaddingの水平方向のpxを小さくすることで解決いたしました。ありがとうございます。
実は、メールアドレス欄の横を長めに設けたくて、padding水平方向を大きくしていましたが、その場合はmarginで指定すべきだったのでしょうか・・・？
メールアドレス欄の横幅を設定したいなら、width を設定するのが本筋だと思います。
確かにおっしゃる通りです！ありがとうございます。、
あなたの回答
tips
プレビュー
