CSS プロパティ一覧

スポンサーリンク

よく使うCSSの用途と、書式、値の設定をわかりやすく表にまとめました。

属性説明書式
キーワード数値/単位
background-
attachment
背景画像のスクロールをしていするbackground-attachment :
キーワード
fixed,scroll
background-
color
要素の背景色を指定するbackground-color :
キーワード
transoarent,#rrggbb,#rgb
カラーネーム,rgb(r,g,b),
rgb(r%,g%,b%),rgba(r,g,b,a)
background-
image
要素の背景画像を指定するbackground-image :
url(画像ファイルのパス)
none,画像ファイルのURL
background-
position
背景画像の表示位置を指定するbackground-position :
左右方向,、上下方向の順に
半角スペースで区切る
left,right,center,top,bottompx,%,
em,vwなど
background-
repeat
背景画像の繰り返しパターンを指定するbackground-repeat :
キーワード
repeat,repert-x,repert-y,
no-repeat
background-
size
背景画像の大きさを指定するbackground-size :
キーワードまたは数値と単位
auto,cover,cotainpx,%,
em,vwなど
borderborder-width / style / color の3つ
プロパティをまとめて指定する
border : 各プロパティの値を
半角スペースで区切る
個別のプロパティ値
border-
collapse
隣り合うセルのボーダーを結合する
か分離するかを指定する
border-collapse :
キーワード
collapse,separate
border-colorボックスの境界線の色を指定するborder-color :
キーワード
transoarent,#rrggbb,#rgb
カラーネーム,rgb(r,g,b),
rgb(r%,g%,b%),rgba(r,g,b,a)
border-radiusボーダーの角を丸めるborder-radius : 数値と単位px,%,
em,vwなど
border-spacing隣り合うセルのボーダー同士の
距離を指定する
border-spacing : 数値と単位px,%,
em,vwなど
border-styleボックスの境界線のスタイルを
指定する
border-style : キーワードnone,hidden,dotted,dashed,solid,
double,groove,ridge,inset,outset
border-widthボックスの境界線の幅を指定するborder-width :
キーワードまたは数値と単位
thin,medium,thickpx,%,
em,vwなど
color文字色を指定するcolor :  色の値#rrggbb,#rgb,カラーネーム,
rgb(r,g,b),rgba(r,g,b,a),
rgb(r%,g%,b%)
content: before 擬似要素、: after 擬似要素
前後に、仮想的に文字列や画像を
生成する
content : 値(文字列の場合は
「’」または「”」で囲む)
文字列,URL,
カウンタ,attr(X),
open-quote,close-quote,
no-open-quote,no-close-
quote
cursorポインタ(カーソル)の形状を
指定する
cursor : キーワードauto,crosshair,default,
pointer,move,e-resize,
ne-resize,nw-resize,
n-resize,se-resize,
sw-resize,s-resize,
w-resize,text,wait,
progress,help,URL
displayボックスの表示形式を指定するdisplay : キーワードnone,block,inline,
inline-block,run-in,
list-item,table,inline-table,
table-row,table-row-group,
table-header-group,
table-footer-group,
table-column,
table-column-group,
table-cell,table-caption
floatボックスを左右に寄せて、その
反対側に後続の内容を流し込ませる
float : キーワードnone,left,right
font-familyテキストを表示する際のフォントを
指定する
font-family : キーワードフォント名,sans-serif,
serrif,monospace,
fantasy,cursive
font-size文字のサイズを指定するfont-size : キーワード
または数値と単位
xx-small,x-small,small,
medium,large,x-large,
xx-large,lager,smaller
px,%,
em,vwなど
font-weight文字の太さを指定するfont-weight : キーワードnomal,bold,bolder,lighter100-900
heightボックスの高さを指定するheight : キーワード
または数値と単位
autopx,%,
em,vwなど
line-height行の高さを指定するline-height : キーワード
または数値と単位
nomal倍数 / ox,
%,em,vw,など
list-stylelist-style-image / position / type
の3つのプロパティをまとめて
指定する
list-style : 各プロパティの値
を半角スペースで区切る
none,個別のプロパティの値
list-style-imageリスト項目の行頭アイコン画像を
指定する
list-style-image : urlnone,画像ファイルのURL
list-style-
position
リスト項目の行頭アイコンの表示
位置を指定する
list-style-position :
キーワード
outside,inside
list-style-typeリスト項目の行頭アイコンの形状を
指定する
list-style-type : キーワードnone,disc,circle,square,
decimal,georgian,
cjk-ideographicほか多数
marginボックスの外側の余白を指定するmargin :  キーワード
または数値と単位
autopx,%,
em,vwなど
margin-bottomボックスの外側の下部の
余白を指定する
margin-bottom :  キーワード
または数値と単位
autopx,%,
em,vwなど
margin-leftボックスの外側の左側の
余白を指定する
margin-left :  キーワード
または数値と単位
autopx,%,
em,vwなど
margin-lightボックスの外側の右側の
余白を指定する
margin-light :  キーワード
または数値と単位
autopx,%,
em,vwなど
margin-topボックスの外側の上部の
余白を指定する
margin-top :  キーワード
または数値と単位
autopx,%,
em,vwなど
max-width要素の幅の上限を指定するmax-width : キーワード
または数値と単位
nonepx,%,
em,vwなど
opacity要素の不透明度を指定するopacity : 数値0以上
1以下の数値
paddingボックスの外側の余白を指定するpaddubg : 数値と単位px,%,
em,vwなど
padding-bottomボックスの内側の下部の
余白を指定する
paddubg : 数値と単位px,%,
em,vwなど
padding-leftボックスの内側の左側の
余白を指定する
paddubg : 数値と単位px,%,
em,vwなど
padding-rightボックスの内側の右側の
余白を指定する
paddubg : 数値と単位px,%,
em,vwなど
padding-topボックスの内側の上部の
余白を指定する
paddubg : 数値と単位px,%,
em,vwなど
text-alignテキストや画像などの水平方向の
揃え方を指定する
text-align : キーワードleft,right,center,justify
text-decorationテキストに下線、上線、ち消し線
などの装飾を施す
text-decoration : キーワードnone,underline,overlain
line-through
vertical-alignテキストや画像などの垂直方向の
位置揃えを指定する
vertical-align :キーワード
または数値と単位
baseline,top,bottom,
middle,super,sub,text-top,
text-bottom
px,%,
em,vwなど
widthボックスの幅を指定するwidth : キーワード
または数値と単位
autopx,%,
em,vwなど