【メモ】グリッドシステムにおけるベタ組のレスポンシブ対応
youse_jp【メモ】
グリッドシステムで全てrem（本文サイズ）基準の場合のレスポンシブで、
日本語全角ベタ組の時にレスポンシブかつグリッドシステムで両端を揃える方法を模索
マージン（両端）だけ変動ではなく、カラムをどの数採用しても文字が両端揃うようにしたい
日本語全角ベタ組（本文がよく使う）の美しさは、特定の幅では左揃えであっても右端も揃って、整列的な目には見えない強力な美しい線ができる
ブラウザ幅371pxでカラム6の時、マージン2.5rem * 2、カラム1.5rem * 6、ガター2.5rem * 5=26.5rem
全てのカラムに対応する場合、本文14pxであれば14 * カラム数6=84のスパンが必要（371, 455, 539, 623, 707...）
371から455、455から539...までの間をどのように埋めるかが課題
文字サイズを14px固定にして余白（マージンとガター）を広げる場合
スパン前の最大幅を例にすると、14 * 1.5 * 6=126、454-126=328/7=46.85、35px（2.5rem）の余白が最大46.85px（3.475rem）になるので、35pxのスケールの次の56pxよりは少ないが35と56の中間スケールを超えて、余白も間伸びする可能性が高い
文字サイズを14px固定にしてマージンを広げる場合
454-126=328-35 * 5=153/2=76.5、マージン76.5px、文字14px、ガター35px
スマホなど小さい画面に対して、余裕があるのになぜ両余白をつけるのかという印象がスパンに近い画面幅で生じる可能性はある
幅をマージン・カラム・ガター全てで割る場合
454/26.5=17.13、文字サイズ17.13pxと大きくなってしまう（最近の研究で17pxが最も読みやすい説もあるがここでは割愛）、ガターが42.825px
ガターと文字サイズを大きくしつつマージンの増加比を大きくする場合
マージンの増加最大を4remと仮定して、371~454で2.5rem~4remに線形補間とする
454/（1.5 * 6+2.5 * 5+4 * 2=29.5）=15.389、文字サイズ15.389pxで2.5remのガターが最大38.4725px、
マージンが4rem（61.556px）
84pxスパン（全て14px=1remになる幅の371, 455, 539, 623, 707...）の直前
| レスポンシブ | マージン | 文字 | ガター |
|---|---|---|---|
| 余白を広げる | 46.85px | 14px | 46.85px |
| マージンを広げる | 76.5px | 14px | 35px |
| 全てで割る | 42.825px | 17.13px | 42.825px |
| マージンを大きく | 61.556px | 15.389px | 38.4725px |
【結果】
個人的にマージンを広げるかマージンを大きくが良いと感じるが、実際に検証がいる
そもそもこの計算や仕様が間違ってる可能性もある
あくまでスパンのギリギリの数値をとったので、画面幅に合うアベレージを採用する方針であれば多少の不恰好さは目を瞑ってもいいかも
これはカラム6全てに応用できるシステムで、カラム12になればスパンは14 * カラム数12=168になる
ただブラウザ幅が広ければ168/2の余白の延長はさほど気にはならなさそう
ブラウザ幅の狭い時に、余白の大きさの不自然さと日本語全角ベタ組の美しさと右端の整列ラインのメリットどちらをとるかがネック
特に右端の整列ラインのメリットは大きく、これの有無で印象は変わると感じている
【参考文献】
youse_jp1207: 追記
この手法、そもそも1remで全て割り切れないとガターを挟むカラムできっかりにならなかった。
深夜の思いつきで計算が違っていた。
これを実現するには、スケールを14の倍数にする必要がある。
ガターを28か42にして、カラムを14か28にする必要がある。
その際のスケールをフィボナッチ数列からどう変えていくかが課題で、まだ試行錯誤の段階である
364px~447pxになるにつれて14px~ 17.33pxに本文サイズが大きくなって、余白など全ての要素に連動する。448pxになったときに14pxに戻ってまた84pxごとに17.33pxに本文サイズが大きくなっていく。
youse_jp1208: 追記
画像のように、letter-spacingはあらかじめ本文サイズからスペース分のemを引いて合計が本文サイズになるようにする
youse_jpグリッドレイアウトの縦積みのようなイメージを払拭する良い事例を紹介しようとしたら、すでに閉鎖されているサイトもございました。
恐縮ながらワタナベ （ウェブボーイ ）さん （@ ws0606） のポストの画像付きで研究されているものを引用させていただきます🙏
ワタナベ （ウェブボーイ ）さん