From d223183677d28a6ae458051af7bdde0e051e826a Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Fri, 19 Nov 2021 23:39:35 +0900 Subject: CSS データ型を更新 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 2021/11/07 時点の英語版に同期 --- files/ja/web/css/css_types/index.md | 292 ++++++++++++++++-------------------- 1 file changed, 130 insertions(+), 162 deletions(-) diff --git a/files/ja/web/css/css_types/index.md b/files/ja/web/css/css_types/index.md index bbe03843cc..109a8c9d67 100644 --- a/files/ja/web/css/css_types/index.md +++ b/files/ja/web/css/css_types/index.md @@ -3,169 +3,137 @@ title: CSS データ型 slug: Web/CSS/CSS_Types tags: - CSS - - CSS Data Type - - Guide + - CSS データ型 + - ガイド - Index - - Overview - - Reference - - Syntax - - Types - - data types + - 概要 + - リファレンス + - 構文 + - 型 + - データ型 - list translation_of: Web/CSS/CSS_Types --- -
{{CssRef}}
- -

CSS データ型は、 CSS のプロパティや関数で使用される具体的な値 (キーワードや単位を含む) を定義します。これはコンポーネント値型の特殊な種類です。

- -

構文

- -

CSS の形式文法では、データ型は "<" と ">" の不等号で囲まれたキーワードで表記されます。

- -

索引

- -

一連の CSS 仕様書で定義されているデータ型には、以下のようなものがあります。

- -
A - - -B - - -C - - -D - - -F - - -G - - -I - - -L - - -N - - -P - - -Q - - -R - - -S - - -T - - -U - - -Z - - -
- -

仕様書

- - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{ SpecName('CSS4 Values') }}{{ Spec2('CSS4 Values') }}
{{ SpecName('CSS3 Values') }}{{ Spec2('CSS3 Values') }}初回定義
- -

関連情報

- - +{{CSSRef}} + +**CSS データ型**は、 CSS のプロパティや関数で使用される具体的な値 (キーワードや単位を含む) を定義しています。これは[コンポーネント値型](https://www.w3.org/TR/css3-values/#component-types)の特殊な種類です。 + +よく使われるデータ型は、 [CSS 値と単位](/ja/docs/Web/CSS/CSS_Values_and_Units)仕様書で定義されています。この仕様書は[関数表記](/ja/docs/Web/CSS/CSS_Functions)も定義しており、これはより複雑な型や処理を指定することができます。その他の型は、該当する型で仕様書で定義されています。 + +以下に、最もよく目にする型のリファレンスを掲載していますが、すべての CSS 仕様書で定義されている型を網羅しているわけではありません。 + +## 構文 + +CSS の形式文法では、データ型は "`<`" と "`>`" の不等号で囲まれたキーワードで表記されます。 + +## テキストのデータ型 + +これらの型には、キーワード、識別子、文字列、URL などがあります。 + +- 定義済みのキーワード + - : あらかじめ意味が定義されたキーワード、例えば `collapse` の値は {{cssxref("border-collapse")}} プロパティの値のためのものです。 +- CSS 全体のキーワード: `initial` + - : プロパティの初期値として指定された値です。 +- CSS 全体のキーワード: `inherit` + - : 要素の親に対するプロパティの計算された値。 +- CSS 全体のキーワード: `unset` + - : 継承されるプロパティであるかどうかに応じて、`inherit` または `initial` として動作します。 +- `` + - : ユーザー定義の識別子です。例えば、{{cssxref("grid-area")}} プロパティを使って割り当てる名前などです。詳細は {{cssxref("<custom-ident>")}} のページを参照してください。 +- `` + - : `` に 2 つのダッシュで始めなければならないという制限を追加したものです。例えば、[CSS カスタムプロパティ](/ja/docs/Web/CSS/Using_CSS_custom_properties)などです。詳しくは {{cssxref("<dashed-ident>")}} のページを参照してください。 +- `` + - : 引用符で囲まれた文字列で、{{cssxref("content")}} プロパティの値など使用されます。詳しくは {{cssxref("<string>")}} のページを参照してください。 +- `` + - : リソースへのポインターで、例えば {{cssxref("background-image")}} プロパティの値などです。詳しくは {{cssxref("url()")}} のページを参照してください。 + +## 数値データ型 + +これらのデータ型は、数量、インデックス、位置などを示すために使用されます。これらのデータ型のほとんどは、Values and Units 仕様書で定義されていますが、それ以外の仕様書にもその仕様書固有のデータ型が記述されています。例えば、[CSS Grid Layout](https://www.w3.org/TR/css-grid-1/#fr-unit)では、`fr` という単位が定義されています。 + +- `` (整数) + - : 1 桁以上の 0 から 9 までの 10 進数の値です。詳しくは {{cssxref("<integer>")}} のページを参照してください。 +- `` (数値) + - : 小数部分を持つこともある実数で、例えば 1 や 1.34 などです。詳しくは {{cssxref("<number>")}} のページを参照してください。 +- `` (大きさ) + - : 単位を付けた数値で、 23px や 15em などです。詳しくは {{cssxref("<dimension>")}} のページを参照してください。 +- `` (パーセント値) + - : パーセント記号の付いた数値で、例えば 10% などです。詳しくは {{cssxref("<percentage>")}} のページを参照してください。 +- `` (比率) + - : ` / ` という構文で表される比率です。詳細は {{cssxref("<ratio>")}} のページを参照してください。 +- `` + - : [CSS グリッドレイアウト](/ja/docs/Web/CSS/CSS_Grid_Layout)に導入された柔軟な長さで、`fr` の単位が付加された `` として記述され、グリッドトラックのサイズ調整に使用されます。詳しくは{{cssxref("<flex>")}}のページを参照してください。 + +## 数量 + +これらの型は、寸法やその他の数量を指定するために使用されます。 + +- `` (長さ) + - : 長さは `` の一種で、寸法を表します。詳しくは {{cssxref("<length>")}} のページを参照してください。 +- `` (角度) + - : 角度は {{cssxref("gradient/linear-gradient()", "linear-gradient()")}} などのプロパティで使用されるもので、 `` のうち `deg`、`grad`、`rad`、`turn` のいずれかの単位が付いたものです。詳しくは {{cssxref("<angle>")}} のページを参照してください。 +- `