段組みレイアウト【float】:CSS入門

ブログが作りたい!CSS入門 > 段組みレイアウト【float】:CSS入門

段組みレイアウト【float】:CSS入門

段組みレイアウト【float】:CSS入門

CSS入門(23)

今回は、floatを使った段組みレイアウトです。お話は、次の順番で進みます。

▲ページの先頭に戻る

2段組みにする(float)

1:前回までのお話

(01)

前回は、widthを使って、幅を指定しました。

widthを使った幅の指定

以下、前回までのCSSコードです。

▲ページの先頭に戻る

2:段組みとは?

(02)

さて、冒頭から「段組み」だとか、「壇ふみ」などと誰でも知っているかのごとく書いていますが、日常で頻繁に使う言葉でもありませんので、ご説明いたします。

「段組みレイアウト」と言うのは、縦に1列だけではなく、2列以上の領域で構成しているレイアウトのことを言います。

例えば、次のように、「メニュー領域」+「コンテンツ領域」などで構成しているような場合は、「2段組みレイアウト」と呼びます。

2段組みレイアウト

また、次のように、「メニュー領域」+「コンテンツ領域」+「メニュー領域」などで構成しているような場合は、「3段組みレイアウト」と呼びます。

3段組みレイアウト

2段組みレイアウトはブログなどで、3段組みレイアウトはYahoo!などのポータルサイトで、よく目にしているのではないでしょうか。

ちなみに、「壇ふみ」さんは、日本で有名な、とても美しい女優さんです。(才色兼備ですね)

▲ページの先頭に戻る

3:段組みの方法

(03)

さて、壇ふみさんの美しさも分かったことだし、次に進みましょう。

段組みの方法には、主に2通りの方法があります。

  • 回り込み(float)
  • 相対・絶対配置(position)

どちらがよく利用されているかと言えば、より簡便に導入できる「回り込み(float)」を用いる場合が多いようです。

「相対・絶対配置(position)」は、完璧な理解とコントロールが必要です。また、ブラウザのバグによる影響も考えると、使いこなすのはとても難しいようです。

▲ページの先頭に戻る

4:今回やること

(04)

今回は、floatを使った 2段組を行います。具体的には、次のように 「#blog-preの領域(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でズレる

実は、一度ここで失敗を見ておいて欲しかったのです。floatを使ったレイアウトでサイズの指定が大きいと、このようなズレ方をすることがあります。

今後カスタマイズをしていく上で、おそらく一度は、このような状況に遭遇(そうぐう)すると思います。そのときに、慌てずにこのことを思い出してください。

(09)

それでは、幅を狭めます。「#blog-infoの領域(1:ブログの情報)」を、「width: 47%;」にします。

「#blog-preの領域(2:紹介文)」も、「width: 47%;」にします。

(10)

ブラウザで表示してみましょう。今度は、左と右に納まっています。

floatで左と右

▲ページの先頭に戻る

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で左と右

それでは、「float:left;」と「float:left;」を行ったら・・・どうなるのかしら?試してみましょう。

(02)

2つとも左に寄ると推測していた人が多いのではないでしょうか。ところが、間のスペースは減少するものの納まり方は一緒です。

floatで左と左

例えば、同じ高さ(height)のブロックに対して、「float:left;」、「float:left;」と続けると、イメージとしては、次のように左詰め(左上から詰めていく)になります。

floatで左詰め

「float:right;」、「float:right;」であれば、逆に右詰めになります。

floatで右詰め

適当なサイズの<div>タグを作成して、いろいろと試してみてください。そうすると、floatがさらに理解できるはずです。

▲ページの先頭に戻る

floatを、right & left したら?

(01)

レイアウトしたい対象に、「left」と「right」、「left」と「left」を試してみました。次は、「float:right;」と「float:left;」を試してみましょう。

いかがでしょう?配置が逆転していることが分かるでしょうか。

floatで右と左

(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)の中央揃え」 »

