【HTML＆CSS】Webのデザインを作る！CSSの基本／レイアウトを組もう

おはようございます！

8月21日 水曜日。雲多少ありの晴れ🌞 天気予報だと一時雨らしい。
最高気温34℃。暑いな～ι(´Д｀υ)ｱﾂｨｰ

早速はりきってやっていきましょうかな～。

今日の教材はいつも通りこちら、

　
よしやっていこう！

CHAPTER３　Webのデザインを作る！CSSの基本

◆Flexboxで横並びにしよう

　Flexboxは、CSSのレイアウトモジュールの一つで、要素を柔軟に配置するための方法。複雑なレイアウトも簡単に組める書き方。特に、要素を横並びや縦並びにする際に便利。

Flexboxの基本的な書き方

　まず、Flexコンテナーと呼ばれる親要素の中に、Flexアイテムと呼ばれる子要素を入れてHTMLを作成する。

＜イメージ＞

＜HTML記述例＞

<div class=”container”>
　<div class=”item”>Item1</div>
　<div class=”item”>Item2</div>
　<div class=”item”>Item3</div>
　<div class=”item”>Item4</div>
</div>

＜CSS記述例＞

.item {
　background: blue;
　color: yellow;
　margin: 10px;
　padding: 10px;
}

この段階で実装してみると

　⇒縦に並んでいる。

要素をフレックスコンテナ化するため、CSSに以下の赤字を追記する。

.item {
　background: blue;
　color: yellow;
　margin: 10px;
　padding: 10px;
}
.container {
　display: flex;
}

※「display: flex;」は、要素をフレックスコンテナに変えるためのもの。

実装すると

※デフォルトが横並びというだけで、あくまで要素をフレックスコンテナに変えただけ。

子要素の並ぶ向き

　flex-directionプロパティで子要素をどの方向に配置していくかを指定。

＜右から左に配列＞

.item {
　background: blue;
　color: yellow;
　margin: 10px;
　padding: 10px;
}
.container {
　display: flex;
　flex-direction: row-reverse;
}

実装すると

　⇒順番が逆になるだけじゃなく、位置も右上から始まる。

＜下から上に配列＞

.item {
　background: blue;
　color: yellow;
　margin: 10px;
　padding: 10px;
}
.container {
　display: flex;
　flex-direction: column-reverse;
}

実装すると

　⇒この場合は、上側に配置され順番だけ逆になる。

ほ～、これは下側に配置されないのか。まあそうか。

子要素の折り返し

　flex-wrapプロパティで子要素を1行、または複数行に並べるかを指定。

＜1行に並べる（デフォルト）＞

.item {
　background: blue;
　color: yellow;
　margin: 10px;
　padding: 10px;
}
.container {
　display: flex;
　flex-wrap: nowrap;
}

実装すると

ブラウザの横幅を縮めると

　⇒折り返しせず、Item7以降が隠れる。

＜折り返し上から下へ並べる＞

.item {
　background: blue;
　color: yellow;
　margin: 10px;
　padding: 10px;
}
.container {
　display: flex;
　flex-wrap: wrap;
}

実装すると

ブラウザの横幅を縮めると

　⇒折り返される（Item7、Item8、Item9が次の行に配置される）

＜折り返し下から上に並べる＞

.item {
　background: blue;
　color: yellow;
　margin: 10px;
　padding: 10px;
}
.container {
　display: flex;
　flex-wrap: wrap-reverse;
}

実装すると

ブラウザの横幅を縮めると

　⇒折り返される（Item7、Item8、Item9が１行目に配置される）

水平方向の揃え

　justify-contentプロパティにて、親要素に空きスペースがあった場合、子要素を水平方向のどの位置に配置するかを指定。

flex-start：左揃え（デフォルト）

flex-end：右揃え

center：中央揃え

space-between：両端と均等配置

space-around：均等配置

う～ん、space-betweenとspace-aroundの違いだけ、実装してみて感覚つかむか。。

＜space-between：両端と均等配置＞

.item {
　background: blue;
　color: yellow;
　margin: 10px;
　padding: 10px;
}
.container {
　display: flex;
　justify-content: space-between;
}

実装すると

ブラウザの横幅を縮めると

さらに縮めると

＜space-around：均等配置＞

.item {
　background: blue;
　color: yellow;
　margin: 10px;
　padding: 10px;
}
.container {
　display: flex;
　justify-content: space-around;
}

実装すると

ブラウザの横幅を縮めると

さらに縮めると

なるほど、space-aroundのほうは、横幅を変えると両端の子要素も動くのだね。

