リキッドレイアウトとは – まーくんのアフィリエイト学校【afb】

アフィリエイトを始めるために知っておきたいことなどの基礎から、運営に関する知識やテクニックなどの応用まで様々なノウハウを学ぶことができます

リキッドレイアウトとは

公開日 最終更新日

リキッドレイアウト

リキッドレイアウトとは、サイト画面をデバイスの画面サイズに合わせて変化させる手法のこと。デバイスに応じてCSSを変えるレスポンシブデザインとは似て非なるもの。

レスポンシブデザインとリキッドレイアウトの違い

ん?どっちも結果は同じくまよね?

「スマホでも見やすくする手法」という意味では同じかもですけど、得られる結果と工程が全然違うんですよ~

 

レスポンシブデザイン

PC用とモバイル用のCSSを用意してあらかじめデバイスに合わせたデザインを複数作っておく手法。

リキッドレイアウトとレスポンシブデザインの違い

リキッドレイアウトとレスポンシブデザインの違い2

 

リキッドレイアウト

元のレイアウト自体がデバイスの画面幅に合わせて変化するようする手法。

リキッドレイアウトとレスポンシブデザインの違い3 リキッドレイアウト_コンテンツ

レスポンシブデザインが名前の通り「デバイスに応じたCSSをレスポンスする(返す)」デザインで…
リキッドレイアウトは「画面に合わせてサイトのサイズが変化する」レイアウトってことですね~

 

 

レスポンシブデザインとリキッドレイアウトの使い分けは?

しっかり縦にできるのがレスポンシブデザイン

レスポンシブデザインはモバイル用のデザイン・PC用のデザインを別々に用意できるので、要素の非表示やメニューデザインの変更、コンテンツの配置など、デバイスに合わせた選択を柔軟にできます。

 

 

画面に合わせてサイズが変化するのがリキッドレイアウト

リキッドレイアウトではデザインの細かい設定はできません。

名前の通り「画面に合わせてレイアウトが変化する」手法のため、上の画像のようにただPCのデザインがスマホ画面に合わせてサイズが調整されます。

 

 

全く変化しないのがソリッドレイアウト

リキッドレイアウトと対になる存在が「ソリッドレイアウト」です。

こちらの画像を見るとリキッドレイアウトの仕組みがわかりやすくなりますね。

上の画像を見て分かる通り、サイトのレイアウトがスマホ画面を飛び出してしまい横スクロールが必要になってしまっています。

 

使用例

PC用レスポンシブデザイン + ソリッドレイアウト

モバイル用レスポンシブデザイン + リキッドレイアウト

という、「レスポンシブデザイン+○○レイアウト」の組み合わせで使用することが一般的に多いかと思います。

PCはソリッドレイアウト…?リキッドレイアウトの方が画面に合わせてくれるからいいんじゃないかくま??
PCはスマホと違って横幅が広いから、際限なく伸ばされるとすごく見ずらくなってしまうんですよ~

 

 

リキッドレイアウトとレスポンシブデザインを別々で考えてたけど、実は2つの要素が合わさって「どのデバイスからでも見やすくするための手法」だったんくまね~

 

 

リキッドレイアウトのおさらい

簡単に今回のまとめをしておくです~。
リキッドレイアウトのまとめ

・リキッドレイアウトは画面に合わせてレイアウトが変化する手法のこと

 

関連用語

CSS

HTML

レスポンシブデザイン

ネガティブマージン

 

その他参考になる記事

リキッドレイアウトとは何? Weblio辞書

 

アフィリエイト用語辞典 一覧に戻る

この記事を書いた人

著者:afb運用チーム

高収入アフィリエイター様からの満足度11年連続1位の評価※をいただいているafbの運用チームです。
経験豊富な専門スタッフが、アフィリエイトの知識やノウハウを解説します。

※ 2013〜2023年6月に実施された、特定非営利活動法人アフィリエイト・マーケティング協会の 「アフィリエイト・プログラムに関する意識調査」における利用者満足度調査による