レスポンシブデザイン 表示例
ブラウザの横幅に応じてレイアウトが変更されます。
スマートフォンでは画像サイズが自動的に小さくなり、
メニューボタンに変わり、列の数が変わるなど
各端末に最適な表示が提供されます。
PC表示例
左にサイトタイトル、右にメニューを表示、メニュー項目は全て表示
左にサイトタイトル、右にメニューを表示、メニュー項目は全て表示
スマートフォン表示例
中央にサイトタイトル、右にメニューボタン、メニューの項目は非表示
中央にサイトタイトル、右にメニューボタン、メニューの項目は非表示
スマホ メニューオープン
メニューボタンをクリックするとメニュー項目がスライドして表示
メニューボタンをクリックするとメニュー項目がスライドして表示
PC表示例
パソコンでは3列で表示
パソコンでは3列で表示
スマートフォン表示例
スマホでは2列で表示
スマホでは2列で表示