iPhone、iPad、PCブラウザの各デバイスに合わせて、
CSSを切り替えてレイアウトを変更制御するCSSフレームワーク「Less Framework」のご紹介。

LessFramework2.jpg
Less Framework 2

グリッドレイアウトとして、表示するデバイスによって、
————————————–
iPhone:320px
iPad:768px
PCブラウザ:1280px
————————————–
といったように、全体の幅を変更しているもよう。
(iPhone、iPad以外のスマートフォンやネットブックも対象となります。)

表示幅の制御はCSS3 Media Queriesを使用しており、
ソース構成はHTML5がベースとなっているので、
PCブラウザの対象もHTML5が対応しているもののみとなります。

CSS3 Media Queriesに対応していないブラウザに対しては
「css3-mediaqueries-js」というJSを使ってレイアウトを実現させる構成のよう。
(こんなものがすでに存在していたとは…)

「css3-mediaqueries-js」のダウンロードはこちら
css3-mediaqueries-js – Project Hosting on Google Code

フレームワークのページをPCブラウザで閲覧し、
ブラウザ枠を縮めることで、iPhoneやiPadで閲覧した際のレイアウト具合いも確認可能。

こういったグリッドレイアウトは最近増えてきていますが、
全体構成の参考になります。

是非。。。

【関連記事】
CSS3で閲覧しているメディアによってレイアウトを調整する方法「CSS3 Media Queries」

  • このエントリーをはてなブックマークに追加
BlackFlag
FOLLOW

Related Posts

Comments (0)







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。
コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して

iPhone/iPadなど、デバイスごとにレイアウト変更を可能とするCSSフレームワーク「Less Framework」

Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR
Books
  • jQuery Technical Note
  • 外掛OUT! jQuery 高手精技
Partner