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

関連記事

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

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

トラックや業務用車両の右側面によく見かける、右から左に向かって書かれている「右横書き」の会社名。どう考えても、誰にとっても読みにくい(はず)。「どうして右から左...

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

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

aspect

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

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

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

花粉症との戦い

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

進化したGoogle レンズ

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

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

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

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

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

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