本サイトのレスポンシブWebデザイン

  • レスポンシブWebデザインは、スマートフォンやタブレット、PCなどのあらゆるデバイスに対応したサイトをワンソース(1つのHTMLファイル)で実現する制作手法です。
    そのため、各デバイス用に複数のソースを作成する必要がありません。
  • 各ページを1つのHTMLファイルで制作できるので、URLも1つになります。そのため、検索エンジンによるインデックス化の問題やアクセス解析ツールでのサイト分析時の課題も生じません。SEO的にも従来の方法よりも効果的です。
    Googleがお勧めするスマートフォンに最適化されたウェブサイトの構築方法」内でレスポンシブWebデザインでサイトを構築することを推奨しています。
  • 画面サイズを基準にサイトの切り替えを行います。サイト切り替え処理はCSS3で実装します。
  • 本サイトではオープンソースのEC-CUBEに、独自のカスタマイズ機能を追加しています。
    ダウンロードしたパッケージをインストールすると、追加した機能やデザインも同時にインストールされますので、インストール後に機能やデザインを適用させる操作は不要です。
    インストール後、デモサイトのように表示されます。
  • 本商品はプラグインでもテンプレートでもありません。
    dataフォルダとhtmlフォルダで構成されていますので、オリジナルのEC-CUBEパッケージと同様にインストールしてください。
    インストール方法はこちらでも紹介しています。
  • デモサイトを開き、ブラウザの幅を狭めたり広げたりすると、PC・タブレット・スマホでの表示を確認することができます。
    レスポンシブWebデザインは、主にCSS(スタイルシート)への記述で実現しています。
    CSSはこちらのような記述になっています。お客様で、新たにページやブロックを作成する際に参考にしてください。
PCイメージ
レスポンシブWebデザイン PCイメージ
タブレットイメージ
レスポンシブWebデザイン タブレットイメージ
スマホイメージ
レスポンシブWebデザイン スマホイメージ
CSS3の記述
レスポンシブWebデザイン CSS
このページの先頭へ