CSSでよく使う記述まとめ

border

線の太さを指定

.border{
    border: 4px solid;
}

border-style

padding

!important

スタイル適用の優先順位を上げることができる宣言。通常CSSでは後から書いたものほど優先されるけど、これを使った部分は記述場所に関係なく優先される。
https://techacademy.jp/magazine/9424

p {
  color : red !important;
}

CSSのルールではタイプセレクタよりも、HTMLタグに直接指定する方式であるclassセレクタや、idセレクタが優先的に適用されます

タイプセレクタ

p {color : red}
div {color : red}

classセレクタ

.font-red{color : red}

行間を調節するプロパティ　line-height:

line-height: 行間の値（正確には、フォントサイズと上下の余白合計値）

字間の調整　letter-spacing:

背景画像の設定

.bg-size{
    background-image: url('画像のurl');
    background-size: cover;
}

画像サイズを自動調整する方法(比率維持かつレスポンシブ対応)

width: 100%;ではなく、
max-width: 100%;にすることで、親要素の幅を超えなくなる。
height:autoを指定するとwidthに合わせて画像の元の比率を保ったままheightが変化する。

.example img{
    max-width: 100%;
    height: auto;
}

div枠全体をリンクする

親要素.DivLink、子要素.Linkを以下のように記述する。

.DivLink{
    position:relative;
}

.DivLink .Link{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

マウスオーバーした時に白っぽくする

animation

flex-shrink

スクロールバー