CSS プロパティの分類: アニメーション プロパティ、変換プロパティ、トランジション プロパティ、ボックス プロパティ、マーキー プロパティ、サイズ プロパティ、マージン プロパティ、パディング プロパティ、境界線プロパティ、位置決めプロパティ、複数列プロパティ、スケーラブル ボックス プロパティ、リストプロパティ、グリッドプロパティ、テーブルプロパティ、テキストプロパティ、フォントプロパティ、カラープロパティ、背景プロパティなど。
このチュートリアルの動作環境: Windows 7 システム、CSS3 バージョン、Dell G3 コンピューター。
#CSS 属性の分類
##アニメーション属性の分類
CSS3 アニメーション属性 (アニメーション) |
2D/3D 変換プロパティ(Transform) |
Transition プロパティ(Transition) |
Box プロパティ |
Marquee プロパティ |
| サイズ/位置--
CSS サイズ属性 (寸法) | CSS マージン属性 (マージン) | CSS パディング属性 (パディング) | CSS 境界線プロパティ (境界線とアウトライン) | CSS 位置決めプロパティ (位置決め) |
| --リスト/テーブル
複数列プロパティ (複数列) ) | フレキシブル ボックス プロパティ (フレキシブル ボックス) | CSS リスト プロパティ (List) | グリッド プロパティ | CSS テーブル プロパティ (Table) |
| テキスト フォントの色
CSS テキスト プロパティ (Text) | CSS フォント プロパティ (Font) | Color プロパティ | CSS Background プロパティ (背景) | |
|
| | | | |
| 属性は控えめに使用する
ハイパーリンク属性 | 生成されたコンテンツ | ページ メディアのプロパティのコンテンツ | ユーザー インターフェイス プロパティ (ユーザー インターフェイス) | ページ メディア プロパティ |
|
CSS 印刷プロパティ (印刷) | | |
|
|
|
#CSS3 アニメーション プロパティ (アニメーション)
#Attribute
Description
CSS
| ##@keyframes | アニメーションを指定します。 | 3
| animation | animation-play-state プロパティを除く、すべてのアニメーション プロパティの短縮形プロパティ。 | 3
| animation-name | @keyframes アニメーションの名前を指定します。 | 3
| animation-duration | アニメーションが 1 サイクルを完了するのにかかる秒数またはミリ秒数を指定します。 | 3
| animation-timing-function | アニメーションのスピードカーブを指定します。 | 3
| animation-delay | アニメーションの開始時期を指定します。 | 3
| animation-iteration-count | アニメーションの再生回数を指定します。 | 3
| animation-direction | 次のサイクルでアニメーションを逆再生するかどうかを指定します。 | 3
| animation-play-state | アニメーションが実行中か一時停止中かを指定します。 | 3
| animation-fill-mode | アニメーション時間外のオブジェクトの状態を指定します。 | 3
|
#CSS 背景プロパティ (Background)
プロパティ | 説明 | CSS |
background | すべての背景プロパティを 1 つのステートメントで設定します。 | 1 |
background-attachment | 背景画像を固定するか、ページの残りの部分と一緒にスクロールするかを設定します。 | 1 |
background-color | 要素の背景色を設定します。 | 1 |
background-image | 要素の背景画像を設定します。 | 1 |
background-position | 背景画像の開始位置を設定します。 | 1 |
background-repeat | 背景画像を繰り返すかどうか、どのように繰り返すかを設定します。 | 1 |
background-clip | 背景の描画領域を指定します。 | 3 |
background-origin | 背景画像の配置領域を指定します。 | 3 |
background-size | 背景画像のサイズを指定します。 | 3 |
CSS 境界線プロパティ (境界線とアウトライン)
Property
Description |
CSS |
|
border
すべての境界線プロパティを 1 つのステートメントで設定します。 |
1 |
|
border-bottom
すべての下枠プロパティを 1 つのステートメントで設定します。 |
1 |
|
border-bottom-color
下枠の色を設定します。 |
2 |
|
border-bottom-style
下枠のスタイルを設定します。 |
2 |
|
border-bottom-width
下枠の幅を設定します。 |
1 |
|
border-color
4 つの境界線の色を設定します。 |
1 |
|
border-left
すべての左境界プロパティを 1 つのステートメントで設定します。 |
1 |
|
border-left-color
左の境界線の色を設定します。 |
2 |
|
border-left-style
左境界線のスタイルを設定します。 |
2 |
|
border-left-width
左境界線の幅を設定します。 |
1 |
|
border-right
すべての右枠プロパティを 1 つのステートメントで設定します。 |
1 |
|
border-right-color
右枠の色を設定します。 |
2 |
|
border-right-style
右枠のスタイルを設定します。 |
2 |
|
border-right-width
右枠の幅を設定します。 |
1 |
|
border-style
4 つの境界線のスタイルを設定します。 |
1 |
|
border-top
すべての上枠プロパティを 1 つのステートメントで設定します。 |
1 |
|
border-top-color
上枠の色を設定します。 |
2 |
|
border-top-style
上枠のスタイルを設定します。 |
2 |
|
border-top-width
上枠の幅を設定します。 |
1 |
|
border-width
4 つの境界線の幅を設定します。 |
1 |
|
outline
すべてのアウトライン プロパティを 1 つのステートメントで設定します。 |
2 |
|
outline-color
アウトラインの色を設定します。 |
2 |
|
outline-style
アウトラインのスタイルを設定します。 |
2 |
|
outline-width
アウトラインの幅を設定します。 |
2 |
|
border-bottom-left-radius
境界線の左下隅の形状を定義します。 |
3 |
|
border-bottom-right-radius
境界線の右下隅の形状を定義します。 |
3 |
|
border-image
短縮形のプロパティ。すべての border-image-* プロパティを設定します。 |
3 |
|
border-image-outset
境界線イメージ領域が境界線を超える量を指定します。 |
3 |
|
border-image-repeat
画像の境界線を繰り返すか、丸めるか、伸ばすか)。 |
3 |
|
border-image-slice
画像境界線の内側のオフセットを指定します。 |
3 |
|
border-image-source
境界線として使用する画像を指定します。 |
3 |
|
border-image-width
画像の境界線の幅を指定します。 |
3 |
|
border-radius
短縮形のプロパティ。4 つの border-*-radius プロパティをすべて設定します。 |
3 |
|
border-top-left-radius
境界線の左上隅の形状を定義します。 |
3 |
|
border-top-right-radius
境界線の右下隅の形状を定義します。 |
3 |
|
box-decoration-break
|
3 |
| ##box - shadow
ボックスに 1 つ以上の影を追加します。 | 3 |
|
ボックスのプロパティ
プロパティ |
説明 |
CSS |
overflow-x |
コンテンツが要素コンテンツ領域からオーバーフローした場合、コンテンツの左端/右端をトリミングするかどうか。 |
3 |
overflow-y |
コンテンツが要素コンテンツ領域からオーバーフローする場合、コンテンツの上端/下端をトリミングするかどうか。 |
3 |
overflow-style |
オーバーフロー要素の優先スクロール方法を指定します。 |
3 |
rotation |
回転ポイント プロパティで定義された点を中心に要素を回転します。 |
3 |
rotation-point |
左上の境界エッジからのオフセット ポイントを定義します。 | ##3 |
##カラー属性
属性Description | CSS |
| color-profile
デフォルトの仕様以外のソース カラー プロファイルの使用を許可します。 | 3 |
| opacity
要素の不透明度レベルを指定します。 | 3 |
| rendering-intent
デフォルト以外のレンダリング インテント仕様にカラー プロファイルを使用できるようにします。 | 3 |
|
ページ メディア プロパティのコンテンツ
プロパティ
Description | CSS |
| bookmark-label
ブックマークのラベルを指定します。 | 3 |
| bookmark-level
ブックマークのレベルを指定します。 | 3 |
| bookmark-target
ブックマーク リンクのターゲットを指定します。 | 3 |
| float-offset
float 属性が通常配置される場所とは反対の方向に要素を配置します。 | 3 |
| hyphenate-after
ハイフンでつながれた単語のハイフンの後の最小文字数を指定します。 | 3 |
| hyphenate-before
ハイフンでつながれた単語のハイフンの前の最小文字数を指定します。 | 3 |
| hyphenate-character
ハイフネーションが発生したときに表示される文字列を指定します。 | 3 |
| hyphenate-lines
要素内の連続するハイフネーション行の最大数を示します。 | 3 |
| hyphenate-resource
ブラウザがハイフネーションポイントを決定するのに役立つ外部リソース (カンマ区切りリスト) を指定します。 | 3 |
| ハイフン
段落レイアウトを改善するために単語を分割する方法を設定します。 | 3 |
| image-resolution
画像の正しい解像度を指定します。 | 3 |
| マーク
クロップマークまたはバツマークを文書に追加します。 | 3 |
| 文字列セット
| 3 |
|
CSS サイズ属性 (ディメンション)
プロパティ
説明 | CSS |
| height
要素の高さを設定します。 | 1 |
| max-height
要素の最大高さを設定します。 | 2 |
| max-width
要素の最大幅を設定します。 | 2 |
| min-height
要素の最小の高さを設定します。 | 2 |
| min-width
要素の最小幅を設定します。 | 2 |
| width
要素の幅を設定します。 | 1 |
|
フレキシブル ボックスのプロパティ
Property 説明 | CSS |
| box-align
ボックスの子要素を配置する方法を指定します。 | 3 |
| box-direction
ボックスの子要素の表示方向を指定します。 | 3 |
| box-flex
ボックスの子要素がスケーラブルかどうかを指定します。 | 3 |
| box-flex-group
スケーラブルな要素をフレックス グループに割り当てます。 | 3 |
| box-lines
親要素ボックスのスペースを超えた場合に表示を折り返すかどうかを指定します。 | 3 |
| box-ordinal-group
ボックスの子要素の表示順序を指定します。 | 3 |
| box-orient
ボックスの子要素を水平または垂直のどちらに配置するかを指定します。 | 3 |
| box-pack
水平ボックスの場合は水平位置、垂直ボックスの場合は垂直位置を指定します。 | 3 |
|
CSS フォント プロパティ (フォント)
プロパティ |
説明 |
CSS |
font |
すべてのフォント プロパティを 1 つのステートメントで設定します。 |
1 |
font-family |
テキストのフォント ファミリを指定します。 |
1 |
font-size |
テキストのフォント サイズを指定します。 |
1 |
font-size-adjust |
要素のアスペクト値を指定します。 |
2 |
font-stretch |
現在のフォント ファミリを縮小または拡大します。 |
2 |
font-style |
テキストのフォント スタイルを指定します。 |
1 |
font-variant |
テキストを小文字フォントで表示するかどうかを指定します。 |
1 |
font-weight |
フォントの太さを指定します。 |
1 |
生成されたコンテンツ
プロパティ | Description | CSS |
content | :before および :after 擬似要素とともに使用して、生成されたコンテンツを挿入します。 | 2 |
counter-increment | 1 つ以上のカウンタをインクリメントまたはデクリメントします。 | 2 |
counter-reset | 1 つ以上のカウンターを作成またはリセットします。 | 2 |
quotes | ネストされた引用符の引用タイプを設定します。 | 2 |
crop | オブジェクト全体ではなく、オブジェクトの長方形の領域のみを要素として置き換えることを許可します。 | 3 |
move-to | ストリームから要素を削除し、ドキュメント内の後の位置に再挿入します。 | 3 |
page-policy | ページの出現に基づいて、要素をカウンタまたは文字列値のどちらに適用するかを決定します。 #3 |
|
##グリッド プロパティ
プロパティ
Description | CSS |
| grid-columns
グリッド内の各列の幅を指定します。 | 3 |
| grid-rows
グリッド内の各列の高さを指定します。 | 3 |
|
ハイパーリンクのプロパティ
プロパティ
Description | CSS |
| target
省略形属性、target-name、target-new、および target-position 属性を設定します。 | 3 |
| target-name
リンクを開く場所 (リンクのターゲット) を指定します。 | 3 |
| target-new
ターゲット リンクを新しいウィンドウで開くか、既存のウィンドウの新しいタブで開くかを指定します。 | 3 |
| target-position
新しいターゲット リンクを配置する場所を指定します。 | 3 |
|
CSS リスト プロパティ (List)
プロパティ説明
CSS |
|
list-style |
すべてのリスト プロパティを 1 つのステートメントで設定します。
1 |
|
list-style-image |
画像をリスト項目マーカーとして設定します。
1 |
|
list-style-position |
リスト項目マークの配置位置を設定します。
1 |
|
list-style-type |
リスト項目タグのタイプを設定します。
1 |
|
マーカーオフセット |
2 |
|
|
CSS マージン属性 (Margin)
プロパティ説明
CSS |
| #margin | すべてのマージン プロパティを 1 つの宣言で設定します。
1 |
| margin-bottom | 要素の下マージンを設定します。
1 |
| margin-left | 要素の左マージンを設定します。
1 |
| margin-right | 要素の右マージンを設定します。
1 |
| margin-top | 要素の上マージンを設定します。
1 |
|
| マーキー プロパティ
プロパティ
Description
CSS |
| marquee-direction | コンテンツの移動方向を設定します。
3 |
| marquee-play-count | コンテンツを移動する回数を設定します。
3 |
| marquee-speed | コンテンツのスクロール速度を設定します。
3 |
| marquee-style | モバイル コンテンツのスタイルを設定します。
3 |
|
複数列
属性 |
説明 |
CSS |
column-count |
要素を区切る列の数を指定します。 |
3 |
column-fill |
列を埋める方法を指定します。 |
3 |
column-gap |
列間のギャップを指定します。 |
3 |
column-rule |
すべての column-rule-* プロパティの短縮形プロパティを設定します。 |
3 |
column-rule-color |
列間のルールの色を指定します。 |
3 |
column-rule-style |
列間のルールのスタイルを指定します。 |
3 |
column-rule-width |
列間のルールの幅を指定します。 |
3 |
column-span |
要素がまたがる列の数を指定します。 |
3 |
column-width |
列の幅を指定します。 |
3 |
columns |
列幅と列数を設定するための短縮プロパティを指定します。 | ##3 |
CSS パディング プロパティ (Padding)
Property
説明 |
CSS |
|
padding
すべてのパディング プロパティを 1 つのステートメントで設定します。 |
1 |
|
padding-bottom
要素の下部パディングを設定します。 |
1 |
|
padding-left
要素の左パディングを設定します。 |
1 |
|
padding-right
要素の右パディングを設定します。 |
1 |
|
padding-top
要素の上部のパディングを設定します。 |
1 |
|
ページ メディア プロパティ
属性 説明 |
CSS |
|
fit
width 属性と height 属性が auto ではない、置換された要素をスケーリングする方法を示します。 |
3 |
|
fit-position
ボックス内のオブジェクトの配置を定義します。 |
3 |
|
image-orientation
ユーザー エージェントが画像に適用する時計回りの回転を指定します。 |
3 |
|
page
要素を表示する特定のページの種類を指定します。 |
3 |
|
size
ページ コンテンツを含むボックスのサイズと方向を指定します。 |
3 |
|
CSS 配置プロパティ (Positioning)
プロパティ
説明 | CSS |
| bottom
配置された要素の下マージン境界と要素の下境界の間のオフセットを設定します。それを含むブロック 。 | 2 |
| clear
要素のどの側で他の浮動要素を許可しないかを指定します。 | 1 |
| clip
絶対的に配置された要素をクリップします。 | 2 |
| cursor
表示するカーソルの種類(形状)を指定します。 | 2 |
| display
要素が生成するボックスのタイプを指定します。 | 1 |
| float
ボックスをフローティングにするかどうかを指定します。 | 1 |
| left
位置決めされた要素の左マージン境界と、その要素を含むブロックの左境界の間のオフセットを設定します。 | 2 |
| overflow
コンテンツが要素ボックスからオーバーフローした場合の動作を指定します。 | 2 |
| position
要素の配置タイプを指定します。 | 2 |
| right
位置決めされた要素の右マージン境界と、その要素を含むブロックの右境界との間のオフセットを設定します。 | 2 |
| top
位置決めされた要素の上マージン境界と、その要素を含むブロックの上境界との間のオフセットを設定します。 | 2 |
| vertical-align
要素の垂直方向の配置を設定します。 | 1 |
| visibility
要素が表示されるかどうかを指定します。 | 2 |
| z-index
要素の重なり順を設定します。 | 2 |
|
CSS 印刷プロパティ (印刷)
プロパティ
説明 | CSS |
| orphans
ページネーション時にページの下部に残す必要がある最小行数を設定します。要素内で発生します。 | 2 |
| page-break-after
要素の後のページング動作を設定します。 | 2 |
| page-break-before
要素の前にページング動作を設定します。 | 2 |
| page-break-inside
要素内のページング動作を設定します。 | 2 |
| widows
要素内でページネーションが発生する場合に、ページの先頭に残す必要がある最小行数を設定します。 | 2 |
|
#CSS テーブル プロパティ (テーブル)
プロパティ | 説明 | CSS |
border-collapse | テーブルの境界線を結合するかどうかを指定します。 | 2 |
border-spacing | 隣接するセルの境界線間の距離を指定します。 | 2 |
caption-side | 表タイトルの位置を指定します。 | 2 |
empty-cells | 表内の空のセルに枠線と背景を表示するかどうかを指定します。 | 2 |
table-layout | テーブルに使用されるレイアウト アルゴリズムを設定します。 | 2 |
CSS テキスト属性 (Text)
属性 | 説明 | CSS |
color | テキストの色を設定します。 | 1 |
direction | テキストの方向/書き込み方向を指定します。 | 2 |
letter-spacing | 文字間隔を設定します。 | 1 |
line-height | 行の高さを設定します。 | 1 |
text-align | テキストの水平方向の配置を指定します。 | 1 |
text-decoration | テキストに追加する装飾効果を指定します。 | 1 |
text-indent | テキスト ブロックの最初の行のインデントを指定します。 | 1 |
text-shadow | テキストに追加する影効果を指定します。 | 2 |
text-transform | テキストの大文字と小文字を制御します。 | 1 |
unicode-bidi | テキストの方向を設定します。 | 2 |
white-space | 要素内の空白の処理方法を指定します。 | 1 |
word-spacing | 単語の間隔を設定します。 | 1 |
hanging-punctuation | 句読点文字がワイヤーフレームの外側にあるかどうかを指定します。 | 3 |
punctuation-trim | 句読点文字をトリムするかどうかを指定します。 | 3 |
text-align-last | 最終行または強制改行の直前の行を揃える方法を設定します。 | 3 |
text-emphasis | 強調記号と強調記号の前景色を要素のテキストに適用します。 | 3 |
text-justify | text-align が「justify」に設定されている場合に使用される配置方法を指定します。 | 3 |
text-outline | テキストのアウトラインを指定します。 | 3 |
text-overflow | テキストが含まれる要素からオーバーフローした場合の動作を指定します。 | 3 |
text-shadow | テキストに影を追加します。 | 3 |
text-wrap | テキストの行折り返しルールを指定します。 | 3 |
word-break | 中国語、日本語、韓国語以外のテキストの改行ルールを指定します。 | 3 |
word-wrap | 分割できない長い単語を分割して次の行に折り返すことができます。 | 3 |
Property | Description | CSS |
transform | 2D または 3D 変換を要素に適用します。 | 3 |
transform-origin | 変換される要素の位置を変更できます。 | 3 |
transform-style | ネストされた要素を 3D 空間で表示する方法を指定します。 | 3 |
perspective | 3D 要素の遠近効果を指定します。 | 3 |
perspective-origin | 3D 要素の下部の位置を指定します。 | 3 |
backface-visibility | 画面に向かっていないときに要素が表示されるかどうかを定義します。 | 3 |
遷移属性
属性 | 説明 | CSS |
transition | 1 つのプロパティで 4 つのトランジション プロパティを設定するために使用される省略形プロパティ。 | 3 |
transition-property | トランジションを適用する CSS プロパティの名前を指定します。 | 3 |
transition-duration | トランジション効果にかかる時間を定義します。 | 3 |
transition-timing-function | トランジション効果の時間曲線を指定します。 | 3 |
transition-lay | トランジション効果がいつ開始されるかを指定します。 | 3 |
ユーザー インターフェイスのプロパティ
プロパティ |
説明 |
CSS |
Appearance |
要素の外観を標準のユーザー インターフェイス要素に設定できます |
3 |
box-sizing | ゾーンに適合するものを正確に定義できます。 |
3 |
icon |
作成者は、アイコン化された同等のものを使用して要素をスタイル設定できます。 |
3 |
nav-down |
下矢印ナビゲーション キーを使用するときに移動する場所を指定します。 |
3 |
nav-index |
タブキーによる要素の制御順序を設定します。 |
3 |
nav-left |
左矢印ナビゲーション キーを使用するときに移動する場所を指定します。 |
3 |
nav-right |
右矢印ナビゲーション キーを使用するときに移動する場所を指定します。 |
3 |
nav-up |
上矢印ナビゲーション キーを使用するときに移動する場所を指定します。 |
3 |
outline-offset |
アウトラインをオフセットし、境界線の端を越えてアウトラインを描画します。 |
3 |
resize |
ユーザーが要素のサイズを調整できるかどうかを指定します。 |
3 |
(学習ビデオ共有: css ビデオ チュートリアル )
以上がCSS 属性はどのカテゴリに分類されますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。