BLUE SAMPLE
青バージョンのサンプルページ
このページは、iframeのタブ切り替えで表示内容の違いが分かりやすいように作成した青系デザインのサンプルページです。
iframe内に青系ページを表示
iframeを使うと、別のHTMLページを現在のページ内に埋め込んで表示できます。タブ切り替えと組み合わせることで、複数のページを同じ画面内で切り替えて確認できます。
このページは青系の配色で作成しているため、他の色のページと切り替えた時に変化が分かりやすくなります。
利用シーン
タブごとに異なるiframeを表示すると、1つの画面内で複数の情報を整理して見せることができます。
- サービス紹介ページの切り替え
- 店舗別ページの表示
- 資料ページや説明ページの確認
- 複数フォームの切り替え表示
タブ切り替えで分かりやすく表示
iframeの中身をタブで切り替えると、ページ遷移をせずに複数の内容を確認できます。青、緑、赤など配色の異なるページを用意すると、表示内容が変わったことを視覚的に確認しやすくなります。
スクロール確認用コンテンツ
iframe内のページが長い場合でも、iframeの中でスクロールして内容を確認できます。この記事のサンプルでは、縦に長いページを表示することで、iframe内スクロールの動作も確認できます。