100日後くらいに個人開発するぞ！day032

今日もHTML＆CSS中級編を復習してみた！

HTML＆CSS中級編を修了！

今日の備忘録

影をつける方法

• box-shadowプロパティを用いて「影の位置」と「影の色」を指定することで影をつけることができます
  • 例：20px左で10px真下に黒の影を付けたい場合
    • box-shadow:20px 10px #00000d

マウスのカーソルの形を変える方法

• cursorプロパティを用いることでマウスのカーソルが要素に乗った時の形を変えることができる
  • 例：I字型のカーソルに変えたい場合
    • cursor:text;
  • 例：指型のカーソルに変えたい場合
    • cursor:pointer;
  • 例：矢印型のカーソルに変えたい場合
    • cursor:default

クリック時に変化をつける方法

• セレクタに:activeを用いると要素がクリックされる間のCSSを指定できる

  • 例：クリック時にbuttonクラスの影を無くして要素を10px下げたい場合
    • .button:active{
    • box-shadow:none;
    • position:relativel;
    • top:10px

• プロパティにnoneを指定することでCSSを打ち消すことができる

  • 例：影を消したい時
    • box-shadow:none

• position:relativeを用いることで要素の位置を変えることができる

  • 例：要素を下に5px左に10px動かしたい時
    • position:relative
    • top:5px;
    • left:10px;