Q&A
もしよろしければ、現在の問題を再現出来るソースコード全体を質問文へ追記していただけませんか？
CSSのfloatプロパティを使って、画面左側に固定サイドメニューエリア、右側にメインコンテンツを配置するサイトを制作しています。
固定サイドメニューエリアに対して float:left
メインコンテンツエリアに対して float:right
を適用して、左右に別れたは良いのですが、左側の固定サイドメニューの下に、float:rightを適用したメインコンエリアが入り込んできます。
下記のコードの通り、おそらくwrapperのwidth:100%、そしてその子要素であるメインコンテンツのクラスwidth:100%のなどで、画面いっぱいに広がってしまっているのだろうと疑っているのですが、左側のサイドメニュー
より右側でレイアウトを組むにはどうしたら良いのでしょうか。
わかりにくければ大変申し訳ないですが、初質問になりますのでご容赦ください。
よろしくお願い致します。
完成イメージはこちらです。
<body> <div class="wrapper"> <!--side-menu--> <div class="side_menu-all-area clearfix"> <ul> <li class="side-logo"><a href="#"><img src="image/nav_logo.png" alt="サイドメニューのロゴ" class="side-menu-logosize"></a></li> <li class="side-midashi"><a href="#">ABOUT</a></li> <li class="side-midashi"><a href="#">MEMBER</a></li> <li class="side-midashi"><a href="#">PEOPLE</a></li> <li class="side-midashi"><a href="#">PROJECT</a></li> <li class="side-midashi"><a href="#">PRODUCT</a></li> <li class="contact-midashi"><a href="#"><i class="far fa-envelope"></i><span class="contact-text">CONTACT</span></a></li> </ul> </div> <!--/side-menu--> <div class="main-contents-right clearfix"> <!--main-visual--> <img src="image/top_mainvisual01.jpg" alt="メインビジュアル" class="main-img"> <!--/main-visual--> <!--contents--> <div class="contents-all-area"> <ul class="contents-area"> <li class="contents-list"> <div> <a href=""><img src="image/IMG_" alt="画像1" class="contents-image-size"></a> </div> <div> <p class="navy-midashi-text">テキストテキスト</p> <p class="midashi-text-2"><a href="#">テキストテキスト</a></p> </div> </li> </ul> </div> <!--/contents--> </div> </div> </body> </html> コード
全体に適用するwrapperのクラス .wrapper{ width: 100%; } メインコンテンツのクラス .main-contents-right{ float: right; width: 100%; } 画面左側に固定するサイドメニューのクラス .side_menu-all-area{ box-sizing: border-box; position:fixed; width: 250px; height: 100%; float:left; background-color: #f1f8f9; padding-left: 50px; padding-top: 50px; z-index: 4999； } .clearfix::after{ content: ""; display: block; clear: both; } コード
ありがとうございます。htmlコードを記述しました。
contentsエリアのリストタグはたくさんあるので、一つだけ記述しました（あとは同じコードが続くだけです）
ごちゃごちゃして見にくかったら申し訳ないです。よろしくお願いします。
回答1件
0
ベストアンサー
position プロパティに fixed が指定された場合、その要素は文書の通常のフローから除外され、初期包含ブロックに対して相対配置されます。よって、右側のコンテンツは固定されたサイドバーが存在しないように配置されます。この問題は、 padding プロパティなどを用いて、固定された要素が存在する箇所にその要素分のを確保することで解決出来ます (動作確認用リンク)。
HTML
1<div class="wrapper"> 2 <!--side-menu--> 3 <div class="side_menu-all-area clearfix"> 4 <ul> 5 <li class="side-logo"><a href="#"><img src="image/nav_logo.png" alt="サイドメニューのロゴ" class="side-menu-logosize"></a></li> 6 <li class="side-midashi"><a href="#">ABOUT</a></li> 7 <li class="side-midashi"><a href="#">MEMBER</a></li> 8 <li class="side-midashi"><a href="#">PEOPLE</a></li> 9 <li class="side-midashi"><a href="#">PROJECT</a></li> 10 <li class="side-midashi"><a href="#">PRODUCT</a></li> 11 <li class="contact-midashi"><a href="#"><i class="far fa-envelope"></i><span class="contact-text">CONTACT</span></a></li> 12 </ul> 13 </div> 14 <!--/side-menu--> 15 16 17 18 <div class="main-contents-right clearfix"> 19 <!--main-visual--> 20 <img src="image/top_mainvisual01.jpg" alt="メインビジュアル" class="main-img"> 21 <!--/main-visual--> 22 23 24 25 <!--contents--> 26 <div class="contents-all-area"> 27 <ul class="contents-area"> 28 <li class="contents-list"> 29 <div> 30 <a href=""><img src="image/IMG_" alt="画像1" class="contents-image-size"></a> 31 </div> 32 33 <div> 34 <p class="navy-midashi-text">テキストテキスト</p> 35 <p class="midashi-text-2"><a href="#">テキストテキスト</a></p> 36 37 </div> 38 </li> 39 <li class="contents-list"> 40 <div> 41 <a href=""><img src="image/IMG_" alt="画像1" class="contents-image-size"></a> 42 </div> 43 44 <div> 45 <p class="navy-midashi-text">テキストテキスト</p> 46 <p class="midashi-text-2"><a href="#">テキストテキスト</a></p> 47 48 </div> 49 </li> 50 <li class="contents-list"> 51 <div> 52 <a href=""><img src="image/IMG_" alt="画像1" class="contents-image-size"></a> 53 </div> 54 55 <div> 56 <p class="navy-midashi-text">テキストテキスト</p> 57 <p class="midashi-text-2"><a href="#">テキストテキスト</a></p> 58 59 </div> 60 </li> 61 <li class="contents-list"> 62 <div> 63 <a href=""><img src="image/IMG_" alt="画像1" class="contents-image-size"></a> 64 </div> 65 66 <div> 67 <p class="navy-midashi-text">テキストテキスト</p> 68 <p class="midashi-text-2"><a href="#">テキストテキスト</a></p> 69 70 </div> 71 </li> 72 <li class="contents-list"> 73 <div> 74 <a href=""><img src="image/IMG_" alt="画像1" class="contents-image-size"></a> 75 </div> 76 77 <div> 78 <p class="navy-midashi-text">テキストテキスト</p> 79 <p class="midashi-text-2"><a href="#">テキストテキスト</a></p> 80 81 </div> 82 </li> 83 <li class="contents-list"> 84 <div> 85 <a href=""><img src="image/IMG_" alt="画像1" class="contents-image-size"></a> 86 </div> 87 88 <div> 89 <p class="navy-midashi-text">テキストテキスト</p> 90 <p class="midashi-text-2"><a href="#">テキストテキスト</a></p> 91 92 </div> 93 </li> 94 </ul> 95 </div> 96 </div> 97 98</div> 99
CSS
1.wrapper { 2 width: 100%; 3 padding-left: 250px; 4 box-sizing: border-box; 5} 6 7.main-contents-right { 8 float: right; 9 width: 100%; 10} 11 12.side_menu-all-area { 13 top: 0; 14 left: 0; 15 box-sizing: border-box; 16 position: fixed; 17 width: 250px; 18 height: 100%; 19 float: left; 20 background-color: #f1f8f9; 21 padding-left: 50px; 22 padding-top: 50px; 23 z-index: 4999; 24} 25 26.clearfix::after { 27 content: ""; 28 display: block; 29 clear: both; 30} 31
投稿2020/04/29 14:36
総合スコア14731
解決しました！！！とてもありがたいです！！！
ちなみに、初期包含ブロックに対して相対配置されます。という言葉がよくわからなかったのですが（理解力なくてすいません）、つまりfiexdを指定した今回の左サイドメニューは他の要素にとっては"存在していないモノ"とみなされ、下に入り込んでしまったという理解であってますか。
そして解決法として、fixedで作った幅分の余白を作って上げることで、結果的に下に入り込まないようになるということでしょうか。
あなたの回答
tips
プレビュー
