Category: チュートリアル

この記事は、http://css-tricks.com/ の Chris Coyier の許可を得て、翻訳しています。一部変更して翻訳している部分もある場合がります。オリジナルの記事はここよりご覧いただけます。 オリジナルの記事 先日、とある方にこのテクニックに関して質問されたのですが、その時の私の反応は「チュートリアルとして記事にするにはあまりに平凡過ぎるのではないか」というものでした。けれどもそれからしばらく考えてみて、なかなか興味深い点も幾つかあることですし、みなさんに興味を持っていただける内容なのではないかと思うようになったのでこちらに取り上げることに致しました。 今回のアイデアは、ただ単にテキストを画像の上にオーバーレイ（重ねて表示させること）させるだけのことなのですが、左寄せのブロックがきちんとテキスト全体を充分な余白で囲んでいることに注目してください。こちらのスクリーンショットのサンプルをご覧ください： デモへのリンク スキーマ HTML 　 画像を背景画像としてDIVタグの中に記述してしまえば簡単でしょう。けれどもここでは画像はコンテンツとして扱われており、HTMLにも属しています。そしてDIVタグは絶対位置指定用の外枠として使われています。 CSS このように記述すると、テキストをいい感じで画像の上に重ねて表示してくれますが、テキストを取り囲む黒の半透明の部分の表示までは成功していません。h2タグはブロックレベル要素なので、ここではスタイル設定用としては役に立ちません。事前に幅が設定されていないインライン要素が必要になってきます。 なので、h2タグの内側にspanタグを追加しましょう： 　 spanタグを使っての、テキストと背景スタイル設定方法： 問題点 このままだとテキストを改行すると同時にブロック自体も改行されてしまい、1行目の最後の文字の右側と2行目の最初の文字の左側の余白が確保されません。パディングの意味が無いのです。 これを解決するためには、<br />タグ前後にspanを追加して余白を確保する必要があります。 追加したspanにもCSSでスタイル設定して、パディングを加えてあげます： セマンティック的に見ると・・・ 今までのコーディングでデザイン的には完成しましたが、随分と細かい余計なHTML要素が増えてしまいました。ハッキリ言えばspanタグですね。jQueryを使えばこれを簡単に解決することが出来ます。単純にHTML文からspanタグを削除して、下記のjQueryを適用させれば完璧です：

