Q&A
おっと・・・私がだらだら書いている間に他の方が回答してくれていました・・・
同じ回答なのでチェッカーのくだりだけ読んでください・・・・（恥ずかしい・・・）
前提・実現したいこと
サイト作成をしてます。
最後のfooter2の白い線を画面いっぱいに広げたいです。
サイト見本
file:///Users/kishichihiro/Desktop/%E3%82%B3%E3%83%BC%E3%83%86%E3%82%99%E3%82%A3%E3%83%B3%E3%82%AF%E3%82%99%E5%BF%9C%E7%94%A8/3_2/index.html
該当のソースコード
html
1<!DOCTYPE html> 2<html> 3<head> 4 <meta charset="UTF-8"> 5 <title>Ropeace Project</title> 6 <link rel="stylesheet" type="text/css" href="base.css"> 7</head> 8<body> 9 10 <div class="wrapper"> 11 <header> 12 <div class="header_a"> 13 <div class="title"> 14 <img src="./images/logo.png" alt="ロゴ" id="logo"> 15 <h1 class="bold">ROPEACE PROJECT</h1> 16 </div> 17 <ul class="menu"> 18 <li>Top</li> 19 <li>About</li> 20 <li>Join</li> 21 <li>Contact</li> 22 </ul> 23 </div> 24 25 <div class="header_b"> 26 <div class="header_b_contents"> 27 <p id="header2_p">ROPEACE PROJECTは、世界の子どもたちへ「なわとび」を直接届ける活動です。</p> 28 <div class="button"> 29 <p class="bold">なわとび・ロープの寄付はこちらから</p> 30 </div> 31 </div> 32 <img src="./images/main.png" alt="main写真" id="main"> 33</div> 34</header> 35 36 <main class="main_contents"> 37 <div class="news"> 38 <h2> 39 <span class="border">News</span> 40 </h2> 41 <div class="news_pic"> 42 <img src="images/news1.png" alt="写真1" id="news1"> 43 <img src="images/news2.png" alt="写真2" id="news2"> 44 <img src="images/news2.png" alt="写真3" id="news3"> 45 </div> 46 </div> 47 48 <div class="contents"> 49 <h3> 50 <span class="border">Contents</span> 51 </h3> 52 53 <div class="about_us"> 54 <img src="images/contents1.png" alt="about_usの写真"> 55 <div class="about_uscomment"> 56 <h4>ABOUT US</h4> 57 <p>「ROPE」（なわとび）を通して、「PEACE」（平和な世界）を創っていきたいという想いから、「ROPE」と「PEACE」を掛け合わせた「ROPEACE」という造語が生まれ、活動はネパールの大震災があった翌年の2016年にROPEACE PROJECTが設立され始動しました。</p> 58 </div> 59 </div> 60 61 <div class="join_us"> 62 <div class="join_uscomment"> 63 <h4>JOIN US</h4> 64 <p>なわとびを子どもたちに届けるために、様々な形でROPEACE PROJECTに参加することができます。なわとびを寄贈やクラウドファンディングやグッズ購入という形で支援ができます。個人、企業、学校など幅広い参加が支援を求めています。</p> 65 </div> 66 <img src="images/contents2.png" alt="join_usの写真"> 67 </div> 68 </div> 69</main> 70 71<footer> 72 <div class="footer1"> 73 <p>ROPE & PEACE<br>~なわとびで世界中を笑顔に~</p> 74 <button type="button" id="button"> 75 オンラインによる寄付はこちらから 76 </button> 77 </div> 78 <div class="footer2"> 79 <p>Copyright ©︎ 2020 PROPEACE PROJECT All RightS Reserved.</p> 80 </div> 81 </div> 82</footer> 83</body> 84</html>
CSS
1.wrapper{ 2 margin-right: auto; 3 margin-left: auto; 4} 5 6.bold{ 7 font-weight: bold; 8 text-align: center; 9} 10.header_a { 11 width: 1280px; 12 margin-right: auto; 13 margin-left: auto; 14 display: flex; 15 align-items: center; 16 justify-content: space-around; 17 background-color: white; 18 font-size: 20px; 19} 20 21#logo{ 22 margin:10px; 23 width: 35px; 24 height:auto; 25} 26.title{ 27 display: flex; 28 justify-content: center; 29 align-items: center; 30} 31.menu{ 32 list-style: none; 33 font-size: 10px; 34 line-height: 35px; 35 margin-left: 10px; 36 display: flex; 37 justify-content: center; 38 align-items: center; 39} 40.menu li{ 41 display: block 42 align: center; 43 width: 45px; 44} 45 46 47.header_b{ 48 height: 420px; 49 display: flex; 50 justify-content: center; 51 align-items: center; 52 background-image: url("./images/bg.png"); 53 background-size: cover; 54} 55.header_b_contents{ 56 width: 350px; 57 height:150; 58 margin-right: 60px; 59 display: flex; 60 flex-direction: column; 61 align-items: center; 62} 63 64#header2_p{ 65 font-size: 18px; 66 color: white; 67 margin:auto; 68} 69 70#main{ 71 width: auto; 72 height: 350px; 73} 74 75.button{ 76 width: 200px; 77 padding-top: 15px; 78 padding-bottom: 15px; 79 margin: 50px; 80 font-size: 10px; 81 border-radius: 150px; 82 background-color: white; 83} 84 85 86.main_contents{ 87 width: 1280px; 88 margin-right: auto; 89 margin-left: auto; 90 padding-top: 70px; 91 padding-bottom: 70px; 92} 93 94.news h2 { 95 text-align: center; 96 font-weight: bold; 97 font-size: 17px; 98} 99 100.contents h3 { 101 text-align: center; 102 font-weight: bold; 103 font-size: 17px; 104} 105 106.border { 107 padding-bottom: 6px; 108 border-bottom: solid 2px red; 109} 110 111.news_pic { 112 margin: 20px; 113 display: flex; 114 justify-content: center; 115} 116 117#news1, #news2, #news3 { 118 margin: 18px; 119 width: 300px; 120 height: auto; 121} 122 123 124.about_us { 125 display: flex; 126 justify-content: center; 127 margin-top: 35px; 128 margin-left: auto; 129 margin-right: auto; 130 width: 970px; 131 height: 260px; 132 box-shadow: 3px 3px 5px gray; 133} 134.about_uscomment h4 { 135 font-weight: bold; 136 margin-top: 35px; 137 margin-bottom: 18px; 138 margin-left: 10px; 139 140} 141.about_uscomment p { 142 font-size: 16px; 143 color: gray; 144 margin-left: 20px; 145 margin-right: 20px; 146 147} 148.about_us img { 149 border-radius: 5px; 150 width: 485px; 151} 152 153.join_us { 154 display: flex; 155 justify-content: center; 156 margin-top: 35px; 157 margin-left: auto; 158 margin-right: auto; 159 width: 970px; 160 height: 260px; 161 box-shadow: 3px 3px 5px gray; 162} 163.join_uscomment h4 { 164 font-weight: bold; 165 margin-top: 35px; 166 margin-bottom: 18px; 167 margin-left: 10px; 168 169} 170.join_uscomment p { 171 font-size: 16px; 172 color: gray; 173 margin-left: 20px; 174 margin-right: 20px; 175 height: 270px; 176 width:auto; 177 178} 179.join_us img { 180 border-radius: 5px; 181 width: 480px; 182} 183 184footer { 185 background-image: url("./images/bg.png"); 186 height: 200px; 187 display: flex; 188 flex-direction: column; 189 align-items: center; 190} 191 192.footer1 p { 193 margin-top: 30px; 194 text-align: center; 195 color: white; 196 font-size: 15px; 197} 198 199#button { 200 background-color: white; 201 margin-top: 17px; 202 padding-top: 12px; 203 padding-bottom: 12px; 204 font-size: 10px; 205 border-radius: 150px; 206 margin-left: 10px; 207 font-weight: bold; 208 border: none; 209} 210 211.footer2 { 212 margin-top: 20px; 213} 214 215.footer2 p { 216 text-align: center; 217 color:white; 218 font-size: 8px; 219 padding: 8px; 220 border-top: white solid 1px; 221} 222
試したこと
widthで100%にしましたがもちろん作動しませんでした。
footerは特に幅指定してないです。
よろしくお願いいたします。
補足情報（FW/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
回答2件
0
ベストアンサー
下記を追加してみてください。
css
1footer { 2 ... 3 width: 100%; 4} 5 6.footer2 { 7 ... 8 width: 100%; 9}
投稿2021/08/26 08:04
総合スコア271
0
こんにちは
もしかして.footer2 p に100%をかけてみましたか？（試したことの件）
ディレクトリーが
html
1<div class="footer2"> 2 <p></p> 3</div>
になっているので、divのwidthを変えない限り変更はできません。
なので、.footer2にwidth:100%;をかけると解決します。
【追記】＝＝＝＝＝＝
footerにも100%かけているのを忘れていました・・・
やっていることは他の方と同じなのでそちらを参考にしてください・・・
＝＝＝＝＝＝
またお節介で申し訳ないのですが、
ちょくちょく文法エラー（閉じ忘れなど）を発見するので、エラーを表示できるツールでの作成や
チェッカーなどでのチェックをお勧めします。
エラーによりうまくcssが反映されないなどのトラブルもあるので・・・
よければ試してみてください。
お勧めのチェッカーは
これです
今回の検証へのリンクはこちらです。
https://jsfiddle.net/morimorinoki/oLu0rvy1/13/
※検証のために白い文字を灰色に変更しています。
ご参考ください
投稿2021/08/26 08:29
編集2021/08/26 08:34総合スコア84
いつもありがとうございます！
ご指摘の通りfooter2 pにwidthを指定していました。
親要素にかけないとだめということですね。勉強になりました！
また、文法エラーについてもご指摘いただきありがとうございます(泣)
さっそく取り入れました！
ありがとうございました！！！
よかったです！
また、補足し忘れていたのですが、ローカルデータのチェックは右にある『DETA』にコピーして検証してみてください！
わかりました！そうします！
ありがとうございました( ；∀；)
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/08/26 08:07 編集
2021/08/26 08:15
2021/08/26 08:34