WordPressの構築の授業の際に、余白設定について、よく質問されるので、参考になるリンク先と参考点を引用させていただきます。
画面サイズの割り切れる数の８の倍数で行うのがよいようです。
「余白としてよく使われるのは、8px、16px、24px、32px、48px、64px、96px、128px、160px、192px、などです。8の倍数ではないですが、4px、12pxも使われます。」
よかったら、参考にしてみてください。
汎用的なスクリーンサイズの基準に合わせやすい
スクリーンサイズでシェア率が比較的高いものの例として1920✖️1080ピクセルや1280✖️720ピクセルなどが挙げられますが、これらのスクリーンサイズも8の倍数で割り切れます。一般的に基準となっている画像サイズが8の倍数だと設計しやすいということもあります。
余白設計を決めておく
余白としてよく使われるのは、8px、16px、24px、32px、48px、64px、96px、128px、160px、192px、などです。8の倍数ではないですが、4px、12pxも使われます。レスポンシブではデスクトップよりも画面幅に対して情報量が多くなる場合に使います。
また8と3の公倍数である48の倍数は、コンテンツ幅を設計したり分割するときに端数が発生せずに割り切れることが多いため重宝します。具体的には、48px、96px、192px、240px、480px、960px、1440pxなどです。
4の倍数の使用条件
4の倍数で設計すると、余白の大きさを細かく調整できるメリットがあります。その一方で変数が多くなるため管理しずらくなったり、どの余白を指定するか迷いやすくなったり、メリハリが弱くなったりするデメリットもあります。まずは8pxの倍数で設計して、必要になったときだけ4の倍数による余白（例：12px、20px、40px）の追加を検討していきます。
共有用に事前に作成しておく
コメント