・ ネガティブマージンはマージン（負）をマイナス指定すること。
・例えば margin-bottom: -40px;
・last-of-typeやfirst-of-typeといった擬似クラスがある。
・擬似クラスは、マウスを特定の文字に重ねた時、色を変えたり、リンクの色を変えたりするもののようだ。
・例えば、
リンクの色を変える場合
Webページのリンクが「まだクリックされていない」状態と「クリックした後」の状態で色を変えたいとします。
css
コードをコピーする
/* まだクリックしていないリンク */
a:link {
color: blue;
}
/* クリックした後のリンク */
a:visited {
color: purple;
}
ここでいう擬似クラスは、
.flex-container_flex02:last-of-type{
flex-direction: row-reverse;
}
・z-indexは重なりの順番を調整してくれるもの
例えば、エクセルの図形を最背面、最前面といったように重なりを調整するイメージ。
ここでは、
box-sizing: border-box;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index:2;
}
.section-wrapper:first-of-type{
・positionの使用
例えば、
position: relative;
}
.img-wrapper_broken{
max-width: 580px;
}
.text_broken{
width: 390px;
padding: 30px;
background-color: #fff;
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
なお、toransformプロパティは縦方向（y軸）、横方向（x軸）のみ移動可能
・positionの注意点として、自由度が上がるがその代わり難易度が高くなる。
そうするとレイアウトが崩れてしまう危険性があるので、どうしても使用しないといけない時しか使わないようにする
・ネガティブがあるということはポジティブ（正）もあるとか。ポジティブマージンを通常のマージンのことだ。
・first-of-typeがあるということは、second-of-typ、third-of-type、forth-of-type、fifth-of-typeがあると思いきや、
first-of-typeしかないとのこと。なぜないのかは定かではない。
「first-of-type」 と、「 first child」の違いについて
◎.section-wrapper:first-child
親要素から見て一番最初の要素が.section-wrapperである場合にマッチする
◎.section-wrapper:first-of-type
親要素内から見て複数ある.section-wrapperの中で一番最初の.section-wrapperにマッチする
//first-child及びfirst-of-typeの両方にマッチします -省略-
-省略-
-省略-
ただし、もしmainタグの中に最初に別の要素があった場合は、 .section-wrapperが「親要素から見て一番最初の要素」ではなくなるため、 first-childにはマッチしなくなります。
追加された要素
//first-of-typeのみにマッチします -省略-
-省略-
-省略-