@thorikiriのてょりっき

@thorikiriがWebとかAndroidとかの技術ネタや本を読んだブログです

jQueryMobileでiPad向けの2カラムのWebページをデザインする その1

なるべくネイティブ感を出したいので、jQueryMobileを使っているのですが、現状では2カラムのデザインってあんまり無いようなんですよね。
参考にしているデザインはiPadの設定アプリの画面の感じです。
jQueryMobileのバージョンは、1.1.1です。

骨組みを作る

まずはHTMLファイルを書いていきます。基本はjQueryMobileのLayout gridsです。

  • sample.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1">
    <title>jQueryMobileでiPadのような2カラムデザイン</title>
    <link rel="stylesheet" href="css/jquery.mobile-1.1.1.css"></link>
    <link rel="stylesheet" href="css/sample.css"></link>
    <script type="text/javascript" src="js/jquery-1.7.2.js" ></script>
    <script type="text/javascript" src="js/sample.js"></script>
    <script type="text/javascript" src="js/jquery.mobile-1.1.1.js"></script>
  </head>
  <body>
    <section data-role="page">
      <div class="ui-grid-a ipad-grid">
        <div class="ui-block-a ipad-menu-block">
          <header data-role="header" data-theme="c" class="ipad-menu-header">
            <h1>menu</h1>
          </header>
          <div data-role="content" class="ipad-menu-body">
            menu body
          </div>
        </div>
        <div class="ui-block-b ipad-content-block">
          <header data-role="header" data-theme="c" class="ipad-content-header">
            <h1>content</h1>
          </header>
          <div data-role="content" class="ipad-content-body">
            content body
          </div>
        </div>
      </div>
    </section>
  </body>
</html>

これで2段組のレイアウトが出来上がりました。.ui-grid-aで2分割をして、.ui-block-a, .ui-block-bそれぞれにdata-role="header"とdata-role="content"をもたせています。

しかし、これでは半分に分割されているだけですので、これにスタイルを当てていく必要があります。

iPadの設定画面のような比率にする

設定画面の比は301px : 723px くらいがちょうど良いようです。高さはPhoneGapでネイティブ化するのではなく、そのままSafariで見るのであれば672pxくらいがちょうど良いようです。
設定画面の2カラムはボーダーに色がついているので、そのあたりと、丸角になっているのでborder-radiusなどを設定します。

div.ipad-grid {
    height: 100%;
}

div.ipad-grid div.ipad-menu-block {
    width: 301px;
    height: 672px;
    border: solid 1px #666666;
    border-right: none;
    border-radius: 5px;
}

div.ipad-grid div.ipad-menu-block header.ipad-menu-header {
    width: 300px;
    border: solid 0px 1px 0px 0px #666666;
    border-radius: 5px 5px 0px 0px;
}

div.ipad-grid div.ipad-menu-block div.ipad-menu-body {

}

div.ipad-grid div.ipad-content-block {
    width: 723px;
    height: 672px;
    border: solid 1px #666666;
    border-radius: 5px;
    
}

div.ipad-grid div.ipad-content-block header.ipad-content-header {
    width: 722px;
    border: solid 0px 1px 0px 0px #666666;
    border-radius: 5px 5px 0px 0px;
}

div.ipad-grid div.ipad-content-block div.ipad-content-body {

}

これで2カラムのレイアウトが出来上がりました。

メニュー部分もコンテンツ部分もまだ中身がないのでこんな感じになっていますが、中身を書いていくと困ることがまだまだあるので、次回中身を書いていこうと思いますよ。