この記事は、http://css-tricks.com/ の Chris Coyier の許可を得て、一部変更し、翻訳しています。オリジナルの記事はここよりご覧いただけます。 オリジナルの記事 ページ上の全ての要素は矩形のボックスに囲まれています。サイズ変更やポジション変更、その他の動作などは全てCSSでコントロールすることが可能です。それではコンテンツの中を変更した時、ボックスはどのような動作を見せるでしょう。もしボックスの高さを設定していなかったら、ボックスの高さはコンテンツを含有するのに必要なだけ自動拡張してくれます。けれどももしボックスの高さや幅が設定済みで、中のコンテンツが収まりきらなかった場合はどうなるでしょう。ここでCSSオーバーフロープロパティの出番です。そのような場合にどのように処理したいかを指定することが出来ます。 オーバーフロープロパティには4つの値があります：visible（デフォルト値）、hidden、scroll、autoです。まだあまり知れ渡っていませんが、関連するプロパティとしてはoverflow-yとoverflow-xもあります。 それでは1つ1つ使い方など。細かく見ていきましょう。 Visible もしオーバーフロープロパティを設定しなかった場合、デフォルト値はvisibleです。なので一般的には、もし別の設定の上書きをするなどという場合以外には、わざわざ設定する必要もないかと思いますよ。 ここで覚えておきたい大切なことは、コンテンツがボックスからはみ出したとしても、ページ全体の流れも影響を与えることはありません。例を見てみましょう： 文章が含まれたボックスの高さは設定しない方が無難と言うのが定説ですので、それに従っておけばこのような問題は起こらないんですけれどね。 Hidden デフォルト値のvisibleと正反対なのが、hiddenです。その言葉の通り、ボックスからはみ出したコンテンツは全て隠してしまいます。 hiddenは動的なコンテンツで、しかもそれがオーバーフローすることによりレイアウトに大きな影響を与えてしまうような場合には、とても役に立ちます。しかしながら、hiddenにより隠されたコンテンツには、全くアクセス出来なくなってしまうので注意してください。例えばユーザーがデフォルトの文字サイズを大きく設定していた場合、中の文章が収まりきらずボックスからはみ出したが故に隠れた部分は一切見えなくなってしまうというような症状が起こります。 Scroll scrollの設定をするとボックスからはみ出した部分は隠れてしまいますが、ボックス内に設置されるスクロールバーによりコンテンツの内容を確認することが出来ます。 ここでの留意点は、水平方向と垂直方向の両方にスクロールバーが表示されると言うことです。もし片方は必要なかったとしても、とにかく表示されてしまいます。 Auto autoはscrollと非常に似ているのですが、scrollの場合は必要な時だけスクロールバーが表示されます。 フロートの解除 少し変に感じられるかもしれませんが、オーバーフローの使用目的としてもう1つ有名なのがフロートの解除です。オーバーフローの設定をしても、その要素のフロートをクリアしてくれるわけではなく、自分自身をクリアします。もう少し分かりやすく説明しますね。 親要素：autoかhiddenのオーバーフロー設定有り。高さ設定無しと仮定。 子要素：フロート設定有り。 上記のような場合、オーバーフロー設定有りの親要素は、フロート設定された子要素を含有する充分なサイズまで自動拡張するので崩壊してしまうことがありません。 サンプル画像をご覧ください： フロートを極めるという記事でもっと詳しい説明をしておりますので、よろしければご参照くださいね。 各ブラウザでの懸念事項 CSSではよくあることですが、オーバーフロープロパティでもブラウザによって相違点が色々とあります。 例えばこんな感じです： スクロールバーはボックスの内側か外側か？ Firefoxはボックスの外側に表示させますが、IEは内側です。本来内側に表示されるべきなので、IEだけが正しいと言えるでしょう。 上記の画像で相違点をよく確認してくださいね。 IE8でのボックス拡張バグ 面白いバグは様々ありますが、その中の一つがIEでWEBページ全体を隠してしまうと言う現象です。詳細はこちらの記事をご参照ください。 フロートレイアウトの破壊 IEの6と7と8ではデフォルト値のvisibleの場合でも、画像などのコンテンツに合わせて、コンテンツだけではなくボックス自体が水平方向に自動拡張してしまいます。この現象はフロートを使って列方向（カラム）のレイアウト配置していた時などに大打撃を与えてしまいます。拡張された1つ目の列が他の列を下に押しやってしまって、見るも無残な結果になることがあります。 CSSでスクロールバーのスタイル設定は可能か否か？ 古いバージョンのIEでは可能でしたが、今はもう無理です。他のフォーム要素と同様に、スクロールバーはCSSでスタイル設定することは残念ながら出来ません。これがいいのか悪いのか私自身はどちらでも構わないのですが、1つだけ言いたいのはWEBサイトのコンテンツあちらこちらにスクロールバーが表示されている状態はちょっとみっともないです。もしスクロールバーのスタイル方法など考えたいのであれば、JavaScriptで調べてみたらいいかもしれませんね。 IEのトリック IEでは垂直方向のスクロールバーが、必要であろうがなかろうが表示されます。これにより水平方向のジャンプを防止するためには良いのかもしれませんが、いつでも大歓迎と言うわけではありません。body要素にautoのオーバーフロー設定をすれば、これを防ぐことが可能です。

