レイアウトと全体ボックスについて
レイアウトとは
ここでのレイアウトは、HTML/CSSのコンテンツの組み方とします。
スマホだけでなく、PCでも問題なく見える画面を作っていきます。
HTMLの鉄則
HTMLは左上から下に向かって、縦並び表示される鉄則があります。
そのため、2つ目の見出しは以下のように下に並べられていきます。
ですので、ある程度のコンテンツ量の場合、以下のように横に並べていくことで無駄なスクロールを減らすことができます。
レイアウトはボックスの組み合わせ
レイアウトはボックスをパズルのように組み合わせて作る考え方をします。
全体ボックス
全体ボックスの作成
全体ボックスとは、画面上に表示させたいコンテンツの大枠のことです。
ラッパーやラッパースタイルなどとも言います。
可変長ボックス
全体ボックスを可変長にすることで、画面サイズを変更しても、画面いっぱいに全体ボックスが表示されます。
横幅（width)を 100％ に設定することで、可変長ボックスになります。
実際に書くと以下の通りです。（縦幅は800pxとします。）
まず、bodyの全体をdivを使って囲います。
<body>
<div class = wrapper>
.
.
.
</div>
</body>
その後、CSSで可変長にしていきます。
.wrapper{
width:100%;
height:800px;
}
また、可変長ボックスのメリット、デメリットは以下の通りです。
メリット
- 画面サイズが可変長なので、全体ボックスがはみ出す心配がない。
- スマートフォン対応時に全体ボックスの幅を変える必要がない。
デメリット
- ワイド画面で見た時に横に広がり過ぎてコンテンツが見づらい。
固定長ボックス
全体ボックスを固定長にすることで、画面サイズが変更された場合でも全体ボックス内のレイアウトを崩さずに表示することができます。
PCでは綺麗に見えますが、スマホで見る場合、横スクロールが必要になってしまいます。
これを防止するために、メディアクエリという処理が必要になります。
メディアクエリとは、Webサイトを各種デバイスに適した形で見せることができるもので、
最近ではheadタグやCSSに記述されていることがあります。
固定長ボックスは、上の可変長ボックスの width:100%; の部分を、具体的な数値（1000pxなど）に変えるだけで作成することができます。
この固定長ボックスのメリット、デメリットは以下の通りです。
メリット
- 画面サイズが固定長なので、全体ボックス内のレイアウトが一定に保てる。
- 画面サイズが横に広がり過ぎても、固定長なのでコンテンツの見やすさが変わらない。
デメリット
- PC用とスマホ用で別々のCSSを適用する必要がある。
Discussion
メディアクエリとは、PC用とスマホ用2種類の固定長ボックスを定義しておいて、ブラウザの識別信号？？でどちらが閲覧してるのかを判断し、それに合わせて表示する固定長ボックスを切り替える仕組みのことですか？
コメントありがとうございます！
そういう認識で問題ないですが、識別信号というよりは、（pythonでいうifのように、）条件を満たした場合は指定したCSSを適用し、満たさない場合は適用しないといった指示を出して、表示を切り替えるという仕組みです。
HTMLとCSS、どちらの書き方もあります！
またまとめようと思います。