前回の内容（「display: flex;」と「justify-content: 〇〇;」）
前回は、要素を横並びにする方法について話をしました。
「display: flex;」と「justify-content: 〇〇;」の組み合わせで要素を横並びにして配置を決めるんでしたよね。
ええ、そうですね。
そして、最終的にはこのような形になっています。
なんだか横並びにできただけで満足感があります。
しかし、これだけではページとして不十分なので、さらに追加をしていきましょう。
ページの高さや幅を指定しよう
まずは、ページとしての形をつくっていくために、ヘッダー<header>とフッター<footer>、
そしてコンテンツを表示する部分<div class = “contents”>の高さ(height)と幅(width)を指定しましょう。
※ヘッダーとフッターの中にあった<h1>の記述を削除しています。
ここでは、大きく分けて３種類の高さや幅の設定方法を使っています。
基本的な「px」、画面幅によって大きさが変化する「vh」と「vw」、計算して高さや幅を設定する「calc( )」。
これを使うと、以下のようになります。
「vh」「vw」、「calc( )」を使うことで、画面の幅を変えた時に、表示方法を変えることができるようになっています。
calc( )の使い方
画面の大きさによって幅や高さを変更したい場合に便利なのが、「calc( )」です。
使い方としては、()の中で計算を行います。
特に四則計算（+,-,*,/）を使うことが多いでしょう。
calc(100vw – 100px)のように、違う単位のものでも計算することができるんですね。
だから画面幅を調整してもうまく表示されるのか…。
では、ついでにこれからの作業を考えて<p>で表していたものを、<div>にしつつ、それぞれの幅をcalc(100vw / 3)としておきましょう。
さすがパソコン、本来なら割り切れない（100 / 3）の計算結果を表示できるんですね。
ここまでくると、CSSの.contentsに書かれていた、「justify-content」は不要なので消しておきましょう。
またいつか、レイアウトで必要になった際に使うことにしましょうね。
「%」を使った高さや幅の設定
続いては、classの一つを縦に２分割します。
今回は適当に<third>クラスの上を<top-third>、下を<bottom-third>とでもしておきましょう。
そうしたとき、先ほどと同じようにサイズを自由に変えたい場合、「px」を使うとうまくいきません。
そこで、ここでは、親要素の大きさを100%としてサイズ設定を行うことができる「%」を使っていきます。
※機能によっては、pxを使った方が良い時もあります。
すると以下のようになります。
<third>の高さの30%を黒が、70%を白が占めています。
このようにして、それぞれの高さを適切にしていしてあげることで、表現したいレイアウトを作っていくことができるようになっていきます。
おわりに
これで、高さや幅についてのお話は一旦終わりです。
高さや幅を指定していくことで、大きなレイアウトを行うことができます。
そして、分けた部分に画像を表示したり、リストを表示したりと自分が実装したい機能を入れていくことで、ページが出来上がっていきます。
なお、今回は可変性を意識して作成したので、％やvh,vwを多く使っています。
あくまで基本はpxだということは覚えておいた方がよいでしょう。
コメント