シェアする
Positioning with float (Part 2) - Japanese Only
みなさまどうもこんにちは。
続きまして『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 | はみ出した部分はスクロールして見られるようになります。 |
| hidden | はみ出た部分は非表示となります。 |
| auto | ブラウザに依存します（ほぼ全てのブラウザではscrollと指定した場合と同じ挙動になります) |
各値を解説していきます。
まず各要素の初期値は『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』という手法を使ってみましょう。こちらは次の記事で紹介しますね、今回はこの辺で切ります。
疲れてしまったら今日はゆっくり休んでくださいね。
ではまたお会いしましょう。
This article was written by Sakurama.
Author's beloved small mammal |
桜舞 春人 Sakurama HarutoA Tokyo-based programmer who has been creating various content since the ISDN era, with a bit of concern about his hair. A true long sleeper who generally feels unwell without at least 10 hours of sleep. His dream is to live a life where he can sleep as much as he wants. Loves games, sports, and music. Please share some hair with him. |
If you find any errors or copyright issues, please contact us.