この記事は、http://css-tricks.com/ の Chris Coyier の許可を得て、一部変更し、翻訳しています。オリジナルの記事はここよりご覧いただけます。 オリジナルの記事 もしかしたら何度も申し上げているかもしれませんが、WEBデザイン上の全ての要素は矩形のボックスです。私は本当の意味でこれが分かった時、初めてCSSベースのWEBデザインというものをしっかりと理解出来るようになり、また自分で表現したいレイアウトを実現出来るようになりました。今までにもボックスのポジショニングに関しては少しお話してきたかと思います。 しかし何気にボックスそれ自体に関しては、あまりお話していませんでしたよね。ボックスのサイズと言うのはどのように計算されているかご存知ですか？ボックス構成は以下の図で表すことが出来ます（黄色の部分がボックスで、点線部分はコンテンツです。）： もしFirebugをお使いでしたら、これは見慣れた図ですよね。このFirebugの図は、どの数字がどのようにボックスに影響を与えるのかをよく表していると思います： 1つ目の例でも2つ目の例でも、マージン部分は白で表されていることに注目してください。マージンはボックスのサイズには影響を与えません。けれども、ボックスの周りにある他のコンテンツに対しては影響を与えます。そのためCSSボックスモデルの使い方を理解することは大切になってきます。 ボックスのサイズは以下のような方法で算出されます： Width（幅） width + padding-left + padding-right + border-left + border-right Height（高さ） height + padding-top + padding-bottom + border-top + border-bottom これらの要素が宣言されなかった場合は？ パディングやボーダーが宣言されなかった場合は、ゼロ（CSSリセットを使った場合が殆ど）か、ブラウザのデフォルト値（フォーム要素はリセットされないことが多いので、ゼロではない可能性の方が高い）になります。 ボックスの幅（width）が宣言されなかった場合（しかもボックスがブロック・レベル・エレメントだった場合）には、少し面倒くさいことになってきます。まずはここからお話して、後ほどそれ以外のことについてもお勉強しましょうか。 ブロック・レベル ボックスのデフォルト幅は？ もしボックス幅を指定をせず、またボックスのポジション設定がstaticかrelativeだった場合、ボックス幅自体は100％のままです。そしてパディングとボーダーは外側に付け加えられるのではなく、ボックスの内側を削っていきます。けれども、もし明示的にボックス幅を100％と指定した場合には、パディングは通常通り外側に設置されます。 ここで学べることは、ボックスのデフォルト幅というのは厳密に言うと100％ではなく、「（いろいろ差し引いて）残ったもの」と言う感じです。ボックス幅を指定するかしないかによっていろいろと状況も変わってくるので、覚えておいて絶対に損はないです。 いつも頭を抱えてしまうのが、テキストエリアです。テキストエリアではcols属性は必須です。このcols属性を満足させる為に幅指定もした方が無難です。そして子要素を持つことは出来ません。その為、テキストエリアを使用する場合には、明示的に100％の幅指定をして、同様にパディングも設定しておけば、充分なエリアを確保出来るはずです。静的に設定された幅の環境ではピクセル幅に頼ることもしばしばありますが、流動的な幅設定の環境ではそれがうまく行くとは限りません。 絶対配置あり、幅指定なしの場合 ポジション設定がabsoluteで幅指定は無しの 場合はこれまたやっかいな動きを見せてくれます。この場合の幅とは、コンテンツを含有するために充分なエリアに過ぎません。従ってもしボックス内のコンテンツが単語1つだった場合には、その単語を表示するのに必要なエリアが「幅」となります。もし2つの単語だったら、その分幅が広がります。 ボックスの横幅は親要素（relative設定された直近の親要素か、ブラウザ ウインドウ）の100％に達するまでは広がり続け、100％に達したら回り込みを始めます。コンテンツを含有するために、ボックスが垂直方向に自動拡張することには疑問を感じないのに、同じことが垂直方向で起こると変な感じがしますね。テキストはプラットフォーム間で異なる方法でレンダリングされるということは言うまでもありませんが、それぞれのブラウザによって対応方法にクセがあるので、奇妙に感じる気持ちは否定しなくていいと思いますよ。 幅指定なしでfloat設定されている場合 幅指定なしで、float設定されたボックスも同じような動きを見せます。ボックス幅はコンテンツを含有するのに必要な分だけです。そして親要素（今度はrelative設定されている必要はありません）の幅に達するまで広がります。幅指定されていないボックスというのは非常に壊れやすいので、ページ全体のレイアウトのようにミッションクリティカルなシナリオなどでは依存しない方がよいでしょう。もしサイドバーとして使用するために、コラムをfloat指定して、必要幅を確保するために画像などの要素を内部に組み込んだりしてみた暁には、見事にトラブルにぶち当たります。 インライン要素だってボックスです 今まではボックスレベルの要素についてお話してきました。ボックスレベルの要素ならボックスとして考えるのも簡単かと思いますが、インライン要素だってボックスなんです。とてもとても細長い矩形を思い浮かべてみてください。その細長い矩形が各行を包み込んでいます。インライン要素でもその他のボックスのように、マージンやパディングやボーダーを設定することが出来るのです。 この「包み込み」がとても紛らわしくて、上記のように一見左側のマージンはボックス全体を右側に押しやるのではないかと思いますが、実際は一行目のみです。何故ならボックスの開始場所はそこのみだからです。パディングは今まで同様各行の上部と下部に適用されます。上の行と下の行のパディングが重なり合った場合は無視され、本来必要な高さのみ維持されます。背景は動作を確認し易いように、透き通らせています。 自分の目で確認してみましょう 実際にページ上でボックスがどのようになっているのか見てみたいと思いませんか？スタイルシートに以下のコードを書き込んでみてください。

