iPhone, iPad, ブラウザなどクロスデバイス対応のCSSフレームワーク -Less Framework
iPhoneなどのモバイルデバイスには320px、iPadやネットブックには768px、デスクトップなどのブラウザには1280px、三種類のデバイスにあわせてレイアウトを切り替えるフレームワークを紹介します。
ベースとなるカラムは下記のようになります。
-
- iPhoneなどのモバイルデバイス
- 320px、2カラム
-
- iPadやネットブック
- 768px、5カラム
-
- デスクトップなどのブラウザ
- 1280px、8カラム
三種類のレイアウトは同じグリッドを使用しており、カラム幅：120px、溝幅：24pxとなっています。
異なる点はカラムとマージンの量です。
レイアウトの変更にはCSS3のMedia Queriesが使用されています。
CSS
body {width: 696px;}
@media only screen and (max-width: 767px) {
body {width: 264px;}
}
@media only screen and (min-width: 1224px) {
body {width: 1128px;}
}
Media Queriesの詳しい説明は当サイトで以前とりあげたので、ご参考ください。
CSS3のMedia Queries（メディアクエリ）の使い方と実装例
対応ブラウザはFirefox, Chrome, Safari, Operaで、IE9はMedia Queriesに対応していれば問題なさそうとのことです。
Media Queries非対応ブラウザには「css3-mediaqueries-js」を併用することで、同様のレイアウトをサポートします。
ライセンスはCC 3.0で、個人でも商用でも無料で利用できるとのことです。
Post on:2010年8月31日
Comments
iPhone, iPad, ブラウザなどクロスデバイス対応のCSSフレームワーク -Less Framework | コリス | ipad-love.info
on 2010年8月31日
[...] iPhone, iPad, ブラウザなどクロスデバイス対応のCSSフレームワーク -Less Framework | コリス [...]
iPhone, iPad, ブラウザなどクロスデバイス対応のCSSフレームワーク -Less Framework | コリス | iPhonista.info
on 2010年8月31日
[...] する、はてなブックマーク新着情報です。 iPhone, iPad, ブラウザなどクロスデバイス対応のCSSフレームワーク -Less Framework | コリス [...]
E2 DESIGNERS BLOG：HTML,CSS,JavaScript,jQuery,FlashなどWebデザインに関するネタ紹介/株式会社E2
on 2010年8月31日
iPhone／iPadなど、デバイスごとにレイアウト変更を可能とするCSSフレームワーク「Less Framework」
iPhone、iPad、PCブラウザの各デバイスに合わせて、 CSSを切り替えてレイアウトを変更制御するCSSフレームワーク「Less Framework」のご紹介。 ≫Less Framework 2 グリッドレイアウトとして、表示…
links for 2010-08-31 – mooco | webdesign
on 2010年9月1日
[...] iPhone, iPad, ブラウザなどクロスデバイス対応のCSSフレームワーク -Less Framework | コリス (tags: css iPhone ipad) [...]
» iPadやXperiaを充電できるeneloop – ITmedia News..ほかニュース11件(09月01日) | iPhone-Dev.jp
on 2010年9月1日
[...] 可能になった。Hotmailを通じてリアルタイムに情報がアップデートされ、PC、モバイル機器、Web… iPhone, iPad, ブラウザなどクロスデバイス対応のCSSフレームワーク -Less Framework | コリス [...]
links for 2010-08-31 « 個人的な雑記
on 2010年9月1日
[...] iPhone, iPad, ブラウザなどクロスデバイス対応のCSSフレームワーク -Less Framework | コリス (tags: framework ipad iphone webdesign) [...]
Less Framework 4 | webclips
on 2012年3月9日
[...] 用するフレームワークです。iPhone, iPad, ブラウザなどクロスデバイス対応のCSSフレームワーク [...]