リキッドレイアウトページの作り方

ブラウザの横幅が違うとウェブページの見え方が変わってきます。横幅を指定しないリキッドレイアウトのページにすると、ソースが簡単になりウェブページを柔軟に変化させて見ることができます。レスポンシブWebデザインのページを作る基本はリキッドレイアウトです。

リキッドレイアウトのデザイン方法とは

サーバーの写真

リキッドレイアウトというのは、ウェブページを作成する時、ブラウザでページを表示させる領域が変化しても横幅が切れることなく、スクロールバーを表示させずにうまく表示させるデザイン方法です。

リキッドというのは液体のことです。容器に液体を注ぐと容器の大きさに応じて液体の形が変化していきます。

これと同じようにページのコンテンツが、表示される領域によって変化するのがリキッドレイアウトです。

ウェブページの横幅をピクセル数などで、固定的に指定する場合があります。この場合は、ディスプレイの解像度やウィンドウの横幅が、指定されたピクセル数よりも小さいと、このウィンドウから横にはみ出します。

そして、横方向にスクロールバーが出て、横にスクロールしないと全部分を見ることができません。これはユーザーに不便を強いることになります。

リキッドレイアウトは、この横幅を全く指定しないか、パーセント(%)などで指定して、ページの横幅が変化しても、画像や文字列の位置が相対的に変化してうまく表示するようにデザインしたものです。

ホームページ・ビルダーの「どこでも配置モード」は、リキッドレイアウトとは全く違った考え方であり、これは全く論外です。

リキッドレイアウトの誤解

よく、リキッドレイアウト用のCSSが紹介されていますが、その多くは、メインの段組の横幅がブラウザの横幅に応じて変化するようになっています。

リキッドレイアウトというのは、ブラウザで表示される横幅に応じて、その内容(コンテンツ)を最適に表示することであって、表示する段組(カラム)の横幅を可変にすることだけではありません。

もちろん、段組(カラム)の横幅(width)を全く指定しないか、パーセントなどで相対的に指定すれば、表示する横幅も自動的に変化します。

しかし、本当の意味のリキッドレイアウトというのは、メインの段組(カラム)の中身(コンテンツ)のレイアウトも含んだものなのです。コンテンツでブロック要素の横幅を固定してしまうと、リキッドレイアウトにはなりません。

インターネットの初期にはリキッドレイアウトが主流でした

インターネットが始まった頃のウェブページは、どのような画面で見られるのかがよく分からなかったので、どのようなサイズの画面で見てもちゃんと表示するように、リキッドレイアウトが主流でした。

また、カラム(段組)も分けないで1コラムのものや、フレームのものもよくありました。現在のようにマルチコラムになって、 ディスプレイ楽天 の大きさがある程度固まってくると、横幅を固定したページが見られるようになってきました。

つまり、リキッドレイアウトは今に始まったことではなく、インターネットの初期からあったことであって、特に難しい技術などはありません。

具体的には、横幅を全く指定しないか、パーセント(%)などで指定して、ページの横幅が変化しても、画像や文字列の位置が相対的に変化してうまく表示するようにデザインするだけのことです。

リキッドレイアウトデザインにする具体的方法

リキッドレイアウトにするには、ブロックレベル要素の横幅(width)や高さ(height)を全く指定しないか、パーセントなどで相対的に指定してやると簡単です。横幅や高さを全く指定しないと、ソースが単純になりますし、ページ作りも簡単です。

画像も縦横サイズを適度に縮小してやって、横幅と高さも指定しなくてもかまいません。画像の横幅(width)や高さ(height)を全く指定しないと、画像の表示が遅くなるという情報もありますが、あまり関係ないようです。私は画像の縦横幅を全く指定していません。

画像とテキストが混ざっている場合は、画像の周りにテキストが廻り込むようにした方が良いでしょう。この場合は、次のように画像に「左寄せ」又は「右寄せ」のスタイルシートを指定します。

<img src="hoge.jpg" style="float:left" alt="hogehoge" />

表示領域の横幅の上限を指定するのが親切です

リキッドレイアウトにした場合、高解像度のディスプレイで表示させると、異常に横に伸びた画面となって、かえって読みにくくなってしまうことがあります。

この場合は、表示領域の横幅のサイズに上限を指定して、ある程度の横幅を超えると、それ以上横幅が伸びすぎないようにすると見易い画面になります。

表示領域の横幅の下限も指定する人がありますが、私は横幅の下限は指定する必要がないと思います。わざわざ横幅を狭い画面にしない限り、読みにくい程の画面は普通は存在しないからです。

仮に、そのようなものがあったとしても、横のスクロールバーが出るよりは、出ない方がましです。また、横スクロールバーが出てもリキッドレイアウトなら、文字はそのままで読めるはずです。

表示領域の横幅の上限を指定する方法

表示領域の横幅の上限を指定するには、全体のスタイルシートで max-width を指定します。次の例は私の場合のものです。

#main {max-width:710px;margin:5px 10px 10px 180px;text-align:left}
#side {max-width:160px;position:absolute;top:5px;left:5px;border:1px solid #888;text-align:center}

レスポンシブWebデザイン部分では、CSS3のメディアクエリーを使って、次のように max-width を指定しています。

@media screen and (max-width:800px) {
#main {max-width:635px;margin:5px 0 10px 165px}
#side {max-width:160px;position:absolute;top:5px;left:1px}
}
@media screen and (max-width:550px) {
#main {max-width:550px;margin:0}
#side {max-width:550px;position:relative;top:0;left:0;margin:0}
}

レスポンシブWebデザインでもリキッドレイアウトは効果があります

1コラムのリキッドレイアウトデザインのページはそのままで、レスポンシブ・ウェブデザインのページになります。

マルチコラムの場合は、各コラムをリキッドレイアウトにしておいて、レスポンシブにコラムの配置を変化させれば、レスポンシブ・ウェブデザインのページになります。

レスポンシブWebデザインにする場合でも、リキッドレイアウトのデザインにしておくと、横幅の変化に柔軟に対応できて、インターネット閲覧者にはとても便利です。

レスポンシブWebデザインで、更に、リキッドレイアウトのページにしておくと、最強のウェブページとなります。

レスポンシブWebデザインとリキッドレイアウトはスマートフォンにも柔軟に対応できます。スマートフォンでは、ユーザーエージェントによってPHPで更にデザインや広告を切り替えることもできます。

結果

このサイトのブラウザの横幅を変化させて、ページの見え方を確認してみてください。どんな横幅であってもその時々に応じたページに変化していくのがわかるでしょう。

このようにリキッドレイアウトは、パソコンやタブレット端末やスマートフォンに同一ページで柔軟に対応できるデザインの基本です。これからのウェブデザインの元になるもの言ってよいと思います。