この記事は、http://css-tricks.com/ の Chris Coyier の許可を得て、一部変更し、翻訳しています。オリジナルの記事はここよりご覧いただけます。 オリジナルの記事 この記事は元々2007年の後半にVolkan Görgülüと共同執筆したものですが、今回加筆修正致しました。 CSS Sprites使い方 本当に「知っている」と言えますか？まず、その名前だけ聞くと、ちょっと誤解を招くかもしれません。なぜならここで言うSpritesは、あなたが今思い浮かべているであろう小さい画像のことではなく、もっと大きな１つの画像のことを差しているからです。今までにオンとオフの状態が同じ画像に含まれていて、バックグラウンドの位置を変更することにより、画像表示が切り替わるようなCSSのテクニックを見たことがありますか？ こちらにそのCSSのトリックの一例があります。 CSSスプライトもその延長上にあると考えてみましょう。相違点はと言うと、前述のCSSテクニックの場合は2つか3つの画像が1つの画像にまとめられている程度ですが、CSSスプライトの場合は何十個何百個と無制限の画像を1つにまとめることが可能です。「スプライト」という言葉の語源はもうかなり昔のコンピュータグラフィックとビデオゲーム産業に由来します。そのアイデアはコンピュータがグラフィックをメモリに取得することであり、その画像の一部分のみを表示させます。この方が次々に新しい画像を取得するよりも速いのです。スプライトは大きな複合グラフィックです。CSSスプライトはこれと殆ど同じ理論を使っています：まず画像を取り出して、シフトすることにより一部分のみを表示させ、複数の画像を取得することにより発生するオーバーヘッド（システム全体の負荷）を軽減させます。 Spriteでウェブパフォマンスの向上 いいえ、そんなことはありません。もう大分過去のことになりますが、昔はみんなページのロードスピードを速くするために画像を小さく分割していました。そういった技術は分割された画像が同時にロードされてくるので、スピードが短縮されたかのように感じられました。けれど全ての画像は1つ1つ異なるHTTPリクエストとして送信されるのであんまり効率的とは言えないかと思います。 Tenni TheurerさんがYahoo!のユーザーインターフェースブログに掲載した”Performance Research, Part 1: What the 80/20 Rule Tells Us about Reducing HTTP Requests（パフォーマンスリサーチ Part1：HTTPリクエストを減らす80/20ルールとは？”という記事を参照してみましょう。 テーブル１はHTMLドキュメントのダウンロードに5％から38％ほどを必要とするWEBサイトの一覧です。残りの62％から95％は画像やスクリプトやスタイルシートと言ったHTMLドキュメント内のその他のコンポーネントを取得するためのHTTPリクエストとして使われています。HTTPバージョンのレスポンスの速さや各ユーザーのブラウザにより異なりますが、ページ上に沢山のコンポーネントを保有していることは、ブラウザがホスト名ごとに並行してたったの2つか4つのコンポーネントしかダウンロードしないという事実によりさらに悪い影響を与えます。こういった経験により、HTTPリクエストの数を減少させることは応答時間の減少にも大きく影響し、またもっとも簡単なパフォーマンスの向上と言えるのではないでしょうか。 テーブル １ 各有名サイトでのローディングに費やす時間比較 HTMLの取得にかかる時間 それ以外 Yahoo! 10% 90% Google 25% 75% MySpace 9% 91% MSN 5% 95% ebay 5% 95% Amazon 38% 62% YouTube 9% 91% CNN 15% 85% 1つ1つの画像は、例えそれが<img=タグで記述されてようと、CSSで背景画像として記述されていようと、結局は別々のHTTPリクエストです。従ってこういった個々のリクエストがどのような悪影響を及ぼしてくるかは、想像するに容易いかと思います。 CSS Sprite(スプライト)活用方法 それでは、CSSスプライトを使用する前の例から見てみましょうか。下記のCSSでは、それぞれのクラスでは背景画像を指定しているのに対し、アンカータグ自体は背景画像がNONEになっていることに注目してください。 CSSスプライトを使用すれば、もう少しこのデータを軽くすることが出来ます。5つのボタンの為に10個の別々の画像（5つはデフォルト状態の画像で、残りの5つはマウスがロールオーバーした場合の画像）を用いる代わりに、全ての画像を1つにの大きな画像にまとめてしまえばよいのです。あまり細かいところまでは説明しませんが、簡単な流れをお見せしましょう。まず1つの大きな画像を作成してください。横幅は使用する画像の中で一番横幅が広いものに揃え、縦幅は使用する全ての画像の高さ合計プラスXピクセルを加えてください。Xピクセルとはこれからひとまとめにする画像の合計数です。次に左揃えの状態で、画像を1ピクセル間隔空けながら縦に並べてください。 それではCSSスプライト使用後の例を見てみましょう。CSSではアンカー要素自体には1つの背景画像が設定されており、個々のクラスにはY座標で背景画像の位置を変えているだけです。 これによりHTTPリクエストの数を9個も減らすことに成功し、画像の合計サイズも6.5KB減少しています。こんな小さなサンプルでもこれだけ大きな数字の変化があるのですから、本物のWEBサイト上ではどれだけ違ってくるのか想像してみてください。 CSS Sprite(スプライト)ツール Chuck Norriceさんは「大きなことを成し遂げるには、それ相当の大きな貢献をしなければならない」とおっしゃっていたことを思い出しました。本当に彼がおっしゃったかどうかは定かではないのですが、まぁとにかくよいアドバイスだと思いませんか。しかし幸いにもCSSスプライトを簡単に作成し実装出来るようなWEBサービスが存在するのです。本当に数多くのサービスが存在するのですが、中でも私がおススメは、SpriteMeです。 SpriteMeを使ってみましょう SpriteMeはブックマークレットです。なので一度ブックマークバーに登録してしまえば、あとは好きなWEBサイトに行ってブックマークをクリックすればいいだけです。するとスクリーンの右側にオーバーレイで表示されます。 上部の枠は、スプライトで一括出来ると予想される背景画像の一覧です。下の方の枠はスプライトでまとめるには適していないであろうと予想される画像の一覧で、その理由もきちんと表示されています。もしあなたの考えと異なるならば、ドラッグして上や下の一覧に加えたり外したりすることも可能です。上の枠にひとまとめにしたい画像が整ったら、「Make Sprite」のボタンをクリックしてください。自動的に1つの大きな画像にまとめてくれます。（やった！CSSスプライトですね！）ひとまとめになった画像はこんな感じで表示されます。 このサイトの現在の設定では、最終結果の（縮小）版です。（よろしければ本物の方も参照してみてくださいね。） 最近SpriteMeではCSSをエクスポート出来るようになりました。ボタンをクリックすると以下のようなコートが表示されます。 線で消されたコードは今までCSSで使用していたコードで、そのコードを書き換えたものが直下に記述されています。 それではスプライトで不可能なことは？ グラフィックを繰り返し表示することが出来ません（注1）。スプライトは1つのブロックになったグラフィック用のものです。例えばアイコンなどはCSSスプライトで使用するのにとても適しています。 注1：勿論繰り返し使用することも出来なくはないのですが、ちょっとトリッキーで、X方向かY方向いずれかの1方向にしか使えません。 CSS Sprite（スプライト）実用性 スプライトを使用することにはもう誰も疑いを持たないでしょう。ぜひ使用してみるべきです。それでは新しいデザインを作成する際の、ワークフローはどのようにしましょうか。きっと以下の2つの方法いずれかを使用した方がいいかと思います。まず1つ目は、ページを作るのと同時進行でCSSスプライトも設定していきます。ということは、フォトショップも開いて、左上から順番に画像を並べていきます。また追加したい画像があれば追加して再保存していきます。 もう1つの方法は、、、こちらの方がしっくり来るかと思うのですが、CSSスプライトは後回しに考えます。まずはそれぞれ別々に画像を作成してしまいます。そしてページが完成したら（もしくは、少なくともリリースできる状態になったら・・・。ページっていつまで経っても更新改善要素満載ですからね。）、SpriteMeを使用してスプライトしていけば完成です。 その他の例も少し載せておきますね。 Google Reader icons Facebook