コメントありがとうございます。

お手数ですが、コメント前に留意事項をご覧くださいませ。

また、現在ご質問にお答えする余裕がない状態にあります。よろしくお願いいたします。

お久しぶりです

こんばんは!お久しぶりです^^久しぶりにコメントさせてください☆
カスタマイズされたんですね!!!スッゴクイイです!
とっても見やすいし、いろんなとこを思わずクリックしたくなります。
kumacrowさんのイラストがまた利いてますね!

CSS入門がかなり進んでますね!参考にさせてもらいますね^^

制作話

ichimarugo-いちまるごさん、こんにちは。
コメントありがとうございます。(・∀・)/

ゴールデンウィーク中に、カスタマイズしました。
XHTMLになりましたのよ。( ゚∀゚ )ヒョーッヒョッヒョッ

CSS入門もあと数回で、ひと区切りです。
シリーズものが続くと、アクセス数が落ちるので、
ちょっとホッとしています。

ichimarugoさんは、お忙しそうですね。
制作話など聞いてみたいなぁ。(´ー`)

おひさしぶりです

こんばんは!おひさしぶりです!
お元気そうでなによりです!^^

デザインが変わっててびっくりしました!
カテゴリが全部わけられてて、え、これブログ?と思うくらい。
あまりのわかりやすさと充実振りに、今ブログ内をうろついてきました。
すっごいなあ・・・
なんか鼻息が出た・・・


float、これすっごく自分は泣かされました。
でも、tableじゃできない事が出来るし(左右の入れ替えとか)
必死にやった記憶があります。

いつも自分はpx指定でばっかりやってるんですが、%で指定すると
俗に言うリキッドレイアウトってやつになるんでしょうか?

今度やってみようかなあ・・・

あ、あと、もう自分、「段組み」が「壇ふみ」にしか見えません。
どうしよう

壇さん、大和田さん、壇さん。

ひろこさん、こんばんは。
お久しぶりです。ルミ子です♪

デザイン変えました。

ポイントは、表示の高速化です。
できるだけ、バグや無駄を削ぎ落としました。

ついでに見た目も変えました。
さらにサイトマップをもう少し改善する予定です。

floatは、私はいまだに慣れないです。
今回のリニューアルで、ちょっとレベルアップしたかな。
(%で指定しているし)

リキッドレイアウトって、画像も%で指定するのかしら?
よく分からないのだけれど・・・。(´Д`;)

2壇ふみ、3壇ふみ、4壇ふみ。
いいなぁ、増やしたい。(・∀・)/

リキッドレイアウトの画像

KumaCrowさん、こんにちは!
ぬおお~%で指定されていたんですね!
今、ウィンドウ縮めてみたら、やっぱりリキッドだった!
文字が流れるぜー!
いいなあ、いいなあ、今度絶対自分もやろ~^^

リキッドの画像は、自分も気になるところなので、ちょっと調べてきました。

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とかcssとかを載せてくれてて、すごく参考になります。
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年頃のお話なので、今はどうか分かりません。
もちろん、環境や状況にも寄るしねー。

長くなっちゃった。(〃▽〃)

ガックシ

あ、コード拝見させていただきました。

どうしてあれで出来るのだか、分からない・・・。orz ガックシ

ちょっといじってみた

こんにちは!
へええーwidthとheightしない方が早いのか・・・。
今はどうなんでしょうねえ・・・


ガクンガクンなくなるのは、やっぱり魅力的だけど、
なんでhtml側に?と言うのは自分もちょっと疑問・・・。
同じ大きさの画像ならいいけど、いろんな大きさの画像の場合
それぞれ指定するのがめんどいから?
わからん。

コード書いたりするのをやったらおもしろくて、また手直ししてきました。
使っている画像をアップしてみた。ちょっとわかりやすくなったかなあ・・・。


MdNさんを参考にしたものを公開することについて、
そう言っていただけて安心しました。よかったー
こういうの楽しいですよね。実験したりするの。


