Q&A
細かいのですが、プログラムは書いたとおりにしか動かないので
「いうことを聞かない」という認識は捨てたほうがうまくいきます。
>無駄なコードが多い気がする。
では、無駄なコードを省いたミニマムコードで調整するようにしてください。
おそらくそれだけで進みます。
前提・実現したいこと
Html/CSSでコーディング練習をしているのですが、
footerの位置がずれてしまいます。
body内にあるarticleと同じ位置に指定したいです。
初心者です。
何度直してもあっちを直せばこっちが詰まるの状態で苦しいです。
助けてください
発生している問題・エラーメッセージ
・無駄なコードが多い気がする。 ・footerの位置がarticleよりも左に来てしまうのを解消したい。 ・コンテンツの横幅は960pxとする ・ブラウザの横幅を変更してもコンテンツが中央にある ・ブラウザの横幅を960px以下に狭めてもレイアウトが崩れない
該当のソースコード
HTML・CSS
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4<meta charset="utf-8"> 5<title>novelsite</title> 6<meta name="description" content="novelsite"> 7<meta name="keywords" content="小説,なろう,週一更新"> 8<link rel="stylesheet" href="mitame.css"> 9<link rel="stylesheet" href="novel.css"> 10</head> 11 12<body> 13<header> 14<div class="Headerinner"> 15<div class="clearfix"> 16<div class="headertop"> 17<div class="logo"> 18<a href="#"><img src="1.png" width="220px" height="35px"></a> 19<p>header</p> 20</div> 21<div class="search"> 22<form action="#"> 23<input type="search" name="search" placeholder=""="小説名・著者で検索"> 24<input type="submit" name="submit" value="検索"> 25</form> 26</div> 27</div> 28</div> 29</header> 30 31<div class="body"> 32<div class="tittle_rogo"><img src="1.png" width="960px" height="320px"></div> 33<div class="bodyinner"> 34<nav> 35<div class="clearfix"> 36<!-- ナビ --> 37<div class="nav"> 38<h1><i class="icon"></i>国別ジャンル</h1> 39<ul> 40<li><a href="#"><img src="1.png" width="20px" height="20px">日本</a></li> 41<li><a href="#"><img src="1.png" width="20px" height="20px">カンボジア</a></li> 42<li><a href="#"><img src="1.png" width="20px" height="20px">アメリカ</a></li> 43<li><a href="#"><img src="1.png" width="20px" height="20px">中国</a></li> 44<li><a href="#"><img src="1.png" width="20px" height="20px">フランス</a></li> 45<li><a href="#"><img src="1.png" width="20px" height="20px">ヨーロッパ</a></li> 46<li><a href="#"><img src="1.png" width="20px" height="20px">ドイツ</a></li> 47<li><a href="#"><img src="1.png" width="20px" height="20px">ロシア</a></li> 48</ul> 49</div> 50<div class="nav2"> 51<h1><i class="icon"></i>ジャンル特集</h1> 52<ul> 53<li><a href="#"><img src="1.png" width="20px" height="20px">和風</a></li> 54<li><a href="#"><img src="1.png" width="20px" height="20px">ファンタジー</a></li> 55<li><a href="#"><img src="1.png" width="20px" height="20px">ミステリー</a></li> 56<li><a href="#"><img src="1.png" width="20px" height="20px">歴史</a></li> 57<li><a href="#"><img src="1.png" width="20px" height="20px">アニメ化</a></li> 58<li><a href="#"><img src="1.png" width="20px" height="20px">ドキュメン</a></li> 59<li><a href="#"><img src="1.png" width="20px" height="20px">その他</a></li> 60</ul> 61</div> 62</div> 63</nav> 64 65<article> 66<div class="clearfix"> 67<div class="top"> 68<!-- 新着novel --> 69<h1><i class="icon"></i>新着小説</h1> 70<!-- 新着novel１ --> 71<div class="newnovel"> 72<a href="#"><img SRC="1.png" width="90px" height="90px></a> 73<p>BTCfamily</p> 74</div> 75<!-- 新着novel１end --> 76<!-- 新着novel１ --> 77<div class="newnovel"> 78<a href="#"><img SRC="1.png" width="70px" height="70px"></a> 79<p>sky near the blue</p> 80</div> 81<!-- 新着novel１end --> 82<!-- 新着novel１ --> 83<div class="newnovel"> 84<a href="#"><img SRC="1.png" width="70px" height="70px"></a> 85<p>rose fantasy</p> 86</div> 87<!-- 新着novel１end --> 88<!-- 新着novel１ --> 89<div class="newnovel"> 90<a href="#"><img SRC="1.png" width="70px" height="70px"></a> 91<p>alon nepia</p> 92</div> 93<!-- 新着novel１end --> 94<!-- 新着novel１ --> 95<div class="newnovel"> 96<a href="#"><img SRC="1.png" width="90px" height="90px></a> 97<p>soy spy</p> 98</div> 99<!-- 新着novel１end --> 100</div> 101 102<!-- 和風小説の勧め --> 103<div class="middle"> 104<h1><i class="icon"></i>和風小説のすすめ</h1> 105<div class="middleinner"> 106<div class="topics"><img src="1.png" width="230px" height="150px"></div> 107<div class="middleinnerright"> 108<P>旧ロシアから来た子供フェレッチ・モンモルドー。彼は養父の財産をすべて使って世界を救ってみせるのだ、といって極東までやってきた。ごく狭い限られた</P> 109<P>地域でロボットともに暮らす旧日本にいる折神博士と名乗る理論提唱者に会いに来た。しかし、博士には野望はなく、彼のパトロンに飼いならされていた</p> 110 <p>虐待されていた少女が親殺しの罪となった事件を通して彼らは・・・</p> 111</div> 112<a href="#"><img src="1.png" width="20px" height="20px" class="right">続きを読む</a> 113</div> 114</div> 115 116<div class="under"> 117<div class="clearfix"> 118<!-- 簡単！おすすめnovel --> 119<h1><i class="icon"></i>小説の書き方</h1> 120<div class="undertop"> 121 <div class="clearfix"> 122 <div class="pushnovels1"><img src="1.png" width="230px" height="120px"></div> 123 124 <h2>リドルストーリー</h2> 125 <P>美女と虎に代表される答えの用意されていない小説。日本では芥川龍之介の”藪の中”が有名</P> 126 <P>それではリドルストーリー作品を紹介しましょう</P> 127 128 <div class="bottom_right"><a href="#"><img src="1.png" width="20px" height="20px">続きを読む</a></div> 129 </div> 130</div> 131<div class="underbottom"> 132 <div class="pushnovels2"><img src="1.png" width="230px" height="120px"></div> 133 <h2>エヴァで一躍有名に⁉ 物語構成序破急とは</h2> 134 135 <P>物語の構成でおなじみの起承転結。物語の鉄則として欠かせない存在ですが、最近の構成には序破急も人気です</P> 136 <P>さて、序破急とは・・・？</P> 137 <div class="bottom_right"><a href="#"><img src="1.png" width="20px" height="20px">続きを読む</a></div> 138</div> 139</div> 140</div> 141</div> 142</article> 143 144 145<!-- 広告 --> 146<aside> 147<div class="clearfix"> 148<div class="aside"> 149<!-- 広告１ --> 150<img src="ookami-illut1.png" height="330px" width="160px"> 151<!-- 広告２ --> 152<img src="ookami-illut1.png" height="330px" width="160px"> 153</div> 154</div> 155</aside> 156</div> 157</div> 158<!----- メインコンテンツ END -----> 159 160<!----- フッター -----> 161<footer> 162<div class="footerinner"> 163<div class="clearfix"> 164<ul> 165<li><a href="#">サイトマップ</a></li> 166<li><a href="#">プライバシーポリシー</a></li> 167<li><a href="#">お問い合わせ</a></li> 168<li><a href="#">ご利用ガイド</a></li> 169</ul> 170 171</div> 172<p>Copyright©real voice pro All RightsReserved.</p> 173</div> 174</footer> 175</body> 176</html> 177 178 179____________＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿ 180以下CSS 181＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿ 182/* float解除 */ 183.clearfix::after { 184content: " "; 185display: block; 186clear: both; 187} 188/* ヘッダー */ 189header{ 190background:white; 191border-bottom:1px solid #cccccc; 192} 193.Headerinner{ 194width:960px; 195margin-left: auto; 196margin-right: auto; 197} 198 199.headertop{ 200height: 70px; 201} 202header a{ 203text-decoration: none; 204} 205header p{ 206color:#664433; 207} 208 209.logo{ 210float: left; 211} 212.search{ 213float:right; 214} 215 216 217 218.HeaderNav ul{ 219list-style: none; 220} 221 222.HeaderNav li{ 223background: white; 224width:191.2px; 225height: 30px; 226text-align: center; 227margin: 10 auto; 228padding-top: 10px; 229float:left; 230} 231header li+li{ 232box-sizing: border-box; 233border-left: 1px solid #664433; /* 区切り線 */ 234} 235 236 237/* ボディー 全体*/ 238.body{ 239background-color: #F4F7DA; 240} 241h1{ 242text-align: left; 243height:30px; 244background-color: pink; 245font-size: 22px; 246color: white; 247padding-top: 4px; 248padding-left: 5px; 249 250/* 以下で角丸設定 */ 251border-radius: 10px; 252-webkit-border-radius: 10px; 253-moz-border-radius: 10px; 254} 255/* 以下でアイコンを文章の左へ挿入 */ 256.icon{ 257display: inline-block; 258width: 30px; 259height: 20px; 260background: url(ookami-illust1.png) no-repeat; 261} 262 263.tittle_rogo{ 264margin: 5px auto; 265text-align: center; 266} 267.tittle_rogo img{ 268width:960px; 269margin-left: auto; 270margin-right: auto; 271} 272 273.bodyinner{ 274width:960px; 275text-align: center; 276margin-left: auto; 277margin-right: auto; 278 279} 280/* ボディーの中にあるナビ */ 281body nav{ 282float: left; 283text-align: left; 284} 285body nav a{ 286text-decoration: none; 287} 288body nav li{ 289padding: 11px 5px; 290 291} 292nav li + li{ 293border-top:1px dotted #664433; /* 区切り線 */ 294} 295 296.nav{ 297width: 180px; 298height: 360px; 299background: white; 300margin:10px; 301padding-bottom: -5px; 302} 303.nav2{ 304width: 180px; 305height: 320px; 306background: white; 307margin:10px; 308} 309 310body article{ 311width: 590px; 312float:left; 313margin:5px; 314} 315/* ボディーの中にある記事上 */ 316.top{ 317background: white; 318margin-bottom: 20px; 319} 320.newnovel{ 321margin:10px 0px; 322padding: 0px 13px; 323display: inline-block; 324} 325.newnovel p{ 326font-size: 6px; 327} 328/* ボディーの中にある記事中 */ 329.middle{ 330background: white; 331height: 320px; 332margin-bottom:10px; 333} 334.middleinner{ 335margin:10px; 336padding-right: 10px; 337height: 290px; 338text-align:right; 339} 340.topics{ 341height: 150px; 342margin-bottom: 100px; 343margin-right: 20px; 344float: left; 345} 346.middleinnerright{ 347height:240px; 348margin:10px; 349text-align: left; 350} 351.right{ 352 353} 354 355.middle p{ 356font-family: "Comic Sans MS"; 357font-size: 15px; 358margin-bottom: 15px; 359 360} 361/* ボディーの中にある記事下 */ 362.under{ 363margin-top: 20px; 364background: white; 365height: 390px; 366} 367.undertop{ 368height: 150px; 369padding:25px; 370} 371.underbottom{ 372height: 150px; 373padding: 25px; 374} 375.pushnovels1{ 376float: left; 377margin-right: 10px; 378} 379.pushnovels2{ 380float: left; 381margin-right: 10px; 382} 383 384.undertop h2{ 385text-align: left; 386color: #664433; 387 388} 389.underbottom h2{ 390text-align: left; 391color: #664433; 392} 393.undertop p{ 394text-align: left; 395padding-top: 12px; 396} 397.bottom_right{ 398text-align: right; 399text-decoration: none; 400color: orange; 401} 402.underbottom p{ 403text-align: left; 404padding-top: 12px; 405} 406 407/* ボディーの中にある広告 */ 408body aside{ 409width: 160px 410display: flex; 411flex-direction: column; 412} 413 414} 415/* ボディーの中にあるフッター */ 416footer { 417background: white; 418border-top: 1px solid #cccccc; 419} 420 421.footerinner{ 422width: 590px; 423height: 95px; 424margin-left: auto; 425margin-right: auto; 426text-align: center; 427font-size: 16px; 428text-decoration: none; 429} 430 431.footerinner a{ 432text-decoration: none; 433} 434 435.footerinner ul{ 436list-style: none; 437} 438 439.footerinner li{ 440text-decoration: none; 441padding: 10px; 442text-align: center; 443float:left; 444} 445 446footer li + li{ 447border-left: 1px solid black; 448} 449footer p{ 450text-align: center; 451} 452
試したこと
WEBで検索していろいろと要素の追加を行いました。
補足情報（FW/ツールのバージョンなど）
Atomを使って記入しChromeにアップしてレイアウトを見る
質問タグ「コーディング規約」は関係ないのではずしてください。
回答2件
0
ベストアンサー
ツッコミどころが山ほどありますが、とりあえず以下を修正しよう。
HTMLでは、
Diff
1 <header> 2 <div class="Headerinner"> 3 <div class="clearfix"> 4 <div class="headertop"> 5 <div class="logo"> 6 <a href="#"><img src="1.png" width="220px" height="35px"></a> 7 <p>header</p> 8 </div> 9 <div class="search"> 10 <form action="#"> 11- <input type="search" name="search" placeholder=""="小説名・著者で検索"> 12+ <input type="search" name="search" placeholder="小説名・著者で検索"> 13 <input type="submit" name="submit" value="検索"> 14 </form> 15 </div> 16 </div> 17 </div> 18+ </div> <!-- divの終了タグが抜けている --> 19 </header>
および、"90pxと、閉じる"が抜けている2箇所に"を追加。
CSSでは、
Diff
1/* ボディーの中にある広告 */ 2body aside{ 3-width: 160px 4+width: 160px; /* 末尾に;を追加 */ 5display: flex; 6flex-direction: column; 7} 8 9-} 10+ /* 余分な}を削除 */
あとは、
- img要素のwidth属性とheight属性で指定する値は単位なしの数値(ピクセル単位に固定)なので、属性値にpxを付けてはいけない。
- ほとんどの場合、img属性にはalt属性を付ける必要がある。単なる装飾であれば
alt=""を付ける。 - リスト項目の先頭のマークを画像で付けるだけなら、img要素ではなくCSSで
list-style-imageを使う。 - むやみに
heightで高さを固定しているために、内容がそこからはみ出している箇所がたくさんある。 - いまからWebページを作るのであれば、floatレイアウトはやめて、flexレイアウトを学習しよう。
広告を付けたり、アイコンを飾りとして付けたりする前に、やるべきことがあるのでは?
投稿2021/02/28 01:30
総合スコア11990
0
CSSに充てていたresetCSSを当てなおしたところ、画像が収まるようになったため、それに合わせて相互の位置のずれが修正されました。
また、codeの書き方が変だとは思っていましたが、具体的にどこがどう変なのかよくわからず、だったので、codeへ指摘をいただいた方をベストアンサーにさせていただきました。
ありがとうございました。
投稿2021/02/28 23:23
総合スコア5
あなたの回答
tips
プレビュー
