レスポンシブ対応の基本的な方針を決める
なんとなく置いてけぼりになるタブレット対応
本当はいけないとわかっていても、480px～960pxくらいの間のいわゆるタブレットや小さめのノートPCへの対応って優先度が下がりますよね。
これは実装者のみの責任ではなく、そもそものデザインの段階でも無視されたり「お任せ」である場合も少なくなく、きっと永遠の課題。
3カラムのレイアウトをどこで1カラムにするのかとか難しいですよね。
ある程度は3カラムのままで行きたいものの、700pxくらいになるともう3カラムだと中の文字は小さくなり過ぎる。
かと言って1カラムにするとデカ過ぎて格好悪い。
なので max-width をつけて中央寄せしておくと綺麗だけど、この max-width が他のブレークポイントにまで影響してしまうのが美しくないのでモヤモヤしている状況。
max-margin とかあると便利
ボックスの横幅は正直、vwとか%とかあるので多少なら雑にやっても困ることはあまりないけれど、margin（特に垂直方向）は悩むことが多い。
スマホでは20pxの空きがPCでは40pxのように決まっていればいいが、デザインはそう単純ではない。あっちの見出しの下はスマホでもPCでも20pxのままなんてことは往々にしてある。
何もかもが同比率ではないというのが悩ましいポイントだ。
375pxの時20pxで、そこから1024pxで40pxになるまでは同比率で増えていき、それ以上の横幅では40pxのまま固定されるというのが理想だ。
つまり、5.34vw にしておいて max-margin:40px; のようなことができればいい。
比較関数という神
あるのは知っていた。IE11がネックだった。IE11を無視できる時代になった。
という訳でやってみる。
.one {
width: min(90%,960px);
margin-inline: auto;
}
うん。いい感じ。
960px（適当）を超えるまでは90%の横幅（375pxの場合は左右に5%ずつ、つまり18.75pxずつあく）になり、それ以上になる場合は960pxで止まる。
しかしここでは終らない。
単純なボックスであればこれでいいが、よく使うのは横幅一杯の背景が塗りでその内側に余白がある場合だ。
塗りの要素の内側にdivを入れて上記と同じことをすればいいのかもしれない。ただそれは気持ち悪い。わかってくれる人がどれだけいるかは不明ですが、ボックスが内包される際の内側のボックスと外側のボックスの隙間は、外側のボックスのpaddingでないと気持ち悪い。
つまり
.soto {
padding-inline: いい感じ;
}
ということがしたい。
いや、上下も同じなので
.soto {
padding: いい感じ いい感じ いい感じ;
}
こうかな。
上下を考えると面倒なので一旦左右だけだとすると、
.soto {
/* 左右合計80px足されるので960pxにするなら80pxを足した値に */
max-width: 1040px;
padding-inline: min(5vw,40px);
}
つまり
.soto {
max-width: (止めたい幅 + ★の2倍)px;
padding-inline: min(欲しいpadding,★);
}
ということか。
こういうclassを作れてしまうと楽だけれど、ちょっと汎用性が低い。
特にこの欲しいpaddingのところはvwなどを用いた値になることを考えると計算式（calc）が必要になって可読性がかなり落ちるので一旦中止。
次いで上下のpaddingを考えてみる。
sectionの上が60px、下が80pxのpaddingみたいなことはよくある。
.soto {
padding-top: 60px;
padding-bottom: 80px;
}
しかしこれも同様にスマホはこれで、PCの場合は上が80px、下が120pxなどというのはありがちだ。
.soto {
padding-top: min(16vw,80px);
padding-bottom: min(21.34vw,120px);
}
こんな感じか。
うん。悪くない。悪くないけど、このvwを求めるのが面倒くさい。特にビューポートを375pxで計算すると割り切れないことも多く任意の小数点で繰り上げないといけないのも気持ちが悪いことがわかった。
じゃあどうするか？
375pxを止める決意。（とは言っても渡されるデザインのツクリにもよりますよねぇ…）
「計算しやすいので400pxにしている」の謎が解明
ある日Twitterで「スマホのデザインのアートボードをいくつにしているか？」というアンケートがあり覗いて見たところ、375pxが多く、360pxや420pxという意見もあった。375pxの2倍の750pxという意見もチラホラ。
基本的にユーザー数が多い端末（iPhone）のビューポートと一致させている感じなので、基本的にどの回答も同じだとその時点では思っていました。
今日までは。
前述したvwの値を求めるのは「デザインで何pxか ÷ アートボート幅px」で求められる。
アートボード幅が375pxの時の20pxと、アートボード幅が400pxの時の20px ではそれぞれ以下のようなvwの値になる。
| アートボート幅 | px | vw |
|---|---|---|
| 375px | 20px | 5.333333333…vw |
| 400px | 20px | 5vw |
これを1px～120pxまでエクセルで計算して一覧にしてみたところ、
| px | vw |
|---|---|
| 1 | 0.25% |
| 2 | 0.50% |
| 3 | 0.75% |
| 4 | 1.00% |
| 5 | 1.25% |
| 6 | 1.50% |
| 7 | 1.75% |
| 8 | 2.00% |
| 9 | 2.25% |
| 10 | 2.50% |
| 11 | 2.75% |
| 12 | 3.00% |
| 13 | 3.25% |
| 14 | 3.50% |
| 15 | 3.75% |
| 16 | 4.00% |
| 17 | 4.25% |
| 18 | 4.50% |
| 19 | 4.75% |
| 20 | 5.00% |
| 21 | 5.25% |
| 22 | 5.50% |
| 23 | 5.75% |
| 24 | 6.00% |
| 25 | 6.25% |
| 26 | 6.50% |
| 27 | 6.75% |
| 28 | 7.00% |
| 29 | 7.25% |
| 30 | 7.50% |
| 31 | 7.75% |
| 32 | 8.00% |
| 33 | 8.25% |
| 34 | 8.50% |
| 35 | 8.75% |
| 36 | 9.00% |
| 37 | 9.25% |
| 38 | 9.50% |
| 39 | 9.75% |
| 40 | 10.00% |
| 41 | 10.25% |
| 42 | 10.50% |
| 43 | 10.75% |
| 44 | 11.00% |
| 45 | 11.25% |
| 46 | 11.50% |
| 47 | 11.75% |
| 48 | 12.00% |
| 49 | 12.25% |
| 50 | 12.50% |
| 51 | 12.75% |
| 52 | 13.00% |
| 53 | 13.25% |
| 54 | 13.50% |
| 55 | 13.75% |
| 56 | 14.00% |
| 57 | 14.25% |
| 58 | 14.50% |
| 59 | 14.75% |
| 60 | 15.00% |
| 61 | 15.25% |
| 62 | 15.50% |
| 63 | 15.75% |
| 64 | 16.00% |
| 65 | 16.25% |
| 66 | 16.50% |
| 67 | 16.75% |
| 68 | 17.00% |
| 69 | 17.25% |
| 70 | 17.50% |
| 71 | 17.75% |
| 72 | 18.00% |
| 73 | 18.25% |
| 74 | 18.50% |
| 75 | 18.75% |
| 76 | 19.00% |
| 77 | 19.25% |
| 78 | 19.50% |
| 79 | 19.75% |
| 80 | 20.00% |
| 81 | 20.25% |
| 82 | 20.50% |
| 83 | 20.75% |
| 84 | 21.00% |
| 85 | 21.25% |
| 86 | 21.50% |
| 87 | 21.75% |
| 88 | 22.00% |
| 89 | 22.25% |
| 90 | 22.50% |
| 91 | 22.75% |
| 92 | 23.00% |
| 93 | 23.25% |
| 94 | 23.50% |
| 95 | 23.75% |
| 96 | 24.00% |
| 97 | 24.25% |
| 98 | 24.50% |
| 99 | 24.75% |
| 100 | 25.00% |
| 101 | 25.25% |
| 102 | 25.50% |
| 103 | 25.75% |
| 104 | 26.00% |
| 105 | 26.25% |
| 106 | 26.50% |
| 107 | 26.75% |
| 108 | 27.00% |
| 109 | 27.25% |
| 110 | 27.50% |
| 111 | 27.75% |
| 112 | 28.00% |
| 113 | 28.25% |
| 114 | 28.50% |
| 115 | 28.75% |
| 116 | 29.00% |
| 117 | 29.25% |
| 118 | 29.50% |
| 119 | 29.75% |
| 120 | 30.00% |
かなり綺麗ですね。
わたしには無理ですが暗算で直ぐに出せる人も多いのではないでしょうか。
また、頻出数字については使用しているうちに覚えてしまう気もします。
アートボード幅を400pxにすれば先ほどのコードも
.soto {
padding-top: min(15vw,80px);
padding-bottom: min(20vw,120px);
}
という感じで気持ちいいですね。
これは375pxを捨てて400pxにしたくなります。身近なデザイナーが言うには750pxで作ろうとすると大き過ぎて脳がバグるそうなのであまり大きくはしたくありませんが、25px程度の増加なら許容範囲でしょう。
widthとmarginとpaddingはほぼ解決。font-sizeはどうか？
画面幅と同じ比率で文字サイズが可変するのは美しいのか？という問題には目を瞑ります。
スマホで20px、PCでと言うよりも最大は40pxとすると以下のような感じ。
.moji {
font-size: clamp(20px,5vw,40px);
}
これだと
| 横幅 | 文字サイズ |
|---|---|
| 360px | 20px |
| 400px | 20px |
| 800px | 40px |
こんな感じになり、400px以下では20px固定で、800pxの時点で40pxに到達して固定される。
なんかちょっと違う。下限は設けないとすると、
.moji {
font-size: min(5vw,40px);
}
| 横幅 | 文字サイズ |
|---|---|
| 360px | 18px |
| 375px | 18.7714px |
| 400px | 20px |
| 800px | 40px |
うーん。悪くはないが、気になることがひとつ。アートボード幅を400pxとした時に、もっと幅の小さな端末で見た時のことを気にする必要がある。
そうなった時に一般的なスマホでのフォントサイズの下限である10pxを下回らないようにデザインする必要がある。
計算するとどうなるんだ？
横幅400pxの時に11.08px（2.77vw）以下にすると、横幅360pxで10pxを下回り始める感じっぽい。
つまり、アートボードサイズ400pxの時のfont-sizeの下限は11pxと考えるとよさそうだ。
あとは最大値の問題が残る。
5vwという書き方では800pxで40pxに達してしまう。これを任意の横幅（例えば960px）の時に40pxに達するようにしたい。
| 360px | 375px | 400px | 800px | 960px～ |
|---|---|---|---|---|
| 18px | 18.7714px | 20px | 36pxくらい？ | 40px |
こんな感じか…。
ちょっと無茶だな。という訳で、
Fluid-responsive font-size calculator
という便利サイトに登場してもらったけれど、微妙に数値がズレる。
これは別のアプローチが必要になりそうなので別記事にしよう。
結論
.soto {
width: min(90%,1040px);
margin-inline: auto;
padding-inline: min(5vw,40px);
padding-top: min(15vw,80px);
padding-bottom: min(20vw,120px);
}
こんな感じか。paddingはまとめられるので、
.soto {
width: min(90%,1040px);
margin-inline: auto;
padding: min(15vw,80px) min(5vw,40px) min(20vw,120px);
}
うぅ…、見慣れないな。。。
アートボードサイズ400pxベースで、「★★pxは何vwなのか？」を直ぐに出力できる何かがあると便利だということがわかった。
:root {
--1px: 0.25vw;
--2px: 0.5vw;
--3px: 0.75vw;
--4px: 1vw;
--20px: 5vw;
--40px: 10vw;
}
とか作ってしまうのはアリなのかな…
一応、つくｔｔ…
:root {
--1px:0.25vw;--2px:0.5vw;--3px:0.75vw;--4px:1vw;--5px:1.25vw;--6px:1.5vw;--7px:1.75vw;--8px:2vw;--9px:2.25vw;--10px:2.5vw;--11px:2.75vw;--12px:3vw;--13px:3.25vw;--14px:3.5vw;--15px:3.75vw;--16px:4vw;--17px:4.25vw;--18px:4.5vw;--19px:4.75vw;--20px:5vw;--21px:5.25vw;--22px:5.5vw;--23px:5.75vw;--24px:6vw;--25px:6.25vw;--26px:6.5vw;--27px:6.75vw;--28px:7vw;--29px:7.25vw;--30px:7.5vw;--31px:7.75vw;--32px:8vw;--33px:8.25vw;--34px:8.5vw;--35px:8.75vw;--36px:9vw;--37px:9.25vw;--38px:9.5vw;--39px:9.75vw;--40px:10vw;--41px:10.2vw;--42px:10.5vw;--43px:10.7vw;--44px:11vw;--45px:11.2vw;--46px:11.5vw;--47px:11.7vw;--48px:12vw;--49px:12.2vw;--50px:12.5vw;--51px:12.7vw;--52px:13vw;--53px:13.2vw;--54px:13.5vw;--55px:13.7vw;--56px:14vw;--57px:14.2vw;--58px:14.5vw;--59px:14.7vw;--60px:15vw;--61px:15.2vw;--62px:15.5vw;--63px:15.7vw;--64px:16vw;--65px:16.2vw;--66px:16.5vw;--67px:16.7vw;--68px:17vw;--69px:17.2vw;--70px:17.5vw;--71px:17.7vw;--72px:18vw;--73px:18.2vw;--74px:18.5vw;--75px:18.7vw;--76px:19vw;--77px:19.2vw;--78px:19.5vw;--79px:19.7vw;--80px:20vw;--81px:20.2vw;--82px:20.5vw;--83px:20.7vw;--84px:21vw;--85px:21.2vw;--86px:21.5vw;--87px:21.7vw;--88px:22vw;--89px:22.2vw;--90px:22.5vw;--91px:22.7vw;--92px:23vw;--93px:23.2vw;--94px:23.5vw;--95px:23.7vw;--96px:24vw;--97px:24.2vw;--98px:24.5vw;--99px:24.7vw;--100px:25vw;--101px:25.2vw;--102px:25.5vw;--103px:25.7vw;--104px:26vw;--105px:26.2vw;--106px:26.5vw;--107px:26.7vw;--108px:27vw;--109px:27.2vw;--110px:27.5vw;--111px:27.7vw;--112px:28vw;--113px:28.2vw;--114px:28.5vw;--115px:28.7vw;--116px:29vw;--117px:29.2vw;--118px:29.5vw;--119px:29.7vw;--120px:30vw;
}
Discussion