実例 Qiitaのcssで余白を書くときのルール 前編

これはなに？

cssで余白を付ける方法はたくさんあります。
一定のルールがないと、あっちではmarginで、こっちではpaddingで、方向も色々で…と崩壊し始めてしまいます。

Qiitaでもルールは特別設けられていませんでした。
2020年頃から、ルールを設定し始めました。

10年以上続くサービスですので、全適応を一度にするのではなく、新しく作ったコンポーネントや変更を加えるときに、徐々に対応していきました。

個人的にはどのようなルールであっても、開発に関わるメンバーの合意が取れたルールは必要だと思います。

この記事はQiitaでの事例を紹介したいと思います。
絶対これが最高！というものではなく、こんなルールで作っているサービスもあるんだと知っていただければ幸いです。

対象読者

• デザイナー
• スタイルのコーディングをするエンジニア
• 記事を書くときにスタイルをいじることがある人

marginは要素の外に余白をつけたいとき、paddingは要素の内に余白を付けたいとき

• margin は要素の外に余白をつけたいとき
• padding は要素の内に余白を付けたいとき

サンプル：カードのUI

• 黄緑のカードの中の余白が padding
• オレンジのカードとカードの間の余白がmargin

Figmaをお使いの開発チームでしたら、FigmaのDev modeで見ると、カードのUIの余白がこのように読み取れます。

下記の記事は図解などがあり、margin と padding についてわかりやすく解説されています。

ショートハンドと個別

margin と padding は、ショートハンド（省略した形）で書くことができます。
ここでは、簡単にショートハンドで書くとき・個別に書くときの事例を一部紹介したいと思います。

例は margin で書きますが、 padding でもほぼ同じ考え方です。

ショートハンドで書くとき

指定したい範囲が多いときは、ショートハンドを使います。

上下左右に8px

.hoge {
  margin: 8px;
}

上下8px、左右12px

.hoge {
  margin: 8px 12px;
}

上8px、右12px、下0px、左24px
上から時計回りに指定できます

.hoge {
  margin: 8px 12px 0 24px;
}

個別に書くとき

1箇所だけ余白を指定したいときには、ショートハンドより個別指定が好ましいと考えています。

迷いやすいパターン

ショートハンドで書くときと個別で書く時でQiitaの開発メンバーで迷いやすいのは、ブレイクポイントを使って画面幅に合わせてレイアウトを変える時が多かったです。

Qiitaは現時点ではDesktopユーザーが多いです。
なのでコードはDesktopを基準にスタイルを組み、メディアクエリを使ってMobileの指定を上書きすることが多くなります。

サンプルをいくつか用意してみました。

前提

指定しなくて良い方向があるなら、行数が増えますが個別に書くことが多いです。
コンポーネントが再利用されたときに、さらに上書きが必要になったとき、余白の関係性が複雑化することがあるからです。

Desktopでは左にmarginが8px、Mobileでは上のmarginに8pxに切り替わるとき

Mobileサイズの時にショートハンドで指定を切り替えています。
DoもDon'tも出力結果は同じです。

ショートハンドで書いたDon'tのパターンでは、指定しなくても良い margin-bottom: 0, の指定が追加されています。
行数は多くなりますが、個別で上書きが好ましいと考えています。

Do

.hoge {
  margin-left: 8px;
  @media (max-width: 770px) {
    margin-left: 0;
    margin-top: 8px, :

Don't

.hoge {
  margin-left: 8px;
  @media (max-width: 770px) {
    margin: 8px 0 0;

Desktopの時点でショートハンドのとき

この場合はわざわざ展開せずに、同じ要素で返して問題ないと考えています。

: Do

.hoge {
  margin: 16px;
  @media (max-width: 770px) {
    margin: 8px;

Don't

.hoge {
  margin-bottom: 16px;
  margin-left: 16px;
  margin-right: 16px;
  margin-top: 16px;
  @media (max-width: 770px) {
    margin-bottom: 8px;
    margin-left: 8px;
    margin-right: 8px;
    margin-top: 8px;

.hoge {
  margin: 16px;
  @media (max-width: 770px) {
    margin-bottom: 8px;
    margin-left: 8px;
    margin-right: 8px;
    margin-top: 8px;

DesktopとMobileで、余白の方向が変わる時

下記はDesktopでは左と上にmargin、Mobileでは右と上にマージンをつけたいパターンです。
方向を変えることは、めったにないのでルールというよりは、状況に応じてレビューすることになります。
見本となるDoもDon'tも特にない状況です。

.hoge {
  margin-left: 16px;
  margin-top: 24px;
  @media (max-width: 770px) {
      margin: 16px 8px 0 0;

余白は8の倍数を基本とする

QiitaではデザイナーがFigmaでデザインを組んだ時、余白は下記のように8の倍数で組んでいます。
4, 8, 12, 16, 24, 32, 40, 48, 56, 64, 72…

※4pxを補助用として使っていますので、4px、12pxも利用することがあります。

なので、余白が8の倍数または4の倍数でないときは、要素がズレているか、Figmaのデザインデータで測っている要素が違うことがあるので、確認するようにしています。

まとめ

以上が前半です。
後編も書きました！
読んでいただけると幸いです