[CSS]最近のウェブ構築には欠かせない要件を備えたCSSのフレームワーク -The 1140px Grid

1280px以上の大きなモニター対応、iPhoneなどのスマホ対応、単調になりがちなグリッドのバリエーション、IE6への配慮など、最近のウェブ構築には欠かせない要件を備えたCSSのフレームワークを紹介します。

The 1140px Grid · Fluid down to mobile

[ad#ad-2]

以前、Twitter(@colisscom)で紹介した時からバージョンアップしたようなので、改めてブログでご紹介。

The 1140px Gridは、1280のモニターには1140pxのグリッド、スマホなどのそれより小さいモニターにはその幅に可変したリキッドタイプのグリッドを提供するスタイルシートのフレームワークで下記にその特徴的なポイントを紹介します。

1140pxで12カラムを採用した理由

12という数字は非常に便利で、二等分、三等分、四等分、六等分して利用することができます。また、組み合わせも、7と5、3と4と5など、さまざまなバリエーションをもっています。

12カラムを使った、グリッドのパターンは下記のようになります。

ダウンロードファイルのデモ

また、溝を40pxと大きめに確保しているのも大きな特徴です。

スマホ・モバイルへの対応

スタイルシートにはMedia Queriesを使用して、モニターのサイズが小さい用のレイアウトを用意しています。
また、iPhone 4の高解像度ディスプレイにも対応しています。

CSS

iPhone 4を判別するMedia Queriesの記述例

@media only screen and (-webkit-min-device-pixel-ratio: 2) { 

/*	.logo {
		background: url(logo2x.jpg) no-repeat;
		background-size: 212px 303px;
	}*/

}

[ad#ad-2]

画像のサイズは指定しない

画像の表示サイズは、配置されたカラムのサイズに依存します。

画像が配置されたカラムより大きい場合

カラムのサイズに縮小されて表示

画像が配置されたカラムより小さい場合

画像のオリジナルのサイズで表示

インラインの画像は自動でサイズ補正を行うため、幅や高さのサイズは指定しないで使用します。

対応ブラウザ

対応ブラウザは、下記の通りです。

• Chrome, Safari
• Firefox
• Internet Explorer 7&8

IE6への対応

このフレームワークはIE6でも問題なく動作します。しかし、IE6では「max-width」をサポートしていないため、1140pxの固定グリッドはなくなり、1280px以上の場合は全幅のグリッドになります。
ただし、IE6を使っている多くの人は1280pxより高解像度のモニターではないでしょう、とのことです。