
サイト(Webページ)にはレイアウトというものがあります。
いろいろな視点で分けることができます。
画面の大きさによって変わらない固定レイアウトなのか、それとも画面の大きさによってコンテンツの幅が変わるリキッドレイアウトみたいな可変のものなのか、段組みなのか、グリッド(タイル形式)なのか、フリーレイアウトなのかといった具合に分類できます。
多くのページは、カラムレイアウトを基本にしています。
上部にヘッダーがあり、その下にコンテンツがあり、下部にフッターがあります。
コンテンツの部分は、1カラム、左にメニューがある2カラムのもの、右にメニューがある2カラムのもの、左右にメニューとサブメニューがある3カラムのものが基本になっています。
中には4カラムになっていたり、3カラムの変形となっているものなどもあります。
画面が小さく横幅が狭いスマホ用のサイトなどでは、必然的に1カラムのレイアウトになってきますし、PCで見る情報量が多いサイトになると、2カラム以上のマルチカラムレイアウトのほうが見やすくなってきます。
カラムレイアウトの他には、グリッドレイアウトというものがあります。
文字や画像といった要素を一定の競うにしたがって並べられた格子状のレイアウトにはめ込むような形のレイアウトになります。
タイルが並んでいるような形なので、タイル形式というほうがピンとくるのかもしれません。
画像や動画を並べて表示するようなサイトや、ニュース記事などのトピックスを並べるといった記事などに適したレイアウトになっています。
まっさらなキャンパスに自由に絵を描いていくような形のレイアウトです。
グリッドに囚われず、どんどんと要素を配置していくレイアウト手法で、ポスターや広告などのようにグラフィック性が重視されるサイト、キャンペーン系のサイトなどで見られる形のレイアウトです。
サイト(Webページ)は、大きな画面のPCで見られることもありますし、スマホなどの小さな画面で見られることもあります。
従って、PC用のサイトと別にスマホ用のサイトを作るという方法もありますが、最近では、PC用とスマホ用兼用のWebページを作り、表示される画面によって、レイアウトが変化している形のサイト(Webページ)が主流になってきています。
レスポンシブレイアウトだと、例えば画面の大きなPCでみると3カラムのレイアウトになっていますが、スマホでみると1カラムのレイアウトに変化して見やすくなります。
言葉で長々と説明するより、実際にどういう変化になるか百聞は一見にしかずなので、実際に、大型PCなど大画面の時は3カラム、タブレットなどの中画面の時は2カラム、スマホなどの小画面の時は1カラムと変化するレスポンシブレイアウトの例を動画で作成しましたので参考にしてみてください。
どんな感じなのかつかめると思います。
色々なコンテンツを配置するときに使われる3つのレイアウトがあります。
それぞれのレイアウトで決められたルールに従いCSSに記載することで、レイアウトを作ることができます。
レイアウトについては、フロート、フレックスボックス、グリッドの順で出てきて、現在ではほとんどのWebブラウザの最新バージョンで使用可能となっているので、レイアウトはグリッドの時代だという人もいますが、それぞれの長所・短所があるので、それを知った上で使い分けると良いでしょう。
Floatとは、浮いたという意味ですが、このレイアウト手法を使うと、指定したブロック要素は通常のコンテンツの流れから切り離されます。
そして、左または右にそのブロックが島のように浮いた状態になります。
ちょうど図で示したように他の部分のコンテンツは、その浮いた島を避けるように横に空いた隙間から下に回り込むような形で配置されていきます。
長所 : 画像などが入ったコンテンツで、文字を回り込みで入れていきたいときには最適
短所 : あまり複雑なレイアウトには向かず、記載が複雑になってしまったりする
Flexboxコンテナーと呼ばれる親要素の中に、アイテムを並べていくというような考え方のレイアウトになります。
図で示したようにアイテムの表示順を変えたり、アイテムの伸縮比を設定して大きさを変えたり、コンテナーの中でアイテムを均一に並べたりするのに便利なレイアウトです。
コンテナーを指定し、その中でアイテムを並べるのに適しているので、画像を並べるギャラリーサイトなどにも適しています。
長所 : 列や行の中で、アイテムを整列させて、アイテムの上下または左右の位置を揃えることができるので、ナビゲーションには最適
短所 : 複雑なレイアウトであったり、レスポンシブレイアウトで何段階もコンテンツの場所を入れ替えるといった複雑なことをやるには少し面倒
格子の上にパネルをあてはめて入れ込んでいく形でレイアウトしていくのが特徴。
自由度が高く、慣れてしまえば結構複雑なレイアウトも比較的簡単に作れてしまいます。
丁度、方眼紙のマス目の上に、レイアウトを設計していくような感じになります。
レイアウト設計が簡単にでき、レスポンシブレイアウトもすごく楽に作ることができます。
2カラム、3カラムといったマルチカラムレイアウトや、格子状のグリッドレイアウトで画像や動画を並べるといった場合には最適です。
長所 : 自由度が高く、設定も簡単なので、ページ全体のレイアウトにはイチオシです。
短所 : コンテンツの一部で画像の周りに文字を周りこませるといったようなことであれば、Floatの方が適しています。
ちなみに、前述のレスポンシブレイアウトのところで例示にあげた動画にでてきているサイトは、画面の大きさによって3カラム⇒2カラム⇒1カラムとレイアウトが変化していますが、このサイトのレイアウトは、グリッドレイアウトを使って作成しています。