スマートフォンECサイトデザインの基本～スマートフォンCSS活用基礎（6）～

前回・前々回の記事ではサイト上で「スマートフォンらしい動き」を実現するためのお話をさせていただきました。今回も引き続きスマートフォンらしい動きを実現するために「表示コンテンツの切り替え」についてお話させていただきます。

皆さんはスマートフォンでサイトを閲覧している時、こんな感じのコンテンツを見かけたことはありませんか？

メニューをタッチすると、その下にあるコンテンツが選択メニューの内容にパッと切り替わるというものです。「表示コンテンツの切り替え」と暫定的に呼びますが、aishipではこの表示コンテンツの切り替えも比較的容易に行えるようになっています。

表示コンテンツの切り替えは、あらかじめ指定された構成があります。これを元に内容を作成し、またCSSを使ってレイアウトを調整しましょう。

表示コンテンツの切り替えは、下記のようなHTML構成になっています。

＜span class="sp-switch-display-click" data-sp-switch-display-targetid="a"＞Ａ＜/span＞
＜span class="sp-switch-display-click" data-sp-switch-display-targetid="b"＞Ｂ＜/span＞
＜span class="sp-switch-display-click" data-sp-switch-display-targetid="c"＞Ｃ＜/span＞
＜div class="sp-switch-display"＞
    ＜div id="a"＞コンテンツＡ＜/div＞
    ＜div id="b"＞コンテンツＢ＜/div＞
    ＜div id="c"＞コンテンツＣ＜/div＞
＜/div＞

ポイントは下記の点です。

ここでは簡易的に「a、b、c」と記述していますが、ここでメニュー（タッチする部分）と表示コンテンツ（表示が切り替わる部分）とを紐付けしています。
つまり上の図で言えば
「メニューＡをタッチするとコンテンツＡが表示される」
「メニューＢをタッチするとコンテンツＢが表示される」
「メニューＣをタッチするとコンテンツＣが表示される」
という動きをします。
紐付けは「id=”○○○”」というid名で行っています。このid名は任意の英数字でかまいません。上記例では「a、b、c」としています。
この「id=”○○○”」と「data-sp-switch-display-targetid=”○○○”」とが一致した時に、表示コンテンツの切替が行われます。

切替表示されるコンテンツは「div class=”sp-switch-display”」というdivタグの中に収めるようにしてください。この中に収めておかないと、うまく表示の切替が行われません。

ポイントとしては
・対応するメニュー名とコンテンツ名（id名）を一致すること
・表示コンテンツ部分は指定のdivタグの中に収めること

以上の2点です。
では「表示コンテンツの切り替え」を作るため、実際に操作してみましょう。操作ステップは以下の通りです。
STEP1.　上記のソースをコピーする
STEP2.　切替表示コンテンツのHTMLを作成する
STEP3.　切替表示コンテンツのHTMLをSTEP1のソースに入れる
STEP4.　タッチするメニューのテキストを変える

STEP1.　上記のソースをコピーする
HTMLを編集できるソフトやテキストエディタなどに上記のHTMLフォーマットをコピー＆ペーストしましょう。今回は「id=”c”」に関する記述は削除しています。