この記事は、http://css-tricks.com/ の Chris Coyier の許可を得て、一部変更し、翻訳しています。オリジナルの記事はここよりご覧いただけます。 オリジナルの記事 floatとは？ float（フロート）はCSSで使用される配置用プロパティです。その目的と由来を理解する為には、プリントデザインを参照してみる必要があるでしょう。プリントレイアウトでは、場合によっては文章で画像の周りを囲ませることがあります。これは一般的に「回り込み」と呼ばれています。画像の例を見てみましょう。 ページレイアウトプログラムでは、プリントレイアウト同様に回り込ませることも出来るし、それを無視させることも出来ます。回り込みを無視させると画像は沈んでしまい、まるでそこに画像が無かったかのように文章が画像の上に重なって表示されてしまいます。これが回り込みをさせるかさせないかの違いとなり、WEBデザインにも共通してきます。 WEBデザインでは、CSSのfloatプロパティで指定された要素は、プリントレイアウトで述べたようにその要素の周りを文章が取り囲む状態になります。float指定された要素は無視されず、沈むことなく流れにそのまま浮かばせる（float）ことが出来るのです。これはabsoluteを用いて指定する、絶対配置と大きく異なる点です。絶対配置されたページの要素は、プリントレイアウトで回り込みを無視するよう指示された時と同じように、WEBページ上の流れから外されてしまいます。また絶対配置された要素は他の要素とは一線を画し、隣同士にあろうがなかろうが、お互いに一切影響を与えることはありません。 CSSでfloat設定をする場合は以下のように記述します： floatプロパティには4つの値があります。leftとrightはその単語の通り、左寄せもしくは右寄せを指定します。デフォルト設定はnoneで、要素が流れに乗ることはありません。すなわち回り込みすることはありません。最後にinheritはその要素を包含する要素（親要素）のfloat プロパティーを継承します。 一体floatの使い道とは？ 文章の回り込みを防ぐ用途は一旦置いておき、floatはWEBページ全体のレイアウトを作成することが出来ます。 floatはまたもっと細かい部分のレイアウトでも活用することが出来ます。以下の画像例を見てみましょう。例えばfloatをアバターイメージの配置設定の為に使用したとしたら、もし画像サイズが変更になったとしても、文章は自動的に調整されうまいこと表示されます。 これはrelativeを用いて枠組みの相対位置を指定し、absoluteを用いてアバターの絶対位置を指定すれば同じように再現出来るかもしれません。しかしこの方法では画像のサイズが変更されたときにうまく自動調整されることはありません。 floatのクリア floatと関連するプロパティとしてclearがあります。clearプロパティに指定された要素は、floatの流れに乗ることはなく、流れが無くなったところに身を置きます。文章で表すよりも画像を見ていただいた方が分かりやすいでしょう。 上記の例ではサイドバーはfloat設定で右寄せされており、メインのコンテンツよりも文章が短く終わっています。従ってその後に記述されたフッターはfloat設定の影響により、floatの流れに乗りサイドバーの下に表示されてしまいます。これを解決するにはフッターをどちらのfloatからもクリア（解除）させる必要があります。 clearにもまた4つの値があります。bothが最も一般的に使用され、どちらの方向から来る流れも遮断するため流れの影響を受けません。leftとrightはその単語の通り片方からの流れを遮断します。デフォルト設定はnoneで、ほぼ使用されることはないでしょう。inheritは一応5つ目の値となりますが、インターネットエクスプローラーではサポートされていません。右側もしくは左側の流れだけを止めることは自然界ではあまりないかもしれませんが、使い道はあるというものです。 大崩壊 floatを使った設定の中で非常に途方に暮れてしまうのが、どのような影響を親要素に与えるかです。もし親要素（すなわちfloatを包含している要素）がfloat指定された要素以外何も包含していなかった場合は、言葉の通り崩壊し高さが無くなってなってしまいます。もし背景設定などされていない場合には非常に気付き難いかもしれませんが、覚えておいた方がよいでしょう。 崩壊と同様、目で見ても分かりやすくはない状態でないので、次のケースはもっと最悪です。こんなシナリオがあったとしましょう。 もし上側のブロックエレメントがfloat要素部分も包み込めるよう自動拡張するならば、パラグラフ間の文章の流れに不自然なスペースが出来てしまい解決しようがありません。このようなケースではWEBデザイナーとしては先ほどの崩壊事件よりも声を大にして文句を言うべきです！ 崩壊現象の場合はそれぞれのブラウザでの問題や、レイアウトが変に崩れてしまうことを防ぐ方法を考えれば解決します。コンテナ内でfloat設定されている要素の後ろにあるものをclear設定すればよいのです。そのコンテナの外側の話ではないので気を付けましょう。 floatをクリアする方法 もし状況をきちんと把握しており、問題が起こらないと分かりきっているならばclear: bothをどうぞ使ってください。けれどなかなか世の中そんなにうまくことは運びませんし、もう少しfloatを解除する知識を付けておきましょう。 空っぽDIVメソッド： これは言葉の通り、空っぽのdivを記述することです。 /*例*/ <div style=”clear:both;”=</div= [/css] たまに<br /=タグや他のエレメントを見かけることもありますが、divの使用が一般的です。なぜなら、divそれ自体はデフォルト設定も無く、特別な機能も無く、CSSでスタイル設定されることもあまり無いからです。このメソッドは文脈上意味を持たないしプレゼンテーションのためだけに書かれているので、一部の真面目なセマンティック信者たちにはとても不評です。厳密に言えば彼らは正しいのですが、まぁこの方法でうまく解決して、誰も傷つかないのならいいのでしょうないでしょうか。 overflowメソッド： この方法では親要素にoverflowプロパティを設定します。もしoverflowプロパティが親要素にautoかhiddenで設定されていたとしたら、親要素はfloat部分を包含するために自動拡張し、実に効果的にクリアしてくれます。この方法は不要な要素を追加するわけではないので、セマンティック的にも問題ありません。しかしこのメソッドの為に新たにdivを追加するならば、先ほどの空っぽのdivと同様にあまりセマンティック的だとは言えないでしょう。overflowプロパティは元来はfloatを解除するために作られたものではないということも留意しておきましょう。またコンテンツを隠してしまったり、不要なスクロールバーを引き起こさないようにも注意しておきましょう。 簡易クリアメソッド： この方法はfloatを解除するために、見せかけのセレクター（:after)を使用します。親要素にoverflowプロパティを設定するのではなく、例えばclearfixなどと名付けたクラスを追加し、そのクラスにCSSでスタイル設定をしてあげればよいのです。 この設定はfloatを解除する親要素の後ろに、非表示の小さなコンテンツをぽちっと適用させています。けれど古いブラウザにも対応させるためには他にもコードを追加する必要があるので、完全解決とは呼べないかもしれません。 floatを解除する他の方法を見てみましょう。ここに違う種類のブロックが並んでいます。 同じ種類のブロックを見やすく並べるためには、この場合だと色が変わるたびに改行するのが良いでしょう。もし色ごとに親要素が設定してあれば、overflowメソッドか簡易クリアメソッドを使うことが出来るでしょう。もしくは色グループの間に空っぽdivメソッドを入れてあげても効果があります。どちらの方法を使うかはあなたにお任せします。 floatの問題点 floatは取り扱いが難しいことでしばし取り沙汰されます。その取扱いの難しさはIE6と、IE6のfloatに関するバグに起因することが大きいでしょう。もしIE6のサポートをしないと決めたらそんなに気にならないのでしょうが、どうしても気になってしまう方もいらっしゃると思うので簡単に説明しましょう。 pushdown： これはfloatの中にあるアイテム（大抵は画像）がfloat自体よりも大きい場合に発生します。殆どのブラウザはfloatの外側にはみ出して画像を表示しますが、他のレイアウトには殆ど影響しません。IEの場合は画像をきちんと包み込むためにfloatも拡張してしまうので、ときにレイアウトに大きく影響してきます。代表例としてはメインコンテンツからはみ出した画像が、サイドバーを下へ押しやってしまう現象です。 解決方法：はみ出してしまうような画像がないことを確認しましょう。またoverflow: hiddenを使ってはみ出した部分を切り落としてしまいましょう。 2重マージンバグ： IE6をサポートするために他にも覚えておいた方がよいことは、floatと同じ方向にマージン設定をした場合、マージンが2重（2倍）になってしまいます。 解決方法：floatにdisplay: inline設定をしましょう。それでもブロックレベルであることに変わりはないので心配しないでください。 3px Jog： これは、float設定された要素の隣にある文章が、何故か3ピクセル分離れて表示される現象です。 解決方法：影響を受ける文章に高さや幅の設定をしてあげましょう。 ボトムマージンバグ：これはIE7のバグで、float設定された親要素の中にfloat設定された子要素があった場合、子要素の下の部分のマージンが、親要素によって解除されてしまう現象です。 解決方法：親要素にbottom paddingの設定をしましょう。 代替え案 もし画像の周りに文章を回り込ませる必要があれば、float以外にあまり選択肢はありません。CSSを使って、イレギュラーな形に合わせて文章を回り込ませる方法も参考にはなるでしょう。けれど、ことページレイアウトの部分に関して言えば、float以外にも選択肢はあります。エリック・ソルさんが書いた「Faux Absolute Positioning」というアーティクルはとても興味深いテクニックで、絶対配置の良いところを残しつつfloatのフレキシブルな機能とうまく調和しています。CSS3が正式発表されれば、テンプレートレイアウトモジュールを使ってのページレイアウトも非常に役に立つかと思います。