HTML＆CSS 道場コース 中級編レッスン部分｜メモ｜要素を重ねる（8/4加筆）

HTML&CSS道場コース中級

時間配分がヘタクソならくだ🐫です。

道場コース中級のレッスン部分をまとめようと思うのですが

連休を挟んじゃったので記憶が曖昧です。

曖昧な中でも覚えている事はそれだけ印象深かったと言う事で（？）

覚えていることをまとめたいと思います。

とにかく悩みまくった

レッスン部分で一番苦しんだのはパーツそれぞれのレイアウトですね。

学習コースで言う所のdiv class=”lesson”を25%で横に並べる所までは良かったんだけど

要素同士を重ねるのはどう宣言するのか思い出せず

あちこちの要素をセンタリングするのも上手く出来ず

どのクラスにセンタリング指定するのか

text-alignなのかmargin:0 auto;なのかあれこれ試しまくり

なんでこれがセンタリングできないの？！って思ったら

centerのスペルが間違っているとかひどい有様でした。

（エディタなら補完してくれるし😢）

（「せんたー」で変換して確認したのは内緒だよ😢）

マジでcenterくらい覚えようね、🐫

とは言え

CSSの宣言で思い出せなかったのは要素の重ね方位だし

後は悩んだとは言え、自分の知識で何とか出来たのは良かったと思う。

HTMLはスラスラ書けたし。

メモ

要素の重ね方　absolute

position（場所）: absolute（絶対的な）;　

top: 〇px;

left: 〇px;

サイトの左上（絶対的な場所）を基準として位置を指定

2つの要素に同じ値を指定する事で要素を重ねる

要素の重ね方　relative

（例）

<div class=”box”>
<img src=”./camel.jpg”>
<h1>らくだです</h1>
</div>

.box {
  position: relative(相対的な）;　←基準になるクラスを指定する
text-align: center;
border: 2px solid blue;
width: 80％;
padding: 30px 0;
}

.box h1 {
  position:absolute;
top: 180px;                  ←基準になるクラスの左上からの距離を指定
width: 100%;　　　　 ←％の指定もOK
color: white;
text-shadow: 3px 4px 3px #000;
}

↑結果

（そっけなさ過ぎたので修正しました💧）

relativeを使っての指定の方が使う部分多そうですよね。

（8/4例を修正・変更しました）

relativeで位置をずらす

relativeはabsoluteの基準位置を変えるだけでなく

今ある位置から指定分だけずらすことが出来る

 position: relative;

 top: 6px;　←上から6px離れる（下がって見える）

 left: 6px;　←左から6px離れる（右に動いて見える）

（8/4加筆）