doors doors

heightの100%を横幅だと思ってる人へ

  • HOME
  • MEMO
  • 【CSS】比率指定にも使える!heightとpadding、marginの計算方法

【CSS】比率指定にも使える!heightとpadding、marginの計算方法

前回、calc計算で100vwを基準にすれば画像や要素の比率が維持できるというお話をしました。
要素のアスペクト比(縦横比)を維持する方法
しかしPCとなると話は別になりますのでここに記しておきます。

vw指定はPCでは不利?

vwはview widthの名の通り、画面の横幅を示すものです。
そのためスマホ用のデザインには重宝します。
しかしPC版ともなると、意外な落とし穴があります。

PCブラウザでの100vwは、スクロールバーの幅も含めていることになります。
対してスクロールバーを含めない横幅は100%となります。

となるとやはり高さ指定は100%計算?

100vwがスクロールバーを含めてしまうともなれば計算も合わなくなってきます。
ではやはり calc(縦幅 / 横幅 * 100%) になる?と、思いがちですが
前回も説明した通り、heightの100%は親要素の高さを基準とします。

親要素に高さ指定がなければ上記計算の結果はautoとなってしまいます。
以下なども参考になさってみてください。

htmlとbody要素に高さ100%とするとこの計算は成り立ちます。
しかしこれら大枠はもちろん高さが変動しますし、この指定を入れてしまうと成り立たない構文も存在するでしょう。
避けたいところ。

実は横幅を基準とする高さ指定はpaddingとmargin

ここで横幅を元に指定する指定を諦めそうになりますが……
実のところその指定はpaddingとmarginが持ち合わせているのです。

※上記画像はあくまでイメージですのでpxを測らないでくださいね……!
例えばpadding-top:100%;とすると、これは横幅と同じpx数となるのです。
つまりここでcalcを使用すれば、比率計算にもなるということです。

大枠の比率を保つときはbeforeやafterなどを使うのがいいですね。

関連記事

【parallax】IEでも綺麗に動くパララックスを探してみた(追記あり)

スクロールすると背景が止まって見えたり、要素が動くパララックス。パララックスのライブラリはいくつか存在しますが、IEのために見直すことにしました。 IEでカクつ...

aspect

要素のアスペクト比(縦横比)を維持する方法

CSSにおいて、画面いっぱいの中の要素のアスペクト比(縦横比)を維持する方法を書き留めておきます。 単純に横幅も縦幅もpxで指定するのではなく、デバイスの変化に...

【javascript】three.jsと3Dでお参りできる神社作ってみた

あけましておめでとうございます。今年もよろしくお願い申し上げます。 神社にお参りできる3Dページを作ってみました。 マウスホイールでくるくるしていくと鳥居の中に...

WEB:企業サイト、PRサイト、ランディングページ、バナー制作やCMS構築、モーショングラフィックス、VP、動画制作、パンフレット、ポスター、チラシ、DMなど制作から印刷・納品まで。 お気軽にお問い合わせください。

Illustrator|3Dとマテリアル

イラストレータの3Dが復活! しかもパワーアップして戻ってきました!  バージョ...

Dreamweaver|ライブラリのリンク

状況 Dreamweaverのライブラリを使用する場合で、トップページ(inde...

Brackets|サポート終了からその後・・・

Brackets|サポート終了からその後 結論からお伝えすると、今は「Brack...

Brackets|サポート終了

Brackets|突然、告げられるサポート終了 参りました・・・2021年9月を...