css floatでdivがずれる

締切済

質問者：dadada0220
質問日時：2016/05/04 01:19
回答数：4件

divを使ってレイアウトを組んでいて、最初はなんの問題もなく、綺麗に左と右に分かれていました。
しかし、いつの間にかずれていて、なんとか戻そうといろいろいじっていたら、たまには右側に戻るんですけど、位置がだいぶ下にいったり、全くわけも分からなくなってしまいました。
どこをどう直したらいいのでしょうか？

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>柴又帝釈天参道ガイド</title>
<link href="1.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="a-box">
<p>
<img src="img/header/rogo.png" width="232" height="39" id="rogo">
<img src="img/header/rennrakusaki.png" width="608" height="74" id="rennraku">
</p>
</div>

<div id="def-box">

<div id="d-box">
<div id="d1-box">
<div id="d2-box">
<img src="img/def-box/home-button-1.png" width="428" height="50">
<div id="d3-box">

<div class="ibe1">
<div class="ibe1-1">2016/4/2-3</div>
<div class="ibe1-2">第26回柴又さくらまつり</div>
</div>

<img src="img/def-box/home-line.png" width="359" id="homeline">

<div class="ibe2">
<div class="ibe2-1">2015/7/21</div>
<div class="ibe2-2">9回葛飾納涼花火大会</div>
</div>

<img src="img/def-box/home-line.png" width="359" id="homeline">

<div class="ibe3">
<div class="ibe3-1">2015/8/28-30</div>
<div class="ibe3-2">第32回寅さんまつり</div>
</div>

<img src="img/def-box/home-line.png" width="359" id="homeline">

<div class="ibe4">
<div class="ibe4-1">2015/9/10-13</div>
<div class="ibe4-2">柴又宵まつり2015</div>
</div>

</div>
</div>
</div>
</div>

<div id="e-box">

ここを右側に配置したい<br>ここを右側に配置したい<br>ここを右側に配置したい<br>ここを右側に配置したい<br>ここを右側に配置したい
<br>ここを右側に配置したい<br>ここを右側に配置したい<br>ここを右側に配置したい<br>ここを右側に配置したい<br>

</div>

</div>
</body>
</html>

ここからがcssです

@charset "UTF-8";
* {
padding : 0px ;
margin : 0px ;
}

body{
background-color:#ffffff;
}

#a-box {
height: 90px;
width: 100%;
margin-bottom: 0px;
background-image:url(img/header/header_haikei.png) ;
background-color: #ffffff;
}

#rogo{
float:left;
margin: 30px 0px 0px 130px;
}

#rennraku{
float:right;
margin: 0px 80px 0px 0px;
}

/*#b-box{
height: 10px;
width: 100%;
margin:0px auto;
background-image:url(img/header/header_haikei.png) ;

}*/

#def-box {
width : 850px;
margin:10px auto;
margin-top: 0;

}

/*最新イベントここから*/

#d-box {
float: left;
width: 550px;
height: 250px;
background-color: #ffffff;
}

#d1-box{
width: 550px;
height:400px;
margin-top: 10px;
margin-left:10px;
background-color: #ffffff;
}

#d2-box{
width: 550px;
height: 50px;
}

#d3-box{
width: 424px;
border: 2px solid #E2E2E2;
margin-top: -8px;
}

div.ibe1{
margin-top: 18px;
}
div.ibe1-1 {
text-align: left;
float: left;
margin-left: 30px;
}
div.ibe1-2 {
text-align: right;
margin-right: 30px;
}

div.ibe2{
margin-top: 16px;
}
div.ibe2-1 {
text-align: left;
float: left;
margin-left: 30px;
}
div.ibe2-2 {
text-align: right;
margin-right: 30px;
}

div.ibe3{
margin-top: 16px;
}
div.ibe3-1 {
text-align: left;
float: left;
margin-left: 30px;
}
div.ibe3-2 {
text-align: right;
margin-right: 30px;
}

div.ibe4{
margin-top: 16px;
margin-bottom: 22px;
}
div.ibe4-1 {
text-align: left;
float: left;
margin-left: 30px;
}
div.ibe4-2 {
text-align: right;
margin-right: 30px;
}

#homeline{
margin-left: 30px;
}

/*最新イベントここまで*/

#e-box {
　　　float: right;
width: 250px;
height: 250px;
background-color: #321232;
}

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (4件)

最新から表示
回答順に表示

No.4

回答者： ORUKA1951
回答日時：2016/05/04 13:45

No.2,No.3です。

本気で勉強する気なら・・、いくつか気が付いたことを
1) divは使わない。使うとしてもこんな感じ
　<header>
　　・・・
　　<div id="abstract">
　　　このページの要約
　　</div>
　要約を示す要素はHTMLにはない。sectionもasideも適切ではない。そこでidやclassを併用して文書構造を

2) セレクタは文書構造を基にして
　section section ul{
　　sectionの子孫のsectionの子孫のul要素
　と書けば、section ulには適用されない。
　　そもそもスタイルシート読むだけで、「sectionの子孫のsectionの子孫のul要素」とわかるので、いちいちHTML見てdiv.ibe4-2はどこだっけと探さなくてよい。

ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HT … )
　をIEかfirefoxで訪問して、メニュー[表示]→[スタイルシート]　に進みいろいろなスタイルを選択したり、印刷プレビュー見たりしてごらんなさい。文書構造とプレゼンテーションを分離する価値がわかるかと・・

★<br>も基本的には使いません。
★小さいことですが、rogoではなくlogo

- 0
- 件

通報する

No.3

回答者： ORUKA1951
回答日時：2016/05/04 11:28

スタイルシートもたったこれだけ。

