August 2020  |  01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

スポンサーサイト

一定期間更新がないため広告を表示しています

CSSでfloat解除の2通りの方法

 

overflow:hidden; の使い方

overflow:hidden; はサイトを制作する上で必ず使うプロパティーですね。これだけ頻繁に使う理由は表示エリアからはみ出した部分を表示させないというだけではなく、overflow:hidden;と他のプロパティーを併用する事で様々な効果を発揮するからである。
 

「clearfix」と「overzoom」2通りのfloatの解除方法

後ろに要素がなく clear:both; で float解除が出来ない場合に...

その前に。ついに本日7,500円のアイクリーム買ってしまいました....
 

Koiina アイクリーム 18g

新品価格
¥7,560から
(2016/2/24 01:05時点)



後ろに要素がなく clear:both; で float解除が出来ない場合に 実際には表示されないボックスを作成し、clear 属性を付加して float をかいじょするという clearfix というテクニックがあります。


clearfix を使うには記述が複雑
しかし、実は overzoom という プロパティーを使えば、簡単に同じような効果をだせるのです。これは overflow:hidden; を使ったCSSプロパティーの中でも最もポピュラーな方法です。

次回は、同等の効果をもたらす overzoom も使って、各々の長所と短所をみて行きましょう。

 

Webデザインの新しい教科書 改訂新版 基礎から覚える、深く理解できる。



 

作りながら学ぶ HTML/CSSデザインの教科書

新品価格
¥3,024から
(2016/2/24 01:20時点)

スポンサーサイト

comments

   

trackback

pagetop