お久しぶりです。WEB制作チームのウサナミです。
今回は前回紹介した記事の続きを書こうと思います。
前回はカラムのレイアウトについてご紹介しましたが、表示幅によって変わるレイアウトについてご紹介します。

ソリッドレイアウト（固定幅レイアウト）

画面幅が変わってもサイトの見た目が変わららず、要素ごとに横幅が指定されているレイアウトです。
昔からあるサイトの作りで後で説明するリキッドレイアウトよりも制作が容易です。
昔のPCのサイトはこのソリッドレイアウトが主流でした。

メリットとしてはリキッドレイアウトよりコーディングが簡単というのがあげられます。

デメリットとしては画面幅の狭い、ノートパソコンなどでサイトを表示した際にサイト全体がうまく表示されずスクロールバーが出てきて、みにくい等があげられます。

リキッドレイアウト（可変幅レイアウト）

画面幅によってレイアウトが調整され、どの画面幅でもサイトのイメージを崩さずにサイトを見ることができます。
ここ数年で大分このタイプのサイトが増えてきました。
スマホサイトも初期の頃と比べると今はリキッドレイアウトが主流となり、殆どソリッドレイアウトのものは見なくなりました。

メリットは画面幅が小さいノートパソコンなどでもサイトのイメージ、レイアウトを崩さずにサイトを見れます。

デメリットはソリッドレイアウトと比べて、若干コーディングの難易度が上がります。
あとはデザインの際にサイズが変わる前提でデザインをしなければいけない等もあります。

レスポンシブデザイン

リキッドレイアウトや時にはソリッドレイアウトを合わせた、一本のコーディングでWEBもスマホも対応出来るレイアウトです。
PCとスマホでHTMLファイルが違うサイトと比べ、サイトの情報を一貫出来るため、グーグルにも高い評価を受けています。

メリットとしては、先ほど説明したPCとスマホで一貫した情報を提供出来ることと、PCとスマホのページが共通のため、更新が楽なことです。

デメリットとしては、コーディングの難易度がグッと上がってしまうことです。
ほかにも稀にあるのがページを追加した際にスマホ版のCSSを作り忘れる、特定のサイズで表示した際にそこまでCSSを考慮しておらず表示が崩れる等があります。

ちなみに、個人的に簡単だと思うレスポンシブのCSSの作り方はメディアクエリで完全にWEBとスマホを分けて作るか、もしくはPC版を作った後にそこからPC用に作った複数カラムのCSSを外していき、スマホ用にサイズを調整する作り方です。

サイト作りにはいろんなやり方があってそこからやりやすく最適なやり方を見つけるのはとても楽しいことだと思います。
今後もまたレイアウトについて思いついたら記事を書こうと思います。