コーディング　授業復習

今回は勉強記録として、授業内容を記録していきます。
自分流で記録するので、間違えている箇所も多々あるかもしれませんがご了承ください。

①コンテンツ同士を垂直方向に揃える
⇨align-items: center;を使う

<header class="header inner">
  <p class="header_logo"><img src="image/logo.png" alt="Portforio" width="140"></p>
  <nav class="header_nav">
    <ul>
      <li><a href="">HOME</a></li>
      <li><a href="">WORKS</a></li>
      <li><a href="">CONTACT</a></li>
    </ul>
  </nav>
 </header>

画像とリストを垂直方向に揃える親であるheaderにかける。
※pタグとnavタグ（※liタグではない）を垂直に揃えるイメージ。

・CSSは親要素に当てる。
・flex系のCSSをかける時は、displayがかかっていることが大前提！！

②画像をimgではなく、CSSで挿入する。

background-image: url(../image/mv.jpg);

url(../)⇨../を書くことで、今いる階層から1つ上の階層に上がる。（相対パス）

※CSSで画像を入れる際は、高さを認識しないので、CSSでheightを指定することを忘れずに！

background-size: 200px auto;　

⇨半角空けると、横幅と高さを指定できる。
このautoは横幅200pxの比率を保ったまま、横幅に合わせた高さにするということ。

横幅200pxになった画像が敷き詰められている状態↓

これに下記CSSを当てることで、
画像が繰り返すことなく1枚だけの表示になる。

background-repeat: no-repeat;

他にも、

background-repeat: repeat-x ;　

background-repeat: repeat-y ;

Xが横軸、Yは縦軸だけに画像をリピートするという意味。

background-position: center;

これも横軸、縦軸の意味があり、

background-position: center bottom;

background-position: center right;

画像をリピートせず場所の指定をすれば、上記のような配置をすることもできる。

また、background-sizeをpx指定せずに
coverとcontainで画像を入れることもできる。

今回は300×300の正方形を作り、その中に写真を入れてみる。

background-size: cover;

background-size: contain;

coverは作成した箱全体にきれいに納まるように、画像が引き延ばされて入る。
containは画像全体が、箱に納まるように入る。
そのため上下に余白ができている。

backgroundの順番は、特にないけどこの順番だと一纏めにすることができる。

これが

.mv {
　height: 400px;
　background-color: aquamarine;
　background-image: url(../image/mv.jpg);
　background-position: center;
　background-size: cover;
　background-repeat: no-repeat;
}

こうなる。

.mv {
　background: aquamarine url(../image/mv.jpg) center / cover no-repeat;
}

とても便利。
※ただし、positionとsizeの間は/で区切る！（同じ値が入る可能性があるため）

画像をHTMLとCSSで入れる違い↓

CSSは装飾。HTMLは中身。
画像が重要な場合はHTMLで入れるべき。
CSSで入れた場合は、ウィンドウ幅を小さくしたら画像が見切れていくので
画像の比率を保ったまま表示したい場合は、imgタグで書く。

③positionで好きな位置に配置する

positionとは、要素の位置を決めるためのプロパティ。

positionの値
static：初期値。指定することはほとんどない
relative：現在の位置を基準に相対的な位置を決める
absolute：親要素を基準に絶対的な位置を決める
fixed：　画面のきまった位置に固定する

fixed：基準が画面。見ている画面に対して固定する。

top,right,bottom,leftで場所の指定もできる。

.box {
　position: fixed;
　right: 10px;
　bottom: 10px;
}

上記のようにCSSを当てると、

右から10px,下から10pxの位置に固定される。
画面をスクロールしても、
↓

右下に固定されたまま画面がスクロールされる。

・ヘッダーを固定してみる

.header {
 　display: flex;
 　justify-content: space-between;
 　padding: 10px 0;
 　align-items: center;
 　position: fixed;
 　top: 0;
 　left: 0;
}

上から0,左から0の位置で固定するよう、CSSを当ててみると、、

このような位置で固定されてしまう。
この理由は、ヘッダーの背景に色を当ててみるとよくわかる。

もともとwidth1000pxとmargin: 0 auto;を当ててるので、横幅いっぱいに見えていただけ。
これを真ん中で固定するには、
I　headerを幅100%にする
II　箱を一つ増やして、CSSを当てる
これをやる。

そうするときちんと固定される。

・ヘッダーを透明にする

opacity=透明にするCSS
opacity: 0.8;だと
80％透過する。
しかしこれは、箱だけでなく中身も透過してしまう。

背景だけ透過するときは、カラーピッカーの右側のグラフを動かす。

relative：現在の位置を基準に相対的な位置を決める

自分が基準になるので、画面をスクロールしても動いたりはしない。

また、赤い箱が移動しても、存在は残したまま移動できる。↓

↓

テキストの箱は、もとあった赤い箱の存在を認識しているので、上に詰まっていかない。

absolute：親要素を基準に絶対的な位置を決める

基準は、自分より親側（外側の箱）かつfixed、relative、absoluteがかかっているものが基準になる。
もし親要素にかかっていない場合は、何かしらを付ける。
ただただ基準にするだけの時は、relative。
親要素も動かして、さらにその中身も動いかしたい時は、absolute。

この場合だと、親要素は外側の箱（画像部分）になるので、
top :0;
left :0;
を当てると、左上にくっつく。

※positionは、切り離すように配置するため、レイアウトが崩れやすい。
便利だけど、できるだけ使わない方がいい。
レスポンシブ対応させる時、特に崩れやすい。

位置を真ん中に持ってこようとして、top: 50%;　left: 50%;にすれば↓

このように微妙にずれる。
これを真ん中にするには、marginをマイナスで当てる。
境界線がないとmarginを当てることはできないので、rightとbottomは当てれない。
なので、topとleftにマイナスでmarginを当てる。

⑤箱の重なり順を変更する

z-index=重なり順の指定
relative
absolute
fixed
上3つのどれかが当たっているものにのみ、z-indexを当てることができる。

z-index: 10;
z-index: 1;
上の2つだと、数値の大きい10の方が上に来る。

同じ数値が当たっている時は、HTML上で下に書いているものの方が、前に来る。
z-indexの初期値は０。

z-indexは親に影響される。
子要素同士で数値を当てても、重なりが上手いこといかない場合は、親の要素の数値も確認してみる。

親要素より後ろに子要素を配置することは基本的にできない。
ただし、z-indexの数値をマイナスにしてやると、後ろに配置できる。
background-imageで背景を画像にしている場合はできない。

colorなどのCSSは、親側にCSSを当てても反映される。
※中身のテキスト全てに反映される。

※ルートパスとは、、、

深くまでファイルの中に入っている場合、../では、一つ前のファイルに戻るだけなので、何回も繰り返す必要がある。
しかし、
url(../image/mv.jpg);ではなく、
url(/image/mv.jpg);のように
/から始めることで、一番前のファイルに戻ることができる。
それが、ルートパス。
※ただし、自分の意図しているファイルより前に戻ってしまう可能性もあるので、注意しておく！（設定することは可能）

外側の箱にCSSを当てても、colorなどのCSSは中身にも反映される。
※反映されないものもあるので感覚で覚えていく。

maeginが効かない時は、上に引っ掛かりがない場合がある。

これぐらいにしとこう、、、
疲れた。

勉強記録用なので、自分にわかるように書いてあるだけなので、あまり参考にはしない方がいいと思います。