mkasumi.com


ブログに書くほどのことなんだろうかと思ったけれど、誰かに聞いてみたいという思いがあって書いてみます。

先日私はデザイナーさんに余白の意味を確認していて、デザイナーが意識していなかったグリッドシステムの余白ルールに気がつきました。(でも、もしかしたらこのルールは社内だけなのかもしれない...。多くの人たちに確認したわけでもないので、多様な環境でも耐えうるという絶対的な自信がある訳ではないのでその辺りはご容赦ください)

例えばカードのコンポーネントのときや、写真をグリッドに合わせて並べるときに個人的な感覚では、このルールはよく見られます。

例えばガターの幅が30pxだったとします。その場合、ガターの半分の値である15pxを親の要素にmargin: 0 -15px、子要素にpadding: 0 15px;を指定します。

そうすると、私がもらうデザインカンプでは子要素の下マージンの値はガターの幅30pxであることが多い。


「コンポーネント間の無意識の余白ルールについて」のつづきを読む


Tag:CSS デザイン 

Posted by 森田かすみ at 18:23  Permalink

プロフィール

森田かすみ

名古屋のWeb制作会社でマークアップエンジニアとして働いています。マークアップ勉強会名古屋という勉強会の主催もやっています。

  • はてなブックマーク

カテゴリー