重要なお知らせ

「教えて! goo」は2025年9月17日(水)をもちまして、サービスを終了いたします。詳細はこちら＞

電子書籍の厳選無料作品が豊富！

３番目のBoxだけずれる

解決済

  • 質問者：masarun53406
  • 質問日時：
  • 回答数：3件

CSSとHTMLは以下の様に幅などを注意して書いたつもりで、微妙にそれぞれの幅などを調整しても、三番目だけが、なぜか下にずれちゃいます。何か勘違いしているようにも思いますが、原因を教えてください。
単に二個だとうまく行くんですけどね。
よろしくお願いします。

HTML
<div id="mainR1">
<div id="box1" >
　　box1
</div>
<div id="box2" >
　　box2
</div>
<div id="box3" >
　　box3
</div>
</div>

CSS
#mainR1 {
float: left;
width: 480;
background-color: #ffffff;
border: dotted 1px #9d9d9d;
}

#box1{
float: left;
width: 138;
height: 138;
background-color: #ffcfff;
border: dotted 1px #9d9d9d;
-moz-box-ordinal-group: 1;
-webkit-box-ordinal-group: 1;
}

#box2{
margin-left: 160;
width: 138;
height: 138;
background-color: #ffffff;
border: dotted 1px #9d9d9d;
-moz-box-ordinal-group: 2;
-webkit-box-ordinal-group: 2;
}
#box3{
float: right;
width: 138;
height: 138;
background-color: #ffcfff;
border: dotted 1px #9d9d9d;
-moz-box-ordinal-group: 3;
-webkit-box-ordinal-group: 3;
}

「３番目のBoxだけずれる」の質問画像
通報する

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

質問の本文を隠す

A 回答 (3件)

No.1ベストアンサー

  • 回答者： warpspace
  • 回答日時：

box2のCSSを少し変更。



#box2{
margin-left: 160;
　　↓
#box2{
float:left;
margin-left: 22;
    • good
    • 0
    • 件
通報する
この回答へのお礼

すばやいご指摘　ありがとうございます。
右からしか考えていませんでした。

通報する
お礼日時：2013/06/27 13:54

No.3

  • 回答者： DrFell
  • 回答日時：

3番目の……の原因は２番目がfloatしていないからです。

それと、ｃｓｓは単位が省略不可です。width:480pxなどと書きましょう。

簡単に説明します。原則として文書は普通、左から右に、上から下に解釈し置いていきます。ブロックレベル要素であるboxnは、ブロックレベル要素であるdivであるため（前後に改行を含む塊）、そのままの解釈にまかせると左から右には流れず、上から下に置いていきます。

masarun53406 さんのソースでは、親要素があり、初めての子要素#box1はfloat:leftしていますので、floatつまり、浮動化します。本来の流れからは切り離されて左に寄ります。

次にbox2はfloat:leftがないと次のボックスは原則どおり下に来るのですが、前の要素が本来の流れから外れているため、box2がbox1のあった場所に入ります。但し、box1が左にいるため、その場所をよけます（水が氷に場所を譲るような感じ）。

masarun53406さんのソースでは、box2はfloatしていませんので、box3は本来の流れ通り、box2の下に来ます。
#1さんの改良案では、#2もfloatしているので、隣に来るわけです。

蛇足ですが、親要素の範囲ないで横に並べたいだけなら、
#mainR1>div{/*ここでひとまとめに*/
float: left;
width: 138px;
height: 138px;
border: dotted 1px #9d9d9d;
margin-right:10px;
margin-left:10px;
}
/*以下は別々の指定に*/
#box1{
background-color: #ffcfff;
-moz-box-ordinal-group: 1;
-webkit-box-ordinal-group: 1;
}

#box2{
background-color: #ffffff;
-moz-box-ordinal-group: 2;
-webkit-box-ordinal-group: 2;
}
#box3{
background-color: #ffcfff;
-moz-box-ordinal-group: 3;
-webkit-box-ordinal-group: 3;
}
とすればOKです。floatはその他解除など、込み入ってくるのでしっかり理解しないとつまづきの原因になります。

http://webdesignrecipes.com/css-visual-formating …
http://www.kanzaki.com/book/css/3-2.html
等、参考に詳しく学ばれることをお勧めします。
    • good
    • 0
    • 件
通報する
この回答へのお礼

まだまだ初心者な物で、おっしゃる通りいろいろ現況をしなければなりません。しかしどの資料も読みにくいですね。

通報する
お礼日時：2013/07/03 12:51

