前提・実現したいこと
記事のboxがフッターを突き抜けてかぶさってしまってるレイアウトを直したいです。
発生している問題・エラーメッセージ
なぜフッターがあの位置にあるのかと言いますと、ヘッダー・フッター以外の要素を内包する<div class="wrapper clearfix">の縦幅がそこまでになってしまっているからです。wrapperにheightの指定はしていないため、本来は記事のboxの数に合わせて伸縮してほしいのですが、記事にfloatをかけているのが修正されてないせいか、記事の一番下まで含んでくれません。
記事は <a href="#" class=article-box>です。それぞれdisplay:block;を指定し、奇数番目にはfloat:left; 偶数番目にはfloat:right; をかけているのですが、article-boxの親要素 <div article-container>にはclearfix classを持たせてるため、突き抜けないように指定してるはずなんですが。。。うまくいきません。またwrapperにもclearfixを指定してるはずですが、こちらも効果がないみたいです。
ウェブサイトを作るのは初めてで、「HTML5/CSS3 モダンコーディング」という教科書のPart 1の内容をほぼ丸写ししてるので、問題はないはずなのですが。。。
試したこと
・wrapper, article-container 以外の親要素にもclearfixを指定してみたがダメだった。
・floatを解除してみたら、article-boxが全て縦並びになってしまったため、floatの書き方自体は間違ってないはず。
・clearfixの使い方をググってみたが、間違ってなかった。
・使ってる教科書の模範コードをもう一度よく見直してみたが、間違いは見当たらなかった。
・twitterで質問してみたところ、「わからないのでteratailで聞いてみては?」と言われたので登録した。
#HTMLのソースコード(一部)
<!DOCTYPE html> <html lang="ja"> <head>(中略)</head> <body> <header>(中略)</header> <div class="wrapper clearfix"> <main class="main"> (中略) <div class="articles"> <h2 class="hidden">ARTICLES</h2> <div class="article-container clearfix"> <a href='#' class="article-box"> <h3 class="title">東京事変・刄田綴色の鉄板フレーズ集!!</h3> <p class="desc">伝説のバンド・東京事変のグルーヴを支えたサウスポー・刄田綴色の十八番フレーズを徹底解明!!</p> <time class="date" datetime="2019-06-11">2019.06.11 TUE</time><img class="image" src="images/DorStLlUYAAUvUw.jpg"> </a> <a href='#' class="article-box"> <h3 class="title">フィルインのバリエーションを増やす5つのコツ!!</h3> <p class="desc">ありがちなフィルインばかり叩いてませんか?おなじみのフィルインに少しひねりを加えるだけでグンとおしゃれにすることが出来ちゃうんです!!</p> <time class="date" datetime="2019-06-05">2019.06.05 THU</time><img class="image" src="images/drumfills.gif"> </a> <a href='#' class="article-box"> <h3 class="title">ツーバスドコドコしよう!ダプルペダルを極める</h3> <p class="desc">メタル・ドラミングにおいて重要な役割を担うツーバスドコドコ。今回はそれをマスターするうえで</p> <time class="date" datetime="2019-06-01">2019.06.01 SUN</time><img class="image" src="images/tama-power-glide-double-pedal-iron-cobra-case-heavy-metal-fast-feet.jpg"> </a> <a href='#' class="article-box"> <h3 class="title">ベースとドラムは仲良くすべし!リズム隊の極意</h3> <p class="desc">バンド演奏において「リズム隊」と呼ばれるベースとドラム。二人の息が合わされば音楽がよりドッシリと聴こえるようになるぞ!</p> <time class="date" datetime="2019-05-30">2019.05.30 FRI</time><img class="image" src="images/7374081962_c7eedd08f5_b.jpg"> </a> </div> </div> </main> <div class="sidemenu"> (中略) </div> </div> <footer class="footer clearfix"> <ul class="horizontal-list"> <li class="horizontal-item"><a href="#">ABOUT ME</a></li> <li class="horizontal-item"><a href="#">SITE MAP</a></li> <li class="horizontal-item"><a href="#">SNS</a></li> <li class="horizontal-item"><a href="#">CONTACT</a></li> </ul> </footer>
#CSSのソースコード(一部)
.clearfix::after{ content:''; display:block; clear:both; } .wrapper{ width:970px; margin:30px auto 40px; } main{ display:block; float:left; width:660px; height:500px; } .sidemenu{ float:right; width: height:500px; } .article-box{ display:block; width:315px; height:360px; margin:30px 0px; position:relative; width:315px; padding:210px 15px 0; box-shadow:8px 8px 10px -4px rgba(0,0,0,0.5); transition: opacity 0.15s; background-color:white; } .article-box:hover{ opacity:0.75; } .article-box:nth-of-type(odd){ float:left; } .article-box:nth-of-type(even){ float:right; } .article-box .title{ margin-top:15px; color:#555; font-size:1.4rem; line-height:1.6; } .article-box .desc{ margin-top:5px; color:#333; font-size:0.8rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .article-box .image{ position:absolute; top:0; left:0; width:100%; height:200px; } .article-box .date{ position: absolute; right:0; bottom:15px; display:block; width:160px; padding:4px; background-color:#d03c53; color:white; text-align:center; letter-spacing:1px; font-size:0.9rem; } .footer{ width:100%; height:100px; padding:20px 0 30px; background-color: #2d3d54; color:white; }
回答2件
あなたの回答
tips
プレビュー