HTML＆CSS 学習コース 中級編 2週目｜メモ｜インライン要素の変更，クリック時の変化

7/30修正

HTML&CSS学習コース中級編2週目

指示に従うだけなので

2週目だし、指示通りにタグ打ちするだけなので基本サクサクと。

2週目なのでスライドは飛ばして指示だけ見て書く様にしたんだけど、

「marginを15pxに」の様に超具体的な指示じゃなくて

「aをブロック要素へ」のような指示の場合

「あれ？プロパティとかどうするんだっけ？」となり

スライドやメモを見直したところが2か所

凡ミス

その他凡ミスエラーが数回

要素のミスタイプとセレクタの閉じ忘れ

よくあることと思うけど、よくあることなだけに気を付けたいですよね。と言う。

絞りだせなかったプロパティのまとめ

インライン要素をブロック要素に

最初、TOP部分のツイッターやフェイスブックへのリンクボタンを作る際には

displayをinline-blockにって指示なんだけど（なので迷わないんだけど）

次のヘッダーのログインリンクを作るところでは<a>をブロック要素にっていう指示でしてね。

プロパティが思い出せないのでした。

まぁスライドを見れば「そうそう！でぃすぷれいね！！」となる。

らくだ🐫の頭は前章の事を忘れる・・・（頑張りましょう🐫）

inline（直列）要素の<a>を

display（表示）:block（固まり）;

うーん。ちょっとわかりづらい。もうちょっとうまくdisplayって単語と結びつきたい。

あとこれ、

ログインリンクの部分もインラインブロックじゃダメなんじゃろか。

試してみたけど表示的には変わらなく見えるんだよね。

学習コースでは「ブロック要素に」って指定されてるから

インラインブロックに指定するとエラーになるんだけど

道場コースではどうなるんだろう。

忘れなければやってみよ。

クリック時の変化

マウスが乗っている時の状態を指定するには　クラス名:hover

クリックした時の状態を指定するには　クラス名:active

これはリンクの色指定で使っていたので頭に入っていました

で、クラスにも指定できるんだねスゴイ！ってなりました。

で、またもやログインリンクの部分なんだけど

アニメーション？あれ？どんな指定するんだっけ？？

と、プロパティがわからんどころでは済まないのでしたよ。

.div{

transition  translation（時間的変化）: all（要素内全て） 1s(変化の時間）;

}

.div:hover{

background-color:red;

}

divの中全てを一秒かけて変化させる

マウスが乗ったら背景色を赤に

アニメーションっていうから紛らわしくて（プロパティをanimationって打ちたくなる）

「時間経過による変化」の方が覚えやすいかもしれない。

で、transition translationに指定できる要素は他にどんなものがあるのかな？って調べたら

なんか沢山あってパンクしそうだったので

今はこれ↑をしっかり覚えることに集中したいと思います。

道場コース中級編に向けて

「スライドは見ずに指示だけで作る」で詰まるんだからもっと大変だろうなーとか思いつつ。

トライ＆エラーで頑張りたい