このページの本文へ

DESIGN 西畑一馬のjQuery Mobileデザイン入門 ― 第9回

jQuery Mobileのアコーディオンでスマホサイトを制作

2011年10月07日 11時00分更新

西畑一馬/to-R、鍋坂理恵/sonsun

  • この記事をはてなブックマークに追加
本文印刷

 前回に続き、jQuery Mobileでカタログサイトを制作します。今回はアコーディオンパネルのCSSを作成します。

アコーディオンパネルのCSS

 アコーディオンパネルのHTMLは次のようなシンプルなものでした(2つ目以降のアコーディオンは省略)。


 <div data-role="collapsible-set">
  <div data-role="collapsible" data-collapsed="true">
   <h3>SITE MENU 1</h3>
   <p>sample text sample text sampletext sample text sample text sample text</p>
   <p>sample text sample text sampletext sample text sample text sample text</p>
  </div>
 (省略)
 </div>

 ところが実際に表示された状態のHTMLをWebインスペクタで見ると、次のように複雑なHTMLに変換されているのが確認できます。


<div data-role="collapsible-set" class="ui-collapsible-set">
  <div data-role="collapsible" data-collapsed="true" class="ui-collapsible-contain">
    <h3 class="ui-collapsible-heading ui-collapsible-heading-collapsed">
      <a href="#" class="ui-collapsible-heading-toggle ui-btn ui-btn-up-z ui-btn-icon-left ui-corner-top" data-theme="z">
        <span class="ui-btn-inner ui-corner-top">
          <span class="ui-btn-text">SITE MENU 1
            <span class="ui-collapsible-heading-status"> click to expand contents</span>
          </span>
          <span data-theme="d" class="ui-btn ui-btn-up-d ui-btn-icon-left ui-btn-corner-all ui-shadow">
            <span class="ui-btn-inner ui-btn-corner-all ui-corner-top">
              <span class="ui-btn-text"></span>
              <span class="ui-icon ui-icon-plus ui-icon-shadow"></span>
            </span>
          </span>
        </span>
      </a>
    </h3>
    <div class="ui-collapsible-content ui-collapsible-content-collapsed" aria-hidden="true">
      <p>sample text sample text sampletext sample text sample text sample text</p>
      <p>sample text sample text sampletext sample text sample text sample text</p>
    </div>
  </div>
  (省略)
</div>

 元のHTMLと比べると複雑なので分かりづらいですが、大まかには次の図のような構造になっています。

アコーディオンパネルの構造

 見出しとなっているラベル部分、コンテンツが隠れているパネル部分、ラベルの左側にあるアイコン部分に分けてCSSを設定してきましょう。

アコーディオンのラベル部分のCSS

 ラベル部分のCSSは以下のようになります。


.ui-body-z .ui-collapsible-set{
  margin-top:20px;
}
.ui-body-z .ui-collapsible-contain{    ……【7】
  margin-top:-5px;
}
.ui-body-z .ui-collapsible-contain h3{
  border-radius:8px 8px 0 0;
  margin:0 8px;
  font-weight:normal;
}
.ui-body-z .ui-collapsible-contain:last-of-type h3{
  border-radius:8px;
}
.ui-body-z .ui-collapsible-contain:nth-of-type(1) h3{    ……【8】
  background:#95be66;
  background: -webkit-gradient(linear, left top, left bottom,from(#95be66),to(#649f1f));
}
.ui-body-z .ui-collapsible-contain:nth-of-type(1) h3:not(.ui-collapsible-heading-collapsed){    ……【9】
  border-bottom:4px #95be66 solid;
}
.ui-body-z .ui-collapsible-contain:nth-of-type(2) h3{    ……【8】
  background:#b0ba63;
  background: -webkit-gradient(linear, left top, left bottom,from(#b0ba63),to(#8c9a1b));
}
.ui-body-z .ui-collapsible-contain:nth-of-type(2) h3:not(.ui-collapsible-heading-collapsed){    ……【9】
  border-bottom:4px #b0ba63 solid;
}
.ui-body-z .ui-collapsible-contain:nth-of-type(3) h3{    ……【8】
  background:#bfa65c;
  background: -webkit-gradient(linear, left top, left bottom,from(#bfa65c),to(#a07d10));
}
.ui-body-z .ui-collapsible-contain:nth-of-type(3) h3:not(.ui-collapsible-heading-collapsed){    ……【9】
  border-bottom:4px #bfa65c solid;
}
.ui-body-z .ui-collapsible-contain:nth-of-type(4) h3{    ……【8】
  background:#bf8a5c;
  background: -webkit-gradient(linear, left top, left bottom,from(#bf8a5c),to(#a15411));
}
.ui-body-z .ui-collapsible-contain:nth-of-type(4) h3:not(.ui-collapsible-heading-collapsed){    ……【9】
  border-radius:8px 8px 0 0;
  border-bottom:4px #bf8a5c solid;
}
.ui-body-z .ui-collapsible-contain a{
  font-size:14px;
  color:white;
  text-shadow:1px 0 1px rgba(0,0,0,0.3); 
  text-decoration:none;
  padding:8px 0 10px;
}
.ui-body-z .ui-collapsible-contain:last-of-type a{
  padding-bottom:8px;
}

 アコーディオンパネルのラベル部分は以下の図のような構造になっていて、パネルが閉じているときはラベル同士が少し重なっています。

 【7】ではパネル全体を5px上にずらすことで、下のラベルが上のラベルに重なるように設定しています。

 ラベル部分のグラデーションは【8】で設定しています。グレースフルデグラデーション(関連記事)の考え方に基づき、-webkit-gradientに対応しているデバイスにのみグラデーションを適用し、対応していないブラウザーにはbackgroundで設定した背景色が適用されるように設定しています。

 多くのブラウザーやデバイスでグラデーションを表現しようとするとコード量が膨大になりますが、現在発売されているiPhoneやAndroidの標準ブラウザーへの対応ならこれで十分です。CSS3のnth-of-type擬似クラスを利用して、行ごとのグラデーションカラーを設定します。

 【9】では、パネルが開いているときのラベルのスタイルを設定しています。jQuery Mobileでは、アコーディオンパネルが閉じていると、h3要素にclass属性「ui-collapsible-heading-collapsed」が自動的に追加されます。セレクターで h3:not(.ui-collapsible-heading-collapsed) とすると、パネルが閉じていないとき(つまりパネルが開いているとき)のスタイルを設定できます。サンプルでは、4pxのボーダーをボックスの下に設定しています。

書影

書籍では「jQuery Mobile 1.0」正式版に対応し、内容を全面的に改訂。新たなカスタマイズサンプルや書き下ろしコラムも多数追加し、制作現場ですぐに役立つ1冊になっています。ペーパープロトタイプができるUIカード付き。

jQuery Mobile
スマートフォンサイト デザイン入門

本体 2,380円+税、B5変形判224ページ(オール4色刷)
ISBN:978-4-04-870669-8

Amazon.co.jpで買う 楽天ブックスで買う

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

HTMLリファレンス誘導バナー

CSSリファレンスサイト誘導バナー

Webディレクター江口明日香が行く

ランキング