floatプロパティで位置を調節(2)

みなさまどうもこんにちは。

続きまして『overflow』プロパティを使ってフロートされた子要素の高さを親要素に算出してみたいと思います。

こちらはフロートされた要素を解除するものではございません。あくまでもフロートされた子要素の高さを取得することができる手法となります。

まず『overflow』プロパティの概要についてですが、これは要素からはみ出した要素の表示方法を指定するプロパティになります。

例えば親要素の高さが200pxに指定してあり、その内包している子要素の高さが300pxであった場合は100pxはみ出しちゃっていますね。

『overflow』プロパティに何も指定していない場合、はみ出した部分は途切れることなく表示されますが、『overflow』プロパティに値を指定すればはみ出した部分を非表示にしたり、スクロールバーを表示させてスクロールさせるようにしたりと色々な表示方法を実装することができます。ちなみに『overflow』は「オーバーフロー』と読みます。

というわけでまず記述方法から学んでいきましょう。

とれる値は以下の4つです。

• visible
• scroll
• hidden
• auto

記述例はこのような形ですね。

div {
    overflow: hidden;
}
p {
    overflow: scroll;
}

ここまでは特に難しくないと思います。

あ、一応読み方書いておきますね。

• visible びじぶる
• scroll すくろーる
• hidden ひでゅん
• auto おうと

ひらがなで書くと熱血硬派くにおくんっぽいですね。どうでもいいですね、すみません。

各値の効果は以下です。

各値を解説していきます。

まず各要素の初期値は『visible』となります。つまりはみ出した部分を表示させる、という設定ですね。

続いて『scroll』という値を取るとはみ出した部分がスクロールされて表示されるようになります。実際にレンダリングさせるとこういう表示になります。親要素の大きさは横200px縦200pxにして子要素よりも小さく設定しています。

<div style="overflow: scroll; width: 200px; height: 200px;">
    <p style="width: 300px; background-color: yellow;">ここはp要素だよ！横幅300px、高さはautoになってるからはみ出すよ！<br>ある日の事でございます。御釈迦様は極楽の蓮池のふちを、独りでぶらぶら御歩きになっていらっしゃいました。池の中に咲いている蓮の花は、みんな玉のようにまっ白で、そのまん中にある金色の蕊からは、何とも云えない好い匂が、絶間なくあたりへ溢れて居ります。極楽は丁度朝なのでございましょう。</p>
</div>

サンプルをみてみる。

はみ出した部分がスクロールされて表示されてますね。

続いて『hidden』を指定するとはみ出した部分が表示されなくなります。こんな感じですね。

<div style="overflow: hidden; width: 200px; height: 200px;">
    <p style="width: 300px; background-color: yellow;">ここはp要素だよ！横幅300px、高さはautoになってるからはみ出すよ！<br>ある日の事でございます。御釈迦様は極楽の蓮池のふちを、独りでぶらぶら御歩きになっていらっしゃいました。池の中に咲いている蓮の花は、みんな玉のようにまっ白で、そのまん中にある金色の蕊からは、何とも云えない好い匂が、絶間なくあたりへ溢れて居ります。極楽は丁度朝なのでございましょう。</p>
</div>

サンプルをみてみる。

このようにはみ出した部分が非表示になりました。スクロールもできませんので閲覧者ははみ出した部分を見ることができません。

続いて『auto』という値ですが、こちらはブラウザによって挙動が変わってしまいます。昨今のブラウザでは縦方向のみのスクロールとしてある程度統一されてレンダリングされるようですが、昔は挙動がかなり変わってしまう事も多く、なるべく使用しないようにしていた値です。今現在もandoroid端末で差やバグがあることが多いのであまり使用しないほうが良いかもしれません。

さて、この『overflow』プロパティの解説は以上となりますが「これってフロートと何の関係があるの？」と思った方がいらっしゃると思います。

実はこの『overflow』プロパティに『visible』以外の値が設定されていた場合、おまけとして『フロートされた子要素の高さを自身の高さに反映できる』というすんごい機能がついています。っていうかこれがメインでいいんじゃね？って勢いですね。

なぜ子要素の高さを算出できるか、というとそういうレンダリング上のルールになっているからです。裏側でこれこれこういう動きをしているから算出できるんだよ、というような話はどうやら全くないようです(あったらごめんなさい)。CSS2.1の仕様書で『overflow: visibleの要素以外は、height: autoの場合、高さは中身の要素の高さによる』とありますので、ただの仕様でそういうレンダリングになっているみたいですね。

というわけで実際に記述して試してみましょう。

<div style="background-color: silver; overflow: hidden;">
    <p style="float: left; background-color: yellow; width: 200px; margin: 0;">ここはp要素だよ。高さは設定してないから中身の大きさによって色々高さが変わるよ！</p>
    <p style="float: right; background-color: aqua; width: 200px; margin: 0;">ここは2つ目のp要素だよ。高さは設定してないから中身の大きさによって色々高さが変わるよ！ちなみにこれは右にフロートさせているよ！</p>
</div>

<p>ある日の事でございます。御釈迦様は極楽の蓮池のふちを、独りでぶらぶら御歩きになっていらっしゃいました。池の中に咲いている蓮の花は、みんな玉のようにまっ白で、そのまん中にある金色の蕊からは、何とも云えない好い匂が、絶間なくあたりへ溢れて居ります。極楽は丁度朝なのでございましょう。</p> 

これをレンダリングしてみると…

サンプルをみてみる。

はい、バッチリですね。子要素の高さが親要素であるdiv要素の高さとしてちゃんと算出できているようです。注意すべき点は親要素に『overflow』プロパティを設定することです。子要素ではないので間違えないようにしてくださいね。

このように親要素の『overflow』プロパティに『visible』以外の値が設定されていればフロートされた子要素の高さも算出できるようになります。

一般的にフロート対策として『overflow』プロパティに設定する値は『hidden』が多いです。

『hidden』と設定するとはみ出した部分が表示されなくなるため使いづらいのでは、と思ってしまうかもしれませんが、ウェブサイトのデザインを決める際には縦幅は可変、横幅は固定で構築されることが多いです。つまり『height』プロパティは設定しないことで縦幅は子要素の高さに合わせて可変するようにし、『width』だけ指定して横幅のみ固定にする感じですね。

しかし、『overflow』プロパティだけではフロート対策が取れない場合もあります。そんなときには『clearfix』という手法を使ってみましょう。こちらは次の記事で紹介しますね、今回はこの辺で切ります。

疲れてしまったら今日はゆっくり休んでくださいね。

ではまたお会いしましょう。

この記事は桜舞が執筆致しました。

著者が愛する小型哺乳類

桜舞 春人 Sakurama Haruto ISDN時代から様々なコンテンツを制作しているちょっと髪の毛が心配な東京在住のプログラマー。生粋のロングスリーパーで、10時間以上睡眠を取らないと基本的に体調が悪い。好きなだけ寝れる生活を送るのが夢。ゲームとスポーツと音楽が大好き。誰か髪の毛を分けて下さい。

記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。

トップページへ

前の記事へ

次の記事へ

Tweet

シェア