HTMLと合わせてぜひマスターしたい、CSS関連の記事のまとめとなります。プロパティの名称と使用用途を合わせて併記しています。
ちょっととっても数少ないですが、段々増える予定です。
テキストの装飾
color（文字色）
text-indent（インデント、字下げ）
font-size（フォントのサイズ）
font-family（フォントの書体）
text-decoration（下線、取り消し線、波線など）
background:linear-gradient（文字にマーカー風の線を引く）
list-style-type（箇条書きの点の編集）
背景の装飾
background-color（背景色）
background-image（背景画像）
background-repeat他（背景画像の設定、リピート）
background:linear-gradient（線形のグラデーション）
枠線・影
border（枠線）
border-radius（要素の角を丸める）
box-shadow（影）
overflow（枠からはみ出た要素を非表示）
レイアウト・サイズ
margin/padding（余白を外側・内側に作る）
box-sizing（border、paddingを幅と高さに含める）
text-align(文字の左右配置)
vertical-align（要素横の文字・画像縦位置調整）
position:fixed（要素を画面の決まった位置に固定）,2(TOPへ戻るボタン)
position:absolute、relative（要素の位置を指定する、要素を重ねる）
background-attachment（画面スクロールしても背景画像を固定表示にする）
display:inline-block（blockとinlineの中間）
float（要素を画面左右に振り分ける）※ややレガシー
Flexbox（レスポンシブのマルチカラムレイアウト）
column-count（カラム数を指定）
column-width（カラムの幅を指定）
@media（デバイスの画面幅によってレスポンシブに表示を切り替える）
アニメーション・動き・傾き
transform:scale（要素の縮尺を変更）
transform:rotate（要素の傾き、回転）
transform:translate（基準位置から移動）
transform:skew（要素を傾斜させる）
pespective（子要素に3D的に奥行きを与える）
animation-name、duration、@keyframes（要素をアニメーションさせる）
イベント
:hover（マウスカーソルが乗ってる間だけ実行）
:active（クリックしている間だけ実行）
その他
HTMLの本文（body）に直接CSSを記述する
HTMLから読み込み
font-awesomeのアイコンの使い方
コメント