アファメーションで独立・起業・夢実現。「いきなり!社長宣言!!」-“夢は口に出すことで実現する!”というアファメーション:インフォメーション

2011年5月13日

地震情報サイトをスマホ対応にバージョンアップ。

夢実現のアファメーションを実践する起業家にもっとも読まれているブログは?

ちょっと前に作った地震情報サイト『Earth Quake Japan』をちまちまとバージョンアップ。

まず、「1140CSSGrid」のフレームワークを使って、もともと980px固定だったものを、最大幅を1140pxのリキッドレイアウトに変更。

ウェブサイトをマルチデバイスに対応させる場合、JSを使ったり、UAでページを振り分けたり...いろんな方法があります。

それぞれ一長一短があるけれど、この「1140CSSGrid」は、CSS3の『Media Queries』を使って、デバイスやブラウザの幅によって、レイアウトを変えてしまうという優れもの。
※CSS3の『Media Queries』はCSS2の『Media Type』(screenやprintなど)を発展させたもので、さまざまなデバイスに対応させるための、まさに次世代の仕様です。

使い方も簡単っ!

使い方としては、上記サイトから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カラム)にガラっと変える...なんてことが簡単にできちゃうんです。
※スマホユーザーの方はぜひケータイから見てみてくださいw

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

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

この記事に関連する(かもしれない)書籍

 

投稿者 kuro : 2011年5月13日 03:28 | ID:413

ページトップ△

トラックバック

このエントリーのトラックバックURL:
http://www.dokuritsu-kigyo.net/cgi-bin/mt/mt-tb.cgi/413

コメント

ページトップ△