WEB作成の豆知識 -CSS講座表示に関するもの（１）-

CSS講座

表示に関するもの（１）

float - 要素の回り込み

要素の回り込みを設定します。

回り込み・・・とは、画像の周りをテキストが囲むように表示させることです。

とりあえず、指定の方法と、指定した場合のイメージ図を載せておきます。

none（規定値）: 要素は回り込みをしません。; float: none;
left: 要素は、テキストの左側に回りこみます。; float: left;
right: 要素は、テキストの右側に回りこみます。; float: right;

floatプロパティは「Picture」と描かれたイメージ（imgタグ）に指定してあると考えてください。

floatをイメージに指定した場合は、上のような感じになります。

上のサンプルはイメージ（imgタグ）にfloatプロパティを指定した場合ですが、他のインライン要素・ブロック要素でもほとんど同じ様に使うことができます。

また、周り込むのはテキストだけでなく、他の要素も回り込ませることができます。

ただ、気をつけなければいけないのは、floatプロパティはclearプロパティと組み合わせて使うのが基本になります。

もし、clearプロパティを使用しない場合は・・・場合によっては、頭の中でイメージしているのとは違う表示がされることがあるでしょう。

clearプロパティを使用しない場合

フロート
オブジェクト文字文字文字文字文字文字文字文字文字文字文字

clearプロパティを使用しない場合（HTML）

<p>
    <span class="float-object">フロート<br />オブジェクト</span>
    文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字
</p>

<p>
    <span class="float-object">フロート<br />オブジェクト</span>
    文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字
</p>

<p>
    <span class="float-object">フロート<br />オブジェクト</span>
    文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字
</p>

clearプロパティを使用しない場合（CSS）

.float-object {
    float: left;
    padding: 0.2em;
    margin: 0 0.3em;
    background: #666;
    color: #fff;
}

clearプロパティを使用した場合

フロート
オブジェクト文字文字文字文字文字文字文字文字文字文字文字

clearプロパティを使用した場合（HTML）

<p class="clearing">
    <span class="float-object">フロート<br />オブジェクト</span>
    文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字
</p>

<p class="clearing">
    <span class="float-object">フロート<br />オブジェクト</span>
    文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字
</p>

<p class="clearing">
    <span class="float-object">フロート<br />オブジェクト</span>
    文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字
</p>

clearプロパティを使用した場合（CSS）

.float-object {
    float: left;
    padding: 0.2em;
    margin: 0 0.3em;
    background: #666;
    color: #fff;
}
.clearing { clear: both; }

ウインドウを大きくしてみてください。多分、

のように異なる表示がされると思います。

今度は逆に、ウインドウを小さくしていくと、

のように、clearプロパティの有無に関わらず、同じ様に表示されるはずです。要するに、floatを設定した要素の周りにテキストが足りなくなった場合、その下にある要素にも回りこみを行ってしまうので、それをclearで解除してあげています。

clear - 回り込みの解除

floatで指定された回り込みを解除する際に使用します。

floatプロパティと組み合わせて使うことになります。

指定できる値は、 none、left、right、both の４つです。

none（規定値）: 回り込みを解除しません。; clear: none;
left: 指定された要素の左側の回りこみを解除します。; clear: left;
right: 指定された要素の右側の回りこみを解除します。; clear: rignt;
both: 指定された要素の両側の回りこみを解除します。; clear: both;

具体的な使用例は、floatプロパティのところで説明してあります。

overflow - はみ出した部分の表示方法

（要素の幅・高さを指定したときに）はみ出した部分の表示方法を指定します。

指定可能な値は visible、hidden、scroll、auto の４つです。

visible（規定値）: スクロールバーは表示しません。; 必要ならば、幅や高さを設定した要素の大きさを変更て無理やり表示させます。; 文字文字文字文字文字文字文字文字文字文字文字文字文字文字; overflow: visible;
hidden: スクロールバーは表示しません。; 要素からはみ出た部分の表示は行われません。; 文字文字文字文字文字文字文字文字文字文字文字文字文字文字; overflow: hidden;
scroll: 常時縦スクロールバーと横スクロールバーを表示します。; 文字文字文字文字文字文字文字文字文字文字文字文字文字文字; overflow: scroll;
auto: 自動でスクロールバーを表示します。（必要ない場合はスクロールバーは表示しません。）; 文字文字文字文字文字文字文字文字文字文字文字文字文字文字; overflow: auto;

規定値は visible ですが、body要素の規定値は、auto になっています。