勉強記録　～プログラマーへのいばら道～　progate：HTML&CSS中級編（５）

今回は、HTML&CSS中級編の復習その5となります。

内容は【相対的な大きさの指定、position: absolute;、基準位置の変更、影を作る、

cursor、:active、CSSを打ち消す】です。

　ボックスのwidhtやheightをpxではなく%で指定すると、親要素に対してどのくらいの

　幅や高さを持つか指定することができます。

　HTMLの要素同士は通常重なって表示されないが、「position: absolute;」を使うと、

　要素同士を重ねて表示することができる。

　サイト全体の左上部を基準とし、そこからの位置をtopとleftを用いて指定する。また

　rightやbottomを指定することも可能である。

　「position: absolute;」をの基準位置はサイト全体の左上部だが、この基準位置を変更

　することが出来る。

　基準としたい親要素に「position: relative」と指定すると、その要素の左上部分が基準

　位置となる。

　ボックスに影を作るためにはbox-shadowプロパティを用いる。

　「box-shadow: **px（水平方向）**px（垂直方向）#000000（色）;」のように、影の

　位置と影の色を指定する。

　cursorプロパティを用いることで、マウスのカーソルが要素に乗ったときのカーソル

　の形を変えることが出来る。

　タグによってcursorが初期状態で設定されているものもあり、例えば<a>タグは初期

　状態でpointerが設定されている。

　セレクタにactiveを用いることで、要素がクリックされている間だけCSSを適用するこ

　とが出来る。「セレクタ:active」というように指定する。

　box-shadow: none;とすると、影を消すことが出来る。

　このように多くのプロパティは、noneを指定することによって消すことが出来る。

ということで、本日はここまで。

次回は「HTML&CSS中級編」の6回目の復習を記録します。

ご一読を頂きまして、有り難うございました。