“地震情報サイトをスマホ対応にバージョンアップ。”という、夢実現のためのアファメーション。

使い方も簡単っ！

使い方としては、上記サイトからDLしたファイル（1140.css）をhtmlで読み込んで、定義されているクラスを各エレメントに指定するだけ。

1140.cssに定義済みの基本的なクラスは

コンテンツをラップするための「.container」、最大幅用の「.row」と、カラム用のクラス「.onecol, .twocol, .threecol, .fourcol, .fivecol, .sixcol, .sevencol, .eightcol, .ninecol, .tencol, .elevencol, .twelvecol」、各ブロックの最後のコンテンツに割り当てるための「.last」の四種類。
（他にもいろんな設定があるけど、重要なのはこの四つだけ）

んで、各デバイスやブラウザの幅によってCSSを上書きするための

@media only screen and (max-width: 1023px) {
/*小さなスクリーン用のCSSをここに記述*/
}

@media handheld, only screen and (max-width: 767px) {
/*主に最小幅やスマホ用のCSSをここに記述*/
}

があります。

※上記の設定はすべて1140.cssに記述されているので、特にいじる必要はありません。

んで、あとはウェブサイトの各エレメントにクラスを割り当てて、さらにその他デザインやレイアウトのための独自のCSS（default.cssなど）を記述するだけです。
※このへんは、各々普段のやり方で。

定形のフォーマットのサイトをスマホ対応させるのに有効。

1140.cssは、1段組から12段組（？）までのリキッドなレイアウトを実現するためのものなので、ある程度定形のフォーマットをもつサイト、さらにそれをモバイル（スマホ？）に対応させるときに効果を発揮します。

画像などはmax-width:100%;が設定されていて、その画像を内包するブロック要素の幅によって可変する仕様なので、ウィンドウ幅やデバイスによって自動的にサイズが変わるのがおもしろい。

iPhoneやAndroidなどウィンドウサイズの小さなデバイスで既存のサイトが見られるのはもちろん、PC版でも、ブラウザの幅を小さくしていくと@mediaで指定したサイズ以下になるとサイドエリアのバナーやリンクリストなどが、幅100%表示になって、メインのコンテンツの下に一段組になって表示されます。

例えば、EQJPのように、ヘッダーとフッターは「row」メインのコンテンツは 「eightcol」、サブエリアは「fourcol」といったふうに割り当てて、既存のCSSで指定していたレイアウト関連の固定幅（width）の設定を削除すれば、ウィンドウサイズを縮めた場合、最大幅1140pxから少しずつ幅が狭まって、あるサイズでスマホ用のレイアウト（1カラム）にガラっと変える...なんてことが簡単にできちゃうんです。
※スマホユーザーの方はぜひケータイから見てみてくださいｗ

既存のサイトに割り当てていく場合、マージンやパディングなどが1140.cssによる%指定になるので、コンテンツそれぞれの余白が変わるので、若干見栄えがゆったりになるかもしれないけど、簡単にスマホ対応ができるので、ぜひ既存サイトをスマホ対応にしたいと思っている人は検討してみるのもいいかもしれません。

※media queriesはCSS3なので、当然IE8以下には対応してないけど、JS（css3-mediaqueries.jsなど）によって対応可能。

アファメーションの宝庫！→あの独立・起業ネタの情報ランキング！