必見!よくあるCSSを使ったレイアウト

フロートレイアウトで右カラム・左カラムを

CSSを使ったレイアウトテクニックは様々なものがありますが、その一つがフロートと呼ばれるオプションを使ったカラム式のレイアウトです。
これは一昔前のウェブサイト等でよく見かける形で、簡単にいえばメニューや一覧を表示するエリア、メインコンテンツを表示するエリア、ヘッダーでウェブサイトの目的を伝えるエリア、フッターでウェブサイトの補足事項・著作権者名・コピーライトなどを表示したエリアがあります。
右カラムと呼ばれるのはメインエリアが左、右にメニューエリアなどのメニューがあります。逆は左カラムといい、両脇にあるのを3カラムレイアウト、両カラムレイアウトなどと呼びます。
こういうレイアウトは長いことあり、今でも情報系のサイトの下層ページには使われています。大きな画面であるパソコンで見ることを想定されているため、いろいろなページに行きやすく、サイトの構成も伝えやすいのがメリットですね。

リキッドレイアウトでマルチに見せる

一方、リキッドレイアウトと呼ばれるものもあります。
これはカラムレイアウトと併用することができるのですが、特に大きいのは単位でしょう。レイアウトの時に基本的に幅をパーセントで取り、ピクセルでは取らないようになっています。
このため、閲覧環境やモニターの大きさによって画面幅が変わり、見え方も大きく違います。ただし気にしなくてはならないのは画面幅が大きすぎるウェブサイトや、逆にスマートフォンなどで閲覧するととても小さくなってしまうということでしょう。このため、リキッドレイアウトに関しては閲覧環境が一定より小さい時、一定より大きい時、というようにモニターの大きさによってCSSの適用を分ける方法もあります。