< 戻る

CSSプロパティ

公式サイト：CSS Snapshot 2020#5.4. Property Index

目次
  1. 全てのCSSプロパティを指定するCSSプロパティ
    • all
  2. テキストに関するCSSプロパティ
  3. ショートハンド(一括指定)プロパティとは
  4. KnotTextでのCSSの分類

1. 全てのCSSプロパティを指定するCSSプロパティ

参考：all - MDN

all: initial;

allは、指定したセレクタ―の全てのプロパティ(unicode-bidi, direction, CSSカスタムプロパティを除く)に対して、「initial, inherit, unset, revert」のいずれかのキーワードを指定できるショートハンド(一括指定)プロパティである。

2. 「ボックスモデルとレイアウト」に関するCSSプロパティ

2-1. 「ボックスモデル」に関するCSSプロパティ

2-2. 「ボックスモデル周辺」に関するCSSプロパティ

2-3. 「レイアウト」に関するCSSプロパティ

3. 「テキスト」に関するCSSプロパティ

4. 「特定のHTML要素」に関するプロパティ

4-1. 「置換要素(画像や動画など)」に関するCSSプロパティ

4-2. 「テーブルとリスト」に関するCSSプロパティ

5. 「CSSのグラフィックス表現」に関するCSSプロパティ

5-1. 「CSSのグラフィックス」に関するCSSプロパティ

5-2. 「CSSのアニメーション」に関するCSSプロパティ

5-3. Webの3D表現に関するCSSプロパティ

6. 「CSSの変数」に関するCSSプロパティ

7. 「UI(ユーザーインターフェース)」に関するCSSプロパティ

8. 「パフォーマンスへの対応」に関するCSSプロパティ

9. 「国際化への対応」に関するCSSプロパティ

10. ショートハンドプロパティ(一括指定)プロパティとは

参考：CSS の全体像 - ウェブ開発を学ぶ | MDN#一括指定

参考：一括指定プロパティ - CSS: カスケーディングスタイルシート | MDN

参考：一括指定プロパティ - CSS: カスケーディングスタイルシート | MDN#関連情報(一括指定プロパティの一覧が記載)

注：MDNのCSSプロパティリファレンスページには、Formal definitionと呼ばれる技術情報ボックスがあり、継承されるかどうかなど、そのプロパティに関する多くのデータポイントが記載されています。例えば、color property Formal definitionのセクションを参照してください。 by Cascade_and_inheritance

12. 扱わないCSSプロパティについて

2. KnotTextでのCSSの分類

参考：CSS reference - CSS | MDN

2-1. CSSセレクター

2-1-1. ベーシックセレクター

ユニバーサルセレクタ―* { }
タイプセレクタ―element { }
クラスセレクタ―.classname { }
IDセレクター#idname { }
属性セレクタ―selector[attribute] { }

2-1-2. グルーピングセレクター

セレクターリストdiv, p { }

2-1-3. コンビネーター(結合子)

子孫結合子div a
子結合子div > a
一般兄弟結合子p ~ a
隣接兄弟結合子p + a

2-1-4. 疑似クラスと疑似要素

疑似クラスdiv:hover { }
疑似要素div::before { }

2-2. CSSプロパティ

3Dperspective, backface-visibilityなど
animationanimation, transform, transitionなど
boxmodeloutline, margin, border, padding, background, overflow, z-index, height, width, positionなど
countercounter-increment, counter-reset, counter-setなど
custom--*
elementbox-shadow, box-sizing, object-fit, object-position, opacity, mix-blend-mode, visibility, content, display, text-overflow, float, clear, empty-cells, caption-side, list-styleなど
graphicsbackdrop-filter, filter, shape-image-threashold, shape-margin, scale, image-rendering, aspect-ratio, mask, clip, clip-path, inset, outsetなど
internationalizationline-break, writing-mode, text-orientation, text-combine-upright, direction, unicode-bidi, block-size, inline-sizeなど
layoutcolumn-rule, flex, grid, align-content, align-items, align-self, align-tracks, justify-content, justify-items, justify-self, order, column-count, column-fill, column-gap, columns, column-span, column-width, gap, row-gap, place-content, place-items, place-self, vertical-alignなど
performanceforced-color-adjust, text-rendering, content-visibility, will-change, color-scheme, contain, color-adjustなど
textword-spacing, text-shadow, text-transform, text-underline-offset, text-underline-position, white-space, shape-outside, text-align, text-align-last, text-indent, text-justify, letter-spacing, line-height, line-height-step, widows, word-break, word-wrap, color, hanging-punctuation, hyphens, initial-letter, orphans, quotes, font, text-decoration, text-emphasis, break-after, break-before, break-insideなど
user-interfacescroll-margin, scroll-padding, overscroll-behavior, user-select, touch-action, caret-color, cursor, resize, pointer-events, scrollbar-color, scrollbar-gutter, scrollbar-width, scroll-behavior, scroll-snap-align, scroll-snap-typeなど
その他のCSSプロパティ

2-3. CSSプロパティの値

Lengthpx pt vh...
inherit, unset...
!important
Functionsattr(), calc(), clamp(), max(), min()...
Angledeg, grad, rad, turn...
Resolutiondpi, dpcm, dppx, x...
Times, ms...
FrequencyHz, kHz...
その他の値

2-4. @ルール

@font-faceWebフォント
@namespace
@media@media(min-width: 540px) { }
@supports
@charset@charset 'utf-8';
@page
@counter-style
@color-profile
@keyframes
その他の@ルール

W3C CSS Validation Service は CSS が正しく書かれているかを判定するために利用できます。デバッグのために重宝するツールです。

端末のディスプレイ情報を調べる (responsive web design で役立ちます)