書き方を忘れた場合にご活用ください。詳細は記述しておりません。CSSの一般的な指定を掲載しております。参考で、下記のツールも参照してください。
１．スタイルシート確認ツール、２．文字サイズ・行間 確認ツール、３．色生成ツール、４．テーブル設定ツール(HTML5)、５．画像・バーナーサイズ確認用ツール
| No. | 分類 | スタイル | 説明 | 使用例・ほか |
| 1 | 文字色・背景 （参考） |
color | 文字色（前景色）を指定する | |
| background | 背景に関する指定をまとめて行う | |||
| background-color | 背景色を指定する | |||
| background-image | 背景画像を指定する | |||
| background-position | 背景画像の表示開始位置を指定する | |||
| background-repeat | 背景画像のリピートの仕方を指定する | |||
| 2 | フォント （参考） |
font | フォントに関する指定をまとめて行う | |
| font-style | フォントをイタリック体・斜体にする | |||
| font-variant | フォントをスモールキャップにする | |||
| font-weight | フォントの太さを指定する | |||
| font-size | フォントのサイズを指定する | |||
| font-family | フォントの種類を指定する | |||
| font-size-adjust | フォントのサイズを調整する | |||
| font-stretch | フォントを縦長・横長にする | |||
| 3 | テキスト （参考） |
line-height | 行の高さを指定する | |
| text-align | 行揃えの位置・均等割付を指定する | |||
| vertical-align | 縦方向の揃え位置を指定する | |||
| text-decoration | テキストの下線・上線・打ち消し線・点滅を指定する | |||
| text-indent | 一行目のインデント幅を指定する | |||
| text-transform | テキストの大文字表示・小文字表示を指定する | |||
| white-space | ソース中のスペース・タブ・改行の表示の仕方を指定する | |||
| letter-spacing | 文字の間隔を指定する | |||
| word-spacing | 単語の間隔を指定する | |||
| text-shadow | テキストに影をつける | |||
| 4 | マージン （参考） |
margin | マージンに関する指定をまとめて行う | ※ |
| margin-top | 上マージンを指定する | |||
| margin-bottom | 下マージンを指定する | |||
| margin-left | 左マージンを指定する | |||
| margin-right | 右マージンを指定する | |||
| 5 | パディング （参考） |
padding | パディングに関する指定をまとめて行う | ※ |
| padding-top | 上パディングを指定する | |||
| padding-bottom | 下パディングを指定する | |||
| padding-left | 左パディングを指定する | |||
| padding-right | 右パディングを指定する | |||
| 6 | ボーダー （参考） |
border | ボーダーのスタイル・太さ・色を指定する | border: 10px solid #993333; |
| border-color | ボーダーの色を指定する | ※ | ||
| border-style | ボーダーのスタイルを指定する | ※ | ||
| border-width | ボーダーの太さを指定する | ※ | ||
| border-top | 上ボーダーのスタイル・太さ・色を指定する | |||
| border-top-color | 上ボーダーの色を指定する | |||
| border-top-style | 上ボーダーのスタイルを指定する | |||
| border-top-width | 上ボーダーの太さを指定する | |||
| border-bottom | 下ボーダーのスタイル・太さ・色を指定する | |||
| border-bottom-color | 下ボーダーの色を指定する | |||
| border-bottom-style | 下ボーダーのスタイルを指定する | |||
| border-bottom-width | 下ボーダーの太さを指定する | |||
| border-left | 左ボーダーのスタイル・太さ・色を指定する | |||
| border-left-color | 左ボーダーの色を指定する | |||
| border-left-style | 左ボーダーのスタイルを指定する | |||
| border-left-width | 左ボーダーの太さを指定する | |||
| border-right | 右ボーダーのスタイル・太さ・色を指定する | |||
| border-right-color | 右ボーダーの色を指定する | |||
| border-right-style | 右ボーダーのスタイルを指定する | |||
| border-right-width | 右ボーダーの太さを指定する | |||
| 7 | 幅・高さ | width | 幅を指定する | |
| max-width | 幅の最大値を指定する | |||
| min-width | 幅の最小値を指定する | |||
| height | 高さを指定する | |||
| max-height | 高さの最大値を指定する | |||
| min-height | 高さの最小値を指定する | |||
| 8 | 表示・配置 | overflow | はみ出た内容の表示方法を指定する | |
| position | ボックスの配置方法（基準位置）を指定する | |||
| top | 上からの配置位置（距離）を指定する | |||
| bottom | 下からの配置位置（距離）を指定する | |||
| left | 左からの配置位置（距離）を指定する | |||
| right | 右からの配置位置（距離）を指定する | |||
| display | 要素の表示形式（ブロック・インライン）を指定する | |||
| float | 左または右に寄せて配置する | float:right/left/clear; | ||
| clear | 回り込みを解除する | |||
| 9 | テーブル （参考） |
テーブル設定ツール参照 | ||
| table-layout | テーブル（表）の表示方法を指定する | |||
| caption-side | テーブル（表）のキャプションの位置を指定する | |||
| border-collapse | セルのボーダーの表示の仕方を指定する | |||
| border-spacing | セルのボーダーの間隔を指定する | |||
| empty-cells | 空白セルのボーダーの表示・非表示を指定する | |||
| 10 | リスト | list-style | マーカーに関する指定をまとめて行う | |
| list-style-image | マーカー画像を指定する | |||
| list-style-type | マーカー文字の種類を指定する | |||
| list-style-position | マーカーの表示位置を指定する | |||
| marker-offset | マーカーとの間隔を指定する | |||
| 11 | セレクタ | 要素型セレクタ（タイプセレクタ） | 特定の要素にスタイルを適用する | 要素名 {color:blue;} |
| 全称セレクタ（ユニバーサルセレクタ） | すべての要素にスタイルを適用する | * {color:blue;} | ||
| classセレクタ（クラスセレクタ） | 特定のclass名がつけられた要素にスタイルを適用する | .クラス名 {color:blue; font-size:small;} | ||
| idセレクタ | 特定のid名がつけられた要素にスタイルを適用する | #id名 {background-color:#66cc33;} | ||
| :link擬似クラス | 未訪問のリンクにスタイルを適用する | a:link {color: #0000FF;} | ||
| :visited擬似クラス | 訪問済のリンクにスタイルを適用する | a:visited {color: #0000FF;} | ||
| :hover擬似クラス | カーソルが乗っている要素にスタイルを適用する | a:active {color: #0000FF;} | ||
| :active擬似クラス | クリック中の要素にスタイルを適用する | a:hover { background-color:#ff8080; } | ||
| :focus擬似クラス | フォーカスされた要素にスタイルを適用する | |||
| :lang擬似クラス | 特定の言語を指定された要素にスタイルを適用する | |||
| 複数のセレクタ | 複数のセレクタに同じスタイルを適用する | h2, p {color:blue;} | ||
| 子孫セレクタ | 子孫要素にスタイルを適用する | p span {color:#ffffff;} | ||
| 12 | コメント | /*コメント*/ | CSSソース中にコメントを入れる |
|
長さの単位指定
※指定値（一つの場合）：上側の値、右側の値、下側の値、左側の値 |