解説
会員制サイトのデモです。
トップページ
Layouter
レイアウターで段組みしています。
RotateCarousel
カルーセル＋自動回転で特集ページのサムネイルを表示しています。
Tab,Layouter
サイトのサービス内容をタブで表示しています。レイアウターを組み合わせることでタブの中身を段組みにしています。
Accordion
各コンテンツをアコーディオンで表示しています。折りたたむことでコンテンツが縦長になるのを防止しています。
RotateCarousel
関連商品のサムネイルをカルーセルで表示しています。
Justify
x-shoppingのフッターメニューを流用しています。x-fitタグでUIを作成しておくとタグのコピペだけで移植できるため開発効率が向上します。
会員登録ページ
画像変換機能
背景画像をx-fitの画像変換機能を使って端末の幅に合わせています。
機種グループによる出し分け機能
機種グループによる出し分け機能を使っています。
- アニメーションを表現できる端末はHTML5のアニメーションを表示する
- アニメーションを表現できない端末は固定の画像を表示する。
Switch
二者択一の項目はスイッチを利用しています。
CheckImage
チェックイメージを利用してアプリ風のリッチな選択ボタンを表示しています。
Check
チェックを利用してタッチできる範囲を広げています。
Radio
ラジオを利用してタッチできる範囲を広げています。チェックとは違い複数選択はできません。