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

関連記事

AfterEffectsでボーリングやってみよう

最近無性にボーリングがやりたくなる自分です。昔のようにパワーがないので、行く人に声かけて、グループ分けして、賞品考えて… なんてことを考えると急に億劫になってし...

昔の携帯電話

レトロへのこだわりと現実との境界について

1つ前の記事で触れていた「ガチなバック・トゥ・ザ・フューチャーファン」とは僕のことかも・・・。 わりと古いものに愛着があります。なんでもかんでもという訳でもなく...

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

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

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

花粉症との戦い

花粉症の季節がやってきてしまいました。 今年は去年より多いそうで、筆者は戦慄して...

進化したGoogle レンズ

写真や画像に関連する情報を取得したいなら、「Googleレンズ」が便利です。 こ...

もうすぐ節分!ことしは2月2日

早いもので1月があっという間に過ぎ、2月を迎えようとしています。 2月といえば節...

右横文字のアイキャッチ画像

はたらくクルマの“右横書き”に見る、風習や習慣の変化について。

トラックや業務用車両の右側面によく見かける、右から左に向かって書かれている「右横...