毎回ググってる気がする系CSSたち

まれによく使うCSS、毎回ググってる問題。
そのうちこういうのだけ集めてチートシート作りたいな〜

background-imageを横幅に合わせて可変表示する

backgroundで画像指定する際に画像の比率を保ったまま横幅いっぱいに表示する方法
横:縦の比率を計算して、縦幅%をpadding-topで指定する。
例えば400*300の画像なら、比率は100:75なのでpadding-top: 75%;を指定すればOK。
比率計算はこれが便利:比率計算機

 ■CSS

はみ出した文字は省略

■CSS

hover時ふわっと半透明に

■CSS

デバイス毎に対応CSSを変更(@support)

■CSS

first-childとfirst-of-type

■HTML

■CSS

下向き矢印

■CSS

画像サイズを変えずに内側にborderをつける

box-sizing、存在忘れがち。
■HTML

■CSS