大変初歩的な質問でごめんなさい。
フローとの解除について教えて下さい。
例)
<div id="main">
<div id="left">
</div>
<div id="right">
</div>
</div>
とあり、
#main{ width : 1000px ; }
#left , #right{
width : 500px;
float : left ;
}
と、指定するとします…(CSS、HTMLは最低限しか書いていませんが。。。
HTMLは4.01か、XHTMLあたりでお願いします。HTML5はまだまだ……
このあと、#leftと#rightの次には</div>がありますが、この場合、clear : left (both);はどこに指定すればよいのでしょうか?もしくは、指定する必要が無いのでしょうか?
大変初歩的ですがよろしくお願いいたします。
No.2ベストアンサー
- 回答日時:
<div id="main">
<div id="left">
</div>
<div id="right">
</div>
<hr>
<div id="hoge"></div>
</div>
hr {
clear: both;
visibility:hidden
margin:0;
padding:0;
border:0;
}
floatする要素の親にoverflow:hiddenでもいいのですが、
HTML構造を変えられず、floatしている要素と次の要素の間に適当な要素がないのであれば
hr(brでもいい)を追加してそこでclearするのが手っ取り早いかなと思いました。
お礼が遅くなってしまい大変申し訳ありません…^^
なるほど…
適当な要素を追加して、それにclearを設定するのですね…
大変参考になりました。
No.1
- 回答日時:
divの使い方やid,class名の付け方が、そもそも・・
「DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」ためのものです。left,rightは、それとは程遠い・・。仕様書すら読んでないマニュアル--サイトがあるので注意してください。
floatは、本来は文章中の画像などの周囲にテキストを回りこませるためのものです。
・オブジェクトの浮動 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
・'float' ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )
通常は、次のセクショニングコンテンツ(HTML5的)や段落、見出しなどで解除すべきものですね。
<p class="figure"><img*****></p>
<p>段落</p>
<h3>見出し</h3><!-- float解除 -->
<p>段落</p>
<p>段落</p>
ですので、スタイルシートでは次のように書かれるはずです。
div.section p.figure{width:240px;float:left;margin:0.5em 1em;}
div.section h1,div.section h2,div.section h3{clear:left;}
CSSを読むと、
「本文(sectionDIV)内に、挿絵(figuer)が現れたら、左に浮動させて、次に見出し(h3以上)が現れたら、それを解除する。」
このようにHTMLが、class名を使ってきちんと文書構造をマークアップされていたら、HTMLを見なくてもスタイルシートで指定している内容が手に取るようにわかるはずです。また、floatが本来の使い方をされているため、大変わかりやすいでしょう。
将来--数年後--HTMLに手を加えるのも楽です。気が変わって画像を左に浮動させたいとき--スタイルシートに手を加えたいときもHTMLを弄る必要がありません。
以上とても大事なことを理解したうえで、本題です。
left,rightの意味が、まったくわかりませんので、アドバイスの使用がないのですが---こんなHTML書いたらダメです。先で何が書いてあるか、いちいちHTMLを開いて中を読まなきゃわからなくなる。
たとえば、本文を示すclass名をつけたDIVの中に、その記事の目次があったとします。するとマークアップは
<div class="section">
<div class="contentTable">
<ol>
<li></li>
<li></li>
<li></li>
</ol>
</div>
<div class="section" id="section1-1">
<h3>見出し</h3>
<p>段落</p>
<p>段落</p>
</div>
<div class="section" id="section1-2">
<h3>見出し</h3>
<p>段落</p>
<p>段落</p>
</div>
<div class="section" id="section1-3">
<h3>見出し</h3>
<p>段落</p>
<p>段落</p>
</div>
</div>
<div class="section">
<div class="contentTable">
<ol>
<li></li>
<li></li>
<li></li>
</ol>
</div>
<div class="section" id="section2-1">
<h3>見出し</h3>
・・・【後略】・・・
というHTMLがあったとします。--文書構造しか書かれていません!!
ここで、
div.section div section{clear:none;width:80%;margin-left:20%;}
div.section{clear:left; width:100%;}
div.section div.contentTable{width:20%;clear:left;}
先で右に置きたければ、right⇔leftと書き換えれば済む。次の要素の横幅が100%だと、floatの必要はないが、早く終わった場合のためにclearする。
floatを使うと、文書構造を変更する必要がでてきますので。もし段組のためでしたら、absoluteを使うべきでしょう。
div.section{position:arelative;}
div.section div.contentTable{position:absoute;top:0;left:0;height:100%;width:20%;}
div.section div.section{width:80%;margion-left:20%;}
これだと、目次を後に書いても良い。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- HTML・CSS 吹き出し 下記の吹き出しのスタイルシートについて 下記のスタイルシートは左側にアイコンがでる使用にな 1 2022/11/12 17:55
- PHP アップロード画像数でCSSを分けることに成功したのですが、画像の横に文字を並べることが出来ません。 3 2023/07/28 17:16
- JavaScript 画像の表示位置 3 2022/12/23 08:25
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- HTML・CSS html/cssで要素が出てこなくて困ってます 1 2022/12/31 16:59
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- HTML・CSS HTML、cssのatomつぅーやつで 課題Ex1ってやつを表示させたいのですが、 私は課題Ex1が 2 2022/12/15 16:56
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
div要素が重なってします
-
divとpの使いわけ
-
HTML属性での「""」 「''」違い
-
html の divとtable の役割
-
スペースを使わず文字位置を揃...
-
1時間30分を簡単に表したいで...
-
複数のボタンを等間隔に、かつ...
-
body>div{}の意味を知りたい
-
<div id="container">の使いか...
-
<!-- #BeginLibraryItemとは
-
ヘッダーとフッターだけ背景を...
-
html5にて水平線の引き方は?
-
HTMLとCSSはどれだけ分離できる...
-
スライド部分のリンクが貼れな...
-
インラインフレームのページ内...
-
divを横に並べる方法
-
cssにてボタン位置を下揃えしたい
-
min-heightとheightの違いについて
-
サルワカさんの吹き出しのスタ...
-
h1に自分自身へのリンクを張...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlのolやulなどlistにtitleや...
-
div要素が重なってします
-
HTML属性での「""」 「''」違い
-
複数のボタンを等間隔に、かつ...
-
ヘッダーとフッターだけ背景を...
-
html の divとtable の役割
-
<div id="container">の使いか...
-
divとpの使いわけ
-
min-heightとheightの違いについて
-
HTML5 iframe の代わり
-
divの中に外部のHTMLを埋め込む
-
3カラムレイアウトで「常に残り...
-
ヘッダーを左右に二分割する方...
-
画面を縮小するとカラムが落ち...
-
reuterのScraypingで不思議な現...
-
htmlの見出しタグ(<h1>)の次...
-
1サイト内にHTML5とXHTMLが混在...
-
inline-blockをネストすると表...
-
html5でheaderの中にnav
-
<!-- #BeginLibraryItemとは
おすすめ情報