HTML/CSS学習メモ

Udemyで勉強したHTML/CSSの内容をメモしています。

displayプロパティ

• block：要素が画面幅いっぱいに広がる。複数書くと縦に並ぶ。（p, divなど）
• inline：要素が必要な幅だけ取る。複数書くと横に並ぶ。（a, spanなど）

疑似クラス

～～の時という条件を加えることが出来る

.description img:hover{
     opacity: .5;
}

imgにhover(マウスカーソルがのったとき)に中身を半透明にする。

アニメーション

transition-XXXで動作を指定する。

.description img{
    transition-property: opacity;
    transition-duration: 1s;
    transition-timing-function: ease;
    transition-delay: 0;
}

メディアクエリ

表示端末の種類や画面サイズを条件にCSSを適用する

@media only screen and (max-width:600px){
　（↑の条件を満たす場合に、この中に書いたCSSが適用される）
}

便利なサービス

• https://fonts.google.com/
• https://caniuse.com/