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などを使うのがいいですね。

関連記事

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

Brackets|サポート終了からその後 結論からお伝えすると、今は「Brackets」に戻っています。状況によってDreamweaverは併用しますが。 Su...

【デザイン脳への道】#01|カラーリングとキーワード

こんにちは。犬の事ばかりじゃないか!とお叱りを受けそうなので、この辺りでデザイナー的なハナシでも。。昭和から平成を股にかけデザインをオシゴトにしてきた中でこんな...

Illustrator|アピアランスでボタンを作る

イラストレータのアピアランスを使ってボタンを作る Illustratorのアピアランスを使った方法はボタンに限らず、いろいろな場面で活用できるのでおすすめです。...

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

Illustrator|3Dとマテリアル

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

Dreamweaver|ライブラリのリンク

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

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

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

Brackets|サポート終了

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