HTML＆CSS 道場コース 中級編トップとフヘッダー｜メモ｜アニメーションと要素の固定と角の丸め

HTML&CSS道場コース中級編

今日は（今日も）集中力の無いらくだ🐫です

昨日の夕方～今日の午前中に学習コース上級編をやりまして

道場コースの中級編に入りました。

上級編の事は道場コースの時にでも。

最初はスムーズ

トップ（背景画像が付いている部分）はさほど悩まず。

Font Awesomeのクラスの指定方法だけ見直しました

見る力も備えたい

ヘッダー部分は

指示書だけじゃわからない部分を検証機能で調べるのはいいとして

ググったりスライドを見直したりメモを見たりしました。

ちなみに分からなくて調べるときは

自分で検索した方がスライドやメモを見返すよりいい気がして

なるべくそうしております。

あ、でも、ログインリンクのtransitionの時間とhover時の透明度がわからなくて、ここは素直に学習コースのコードから探しました。

何とか出来上がり「よしおーけー！」と思って判定するも2回エラー。

1回目はヘッダーが固定されていなかった

2回目はヘッダー部分のBGカラーでrgbaで指定するのにrgbになってた

しっかり見直しをしましょう（小学生のころから言われてたヤツ）

メモ

transition

あれだけ言ってて覚えられないtransition

いやね、らくだ🐫ホント英語だめでね。

高校時代、先生のお情けで進級・卒業って感じのまじヤバイ赤点でしたのでね。

「hoverと組み合わせて時間経過で色が変わるように指定するやつだよね！

……なんだっけ？」

なのでした。

.div {

background-color: rgba(255,255,255,0.5)

 transition: all 0.8s;

}

.div:hover {

background-color: rgba(255,255,255,1)　←スペースじゃなくカンマで区切る

要素の固定

ヘッダー部分が動かなくなっていることを見逃してエラーになりました

学習コースだと最後にやったじゃん？

油断せずしっかり観察しないといけないよね。

で、コードもどうするんだっけ？？で、調べて書きました。

position（場所）: fixed（固定）;

top（どこから）: 0（どれくらい）;

重なり順を指定しておくことは覚えていたけどコードがわからず

っていうか解説ページに一緒に乗ってた

x-index（X=高さ方向・重なりの順番）: 10（0が一番下・数字が大きいほど上）;

角の丸め方

ボックス要素の角の丸め方も全然思い出せなくて。

borderを……どうするんだっけ？位思いたかった残念。

border（境界線の）-radiusu（半径）:5px(サイズ指定）;