margin, paddingなど、レスポンシブに対応したスペースをCSSで効率的に定義する方法

Webページやスマホアプリのレイアウトに使用する、margin, paddingなどのスペースをCSSで効率的に定義する方法を紹介します。

em, remの相対的な単位を使い、calc()を効果的に活用し、拡張性やメンテナンス性にも優れたデザインシステムを構築できます。

Create your design system, part 4: Spacing
by CodyHouse

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

• はじめに
• CSSの変数を使用して、スペースのシステムを設定する方法
• すべてのコンポーネントにデフォルトのpaddingを設定する方法
• marginのユーティリティ
• スペース値を追加する場合
• 固定のスペース値が必要な場合
• スペースを定義したSCSSファイル

はじめに

元々は、近日公開予定の「Web Components」のために作成したものですが、グローバルのCSSとして利用できるので、一足先に公開します。

Web Components|CodyHouse

CSSの変数を使用して、スペースのシステムを設定する方法

スペースのシステムを設定する最初のステップは、スペースのスケールを定義することです。スケールを定義するには、「1.単位または基本値」と「2.乗数」が必要になります。

まずは基本となるスケールを数値で作成します。

この値はフィボナッチ数列に基づいており、各値はその前の2つの値を加算して求められています（4+8=12px）。
参考: Spacing

これは良くも悪くも、あくまでも基本です。なぜなら、1つのスペース値を変更したい場合は、再び計算を行い、他のすべての値を手動で更新する必要があります。

この数値をベースにして、デザインシステムで利用できるようにします。
値を定義する変数を導入し、calc()関数を使用してベース（--space-unit）の値を元に計算式で各値を取得することができます。

実装に使えるレベルにだいぶ近づいてきました。上記のコードは、--space-unitの値を乗算して各値を定義しています。フィボナッチ数列が依然として乗数に適用されることに注目してください。変更したい場合は、--space-unitの値を更新するだけです。

次に、絶対単位を取り除いて、相対単位に置き換えます。
ここでは--space-unitの「16px」を「1em」に更新します。

この変更はごく小さな調整のように感じるかもしれませんが、実際には大きな変化です。em単位は、フォントのサイズ設定に使用される便利な相対単位です。ほとんどのブラウザでは、CSSでスタイルを適用する前のデフォルトのフォントサイズは16pxです。そのため、わたし達は「1em=16px」を想定することができます。

ただし、要素のフォントサイズを編集した場合、1emは16pxでなくなりますが、定義したfont-sizeと同じになります。これはコントロールの欠如のように思われるかもしれませんが、レスポンシブへの強力な近道となります。

この方法は例えば、--text-base-size変数（1emに等しい）に比率を掛けて、すべてのフォントサイズから得られるタイポグラフィのシステムを作成することもできます。つまり、--text-base-size変数はタイプシステム全体のコントローラーであることを意味します。もし、あなたがメディアクエリで--text-base-size変数の値を変更するなら、すべてのテキストのサイズはそれに応じて変化します。

変数を1つ変更するだけで、すべてのテキストのサイズが変更されます。

それだけではありません！
スペースの単位も1emで定義されているため、--text-base-sizeを更新した際にはスペースにもその更新が適用されます。

このテクニックがタイポグラフィとスペースにどのように影響するか見てみましょう。

例えば、単一の変数（--text-base-size）を更新するとします。追加のメディアクエリは必要ありません。この場合に必要なのは、スペースの変数を使用してコンポーネントレベルでpaddingとmarginを設定するだけです。

--text-base-sizeの値を変更せずに、すべてのスペース値を更新したい場合はどうすればよいでしょうか？
--space-unitの値を更新するだけです。

このテクニックでは1px単位の調整はできませんが、シンプルでしかもメンテナンスが簡単になります。さらに、レスポンスの新しいレベルにも対応できます。すべてのコンポーネントとデザイン要素をそれぞれ調整するのではなく、2つ3つの変数を編集するだけで対応することができるようになります。

すべてのコンポーネントにデフォルトのpaddingを設定する方法

異なるコンポーネントで同じpaddingが必要になる時がありませんか？ コンポーネントのpaddingを変数で設定することは、CSSファイルのどこかに定義したpadding値を探すのに多くの時間を費やした後に学んだテクニックです。

例えば、下記のようなコンポーネントがあるとします。

同じpaddingが必要な異なるコンポーネント

先ほどの_spacing.scssファイルに、コンポーネント用のpaddingを定義します。

padding用に新しく値を用意する必要はありません。--component-padding変数にスペースの変数を定義するだけです。こうすることで、他の同様の場合にどのスペース変数が使用されているかを確認する必要はなくなります。

marginのユーティリティ

marginを含め、コンポーネントのCSSにpaddingを直接含めることは問題ありませんが、レイアウトで問題を起こす可能性があります。コンポーネントをレイアウト内の定義とすると、marginとpositionの定義はコンポーネントのCSSではなく、レイアウトのCSSに格納する必要があります。

例えば、同じコンポーネントを異なるレイアウトで使用する場合に、あるケースではmargin-bottomを適用する必要があり、別のケースでは適用しないということがあります。こういった場合も想定すると、margin-bottomはコンポーネントの定義ではなく、レイアウトの定義とした方がよいかもしれません。

そのため、marginにユーティリティのclassを用意しておくと便利です。

オプションとして特定のブレークポイントでmargin値を更新することができ、ビューポートが大きくなると自動的に値が増えます。

スペース値を追加する場合

要素にmarginを設定している場合、space-mdが大きすぎるのに対して、space-smが小さすぎるように見える場合はどうなりますか？

あらかじめ定義された変数を使って作業することは、システムの保守性のために妥協する必要があることを意味します。

しかし、定義されていない値を使う必要がある場合、システムを更新することができます。

上記のように新しいスペース値を追加できます、しかしこの新しい値も同じシステムでコントロールできるようにしてください。

固定のスペース値が必要な場合

このスペースのシステムでは、すべてのmargin, padding（およびタイポグラフィ要素）が2つの変数を使用して同時に更新できます。しかしビューポートのサイズ変更に関わらず、スペースの値を変更したくない場合があるかもしれません。

そのためには別の単位、つまりremでスペースを定義する必要があります。remはemとは異なり、ルート（html）のfont-sizeに相対的です。そのため、本文のfont-sizeを編集しても影響を受けません（本文は--text-base-sizeで定義します）。

私はemをremに置き換えることを提案するのではなく、emとremを組み合わせることを提案します。

固定のスペース値を定義する最も簡単な方法は、下記のようになります。

固定の値を定義するのも前述のスペース値の追加と同様に、システムにはない値を導入することを意味します。

例えば、新しい人があなたのチームに参加し、CSSファイルを開き、要素に0.5remのmarginを設定したことに気付きます。理想的なフローでは、新しい人にスペースのシステムを伝えているか、プロジェクトにCSSのガイドラインがあるか、スペースがどのように定義され使用されているのか詳細に伝えることができます。しかし、現実のフローでは、新しい人はrem値でスペースを設定すると理解してしまう危険性があります。

混乱を避けるために、変数を使った方が理想的です。変数を使うと、_spacing.scssファイルを確認するフローになり、安全です。

レスポンシブ対応のスペース値の定義に加え、固定値にも対応する定義は、下記のようになります。

スペースを定義したSCSSファイル

上記をすべてまとめたファイルは、下記のようになります。

このスペースのシステムにフィードバックや提案がある場合は、お知らせください。
この記事があなたにとって役立つことを願っています。