Q&A
コードはマークダウンのcode機能を利用してご提示ください。
また質問タイトルや本文に再三「froat」と記載されていますがそのようなものはないので正しく記載してください。
またDOCTYPE宣言が古いものですが、対象のブラウザ、確認したブラウザは何でしょうか。
サイドメニューを作成後にその右側にメインコンテンツを入れたいのですが、
float left を使用するとブラウザー上でサイドメニューが右にずれてしまいます。
divでulを囲い、divに対してスタイルシートでfloat leftを使用することでそのあとに続くメインコンテンツを右に持っていきたいです。
ローカルでは問題なく表示されるのですが、ブラウザ上ではサイドメニューが右にずれてしまいます。
開発者ツールで確認したところずれた後のメニューの左側には何もありませんでした。
問題個所がわからなくて困っています。教えていただけないでしょうか。
よろしくお願いします。
該当のソースコード
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <title>*******</title> <link rel="stylesheet" href="***.css"/> </head> <body> <!--ヘッダーエリア--> <div class="head"> <h1>****</h1> <p class="tell">*********</p> <img src="img/Inkedb_btn1_3_LI.jpg" alt="cont" class="img1"/> </div> <!--サイドメニューエリア--> <div class="menu"> <ul> <li>トップページ</li> <li>プロフィール</li> <li>実績</li> <li>サンプル</li> <li>日記</li> <li>お問い合わせ</li> </ul> </div> <!--メインエリア--> <div class="main"> <h2>最新情報</h2> </div> </body> </html> ～css～～～～～～～ body{ width:800px; margin-left:auto; margin-right:auto; } /*ヘッダーエリア*/ .head{ width:800px; height:100px; background-image:url('img/背景.png'); } h1{ float:left; padding-left:30px; padding-top:15px; } .tell{ width:320px; float:left; font-size:30px; padding-top:60px; margin-top:0px; margin-bottom:0px; text-align:right; } .img1{ width:200px; padding-top:20px; } /*サイドメニューエリア*/ .menu{ width:250px; height:270px; float:left; } .menu ul{ margin:0px; padding:0px; padding-left:0px; } .menu li{ list-style:none; border-style:outset; border-left:solid; border-left-width:10px; border-bottom-width:1px; background-color:silver; height:40px; font-size:30px; } /*メインエリア*/ .main{ width:550px; height:270px; margin:0px 0px; float:left; } h2{ margin:0px 0px; } コード
確認に使用したブラウザは
グーグルクローム
マイクロソフトエッジ
の２つです。
回答1件
0
ベストアンサー
各要素に、確認用で背景色を付けてみると、その原因が分かるかと思います。
floatには「クリア（解除）」は絶対に必要です。
CSS
1/*ヘッダーエリア*/ 2.head { 3 width:800px; 4 height:100px; 5 background-image:url('img/背景.png'); 6 overflow: hidden; /* ← 追加 */ 7}
floatのクリア（解除）は、いくつか方法がありますが、上記は、その一例です。
「CSS float 解除方法」等で検索して、原因と対策を確認してみてください。
投稿2019/05/04 01:11
総合スコア3523
あなたの回答
tips
プレビュー
