制作者の活動(PR)。

アイドル・堀北真希ちゃんにうさみみを着けた女子大生キャラクタ。次ぎ
主な作品

堀北真希うさぎがソフトコンタクトレンズをつけているイラストとその場面を含んだ仮想CM動画〜平成元年〜平成 3年頃の『オプティマ』CM風に〜

フローティング。

フローティング・目次。

フローティングとは。

普段はブロックレヴェル式のボックスは上から下に縦方向に並べられて行きます。つまり、普通は一次元的なレイアウトをする事になります。

それに対して二次元的なレイアウト、すなわち横方向へボックスを並べるようなレイアウトをする上で最も簡単なのはフローティングを活用するやり方です。

フローティングとは、指定したボックスを左乃至右に寄せると言うものです。ボックスがフロートされると、後続のボックスは反対側に廻り込みます。ブロックレヴェル式のボックスならボックスが複数横に並ぶ様にレイアウトされる事になります。

また、フローティングを後の方で解除する事も出来ます。解除した後は、従来通りの一次元的なレイアウトに戻ります。

floatプロパティ…フローティングを指定する。

floatプロパティを用いる事で、実際にフローティングを行う事が出来ます。

floatプロパティでフローティングを指定された要素は、インライン要素であってもブロックレヴェル式のボックスとなります。

言い換えれば、インライン要素もフローティングすることが出来る訳です

また、floatプロパティでフロートされた要素が必ずブロックレヴェル式のボックスになるということから、置換インライン要素(<img>要素など、テキスト以外のもので置き換えられるインライン要素)以外をフロートする場合は必ずwidthプロパティで横幅を決めておく必要があります。そうしないと、横幅が100%と見なされておかしな結果になってしまいます。

値としては、以下のキーワードが使えます。

none
フロートしません。主にフロートを指定したセレクタを後で取り消す場合などに用います。
left
左へフロートします。
right
右へフロートします。

floatプロパティを用いる上での注意事項。

clearプロパティ…フローティングによる廻り込みを解除する。

clearプロパティを用いる事で、フローティングの解除が出来ます。

clearプロパティを当てられたボックスは、フロートされた要素の下に配置される事になります。

値としては、以下のキーワードが使えます。

none
フローティングを解除しません。
left
左のフローティングを解除します。
right
右のフローティングを解除します。
both
左右双方のフローティングを解除します。

clearプロパティを用いる上での注意事項。

clearプロパティの便利な使い方。

ブロックレヴェル内で下位要素をフロートする場合、フロートされた下位要素の高さは親要素のブロックの高さに影響を与えませんが、clearプロパティを適用したブロックレヴェル式の要素を内容の一番最後に入れる事で、フロートしている下位要素に親要素の高さを合わせる事が出来ます。とは言うものの、空のブロックレヴェル要素を入れるのはスマートでは無いのでスタイルに「display: block; clear: both; 」を当てた<br>要素を最後に入れると良いでしょう(<br>要素はインライン要素なのでdisplayプロパティで表示方式を変更しなければなりません)。

具体的には以下のようになります。

1. HTML側のマークアップ。

まず、HTML文書では以下のようにマークアップします。

<div class="Parent">
    <p class="Child">この内容は<br />フロートされます。</p>
    この内容はフロートされません。
    <br class="Clear" />
    </div>

2. CSS側のプロパティ定義。

続いて、CSSのプロパティとして以下のように定義します(ネットスケープ 4.xを除く)。

.Parent {
    border: 2px #090 solid;
    }

.Child {
    border: 2px #0c0 solid;
    float: left;
    width: 16em;
    margin: 0;
    }

br.Clear {
    display: block;
    clear: both;
    }

ネットスケープ 4.xでは、CSSのプロパティ定義を以下のように変更します。

.Parent {
    border: 2px #090 solid;
    }

.Child {
    border: 2px #0c0 solid;
    float: left;
    width: 16em;
    }

br.Clear {
    display: none;
    }

応用例１・段組を実現する。

フローティングで最も多く用いられている応用例の一つは、ブロックを横に並べて段組を組む事でしょう。多くのサイトでは表組みを用いて段組を実現しますが、やはりCSSでデザインした方が良いものです。

段組をフローティングで行う場合の重要事項。

CSSを扱わないブラウザだと段組になりません。このため、CSS抜きでも適切に読めるようにHTML文書の構成を考えなければなりません。実際には、HTML文書のソースに記載するテキストの順序で正しく読めれば問題ありません。

実際に段組をフローティングで行う例。

以下に実例を挙げます。

1. HTML文書側のマークアップ。

まず、HTML文書側のマークアップを以下のようにします。

<div class="Contents-table">
        (目次・ここの内容は左に寄せられる)
    </div>

<div class="Contents-main">
        (本文・ここの内容は右に寄せられる)
    </div>

<div id="FOOTER">
        (フッタ・ここの内容はフローティングを解除して一番下に配置される)
    </div>

2. CSS側のプロパティ定義。

続いて、CSSでのプロパティ定義を以下のようにします。

.Contents-table {
    width: 30%;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    float: left;
    }

.Contents-main {
    width: 69%;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    float: left;
    }

.Footer {
    clear: both;
    }

ここで、二つのボックスの幅の合計が99％になっているのは、双方のボックスに枠線を付けると、枠線の幅がブロックの幅とは別になって、結果合計が100％を越えてしまう事によるものです(並べるブロックの幅の合計が100％を超えてしまうと、段組にはなりません)。

また、左右に余白があると、それらの幅も別に幅に加算されます。ですから、幅が100%を越えないようにするためにフロートするボックスの左右のマージンを０にしておく必要があります。

3. ネットスケープ 4.xでも問題が起こらない段組。

ネットスケープ 4.xの場合は右側に来る.Contents-mainクラスは右フロートにした方が安全です。

すなわち、上記の例では以下のように変更すれば良いでしょう。

.Contents-main {
    width: 69%;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    float: right;
    }

尚、三つ以上のコラムを段組する場合はネットスケープ 4.xでは失敗する可能性があります。対策としては以下の方法があります。

二段段組にデザインを変更する。
例えば「ページの概要」「目次」「本文」の三段段組なら、「ページの概要」は段組には入れずに一番上に来るようにし、その下に「目次」「本文」の二段で段組を組むようにCSSを設定します。
フッタを使わずに、段組に入れてしまう。
一般にネットスケープ 4.xでの段組で問題になるのは、フローティングを解除した後の記述が正しく配置されない事によるものです。フッタには著作権などのクレジットを入れる事が多いのですが、これを段組に組み込んでしまいます。
ネットスケープ 4.xでは段組を諦める。
実はこれが一番安全確実な対策です。

しらぎくのウェブサイト作成入門サイトマップ

ページ外へのご案内。

marguerite.site@gmail.com