書き方を忘れた場合にご活用ください。詳細は記述しておりません。CSSの一般的な指定を掲載しております。参考で、下記のツールも参照してください。
１．スタイルシート確認ツール、２．文字サイズ・行間 確認ツール、３．色生成ツール、４．テーブル設定ツール(HTML5)、５．画像・バーナーサイズ確認用ツール
| No. | 分類 | スタイル | 説明 | 使用例・ほか |
| 1 | 文字色・背景色 （カラーコード） |
color | 文字色（前景色）を指定する | |
| background | 背景に関する指定をまとめて行う | |||
| background-color | 背景色を指定する | |||
| background-image | 背景画像を指定する | |||
| background-position | 背景画像の表示開始位置を指定する | |||
| background-repeat | 背景画像のリピートの仕方を指定する | |||
| 2 | フォント （詳細） |
font | フォントに関する指定をまとめて行う | |
| font-style | フォントをイタリック体・斜体にする | italic | ||
| font-variant | フォントをスモールキャップにする | |||
| font-weight | フォントの太さを指定する | bold | ||
| font-size | フォントのサイズを指定する | |||
| font-family | フォントの種類を指定する | |||
| font-size-adjust | フォントのサイズを調整する | |||
| font-stretch | フォントを縦長・横長にする | |||
| 3 | テキスト （参考） |
line-height | 行の高さを指定する | |
| text-align | 行揃えの位置・均等割付を指定する | left,right,center,justify | ||
| 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 | 高さの最小値を指定する | |||
| 表示 | overflow | はみ出た内容の表示方法を指定する | ||
| display | 要素の表示形式（ブロック・インライン）を指定する | |||
| float | 左または右に寄せて配置する | float:right/left | ||
| clear | 回り込みを解除する | clear:right/left/both | ||
| 配置 | top | 上からの配置位置（距離）を指定する | ||
| bottom | 下からの配置位置（距離）を指定する | |||
| left | 左からの配置位置（距離）を指定する | |||
| right | 右からの配置位置（距離）を指定する | |||
| position | ボックスの配置方法（基準位置）を指定する | |||
| 9 | テーブル （参考） |
テーブル設定ツール参照 | ||
| table-layout | テーブル（表）の表示方法を指定する | auto/fixed | ||
| caption-side | テーブル（表）のキャプションの位置を指定する | |||
| border-collapse | セルのボーダーの表示の仕方を指定する | collapse/separate | ||
| border-spacing | セルのボーダーの間隔を指定する | |||
| empty-cells | 空白セルのボーダーの表示・非表示を指定する | |||
| 10 | リスト （参考） |
list-style | マーカーに関する指定をまとめて行う | |
| list-style-image | マーカー画像を指定する | |||
| list-style-type | マーカー文字の種類を指定する | |||
| list-style-position | マーカーの表示位置を指定する | |||
| marker-offset | マーカーとの間隔を指定する | |||
| フイルター | filter | 画像などの要素に対して、ぼかし、影つけ、透明化などのフィルタを適用します blur：ぼかし設定 brightness：明暗設定 contrast：コントラスト設定 drop-shadow：ドロップシャドウ設定 grayscale：グレイスケール設定 hue-rotate：色相設定 invert：階調設定 opacity：透明度 saturate：彩度設定 sepia ：セピア設定 |
設定値は「フイルタ（CSS）」を参照してください。 | |
| フレキシブルボックス （参考） |
flex | フレックスコンテナ内のアイテムの幅についてまとめて指定する | ||
| flex-basis | フレックスコンテナ内のアイテムの基本幅を指定する | |||
| flex-shrink | フレックスコンテナ内のアイテムの縮み方の比率を指定する | |||
| flex-grow | フレックスコンテナ内のアイテムの伸び方の比率を指定する | |||
| flex-flow | フレックスコンテナ内のアイテムの配置方向と折り返し方法をまとめて指定する | |||
| flex-direction | フレックスコンテナ内のアイテムの配置方向を指定する | |||
| flex-wrap | フレックスコンテナ内のアイテムの折り返し方法を指定する | |||
| order | フレックスコンテナ内のアイテムの表示順序を指定する | |||
| グリッド （参考） |
grid-row-start | 行グリッドの開始位置やサイズ（グリッドスパン）を指定する | ||
| grid-column-start | 列グリッドの開始位置やサイズ（グリッドスパン）を指定する | |||
| grid-row-end | 行グリッドの終了位置やサイズ（グリッドスパン）を指定する | |||
| grid-column-end | 列グリッドの終了位置やサイズ（グリッドスパン）を指定する | |||
| grid-row | 行グリッドの開始と終了についてまとめて指定する | |||
| grid-column | 列グリッドの開始と終了についてまとめて指定する | |||
| grid-area | 行グリッド・列グリッドの開始と終了についてまとめて指定する | |||
| grid-template-rows | グリッドトラックの縦方向のサイズリストを指定する | |||
| grid-template-columns | グリッドトラックの横方向のサイズリストを指定する | |||
| grid-template-areas | 名前付きグリッド領域を指定する | |||
| grid-template | グリッドトラックのリストについてまとめて指定する | |||
| grid-auto-rows | サイズリストでは不明確なグリッドトラックの縦方向のサイズを指定する | |||
| grid-auto-columns | サイズリストでは不明確なグリッドトラックの横方向のサイズを指定する | |||
| grid-auto-flow | グリッドアイテムの自動配置のされ方を指定する | |||
| grid | グリッドについてまとめて指定する | |||
| ボックス配置 | align-content | コンテナ内全体の交差軸方向の揃え位置を指定する | ||
| align-items | コンテナ内のアイテムの交差軸方向のデフォルト揃え位置を指定する | |||
| align-self | コンテナ内の個別アイテムの縦方向の揃え位置を指定する | |||
| justify-content | コンテナ内全体の主軸方向の揃え位置を指定する | |||
| justify-items | コンテナ内のアイテムの主軸方向のデフォルト揃え位置を指定する | |||
| justify-self | コンテナ内の個別アイテムの横方向の揃え位置を指定する | |||
| place-content | コンテナ内全体の交差軸方向と主軸方向の揃え位置をまとめて指定する | |||
| place-items | コンテナ内のアイテムの交差軸方向と主軸方向のデフォルト揃え位置をまとめて指定する | |||
| place-self | コンテナ内の個別アイテムの縦方向と横方向の揃え位置をまとめて指定する | |||
| gap | アイテム同士の横方向と縦方向の間隔をまとめて指定する | |||
| row-gap | アイテム同士の横方向の間隔を指定する | |||
| column-gap | アイテム同士の縦方向の間隔を指定する | |||
| 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ソース中にコメントを入れる |
|
※margin/padding/borderの指定 長さの単位指定
セレクターの補足説明
|
201121u