モバイル幅でwebサイトを作成する

今ではpcでもspでも最適に表示されるレスポンシブサイトは当たり前で、最近はむしろspでの表示を優先させ、pc時は画面いっぱいの固定背景（多くはbody要素を固定）を置き、モバイル幅の中にコンテンツを入れるようなspファースト、もしくはspオンリーのサイトも見かけます。

ポイント

• body要素を固定、背景はcssとsvgを使ってパターン
• モバイル幅にシャドウを入れる
• ロゴやメニューボタンなどをコンテンツ枠外に固定表示させる
• よくある質問をcssのアコーディオンパネル
• 商品・サービス画像をフィルタリング（css or jQuery）
• スクロールアニメーションの実装（jQueryプラグイン）

heropatterns.com

www.honda.co.jp

www.louer.jp

www.dot-st.com

dramatic-curry.com

コンテンツ構成

• トップ
• コンセプト
• 商品
• よくある質問
• 店舗情報

使用予定のプラグイン
michalsnik.github.io