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

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

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

　パネル部分には次のようなCSSを設定します。

.ui-body-z .ui-collapsible-contain .ui-collapsible-content{
  background-color:#edf3e4;
  margin:0 8px;
  padding:8px;
  border-left: 1px solid #ccc49a;
  border-right: 1px solid #ccc49a;
  -webkit-box-shadow: 0 0 10px #c7ad77 inset;　　　　……【10】
  box-shadow: 0 0 10px #c7ad77 inset;　　　　……【10】
}
.ui-body-z .ui-collapsible-contain .ui-collapsible-content p{
  margin:5px;
  color:#665400;
  font-size:12px;
}
.ui-body-z .ui-collapsible-contain:last-of-type .ui-collapsible-content{
  border-bottom: 1px solid #ccc49a;
  border-radius: 0 0 8px 8px;　　　　……【11】
}

　【10】ではCSS3のbox-shadowプロパティを使ってボックスの内側に影を付けています。box-shadowプロパティの値にinsetを指定すると、ボックスの内側に影を設定でき、ボーダーよりも淡いふちを表現したいときに利用できます。

内側にbox-shadowを適用して影を表現している

　【11】は最後のパネルの処理です。最後のパネルだけ、ボックスの下部分を角丸にしています。border-radiusプロパティは、値が1つのときはすべての角の半径をまとめて、値が2つの場合は左上・右下と右上・左下の半径、値が3つの場合は左上と右上・左下の半径、値が4つの場合は左上と右上と右下と左下の半径が個別に設定できます。実際にはすべての値をまとめて設定するか、個別に設定することが多いでしょうが、覚えておくと便利です。

アコーディオンのアイコン部分のCSS

　アコーディオンパネルの最後は、アイコン部分のCSSです。

.ui-body-z .ui-collapsible-heading a span.ui-btn {　　　　……【12】
  width:15px;
  height:15px;
}
.ui-body-z .ui-collapsible-contain .ui-icon{　　　　……【13】
  background:url("./images/icon-check.png") no-repeat 0 5px;
  -webkit-background-size:13px 7px;
  background-size:13px 7px;
  -webkit-box-shadow:none;
  box-shadow:none;
  width:15px;
  height:15px;
}
.ui-body-z .ui-collapsible-contain .ui-btn-hover-d{　　　　……【14】
  border: 3px solid #e6edc5;
  background:rgba(255,255,255,.5)
}
.ui-body-z .ui-collapsible-contain .ui-btn-up-d {　　　　……【14】
  border: 3px solid #e6edc5;
  background: #5f9c17;
}
.ui-body-z .ui-collapsible-contain:nth-of-type(2) .ui-btn-up-d {　　　　……【14】
  background: #849212;
}
.ui-body-z .ui-collapsible-contain:nth-of-type(3) .ui-btn-up-d {　　　　……【14】
  background: #9a780f;
}
.ui-body-z .ui-collapsible-contain:nth-of-type(4) .ui-btn-up-d {　　　　……【14】
  background: #a15411;
}

　.ui-collapsible-heading a span.ui-btn や .ui-collapsible-contain .ui-iconにはデフォルトのアイコンの設定があります。以下の図で比較してみると、今回作成するサンプルサイトのデザインと共通性があるのが分かります。

　そこで、デフォルトのスタイルを部分的に上書きして新しいアイコンを設定します。【12】では、アイコンのサイズを15×15pxに設定。【13】では、アイコンの背景をチェックマークの画像に変更しています。

　アイコンの周りの丸は、border-radiusプロパティを使って表現しています。jQuery Mobileのデフォルトでは以下のように設定されていますので、【14】でボーダーの太さや色だけを上書きします。

.ui-btn-corner-all {
  border-radius: 1em 1em 1em 1em;
}

　なお、タッチパネルのスマートフォンでは確認できませんが、jQuery Mobileではマウスオーバー時のスタイルも定義されているので、【14】のように設定しておくとよいでしょう。ui-btn-hover-dがマウスオーバー時、ui-btn-up-dが通常時のスタイルです。