フツイッター フェイスブック RSS

WEB作成からカメラ・ガジェット・PC系など雑多なブログ

CSS

レスポンシブで使える比率を固定したボックス

2016年05月06日

2016年05月08日

css
Pocket

タテヨコ比を維持したままウィンドウサイズに合わせて大きさの変わるボックス

画像ならwidth100%を指定すれば良いですが、CSSで書くボックスの場合一工夫必要になります。

入れ子の包含要素にpadding-topを指定する

ボックスを入れ子にして、包含要素のpadding-topに横幅に対する縦幅の比率を%で指定することで表示できます。

HTML

CSS

SAMPLE

例えば横1200:縦800で表示したい場合3:2になるので

2÷3=0.6666

これを%にして下記のように指定します。

padding: 66% 0 0;

4:3ならば75%、2:1なら50%など。

疑似要素でも表示可能

入れ子でなくても疑似要素でも同様に表示が可能です。

HTML

CSS

SAMPLE

こんな具合にhover時に暗転する際に使えるテクニックです。

Pocket

このカテゴリで良く読まれている記事
関連記事

COMMENT