質問編集履歴

1

jony

jony score 11

2019/05/04 11:24  投稿

html/css froat left をするとブロックがズレてしまいます
html/css float left をするとブロックがズレてしまいます
サイドメニューを作成後にその右側にメインコンテンツを入れたいのですが、
froat left を使用するとブラウザー上でサイドメニューが右にずれてしまいます。
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;
}
}
コード
```
確認に使用したブラウザは
グーグルクローム
マイクロソフトエッジ
の2つです。
  • HTML

    22900 questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    16311 questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る