上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
 divボックスを作るのは簡単でした。
 縦に、ボックスを積み上げていくのも簡単です。ただ順番に前回のボックスを書き加えて行けばいいだけです。
 では、サイドバーと本文のブロックのように横に並べるには?


フロート

 箱を横に並べるために必要なのが「float」という命令文(プロパティ)です。
「float : left ;」で、左詰めの箱、
「float : right ;」で、右詰めの箱ができます。




「詰め」というのは、左の場合は左から順番に、右も同様に並んでいくということ。
 例えば、以下のようなHTMLを組み上げた場合…

<div style="float:left;">
左1ブロック
</div>
<div style="float:left;">
左2ブロック
</div>
<div style="float:left;">
左3ブロック
</div>
左1
左2
左3


 こんな感じでボックスが並んでいきます。
 右だと、こんな風に…

右1
右2
右3




横積みモードを解除する

 結構簡単に横並びの箱も実現できました。ですが、これ、いちいち解除する命令を送ってやらないと、「float」を指定していないそれ以下の「HTML」もどんどん勝手に隙間に入っていってしまいます。

 こんな感じで表示がおかしくなる。(注1*IE以外のブラウザ)↓
左1
左2
文字だけするすると抜け落ちたり、裏側に重なって表示されたり、消えてしまったり、もうめちゃくちゃな表示になってしまうのですよん。

 これは、「clear : both ;」という命令文で解除することができます。

 以下のようにタグを作ります。
<div style="float:left;">
左1ブロック
</div>
<div style="float:left;">
左2ブロック
</div>
<div style="clear:both;">
フロートの下のブロック
</div>
左1
左2
clear : both ;
フロートの下のブロック


☆実際にDIVボックスを、リアルタイムにフロートさせてみよう。
divフロートチェックツール(リアルタイム)


実際に表示確認してみる(編集可)
【HTML】

【CSS】




ファイアフォックス系ブラウザのバグ

 この「float」を使うと、ファイアフォックス系のブラウザでバグが出ます。フロートさせたボックスが入った親ボックスの背景が無くなる(親ボックスの高さ height が無くなる)というもの。
 このバグを回避するには「<br clear="all">」と言うタグを、以下の場所に挿入します。

<div class="oya">
<div style="float:left;">
左1ブロック
</div>
<div style="float:left;">
左2ブロック
</div><br clear="all">
</div>

<div style="clear:both;">
フロートの下のブロック
</div>

 あまり深く考えず、そこに入れておけば多分大丈夫だと思います。
「<br clear="all">」でなく、「<div style="clear:both"> </div>」でも大丈夫だと思います。(未確認)
 そして、必ずフロートを解除する最初のボックスで、基本の「clear : both ;」は、忘れないように入れておいてください。


なんかが変だと思ったら

症状・状態怪しい場所
ファイアフォックス系のブラウザを使っていて、背景のボックスが消えた。バックグランドカラーもボーダーも指定できなくなった。この上のように「<br clear="all">」を、フロートの最後の</div>の直前に入れてみる
ブログが全部崩れた</div>で、どこかを閉じ忘れている。
</div>で、余計な部分を閉めている。
タグのどこかが全角文字になっている。
””の閉め忘れ。class="" とか、style="" とか。
<div>、</div>の綴り間違い。
「clear : both ;」忘れ。
「crear : both ;」になっている。

 これが、よくやらかすミスです。よくやるのが「</div>」の閉じタグがどこで抜けているのか訳がわからなくなる場合です。

 技としては、「<div style="clear:both;"></div>」という、空のボックスを、フロートの後に置いてみて、プレビュー。
 もしもそれで、ブログ本体は正常に表示されれば、clear:both;が上手く働いていないと言えます。
 綴りミスや、全角文字、" "忘れを疑ってみます。

 空ボックスを入れても正常にならない場合は、大体</div>が上手く働いていない場合。
 綴りミスや、全角文字、「<>」忘れを疑ってみます。
 正常であれば、</div>を、書き忘れているか、余計に書いているかです。

 これが探すのが一苦労なんです…

 IE系のデバッグなら スレイプニル の「Hawkeye」、FX系のデバッグなら、Firefox ブラウザ無料ダウンロード の「Firebug」をダウンロードして使うのが、オススメかも。


*注1

 ブラウザがIEの方は、何がおかしいのか分からないと思います。
 これ、実はIE以外のブラウザの場合は、殆どが崩れて表示されています。



■次のページはコチラです。
ブログの中にブログ?・ブロックでミニブログ(骨格編)

■divボックスフロート徹底講座。
実際にdivブロックを記事で利用する

■CSSメインメニュー
実用的スタイルシート入門
このエントリーをはてなブックマークに追加
Fri.03.26.2010
Comment
208
ありがとうございました。
はじめまして。
ありがとうございました。
とても参考になりました。
自分のWebで起きているエラーとは違っていたようですが、今になって初めて<DIV>の扱いについて知ることができました。
今度HTMLの中に仕込んでみます。

219
承認待ちコメント
このコメントは管理者の承認待ちです

Trackback
Comment Form
質問するときは?
  • 不具合が出ているページのURLを書き込む。
  • 使っているブラウザ(IE、Firefoxなど)を書き込む※IE6はサポート外です。
  • 次の人が確認できるように、使っているテンプレートの記事ページ、或いは各カスタマイズ記事ページにコメントを書きこむ。
コメント時の注意
やっぱり自分で解決したい時
特定の記事のみでレイアウトが崩れる場合
全ページでレイアウトが崩れる場合
メールフォーム
Bookmarks
Page Top
Copyright © SAKILab All Rights Reserved.
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。