お忙しいところ何度もすみませんでした。







ひろこ先生

ひろこさん、こんにちは。
コメントありがとうございます。

(1)定義
うーん・・・こ。どうなんでしょうね。
そろそろ、W3Cの資料なんかにも、目を通す時期なのかなーとか、
そんなことも、思ったりしています。

書いていないかもしれないですけどね。分かり難いだろうし。

HTML、CSS、はたまたXMLにしても、
定義が、まだまだ、発展途上なのかもしれませんね。

(2)エラスティックレイアウト
あぁ、なるほど。
背景色だったのかぁ。
分かりやすくなりました。

(3)MdNさん
よほど、参照元を書いてくれる方が、嬉しいと思うんだな。

いまは出版業界は、売れなくて厳しいらしいから、
いい具合に宣伝してくれたなら、願ったり叶ったりですよ。

オーソリティになっていけば、
「ひろこ先生、是非うちの雑誌をご覧いただけないでしょうか」
なんてことになっていくわけです。素晴らしい。ヽ(・∀・)/ワーイ

floatを使った配置変え

おはようございます。朝早く失礼します。

3日ほど前からこちらのサイトで勉強させてもらっています。
ところどころクスっとするネタと右上のシュールな絵にはまっています^^


現在、クマクロ様のサイトにあるCSS入門の内容をクロックブログを使って実践しており、
質問させていいただきたいことがありコメントさせていただきました。

メニューのあるサイドバーと記事の書くメイン部分がテーブルタグでデザインされている場合、
floatで配置変えすることは出来ないでしょうか?

メニュー部分がソースの上部に来ると検索的にもよくないということで、
記事のメイン部分を上にしたくサイドバーの部分と入れ替え右カラムのサイトになりました。

これをHTMLの順番はそのままCSSだけで左カラムにすることは出来ますでしょうか。

0からサイトを作ったことがないので的外れな質問をしていましたらごめんなさい。

table内でのtdのfloatによる配置変えについて

特派員さん、おはようございます!
コメントありがとうございます。

現状のbodyタグ内のHTMLコードを大まかに書くと、
次のような感じでしょうか。

+----+----+----+----+----+----+----+----+----+----+----+
<div id="canvas">

<div id="canvas_head">ヘッダ(ブログのタイトル部分)</div>

<table id="canvas_main">
<tr>
<td id="canvas_center">メイン(記事などの部分)</td>
<td id="canvas_left">サイドバー(メニューなどの部分)</td>
</tr>
</table>

<div id="canvas_foot">フッタ(qlook広告)</div>

</div>
+----+----+----+----+----+----+----+----+----+----+----+


それで、「canvas_center」エリアと、
「canvas_left」エリアのHTMLコードの順番はこのままで、

floatによって配置変えできないだろうか?というお話ですかね。
(table内で、tdタグをfloatできないの?ということ)


やってみたことがなかったので、実際に試してみました。
結果、Firefoxではできましたが、IE8ではダメでした。

できるか?できないか?というご質問に対してお答えするなら、
「ブラウザによって違いそうです」ということになるかと思います。

つまり、あまり現実的な方法ではないと言えるかもしれません。
(他のより良い方法を検討した方が良さそうです)


また、仮にうまいことできたとしても、

table内に、tableが入っている
いわゆる「入れ子」の状態になっているので、

これもあまり好ましくないといえます。
(ブログの表示が遅くなる傾向があるため)


tableタグでレイアウトしなければいけないような、
何か理由があるのかもしれませんが、

とくにこれといった理由がなければ、
次のように、divでレイアウトを組み直した方が良いかもしれません。

+----+----+----+----+----+----+----+----+----+----+----+
<div id="canvas">

<div id="canvas_head">ヘッダ(ブログのタイトル部分)</div>

<div id="canvas_main">
<div id="canvas_center">メイン(記事などの部分)</div>
<div id="canvas_left">サイドバー(メニューなどの部分)</div>
</div>

