抑えておきたい。CSS用チートシート

CSS

本日は、cssのチートシートをまとめました。
今後も順次追加予定です。

CSSチートシート

css 詳細 備考
color 文字色
font-size 文字の大きさ
font-weight 文字の太さ
font-family フォント種類
letter-spacing 文字間隔
line-height 行間隔
background-color 背景色
border 枠線 枠線の太さ、種類、色を指定可
border-radius 角を丸くする
opacity 要素を透過 0.0~1.0
rgba 色を透過
padding 要素の余白(内側) top,buttom,left,right
margin 要素の余白(外側) top,buttom,left,right：auto＋：margin:0 auto＋widhtで中央配置可
width 横幅 px　%(親要素に対する相対値)
height 高さ px　%(親要素に対する相対値)
list-style リストマーク noneで黒点を消す
float 要素の並び left(左横並び),right(右横並び),要素ごとにleft,rightを指定すると左右配置も可
position: absolute 要素を重ねる 基準：サイト全体の左上。top＋leftで位置を指定。right＋bottom併用可
position: relative ーーー position: absolute;の親要素へ指定することで、変更位置の基準とする。
text-align 要素を寄せる インライン要素やインラインブロック要素に対して、
left(左寄せ),right(右寄せ),center(中央寄せ)可。
divタグ(ブロック要素)内のインライン要素やインラインブロック要素は効果あり。
display: inline-block block -> inline-block
background-image: url(画像のURL) 背景画
background-size 背景画のサイズ指定 cover(範囲を埋め尽くす)
hover カーソル変化
transition アニメーション 変化要素と時間を指定する。hoverと合わせて使う。


最後まで読んでいただきありがとうございます。

詳細 進捗
学習時間目標 1,000時間
本日の学習時間 4時間
目標時間まで 982時間