よく使う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,bottom | px,%, em,vwなど |
| background- repeat |
背景画像の繰り返しパターンを指定する | background-repeat : キーワード |
repeat,repert-x,repert-y, no-repeat |
|
| background- size |
背景画像の大きさを指定する | background-size : キーワードまたは数値と単位 |
auto,cover,cotain | px,%, em,vwなど |
| border | border-width / style / color の３つ プロパティをまとめて指定する |
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,thick | px,%, 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,lighter | 100-900 |
| height | ボックスの高さを指定する | height : キーワード または数値と単位 |
auto | px,%, em,vwなど |
| line-height | 行の高さを指定する | line-height : キーワード または数値と単位 |
nomal | 倍数 / ox, %,em,vw,など |
| list-style | list-style-image / position / type の３つのプロパティをまとめて 指定する |
list-style : 各プロパティの値 を半角スペースで区切る |
none,個別のプロパティの値 | |
| list-style-image | リスト項目の行頭アイコン画像を 指定する |
list-style-image : url | none,画像ファイルの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 : キーワード または数値と単位 |
auto | px,%, em,vwなど |
| margin-bottom | ボックスの外側の下部の 余白を指定する |
margin-bottom : キーワード または数値と単位 |
auto | px,%, em,vwなど |
| margin-left | ボックスの外側の左側の 余白を指定する |
margin-left : キーワード または数値と単位 |
auto | px,%, em,vwなど |
| margin-light | ボックスの外側の右側の 余白を指定する |
margin-light : キーワード または数値と単位 |
auto | px,%, em,vwなど |
| margin-top | ボックスの外側の上部の 余白を指定する |
margin-top : キーワード または数値と単位 |
auto | px,%, em,vwなど |
| max-width | 要素の幅の上限を指定する | max-width : キーワード または数値と単位 |
none | px,%, 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 : キーワード または数値と単位 |
auto | px,%, em,vwなど |