段組みレイアウト【float】：CSS入門
CSS入門（23）
今回は、floatを使った段組みレイアウトです。お話は、次の順番で進みます。
2段組みにする（float）
1：前回までのお話
（01）
前回は、widthを使って、幅を指定しました。
以下、前回までのCSSコードです。
2：段組みとは？
（02）
さて、冒頭から「段組み」だとか、「壇ふみ」などと誰でも知っているかのごとく書いていますが、日常で頻繁に使う言葉でもありませんので、ご説明いたします。
「段組みレイアウト」と言うのは、縦に1列だけではなく、2列以上の領域で構成しているレイアウトのことを言います。
例えば、次のように、「メニュー領域」＋「コンテンツ領域」などで構成しているような場合は、「2段組みレイアウト」と呼びます。
また、次のように、「メニュー領域」＋「コンテンツ領域」＋「メニュー領域」などで構成しているような場合は、「3段組みレイアウト」と呼びます。
2段組みレイアウトはブログなどで、3段組みレイアウトはYahoo!などのポータルサイトで、よく目にしているのではないでしょうか。
ちなみに、「壇ふみ」さんは、日本で有名な、とても美しい女優さんです。（才色兼備ですね）
3：段組みの方法
（03）
さて、壇ふみさんの美しさも分かったことだし、次に進みましょう。
段組みの方法には、主に2通りの方法があります。
- 回り込み（float）
- 相対・絶対配置（position）
どちらがよく利用されているかと言えば、より簡便に導入できる「回り込み（float）」を用いる場合が多いようです。
「相対・絶対配置（position）」は、完璧な理解とコントロールが必要です。また、ブラウザのバグによる影響も考えると、使いこなすのはとても難しいようです。
4：今回やること
（04）
今回は、floatを使った 2段組を行います。具体的には、次のように 「#blog-preの領域（2：紹介文）」を、右に持って来ます。
5：floatの書き方
（05）
floatは、次の2つの指定値を覚えておいてください。まず、左に回り込ませる「float: left;」。
float: left;
そして、右に回り込ませる「float: right;」です。
float: right;
（06）
さらに、floatを使ったら、必ず行うことがあります。それは、回り込みを解除する「clear」です。
左への回り込みを解除する「clear: left;」。
clear: left;
そして、右への回り込みを解除する「clear: right;」。
clear: right;
ただ、左−左、右−右とわざわざ指定するのは手間なので、両方の回り込みを解除する「clear: both;」を使う人が多いようです。
clear: both;
6：floatを使ってみましょう。
（07）
ざっくりイメージできたら、実際に試してみて、より理解を深めましょう。
「#blog-infoの領域（1：ブログの情報）」は左に回り込ませたいし、「#blog-preの領域（2：紹介文）」は右に回り込ませたいので、次のようにしてみようと思います。
「#blog-infoの領域（1：ブログの情報）」へ、「float: left;」を追加書きします。
「#blog-preの領域（2：紹介文）」へ、「float: right;」を追加書きします。
（08）
ブラウザで表示してみましょう。なるほど、左と右に分かれました・・・・・・でも、期待していた結果とは違っています。
見た感じでも原因が分かるのではないでしょうか。それぞれのサイズが大きいですね。
実は、一度ここで失敗を見ておいて欲しかったのです。floatを使ったレイアウトでサイズの指定が大きいと、このようなズレ方をすることがあります。
今後カスタマイズをしていく上で、おそらく一度は、このような状況に遭遇（そうぐう）すると思います。そのときに、慌てずにこのことを思い出してください。
（09）
それでは、幅を狭めます。「#blog-infoの領域（1：ブログの情報）」を、「width: 47%;」にします。
「#blog-preの領域（2：紹介文）」も、「width: 47%;」にします。
（10）
ブラウザで表示してみましょう。今度は、左と右に納まっています。
7：回り込みを解除する。
（11）
floatしたままでは、回り込みが永遠に続いてしまうので、「clear」を行います。
「clear」は、フッターなどがあれば、フッターの中に入れたりするのですが、必ずしも、floatした後にフッターなどの何かしらが存在するとは限りません。
何もない場合は、止むを得ず、例えば、<br>タグを入れたり、空の<div>タグを使います。何か他に良い方法があれば良いのですが、これといって耳にしたことがありません。
（12）
例えば、次のように、「float-clear」というクラスを作成し、「clear: both;」を指定します。
（13）
<br>タグを使う場合は、HTMLファイルのfloatの後に、次のHTML文を入れます。
<div>タグを使う場合は、HTMLファイルのfloatの後に、次のHTML文を入れます。
フッターなどが存在する場合は、この<div>タグの中に記述するわけです。
ちなみに私は、何も入れないのは気持ち悪いので、1×1のgif画を使って、<img>タグで「clear: both;」を行っています。
floatを、left & left したら？
（01）
前項では、レイアウトしたい対象に、「float:left;」と「float:right;」を行いました。
それでは、「float:left;」と「float:left;」を行ったら・・・どうなるのかしら？試してみましょう。
（02）
2つとも左に寄ると推測していた人が多いのではないでしょうか。ところが、間のスペースは減少するものの納まり方は一緒です。
例えば、同じ高さ(height)のブロックに対して、「float:left;」、「float:left;」と続けると、イメージとしては、次のように左詰め（左上から詰めていく）になります。
「float:right;」、「float:right;」であれば、逆に右詰めになります。
適当なサイズの<div>タグを作成して、いろいろと試してみてください。そうすると、floatがさらに理解できるはずです。
floatを、right & left したら？
（01）
レイアウトしたい対象に、「left」と「right」、「left」と「left」を試してみました。次は、「float:right;」と「float:left;」を試してみましょう。
いかがでしょう？配置が逆転していることが分かるでしょうか。
（02）
この方法は、floatでレイアウトする場合に、よく用いられます。例えば、左側にメニュー、右側にコンテンツをレイアウトするときのことを考えてみましょう。
この場合、通例であれば、HTML文は、どうしても「コンテンツ」より、「メニュー」を先に書かざるを得ません。
しかし、この順番では、残念ながら検索エンジンの評価が、あまり宜しくありません。
（03）
と言っても、メニューを左側におきたい場合もあるはずです。それでは、どうするか？
HTML文内では、コンテンツを先に書いて、前述のようにfloatで逆転してあげれば良いわけです。そうすれば、表示上では左にメニューが来ます。
次回予告
次回は、ブロック要素の中央揃えについて書く予定です。
関連記事
CSSに関連する記事を、ご紹介します。
1：カスタマイズ前
2：CSSの基本的なこと
3：色の指定
4：罫線の指定
5：間隔（余白）の指定
6：継承と子孫セレクタ
7：箇条書き（リスト）
8：文字（フォント）の指定
9：idセレクタ、classセレクタ
10：文章を読みやすくする
11：文字の中央揃え（センタリング）
12：レイアウト
13：tableの中央揃え（センタリング）
14：CSSで飾る
15：まとめ
作成日：2008/05/09 更新日：2008/05/09
« 「幅と高さを決める【width、height】」｜「表（table）の中央揃え」 »
コメントありがとうございます。
現在、コメントさんも、お休みしています。
お久しぶりです
制作話
コメントありがとうございます。(・∀・)/
ゴールデンウィーク中に、カスタマイズしました。
XHTMLになりましたのよ。( ﾟ∀ﾟ )ヒョーッヒョッヒョッ
CSS入門もあと数回で、ひと区切りです。
シリーズものが続くと、アクセス数が落ちるので、
ちょっとホッとしています。
ichimarugoさんは、お忙しそうですね。
制作話など聞いてみたいなぁ。(´ー｀)
おひさしぶりです
お元気そうでなによりです！＾＾
デザインが変わっててびっくりしました！
カテゴリが全部わけられてて、え、これブログ？と思うくらい。
あまりのわかりやすさと充実振りに、今ブログ内をうろついてきました。
すっごいなあ・・・
なんか鼻息が出た・・・
float、これすっごく自分は泣かされました。
でも、tableじゃできない事が出来るし（左右の入れ替えとか）
必死にやった記憶があります。
いつも自分はｐｘ指定でばっかりやってるんですが、％で指定すると
俗に言うリキッドレイアウトってやつになるんでしょうか？
今度やってみようかなあ・・・
あ、あと、もう自分、「段組み」が「壇ふみ」にしか見えません。
どうしよう
壇さん、大和田さん、壇さん。
お久しぶりです。ルミ子です♪
デザイン変えました。
ポイントは、表示の高速化です。
できるだけ、バグや無駄を削ぎ落としました。
ついでに見た目も変えました。
さらにサイトマップをもう少し改善する予定です。
floatは、私はいまだに慣れないです。
今回のリニューアルで、ちょっとレベルアップしたかな。
（%で指定しているし）
リキッドレイアウトって、画像も%で指定するのかしら？
よく分からないのだけれど・・・。(´Д｀;)
2壇ふみ、3壇ふみ、4壇ふみ。
いいなぁ、増やしたい。(・∀・)/
リキッドレイアウトの画像
ぬおお〜%で指定されていたんですね！
今、ウィンドウ縮めてみたら、やっぱりリキッドだった！
文字が流れるぜー！
いいなあ、いいなあ、今度絶対自分もやろ〜＾＾
リキッドの画像は、自分も気になるところなので、ちょっと調べてきました。
http://www.techdego.com/2007/05/liquid_image_faux_columns_css.php
（リキッドイメージとFaux columns）
↑これだと画像が自然に表示されそうですね。
たのしそ〜！
リキッドレイアウトのほかにエラスティックレイアウトも、とても気になっています。
ゴムの様にビヨヨンするレイアウト・・・。
リキッドは%、エラスティックはem指定？みたいな感じらしいです。
作ってみた
挿絵的に使う画像じゃなくて、タイトル画像に使う場合のやり方を、
MDNの本でみたので、作ってみました。
http://nyan-colon.com/sample/sample.html
タイトルとかの画像なら、つかえそうですね。
空の画像のはじっこをマスクで、背景色との切れ目が目立たないように
加工しています。
何度も失礼しました〜。
リキッドレイアウトとエラスティックレイアウト
教えてくれてありがとう！(・∀・)/むひょー
そっかー、リキッドレイアウトの画像は、
CSSの方で、width、heightを指定するのかー。
なるほどなー。
でも、imgタグに、width、height付けなくても、
良いものなのかしらん。
エステティックサロンレイアウトなんてのもあるのか。
おぉ、スライドしとる。
ユーザとしては、どうなんでしょうね。
どういう状態が好まれるのかしら。
MdN
MdN 読んでいるんだー、オサレだね。
ひろこさんてば、オサレだね。
はじっこマスク？？？は、よく分からないけれど、
すごいね！ビヨヨンになっとる。
サンプル集として、サンプルとコードを置いておくと、
Webデザイナーの人達に喜ばれそうだわん。▼･ェ･▼わんわん
スイーツ（笑）
MdNは、webデザインの本一冊だけなんですが、
小技とかのhtmlとかｃｓｓとかを載せてくれてて、すごく参考になります。
MdNさんはとても素敵だけど、
自分がオサレかどうかはわからない、スイーツ（笑）
コード、今書いてきました。MdNの本を参考にしたから、怒られないか
ﾄﾞｷﾄﾞｷしてるのでそのうち消しちゃうかも＾＾；
ところで、html内の画像のwidth、height。
書かなくていいのか、について、自分もどうなのよと思ったので
実際書かないものを作ってAnother HTML-lint gatewayさんに
お伺い立ててきたんですけど
「ちゃんと書きなさいね」と言われました。
でも、その理由が、あらかじめ大きさを指定しておくと
ブラウザがその画像を読みに行く前からページのレイアウトを
迅速に組める、らしく、ページの表示が速くなるんだそうです。
減点はされなかったけど、リキッドではない、通常の場合なら
書いておいた方がよさそうですね。
widthとheight
（1）MdNさん
オサレ過ぎて、私なんかは、手に取り難かったんだけれど、
そっかー『MdN』参考になるんだー。
これからは、チェックしてみることにするよ！（スイーツ）
怒られたりはしないんじゃないかしら。
まるまる1冊とかはどうかと思うけれども。
積極的に「MdNさんの売上に貢献しまっせ」
という姿勢を見せておく方が良いんじゃないかしら。
（Amazonとか張って）
各雑誌から、そういうのをチョイスして20件くらいになると、
はてブとか付きそう。「こりゃありがたい」って感じで。
注目が集まれば、雑誌の売上にも貢献するし、みんな幸せ。
そういう状況で著作権がどうこう言う人は、余程の変わり者です。
（2）widthとheight
そうなんです。HTML-lintさんでチェックすると、
widthとheight入れなきゃ駄目って言われるんです。
警告レベルは、確か0（低い）だったと思うけれども。
ブラウザは、レイアウトが組みやすくなるんですよね。
画像が多いときの、あのガクンガクンいうのがなくなる。
でも、レイアウトとかって、CSSの役割なんじゃないの？
なんてことも思ったりするのです。
HTMLでwidthとheightを指定するのは、ちょっと矛盾を感じます。
それから大昔、『SoftwareDesign』という雑誌で、
widthとheightを指定するのとしないのとで、
どちらの表示速度が速いかという実験をする記事があったのだけれど、
結果は、指定しない方が速かったです。
指定する行為が、つまり処理として増えるからなのかもしれません。
ただ、1998年頃のお話なので、今はどうか分かりません。
もちろん、環境や状況にも寄るしねー。
長くなっちゃった。(〃▽〃)
ちょっといじってみた
へええーwidthとheightしない方が早いのか・・・。
今はどうなんでしょうねえ・・・
ｶﾞｸﾝｶﾞｸﾝなくなるのは、やっぱり魅力的だけど、
なんでhtml側に？と言うのは自分もちょっと疑問・・・。
同じ大きさの画像ならいいけど、いろんな大きさの画像の場合
それぞれ指定するのがめんどいから？
わからん。
コード書いたりするのをやったらおもしろくて、また手直ししてきました。
使っている画像をアップしてみた。ちょっとわかりやすくなったかなあ・・・。
MdNさんを参考にしたものを公開することについて、
そう言っていただけて安心しました。よかったー
こういうの楽しいですよね。実験したりするの。
お忙しいところ何度もすみませんでした。
ひろこ先生
コメントありがとうございます。
（1）定義
うーん・・・こ。どうなんでしょうね。
そろそろ、W3Cの資料なんかにも、目を通す時期なのかなーとか、
そんなことも、思ったりしています。
書いていないかもしれないですけどね。分かり難いだろうし。
HTML、CSS、はたまたXMLにしても、
定義が、まだまだ、発展途上なのかもしれませんね。
（2）エラスティックレイアウト
あぁ、なるほど。
背景色だったのかぁ。
分かりやすくなりました。
（3）MdNさん
よほど、参照元を書いてくれる方が、嬉しいと思うんだな。
いまは出版業界は、売れなくて厳しいらしいから、
いい具合に宣伝してくれたなら、願ったり叶ったりですよ。
オーソリティになっていけば、
「ひろこ先生、是非うちの雑誌をご覧いただけないでしょうか」
なんてことになっていくわけです。素晴らしい。ヽ(・∀・)/ワーイ
トラックバック
http://kumacrow.blog111.fc2.com/tb.php/293-84017a47
カスタマイズされたんですね！！！スッゴクイイです！
とっても見やすいし、いろんなとこを思わずクリックしたくなります。
kumacrowさんのイラストがまた利いてますね！
CSS入門がかなり進んでますね！参考にさせてもらいますね＾＾