Q&A
floatプロパティを使って、２カラムにする予定です。
フロート指定前です。わかりやすいように色を変えてあります。
灰色のコンテンツのpost-contentをfloat:leftで左寄せ
青いコンテンツのsidebarをfloat:right右寄せにをcssで指定しましたが、
下の画像のようにfooterが上に上がってきてしまい原因がわかりません。
下の図は、完成させたいデザインカンプです。
HTML
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>Document</title> 8 <link rel="stylesheet" href="style2.css"> 9</head> 10<body> 11 <header> 12 <div class="wrapper"> 13 <h1 class="logo">HighQuality Coffee</h1> 14 <nav> 15 <h2>Main Navigation</h2> 16 <li><a href="">Our Story</a></li> 17 <li><a href="">Menu</a></li> 18 <li><a href="">Reseravtions</a></li> 19 <li><a href="">News</a></li> 20 <li><a href="">Reviews</a></li> 21 </nav> 22 </div> 23 </header> 24 <main id="primary" class="site-main"> 25 <div class="wrapper"> 26 <div id="post-content"> 27 <h2>Sample Page</h2> 28 <p>Welcome to WordPress. This is your first post. 29 Edit or delete it, then start writing!</p> 30 </div> 31 <div id="sidebar"> 32 <h2>メタ情報</h2> 33 <ul> 34 <li>サイト</li> 35 <li>ログアウト</li> 36 <li>投稿</li> 37 <li>コメント</li> 38 </ul> 39 </div> 40 </div> 41 </main> 42 <footer> 43 <div class="wrapper"> 44 <ul> 45 <li>本店県見本市仮区見本町1-3-5</li> 46 <li>TEL 01234-567-8901</li> 47 <li>e-Mail info@example.com</li> 48 <li>営業時間 10:00〜20:00（水曜定休）</li> 49 </ul> 50 <ul> 51 <li>支店県見本市仮区見本町1-3-5</li> 52 <li>TEL 01234-987-6543</li> 53 <li>e-Mail info@example.com</li> 54 <li>営業時間 10:00〜20:00（水曜定休）</li> 55 </ul> 56 <ul> 57 <li><a href="">Blog</a></li> 58 <li><a href="">Careers</a></li> 59 <li><a href="">Privacy Policy</a></li> 60 <li><a href="">Contact</a></li> 61 </ul> 62 <ul> 63 <li><img src="images/logo.png" alt="ロゴ"></li> 64 <li>© All rights reserved 2021</li> 65 </ul> 66 </div> 67 </footer> 68</body> 69</html>
CSS
1 2body { 3 font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif; 4 margin: 0; 5 background-color: burlywood 6} 7.wrapper { 8 width: 100%; 9 max-width: 1180px; 10 padding: 0 10px; 11 margin: 0 auto; 12} 13h1.logo { 14 background-image: url(images/logo.png); 15 background-repeat: no-repeat; 16 width: 241px; 17 height: 110px; 18 text-indent: -10000px; 19 float: left; 20 margin: 10px; 21} 22header nav { 23 float: right; 24 margin-top: 40px; 25} 26header nav h2 { 27 text-indent: -100000px; 28 height: 0; 29 margin: 0; 30} 31header nav li { 32 float: left; 33 list-style: none; 34 margin: 10px 20px; 35} 36header nav li a { 37 display: block; 38 text-decoration: none; 39 color: #fff; 40 font-size: 18px; 41 font-weight: bold; 42 line-height: 2; 43} 44header nav li a:hover { 45 opacity: .7; 46} 47#post-content { 48 float: left; 49 width: 70%; 50 clear: both; 51 background-color: #ccc; 52} 53#sidebar { 54 float: right; 55 width: 26%; 56 padding: 1%; 57 margin-top: 20px; 58 background-color: cornflowerblue; 59} 60footer { 61 background-color: #802A00; 62 color: #fff; 63 font-size: 15px; 64 margin-top: 100px; 65 padding-top: 30px 0; 66} 67footer.entry-footer { 68 padding: 10px; 69 background-color: #df8254; 70} 71footer ul { 72 float: left; 73 padding: 0; 74 list-style: none; 75 width: 23%; 76 margin-right: 2%; 77} 78footer li { 79 margin: 10px 0; 80} 81footer a { 82 text-decoration: none; 83 color: #fff; 84} 85footer:after { 86 content: ""; 87 clear: both; 88 display: block; 89}
スペルミスや、フッターのコードの表記ミスなど確認してみましたが、原因が特定できない状況です。
この原因がお分かりになる方いらっしゃいましたらアドバイス願います。
回答1件
0
ベストアンサー
ブロック整形コンテキストを生成するか、clearfixなどの手法で解決します。
手っ取り早く修正するならば、以下を追加するといいでしょう。
css
1.wrapper { 2 display: flow-root; 3}
ですが、横並びレイアウトのためにフロートを使うのは、かなり時代遅れの手法で問題も多いため、2021年現在で新しいサイトを作る時に採用されることはないと思います。
なんらかの教材を使って勉強されているとお見受けしますが、古いものなのではないでしょうか？ 教材の見直しを検討してもいいかもしれません。
投稿2021/06/07 03:43
総合スコア36960
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/06/07 03:53
2021/06/07 04:09