こんにちは。

今回も本を使ってHTML&CSSの勉強をしていきます。

今回使った本はこちらです。↓

この本も一冊目同様、ステップごとに作業内容が載っていて、それにそってコードを書くことで一つのサイトが出来上がります。この本では一冊目より応用的なコードが使われているのでより実践に近いコードを組むことができます。
実際に最後に完成したものがこちらです。↓

今回もこの本の中で躓いたところや難しいかった箇所を、自分の振り返りとしてまとめていきます。

学んだこと

1. 半透明な画像を重ねてトーンを落とす方法

・rgba(赤、緑、青、透明度)
・（０（透明）〜１（不透明））
・開始色と終了色を同じ色にすれば単色の画像を作れます。

Flexbox

以前までは横並びする時にfloatを使用していましたがこの本では応用編ということでより簡単にレイアウトを作れるdisplay:flexを使いました。display:flexはアイテムを列方向や行方向などに並べ、要素を細かく調整できます。flexboxのレイアウトは、フレックスコンテナと呼ばれる親要素と、フレックスアイテムと呼ばれる子要素で構成されます。

1.display:flex

親要素に与えることで子要素を横並びにすることができます。

2.flex-wrap

横幅が100%を超えると自動で折り返してくれます。

3.align-items

「上下のどこで揃えるか」を指定するプロパティです。具体的には上揃え・中央揃え・下揃えなどが可能です。初期値はストレッチがかかってます。

4.justify-content

左寄せ・中央寄せ・右寄せなどの配置や、flexアイテム同士の余白などを指定できます。初期値はflex-start（左寄せ）がかかっている

5.align-content

align-content は、flexアイテムを折り返したときに上下の配置や余白を指定するプロパティです。初期値はストレッチがかかってます。

6.flex-direction

主軸の方向や向きを設定することができます。
初期値はrow（左から右）です。

7.z-index

要素の重なり順を変えることができます。
position を指定しないと効きません。
数値が大きいほど手前にきます。

8.position:fixed

画面に対してフィット（固定）します。

9.before/after

疑似要素です。
content:"";(疑似要素）
display:block（初期値がinlineだから）

10.transform:translate

X軸、Y軸を指定

11.background-image

背景画像を表示させるにはCSSプロパティのbackground-imageを使用します。

・background-size
サイズを調整する。

・background-position
表示位置を調整する

・background-repeat
繰り返し表示を制御する

・box-shadow
横方向、縦方向、ぼかし度、色

・background
色だけで反映できる

まとめ

今回の本では主にFlexboxについて深く学ぶことができました。Flexboxを使うことで1冊目をやった時よりかなり簡単にレイアウトを組むことができました。ただ、できることの数も多くまだ覚えきれてないのでこれから繰り返しコードを組んで覚えていこうと思います。