ウェブデザインの新基準?|Grid System Design – 950px –

シェアする

950pxのGrid System Design

以前の衝動的な記事はこちら

さて。
以前は衝動的であったので、ちゃんと説明しようと思います。

元々、960pxのGrid System Designがなぜ採用されているのか。
それは「960」と言う数字が、2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320, 480で割り切れることを利用しているからなのです。

しかし、この950pxのGrid System Designは、

1.containerを960px + padding-left:10pxに指定
2.margin-leftを10pxに指定し、60pxごとに12カラム分作成

しているわけなのです。
1カラム = (60px + margin-right:10px)で12カラム分。

ブログデザインには、
3カラム=2カラム + 8カラム + 2カラム

です。

あれ ?「containerの幅が960px」やん。

ーー代わりまして、とあるデザイナーの解説ーー

何故950pxで作るのにcontainerの幅を960pxにするかというと、それを一言でいうならば

「margin-right:10pxのためです。」

例えばリストタグを使用する際に普通に記述するならば最後のリストのmargin-rightを0にリセットしてカラム落ちを防ぎますよね。
しかしこれは汎用性がなくスマートではない。
そこで予め最後のmargin-right:10px分を余計に取っておくことで最後のカラムをわざわざリセットしなくていいわけです。

ーー以上。解説終了ーー

お分かりいただけましたでしょうか。
こちらにファイルがございますので、いつでもお気軽にご使用くださいね^^

この記事が気に入ったら
いいね ! しよう

Twitter で

フォローする