・スマホなど小さなディスプレイでは元の位置になる。ウィンドウを縮めてごらんください。
・印刷用スタイルシート、携帯用スタイルシートは指定していない。
　印刷プレビューでは素の状態で印刷される。
＊テキストを画像に置き換えて表現する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
　ことは極力避けましょう。
　このページを視覚障碍者がスクリーンリーダーで読もうとしたときに困る。
　ちなみに、サンプルをスクリーンリーダーで読んでごらんなさい。
　　ipad/iphoneだと、[機能]→[アクセシビリティ]→[スピーチ]で「画面の読み上げ」を有効にすると使える。
　　二本指で画面上から下にスワイプすると本文を読んでくれる
・HTMLの文書構造に基づいてセレクタをきちんと書けば、無用で煩雑なdivもclassもidもいらなくなる。
　Selectors( https://momdo.github.io/css2/selector.html )

★タブは　　(全角スペース２個)に置換してあるので戻してください。

<style media="screen">

</style>

<style media="screen and (max-width: 640px)">

</style>

- 0
- 件

通報する

この回答へのお礼

ORUKA1951さんが教えてくれたhtmlとcssでもう一度作り直したいと思います！何から何まで本当にありがとうございました！

通報する

お礼日時：2016/05/04 11:33

No.2

回答者： ORUKA1951
回答日時：2016/05/04 11:03

今のうちに、ちゃんとしたHTML/CSSを身に着けることを強くお勧めします。

根本的な部分で間違っている。
そのHTML,CSSじゃメンテナンスもままならない。
<!doctype html>
と書かれているのでHTML5ですが、HTML5ではdivは基本的に使いません。HTML5で最も重要な部分です。
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
NOTE:Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable. Use of more appropriate elements instead of the div element leads to better accessibility for readers and easier maintainability for authors.
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［4.4 Grouping content — HTML5( https://www.w3.org/TR/html5/grouping-content.htm … )］より
訳すと＿＿＿＿＿＿＿＿＿＿＿＿＿＿ここから
注意: 著者には、他により適切な要素がない時の最後の最後の手段としてdiv要素を使用することが強く推奨されます。div要素の代わりにより適切な要素を使用することで、読者のためのより良いアクセシビリティを著者のためにはメンテナンス性の向上につながります。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで
　これはHTML5の最大の目的の一つ
・文書内に埋め込まれた「意味」が不明確
　↓【解決】
・文書内に埋め込まれた「意味」を明確にする
　　( http://www.atmarkit.co.jp/ait/articles/1008/30/n … )の中ほど

HTMLはたったこれだけでよい。
☆ divは極力使わない。メンテナンス大変だよ。
☆classやidは、文書構造を補完するために書くもので、デザインのために書くのではない。
　『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するため( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』
☆ デザインにかかわることはHTMLには一切書かない。デザインを後で変えようとしたときに困る。
☆ floatはボックスの配置には使わない。
　　本文中で使いた時、clearしたいときに困るし、デザイン崩れる最大の要因。

★タブは　　(全角スペース2個)に置換してあるので戻してください。

<!doctype html>
<html>
<head>
　　<meta charset="utf-8">
　　<title>柴又帝釈天参道ガイド</title>
　　<meta name="description" content="">
　　<meta name="author" content="ORUKA">
<style media="screen">

</style>
</head>
<body>
　　<header>
　　　　<h1>柴又帝釈天</h1>
　　　　<ul id="renrakusaki">
　　　　　　<li>帝釈天＊＊寺
　　　　　　　　<p>〒125-**** 東京都葛飾区＊＊＊＊＊＊</p>
　　　　　　　　<p>電話</p>
　　　　　　</li>
　　　　　　<li>営業時間
　　　　　　　　<p>・・・・・・・</p>
　　　　　　　　<p>・・・・・・</p>
　　　　　　</li>
　　　　</ul>
　　</header>
　　<section>
　　　　<h2>本文</h2>
　　　　<section class="Event new">
　　　　　　<h3>最新イベント</h3>
　　　　　　<dl>
　　　　　　　　<dt>2016/4/2-3</dt>
　　　　　　　　<dd>第26回柴又さくらまつり</dd>
　　　　　　　　<dt>2015/9/10-13</dt>
　　　　　　　　<dd>柴又宵まつり2015</dd>
　　　　　　　　<dt>2015/8/28-30</dt>
　　　　　　　　<dd>第32回寅さんまつり</dd>
　　　　　　　　<dt>2015/7/21</dt>
　　　　　　　　<dd>9回葛飾納涼花火大会</dd>
　　　　　　</dl>
　　　　</section>
　　　　<section class="Event old">
　　　　　　<h3>古いイベント</h3>
　　　　　　<dl>
　　　　　　　　<dt>2015/6/3</dt>
　　　　　　　　<dd>なんたらかんたら</dd>
　　　　　　　　<dt>2015/5/30</dt>
　　　　　　　　<dd>・・・・・大会</dd>
　　　　　　　　<dt>2015/2/30</dt>
　　　　　　　　<dd>☆☆☆☆☆☆☆☆☆</dd>
　　　　　　　　<dt>2015/5/13</dt>
　　　　　　　　<dd>☆☆☆☆☆☆</dd>
　　　　　　</dl>
　　　　</section>
　　　　<aside>
　　　　　　<p>ここを右側に配置したい</p>
　　　　　　<p>
　　　　　　　　ここを右側に配置したい。ここを右側に配置したい。ここを右側に配置したい。ここを右側に配置したい。ここを右側に配置したい
　　　　　　</p>
　　　　　　<p>
　　　　　　　　ここを右側に配置したい。ここを右側に配置したい。ここを右側に配置したい
　　　　　　</p>
　　　　</aside>
　　</section>
　　<footer>
　　　　<h3>A nice footer</h3>
　　</footer>
</body>