キーワード検索

テクニカルサポートからの重要なお知らせ

レスポンシブWebの概要

BiND8では、スマホ用の専用サイトを作らなくても、自動でPC、スマホなど閲覧環境に合わせたサイズ表示に調整されるレスポンシブWebを作成できます。


BiND7までに収録されていたテンプレートをレスポンシブWebで作成する場合、 サイト設定画面の「デザイン形式」を「レスポンシブ」形式に切り替えます。一度レスポンシブ形式に切り替えると、BIND7形式に戻せませんので、必ずあらかじめサイトのバックアップをとって下さい。
■サイトデータをバックアップする

また、BiND7形式のテンプレートをレスポンシブ形式に切り替えると、サイトの構成によってはレイアウトが崩れる場合があります。レスポンシブ化する際のご注意点に関しては、「BiND7形式のサイトをレスポンシブ化する」を参照してください。

PC用サイトとスマホ用サイトの表示切り替え

ブラウザの横幅サイズ640ピクセルを境に、PC用サイトとスマホ用サイトに表示が切り替わります。ブラウザの横サイズが641ピクセル以上の場合はPC用サイトが表示され、それ以下の場合はスマホ用サイトが表示されます。
このように、レスポンシブWebでは意識しなくてもPCとスマホそれぞれ見ている環境に応じて自動で見やすいレイアウトに変換して表示されるしくみを持っています。


サイトを構成するHTMLデータは1サイトにつき1ソースですが、サイトを装飾するCSSデータは、640ピクセルを境にPC用とスマホ用が切り替わります。


ブラウザの横サイズが641ピクセル以上の場合


04-04-001_01_c1.png


ブラウザの横サイズが640ピクセル以下の場合

04-04-001_02_c1.png



CSSの一括で行なえる機能「Dress」を使えば、スマホサイトにだけ特定のカラーデザインを設定すると言った事も可能です。詳しくは「Dressを活用する」をご覧下さい。


リキッド(可変幅)と固定幅の表示切り替え


ページのレイアウトには、リキッド(可変幅)と固定幅のいずれかを設定することでき、サイトの表示方法に違いがあります。詳しくは、「ページレイアウトを変更する」を参照してください。



【リキッド(可変幅)】

横幅を100パーセントにすると、ブラウザ全体にサイトが収まるよう、自動調整されます。また、横幅を1000ピクセルにすると、ブラウザのなかで1000ピクセルをキープし、それ以外の幅が自動調整されます。

ブラウザを縮めると、ブラウザのサイズに合わせて画面の幅が狭まり、縦長になります。


【固定幅】

ブラウザのサイズに合わせて自動で調整されず、設定した数値をキープします。ブラウザを縮めるとスクロールバーが表示されます。


ブラウザを640ピクセル以下にすると、スマホの画面に変わる事はどちらの設定でも同様です。


閲覧時のディスプレイサイズに応じてサイト全体を自動調整するという点で、「リキッド(可変幅)」を推奨します。

Copyright (c) digitalstage inc. All Rights Reserved.