おっけー！感覚つかんだ！

垂直方向の揃え

　align-itemsプロパティで、親要素に空きスペースがあった場合、子要素を垂直方向のどの位置に配置するかを指定。

stretch：高さ合わせ（デフォルト）

flex-start：上揃え

flex-end：下揃え

center：中央揃え

baseline：ベースライン揃え

これまた、わかるようでわからないのがあるな。。。

＜stretch：高さ合わせ＞

.item {
　background: blue;
　color: yellow;
　margin: 10px;
　padding: 10px;
}
.container {
　display: flex;
　align-items: stretch;
　height: 300px;　　　　/* ←高さを指定する必要あり */
}

実装すると

　⇒親要素の高さ（300px）まで伸びる

＜center：中央揃え＞

.item {
　background: blue;
　color: yellow;
　margin: 10px;
　padding: 10px;
}
.container {
　display: flex;
　align-items: center;
　height: 300px;　　　　/* ←高さを指定する必要あり */
}

実装すると

　⇒親要素の高さ（300px）の真ん中

親要素で高さを指定しなかったらどうなるんじゃい？

＜center：中央揃え＞（※高さを指定しなかった場合）

.item {
　background: blue;
　color: yellow;
　margin: 10px;
　padding: 10px;
}
.container {
　display: flex;
　align-items: center;
　height: 300px;　　　　/* ←指定しなかったら？ */
}

実装すると

　⇒親要素に高さの概念がないので子要素同士で中央揃えになる様子（↓）

＜baseline：ベースライン揃え＞

.item {
　background: blue;
　color: yellow;
　margin: 10px;
　padding: 10px;
}
.container {
　display: flex;
　align-items: baseline;
　height: 300px;　　　　/* ←高さを指定する必要あり */
}

実装すると

う～ん、ちょっとよくわからない。。。

いろいろ試してようやくわかりました！

ベースラインってなんじゃ～？って思ってたんですが、

要は１行目を揃えるってことなのね。。　

.item {
　background: blue;
　color: yellow;
　margin: 10px;
　padding: 10px;
}
.item2 {
　background: blue;
　color: yellow;
　margin: 20px;
　padding: 40px;
}
.container {
　display: flex;
　align-items: baseline;
　height: 300px;　　　　/* ←高さを指定する必要は特になし */
}

HTMLの記載も変えて実装すると

　⇒子要素の大きさを変えても１行目が揃う

複数行にした時の揃え

　align-contentプロパティで子要素が複数行に渡った場合の垂直方向の揃えを指定。
※「flex-wrap: nowrap;」を適用している場合はalign-contentプロパティは無効となる。

stretch：高さ合わせ（デフォルト）

flex-start：上揃え

flex-end：下揃え

center：中央揃え

space-between：上下両端と均等配置

space-around：均等配置

感覚はだいたいつかめてるので一応念のためいくつかやってみま～す

＜stretch：高さ合わせ（デフォルト）＞

.item {
　background: blue;
　color: yellow;
　margin: 10px;
　padding: 10px;
}
.container {
　display: flex;
　flex-wrap: wrap;　　　/* ←指定する必要あり */
　align-content: stretch;
　height: 300px;　　　　/* ←指定する必要あり */
}

実装すると

ブラウザの横幅だけ縮めると

さらに縮めると

さらに縮めると

　⇒基本的に親要素の高さ（300px）は変わらない

＜space-between：上下両端と均等配置＞

.item {
　background: blue;
　color: yellow;
　margin: 10px;
　padding: 10px;
}
.container {
　display: flex;
　flex-wrap: wrap;　　　/* ←指定する必要あり */
　align-content: space-between;
　height: 300px;　　　　/* ←指定する必要あり */
}

実装すると

ブラウザの横幅だけ縮めると

さらに縮めると

＜space-around：均等配置＞

.item {
　background: blue;
　color: yellow;
　margin: 10px;
　padding: 10px;
}
.container {
　display: flex;
　flex-wrap: wrap;　　　/* ←指定する必要あり */
　align-content: space-around;
　height: 300px;　　　　/* ←指定する必要あり */
}

実装すると

ブラウザの横幅だけ縮めると

さらに縮めると

１セクション分がよ～～～やく終わりました。。。

・・・つかれた

いったん、散歩に行って体力の回復を図ろうかなと。。。

🚶🏻。。。

体力は回復しましたが、HPがゼロのためこれにて終了です。

今日はたくさん学びました！

よくやったよほんと。。

おつかれさまでした～(-ω-)/