• かちびと.net

    960グリッドシステムをjQuery-Mobileと併用する為のスタイルシート・jquery-mobile-960のご紹介。jQuery-Mobileを使ってスマートフォン向けに最適化したレイアウトにグリッドシステムを取り入れるcssです。

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

960グリッドシステムをjQuery-Mobileと併用する為のスタイルシート・jquery-mobile-960

スポンサーリンク

どこかで使うかもしれないと思って
メモがてらシェア。スマートフォンに
サクッと対応させるjQueryプラグイン
のjquery-mobileに960グリッドシス
テムを取り入れることが出来るcss、
jquery-mobile-960です。

なんだかタイトルが謎ですが語彙が無いだけなので気にしないでください。jquery-mobile-960はライセンスがMIT。商用もOKで無料で配布してくれています。

jquery-mobile-960

jquery-mobile-960は、960.gsjQuery-Mobileを使ったレイアウトにも使うためのcssです。2カラム、3カラム、イメージギャラリーなどに使えそうな4カラムレイアウトなどもも思いのまま。

少し大きいですけど全画面キャプチャ↓

実際にiPhoneで確認


縦の場合。


横の場合。

使い方

<link href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" />
    <link href="http://jeromeetienne.github.com/jquery-mobile-960/css/jquery-mobile-960.min.css" />
    <script src="http://code.jquery.com/jquery-1.5.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>

普通にjquery-mobile-960のcssを加えます。マークアップは以下のような感じ。

<fieldset class="container_12">
	<div class="grid_2"><button type="submit">Button 1</button></div>
	<div class="grid_8"><button type="submit">Button 2</button></div>
	<div class="grid_2"><button type="submit">Button 3</button></div>
    </fieldset>

上記の場合、3カラム構成で2-8-2の割合で幅を取ったボタンを配置します。

実装例が以下。

使うかどうかは置いておいて、人気のjQuery-Mobileで使えるcssテンプレートとして覚えておいても損しなさそうですね。4種類用意されており、以下より無料でダウンロードできます。

jquery-mobile-960

URL :
TRB :

Comments & Trackbacks (2)

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services