絶対配置をレスポンシブしたいとき。
キービジュアルのところとか、デザインによっては、要素を絶対配置してアニメーションしたい時とか。デスクトップのデザインとモバイルのデザインはあるけれど、タブレットのデザインがない時とか。デスクトップのレイアウトのまま、タブレットサイズに収めたい時とか。そんな時に応急措置として使えるレシピ。
要素を絶対配置したいときとは
一枚絵だけれど、イラストひとつひとつを順番に表示させたい、というようなとき。
単純にピクセル値で絶対配置しちゃうと、下サンプルみたく、横幅の狭いタブレット端末などで、横スクロールバーが出ちゃうし、背景途切れちゃうし、格好悪いですね:(。
画面サイズに合わせて伸縮したい
例えば、「ウィンドウの横幅が1200px以下の時にはウィンドウ幅いっぱいのまま伸縮させたい」ような場合、ウィンドウ幅が1200px以下の時の要素の幅をvwで表すと「100vw（＝横幅いっぱい）」になります。
ということは、120px幅の要素は10vw幅になる。横幅に限らず高さも位置もなにもかも120pxは10vwになる…。
ということは、ウィンドウ幅が1200px以下の時、要素のサイズは120 / 1200 * 100vwという計算で表せますね:D。
つまり、ウィンドウ幅が1200px以下の時には、この計算をそのまま、レスポンシブさせたい要素に指定し直してやれば、ウィンドウ幅に合わせて相対的に伸縮するようになるって寸法です;)。
以下のような具合で指定します。ここでは、min()関数を使って、ウィンドウ幅に合わせて伸縮するけど元の値より大きくならないようにしています。
.absonsive {
height: min(500 / 1200 * 100vw, 500px);
}さらに、個々のイラストのサイズや位置も、同じように、こつこつ置き換えてゆきます…。
.absonsive .title {
top: min(72 / 1200 * 100vw, 72px);
left: min(109 / 1200 * 100vw, 109px);
}
.absonsive .title .l {
font-size: min(74 / 1200 * 100vw, 74px);
}
.absonsive .title .-l5 {
font-size: min(34 / 1200 * 100vw, 34px);
}
︙ぜんぶ置き換えたら、出来上がり！
ウィンドウ幅に合わせて綺麗に伸縮するようになりましたねー;D！
掛け算と割り算が冗長なので、もうちょっとだけ計算を簡略化して、こう書いても同じ結果になります。
.absonsive {
height: min(500vw / 12, 500px);
}同じ計算式をいくつも書くのも冗長ですね…。こんな時はカスタムプロパティ（CSS変数）を使えばいくらか見通しが良くなります。
ここでは、計算式だけvar()関数を使って一箇所にまとめて書いておいて、サイズや位置違いの要素には、カスタムプロパティで単位なしの値だけを指定しています。
.pan, .flower, .drop {
top: min(var(--top) * 1vw / 12, calc(var(--top) * 1px));
left: min(var(--left) * 1vw / 12, calc(var(--left) * 1px));
width: min(var(--width) * 1vw / 12, calc(var(--width) * 1px));
height: min(var(--height) * 1vw / 12, calc(var(--height) * 1px));
}
.pan { --width: 323; --height: 448; --top: 22; --left: 600; }
.flower { --width: 144; --height: 143; --top: 308; --left: 958; }
.drop { --width: 18; }
.drop.-s { --height: 70; }
.drop.-m { --height: 100; }
.drop.-l { --height: 200; }
︙両脇に余白がある時
全幅ではなくて、両脇に固定幅の余白がある場合には、簡略タイプじゃない方で、100vwから余白を引いた値を掛ければ良いです:)。両脇に20pxずつの余白がある場合には、以下のような具合。
.container {
padding-inline: 20px;
}
.absonsive {
height: min(500 / 1200 * (100vw - 40px), 500px);
}両脇の余白も伸縮するように書けば簡略タイプでいけます。ただし、伸縮し始めるのが1240pxからになるので、12.4で割ります。
.container {
padding-inline: min(20vw / 12.4, 20px);
}
.absonsive {
height: min(500vw / 12.4, 500px);
}