【CSS】レイアウト

最近、忙しくnoteの更新ができていませんでした。Udemyのコースは終了しているので、後はnoteに記事を書くのを頑張っていきます。
さて、今回は「レイアウト」というお題で学んだことを記事にまとめていこうと思います。

レイアウトの基本

レイアウトを組んだ際、大きなボックスの中に小さなボックスがいくつか収納されると言ったレイアウトになることが多いです。そういった場合、大きなボックスから「width値・height値」を決め、レイアウトを組む必要があります。

ボックスをセンタリングする

ボックスをセンタリングする際、「width」の設定を記述した上でCSSを書いていきます。

セレクタ{
    margin: 0 auto;
}

上記のように設定することで、ボックスをセンタリングすることができます。

ボックスを横並びにする

まず、例として大きなボックスの中に2つボックスを入れたものを用意します。

<div class="boxA">
    <div class="box1">
    </div>
 
    <div class="box2">
    </div>
<div>

上記では、「boxA」という大きなボックスの中に「box1・box2」が収納されている状態になります。このままだと、ブラウザ上では「box1」と「box2」は縦に並んでしまいます。そこでCSSで横並びの設定を記述する必要があります。

div.box1{
   float: left;
}
 
div.box2{
   float: left;
}
 
div.boxA{
    content: "";
    clear: both;
    display: block;
}

float

要素が浮いた状態になり、指定した方向へ詰めて配置される。浮遊化を解除しなければ、後に記述したコンテンツが浮遊した要素の下に回り込んでしまうため、clearプロパティもセットで記述する必要があります。

clear

ボックスの浮遊化を解除することができます。

上記のCSSでは
①ボックス（子要素）を横並びにする
②2つのボックスを囲むボックスに（親要素）にclearプロパティをかける
という流れになってます。
＋αでボックスに背景色を設定し、エラーが分かりやすいようにすることもできます。

positionプロパティ

positionプロパティでは、コンテンツの位置を指定することができます。

①親要素に「position: relative;」で要素の左上を基準点に設定する
②子要素に「position: absolute;」でその基準点からどの位置に配置するか、top,right,left,bottomをpx単位で設定する。

ヘッダーの固定

Webサイトを閲覧していると、スクロールしてもヘッダーが固定されたままのサイトが多くあります。この設定もpositionプロパティを使用しています。

header{
    position: fixed;
}

上記のように設定することで、ヘッダーを固定する事ができます。
この設定をしたときの注意点ですが、ヘッダーの次に記述されている要素がヘッダーの下に回り込んでしまいます。そのため、marginプロパティで調節する必要があります。

overflow

overflowプロパティでは要素のボックスからはみ出した際に、はみ出した部分をどのようにするかを設定することができます。overflowで利用できる値は以下になります。

• hidden・・・はみ出た部分を消す

• scroll・・・スクロールさせ、常にスクロールバーを出す

• visible・・・デフォルト値。はみ出したまま表示する

• auto・・・必要であればスクロールさせ、スクロールバーを出す。

overflowを使用することで、小さなボックスの枠でも多くの情報を乗せることができます。

感想

このセクションではWebサイトのレイアウトをする際に、必要になってくる基本的なことを学ぶ事ができました。特にpositionの使い方は難しく感じたので、実践と勉強を繰り返していきます。レイアウトが崩れるだけでユーザーは閲覧する気が落ちてしまうため、今回学んだことは何度も勉強して、身につけていこうと思います。
次回は「セレクタ」についてまとめていきます。