No.2

  • 回答者： ORUKA1951
  • 回答日時：

本当に基本的な事ですが、とっても重要な事です。


★HTMLはデザインに関することは一切書いてはなりません。HTMLには文書構造しか書きません。デザインはスタイルシートで行いますが、その時にHTMLの文書構造を利用しますが、HTMLではデザインのために書かれているわけではないことが大前提です。
・構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
　は1999年のHTML4.01の勧告以来、強く叫ばれている事です。

　具体的なHTMLとスタイルシートを書いてみます。質問と添付図では文書構造が分かりませんので想像です。(誰--検索エンジンや後任の人--が見ても分かるように)

★その上で、リストの項目をdisplay:blockでblockにして、float:leftで並べてある。
★スクリーンではリストで表示される。
★HTML4.01strict + CSS2.1
★タブは＿に置換してあるので戻す。
★HTMLには、デザインに関することは何も書いてないので、簡単にかつ自由にデザインできる。
　先で全くデザインを変更することも容易

[HTML]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
＿<title>サンプル</title>
＿<meta http-equiv="Content-Style-Type" content="text/css">
＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" >
＿<link rel="START" href="../index.html">
＿<style type="text/css" media="screen">
<!--
div.section{ /* 本文(section) */
background-color:lime;padding-bottom:10px;
}
div.plan{/* planブロック */
width:440px;margin:0 auto;
background-color:white;
}
div.plan:after{
content:"";display:block;clear:left;
}
div.plan ol,div.plan ol li{/* planブロック内のリスト */
list-style:none;display:block;
margin:0;padding:0;
}
div.plan ol.header li{/* plan内のheaderクラスのol */
border:solid gray 1px;
width:180px;
float:left;
margin:5px;padding:5px;
}
div.plan ol.header{font-size:0.9em;}
div.plan ol.header li p{margin:0 0.5em 0 3em;;font-size:1.1em;}
div.plan ol.menue{clear:left;}
div.plan ol.menue>li{
width:138px;height:138px;margin:2px;
float:left;
background-color: #ffcfff;
border:dotted 1px #9d9d9d;
}
/* 以下ひとコマごとに色分けCSS3を使うともっと簡単 */
div.plan ol.menue>li+li{background-color:silver;}
div.plan ol.menue>li+li+li{background-color:#ffcfff;}
div.plan ol.menue>li+li+li+li{background-color:silver;}
div.plan ol.menue>li+li+li+li+li{background-color:#ffcfff;}
div.plan ol.menue ol{margin:5px;}

-->
＿</style>
</head>
<body>
＿<div class="header">
＿＿<h1>タイトル</h1>
＿＿<p>このページでは・・・・</p>
＿</div>
＿<div class="section">
＿＿<h2>計画書</h2>
＿＿<div class="plan">
＿＿＿<ol class="header">
＿＿＿＿<li>年月日
＿＿＿＿＿<p>平成25年8月1日</p>
＿＿＿＿</li>
＿＿＿＿<li>担当者
＿＿＿＿＿<p>山田太郎</p>
＿＿＿＿</li>
＿＿＿</ol>
＿＿＿<ol class="menue">
＿＿＿＿<li>
＿＿＿＿＿<ol>
＿＿＿＿＿＿<li>8月1日</li>
＿＿＿＿＿＿<li>全体会議</li>
＿＿＿＿＿</ol>
＿＿＿＿</li>
＿＿＿＿<li>
＿＿＿＿＿<ol>
＿＿＿＿＿＿<li>8月2日</li>
＿＿＿＿＿＿<li>試験</li>
＿＿＿＿＿</ol>
＿＿＿＿</li>
＿＿＿＿<li>
＿＿＿＿＿<ol>
＿＿＿＿＿＿<li>8月3日</li>
＿＿＿＿＿＿<li>実技試験</li>
＿＿＿＿＿</ol>
＿＿＿＿</li>
＿＿＿＿<li>
＿＿＿＿＿<ol>
＿＿＿＿＿＿<li>8月4日</li>
＿＿＿＿＿＿<li>増減可能</li>
＿＿＿＿＿</ol>
＿＿＿＿</li>
＿＿＿</ol>
＿＿</div>
＿</div>
＿<div class="footer">
＿＿<h2>文書情報</h2>
＿＿<dl class="documentHistry">
＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt>
＿＿＿<dd>2012-08-10</dd>
＿＿</dl>
＿＿<address>&copy; ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address>
＿</div>
</body>
</html>
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報