<div id="canvas_foot">フッタ(qlook広告)</div>

</div>
+----+----+----+----+----+----+----+----+----+----+----+

No title

こんばんわ クマクロ様。

これほど丁寧にお答え頂き恐縮です。
まさに上記とまったく同じソースです。

やはりテーブルタグでサイトを構築するというのはよろしくないみたいですね。

クマクロ様が紹介されていましたアクセス解析「クルック」を登録した時に
ブログサービスの方もシンプルで良さげと思い一緒に利用してみたのですが、
テーブルタグで配置されていたりと少しいじり難い作りになっています。

お答え頂いた内容をもとに、今一度チャレンジしてみようと思います。
どうもありがとうございました。

tableタグによるレイアウト

特派員さん、こんにちは!( ・∀・)ノ
コメントありがとうございます。

そうですねー、おそらくtableタグによるレイアウトは、
あまりよろしくないのではないかと思います。

ただ、何らかの理由で、あえてやっていることも考えられますから、
qlookさんのサポートにも問い合わせてみたら良いのではないかしら。

すごく優秀なサポート体制らしいので、
わりとすぐお返事いただけるかもしれません。

回り込みの件

はじめまして、先日このページを発見して分かりやすく見させていただいております。
HTMLとCSSの事をあまりわかっていないのですが専門用語が少なく分かりやすいです。

現在、このページの回りこみで手間取っています。
左上と右下に画面がきて、その後、幅を47%に変更したのですが
回り込まずに左上と右下に画像が来たままとなってしまいます。
どうすれば回り込みますでしょうか

コメントの投稿

内緒のときは、チェックしてください。

トラックバック

http://kumacrow.blog111.fc2.com/tb.php/293-84017a47
 | トップページ | 

FC2ブログの作り方・作成

GIMP2で画像を編集しよう

イラストが描ける Inkscape

初心者のためのSEO対策

Google Analytics入門

アクセス解析QLOOK

アイデアの作り方

超ビギナー向けHTML入門

超ビギナー向けのCSS入門

FC2ブログのカスタマイズ

初心者向けのCSS小技

Web制作に役立つ本

ブログでお小遣い稼ぎ

これはうまい!

誰にでも才能はあるのです

RSSフィード

プロフィール

KumaCrow(クマクロ)

KumaCrow

FC2ブログによるブログの作り方をご紹介しています。「初心者の人にも分かりやすく!」がモットーです。

Twitter KumaCrow

リンクフリー♪
フォローも、ふりっふり~

伝わる文章を書くコツ

最近の記事

最近のコメント

パソコン入門

アクセスの多かった記事

先月アクセスが多かった記事を、ご紹介します。

【1位】
GIMP2の使い方
【2位】
プリントスクリーンの方法
【3位】
GIMP2 パスの使い方
【4位】
GIMPとは?
【5位】
レイヤーとは?

初心者のデジカメ撮影術

ホームページ制作にJimdo

このブログの評価

自分を見つめなおす

ブログランキング

クリックしちゃいなよ!You、クリックしちゃいなよ!そして、Canして、Doしちゃいなよ!

FC2ブログランキングに参加してみませんか?見に来てくれる人が少しだけ増える・・・かもしれません。

FC2カウンター

ブログ開始(2007年7月)から、ユニークユーザ数が「のべ240万人」に達しました。いつもご覧いただきまして、ありがとうございます。(2011/01/05、FC2カウンター故障・データ消失により、10万人分くらいマイナスとなりました)

子どもの教育

最近のトラックバック

+++ お友達のブログ・お世話になっているサイトさま +++

ふわふわふわりん
無料ウェブ素材 Tyto-Style
海外のSEO対策・SEOツールをわかりやすく解説するブログ
日南商工会議所による情報化支援ブログ
気になるけど
聞き捨てならん!!
かちびと.net
ありのごとくあつまりて