HTML・CSS, ホームページ制作関連コラム, レスポンシブデザイン・スマホ対応

レスポンシブウェブデザインとレイアウトの関係

投稿:2015/06/12 更新:2024/07/21

さて、レスポンシブウェブデザインのサイトが最近流行っていますが、
どのようなものなのか、今回はレイアウトとの関係から見ていきたいと思います。

responsive150612

ソリッドレイアウト、リキッドレイアウトとは

まず、代表的なレイアウトとして、「ソリッドレイアウト」と「リキッドレイアウト」があります。
ソリッドは固体、リキッドは液体という意味で、
ソリッドレイアウトは固体のように形が変化しないもの、リキッドレイアウトは液体のように流動的で変化するものということです。

簡単にいうと、
ソリッドレイアウトは、ウィンドウの幅に関係なくレイアウトが固定されたホームページで
リキッドレイアウトは、ウィンドウの幅に合わせてレイアウトの幅が変化するホームページになります。
詳細は、「ソリッドレイアウト」「リキッドレイアウト」ページをご覧ください。

.

レスポンシブウェブデザインとソリッドレイアウト、リキッドレイアウトとの関係

それで、レスポンシブウェブデザインとソリッドレイアウト、リキッドレイアウトとの関係ですが、
レスポンシブウェブデザインウインドウの幅に合わせて、CSSを切り替えてレイアウトを調整する方法になるので、
そのレイアウトをソリッドレイアウトにするのか、リキッドレイアウトにするのか選択する関係にあるといえるでしょう。

たとえば、ウィンドウの幅が広い場合はPC用が予想されますが、リキッドレイアウトにしてしまうと間延びしてしまう可能性があるので、ソリッドレイアウトの方がいいかもしれませんね。

逆に、ウィンドウの幅が狭い場合はタブレットやスマートフォンの可能性が高くなり、タブレットやスマートフォン且つ画面を縦向き(ポートレート)、横向き(ランドスケープ)のどちらで利用するかも分からないのでリキッドレイアウトにした方がいいかもしれませんね。

どのウィンドウ幅でもリキッドレイアウトにする方法もありますが、やはりウィンドウ幅が広くなった時のデザインの間延び感を考慮すると、ウィンドウの幅でCSSを切り替えてレスポンシブデザインでホームページを制作するのがいいでしょうね。

.

その他テンプレートを切り替える方法なども

レスポンシブWEBデザインは検証作業に結構手間がかかるので、費用を抑えるならCMSを組み込んでPHPなどで端末を判別してテンプレートを割り当てる方法もご検討ください。

その他、ホームページ制作に関連して、ご不明な点などございましたらお気軽にお問い合わせください。
レスポンシブデザインの制作料金やホームページ作成の費用を知りたい方は「ホームページ制作料金」ページも合わせてご参照ください。

 

このエントリーが役に立ったらシェアしてください

  • .

お見積のご相談(無料)

千葉、東京、横浜、ロンドンで連携して日本国内から海外までホームページ作成、ブランディングデザインを承っております。
ホームページ作成、ブランディングデザインのご相談・お見積は無料です。まずは概算見積をしますのでお気軽にお問い合わせください。