化粧品サイト（解説）

解説

ショッピングサイトのデモです。

直接スマホでご覧になりたい方は下記リンクをご利用ください。

スマホ・タブレットサイトはこちらから

タブレットとスマホそれぞれの表示比較

トップページ

タブレット表示

スマホ表示

商品情報ページ

タブレット表示

スマホ表示

タブレット・トップページの部品について

BlockLink

ナビゲーションボタンに利用しています。画像・文字を横並びにしています。

RotateCarousel, Layouter

右側のエリアは横幅をタブレットには約70%、スマホには約100%でレイアウトを切り替えています。

BlockLink

画像と文字をひとまとめにしてリンクにしています。

タブレット・商品情報ページの部品について

Layouter

タブレットとスマホでレイアウトを切り替えています。

BlockLink

左ペーンのバナーボタンは画像と文字をひとまとめにしてリンクにしています。

CheckImage

画像を使ったチェックボタンです。

スマホ・トップページの部品について

RotateCarousel, Layouter

タブレットとスマホでレイアウトを切り替えています。

BlockLink

ナビゲーションボタンに利用しています。画像・文字を横並びにしています。

BlockLink

画像と文字をひとまとめにしてリンクにしています。

スマホ・商品情報ページの部品について

Layouter

タブレットとスマホでレイアウトを切り替えています。

RotateCarousel

スマホの場合のみカルーセルにしています。

CheckImage

画像を使ったチェックボタンです。

BlockLink

画像と文字をひとまとめにしてリンクにしています。