diff options
Diffstat (limited to 'files')
| -rw-r--r-- | files/ja/web/css/all/index.md | 213 |
1 files changed, 104 insertions, 109 deletions
diff --git a/files/ja/web/css/all/index.md b/files/ja/web/css/all/index.md index 242d45c7e8..61e321a594 100644 --- a/files/ja/web/css/all/index.md +++ b/files/ja/web/css/all/index.md @@ -5,163 +5,158 @@ tags: - CSS - CSS カスケードと継承 - CSS プロパティ - - Reference + - リファレンス - all +browser-compat: css.properties.all translation_of: Web/CSS/all --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><span class="seoSummary"><a href="/ja/docs/Web/CSS">CSS</a> の <code><strong>all</strong></code> <a href="/ja/docs/Web/CSS/Shorthand_properties">一括指定プロパティ</a>は、要素のすべてのプロパティを ({{cssxref("unicode-bidi")}} および {{cssxref("direction")}} を除いて) 初期化します。</span>プロパティは初期値または継承値、または他のスタイルシートに由来して指定した値に設定される可能性があります。</p> +**`all`** は [CSS](/ja/docs/Web/CSS) の[一括指定](/ja/docs/Web/CSS/Shorthand_properties)プロパティで、要素のすべてのプロパティを ({{cssxref("unicode-bidi")}}、{{cssxref("direction")}}、 [CSS カスタムプロパティ](/ja/docs/Web/CSS/Using_CSS_custom_properties)を除いて) 初期化します。プロパティは初期値または継承値、または他のスタイルシートに由来して指定した値に設定される可能性があります。 -<div>{{EmbedInteractiveExample("pages/css/all.html")}}</div> - -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> +{{EmbedInteractiveExample("pages/css/all.html")}} <h2 id="Syntax" name="Syntax">構文</h2> -<pre class="brush:css no-line-numbers">/* グローバル値 */ +```css +/* グローバル値 */ all: initial; all: inherit; +all: revert; all: unset; +``` -/* CSS カスケードと継承 Level 4 */ -all: revert; -</pre> - -<p><code>all</code> プロパティは、 CSS のグローバルキーワード値のうちの一つで定義します。なお、これらの値は {{cssxref("unicode-bidi")}} および {{cssxref("direction")}} プロパティには影響しません。</p> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt>{{cssxref("initial")}}</dt> - <dd>その要素のすべてのプロパティを<a href="/ja/docs/Web/CSS/initial_value">初期値</a>に変更するべきであることを指定します。</dd> - <dt>{{cssxref("inherit")}}</dt> - <dd>その要素のすべてのプロパティを<a href="/ja/docs/Web/CSS/inheritance">継承値</a>に変更するべきであることを指定します。</dd> - <dt>{{cssxref("unset")}}</dt> - <dd>その要素のすべてのプロパティを、既定値が inherit のものは継承値に、そうでなければ初期値に変更するべきであることを指定します。</dd> - <dt>{{cssxref("revert")}}</dt> - <dd>宣言が所属するスタイルシートの出所に応じて動作を指定します。 - <dl> - <dt><a href="/ja/docs/Web/CSS/Cascade#%E3%83%A6%E3%83%BC%E3%82%B6%E3%83%BC%E3%82%A8%E3%83%BC%E3%82%B8%E3%82%A7%E3%83%B3%E3%83%88%E3%82%B9%E3%82%BF%E3%82%A4%E3%83%AB%E3%82%B7%E3%83%BC%E3%83%88">ユーザーエージェントのスタイルシート</a></dt> - <dd><code>unset</code> と同等です。</dd> - <dt><a href="/ja/docs/Web/CSS/Cascade#%E3%83%A6%E3%83%BC%E3%82%B6%E3%83%BC%E3%82%B9%E3%82%BF%E3%82%A4%E3%83%AB%E3%82%B7%E3%83%BC%E3%83%88">ユーザーのスタイル</a></dt> - <dd><a href="/ja/docs/Web/CSS/Cascade">カスケード</a>をユーザーエージェントレベルまでロールバックし、<a href="/ja/docs/Web/CSS/specified_value">指定値</a>が、その要素に対して作者レベルまたはユーザーレベルの規則が指定されていないかのように計算されるようにします。</dd> - <dt><a href="/ja/docs/Web/CSS/Cascade#%E4%BD%9C%E6%88%90%E8%80%85%E3%82%B9%E3%82%BF%E3%82%A4%E3%83%AB%E3%82%B7%E3%83%BC%E3%83%88">作成者のスタイル</a></dt> - <dd><a href="/ja/docs/Web/CSS/Cascade">カスケード</a>をユーザーのレベルまでロールバックし、作者レベルの規則が要素に指定されていない場合は、<a href="/ja/docs/Web/CSS/specified_value">指定値</a>が計算されます。 <code>revert</code> の用途では、作者のオリジンはオーバーライドおよびアニメーションのオリジンが含まれます。</dd> - </dl> - </dd> -</dl> - -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> +`all` プロパティは、 CSS のグローバルキーワード値のうちの一つで定義します。なお、これらの値は {{cssxref("unicode-bidi")}} および {{cssxref("direction")}} プロパティには影響しません。 + +### 値 + +- {{cssxref("initial")}} + - : その要素のすべてのプロパティを[初期値](/ja/docs/Web/CSS/initial_value)に変更するべきであることを指定します。 +- {{cssxref("inherit")}} + - : その要素のすべてのプロパティを[継承値](/ja/docs/Web/CSS/inheritance)に変更するべきであることを指定します。 +- {{cssxref("unset")}} + - : その要素のすべてのプロパティを、既定値が inherit のものは継承値に、そうでなければ初期値に変更するべきであることを指定します。 +- {{cssxref("revert")}} + + - : 宣言が所属するスタイルシートの出所に応じて動作を指定します。 + + - [ユーザーエージェントのスタイルシート](/ja/docs/Web/CSS/Cascade#%E3%83%A6%E3%83%BC%E3%82%B6%E3%83%BC%E3%82%A8%E3%83%BC%E3%82%B8%E3%82%A7%E3%83%B3%E3%83%88%E3%82%B9%E3%82%BF%E3%82%A4%E3%83%AB%E3%82%B7%E3%83%BC%E3%83%88) + - : `unset` と同等です。 + - [ユーザーのスタイル](/ja/docs/Web/CSS/Cascade#%E3%83%A6%E3%83%BC%E3%82%B6%E3%83%BC%E3%82%B9%E3%82%BF%E3%82%A4%E3%83%AB%E3%82%B7%E3%83%BC%E3%83%88) + - : [カスケード](/ja/docs/Web/CSS/Cascade)をユーザーエージェントレベルまでロールバックし、[指定値](/ja/docs/Web/CSS/specified_value)が、その要素に対して作者レベルまたはユーザーレベルの規則が指定されていないかのように計算されるようにします。 + - [作成者のスタイル](/ja/docs/Web/CSS/Cascade#%E4%BD%9C%E6%88%90%E8%80%85%E3%82%B9%E3%82%BF%E3%82%A4%E3%83%AB%E3%82%B7%E3%83%BC%E3%83%88) + - : [カスケード](/ja/docs/Web/CSS/Cascade)をユーザーのレベルまでロールバックし、作者レベルの規則が要素に指定されていない場合は、[指定値](/ja/docs/Web/CSS/specified_value)が計算されます。 `revert` の用途では、作者のオリジンはオーバーライドおよびアニメーションのオリジンが含まれます。 + +## 公式定義 + +{{CSSInfo}} + +## 形式文法 {{csssyntax}} -<h2 id="Examples" name="Examples">例</h2> +## 例 -<h3 id="HTML">HTML</h3> +### HTML -<pre class="brush: html"><blockquote id="quote"> +```html +<blockquote id="quote"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. -</blockquote> -Phasellus eget velit sagittis.</pre> +</blockquote> +Phasellus eget velit sagittis. +``` -<h3 id="CSS">CSS</h3> +### CSS -<pre class="brush: css">body { +```css +body { font-size: small; background-color: #F0F0F0; color: blue; + margin: 0; + padding: 0; } blockquote { background-color: skyblue; color: red; } -</pre> +``` -<h3 id="Result" name="Result">結果</h3> +### 結果 -<div id="ex0" style="display: inline-block; width: 225px; vertical-align: top;"> -<h4 id="all_プロパティなし"><code>all</code> プロパティなし</h4> +#### `all` プロパティなし -<pre class="brush: html hidden"><blockquote id="quote">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</blockquote> Phasellus eget velit sagittis.</pre> +```html hidden +<blockquote id="quote">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</blockquote> Phasellus eget velit sagittis. +``` -<pre class="brush: css hidden">body { font-size: small; background-color: #F0F0F0; color:blue; } -blockquote { background-color: skyblue; color: red; }</pre> -{{EmbedLiveSample("ex0", "200", "125")}} +```css hidden +body { font-size: small; background-color: #F0F0F0; color:blue; } +blockquote { background-color: skyblue; color: red; } +``` -<p>{{HTMLElement("blockquote")}} は、特定の背景色と文字色と一緒に、ブラウザーの標準スタイルを使用します。blockquoteは<em>ブロック</em>要素のようにふるまいます。これに続くテキストはその下にあります。</p> -</div> +{{EmbedLiveSample("No_all_property", "200", "125")}} -<div id="ex1" style="display: inline-block; width: 225px; vertical-align: top;"> -<h4 id="allunset"><code>all:unset</code></h4> +{{HTMLElement("blockquote")}} は、特定の背景色と文字色と一緒に、ブラウザーの標準スタイルを使用します。これは*ブロック*要素として動作します。これに続くテキストはその下に現れます。 -<pre class="brush: html hidden"><blockquote id="quote">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</blockquote> Phasellus eget velit sagittis.</pre> +#### `all:unset` -<pre class="brush: css hidden">body { font-size: small; background-color: #F0F0F0; color:blue; } +```html hidden +<blockquote id="quote">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</blockquote> Phasellus eget velit sagittis. +``` + +```css hidden +body { font-size: small; background-color: #F0F0F0; color:blue; } blockquote { background-color: skyblue; color: red; } -blockquote { all: unset; }</pre> -{{EmbedLiveSample("ex1", "200", "125")}} +blockquote { all: unset; } +``` -<p>{{HTMLElement("blockquote")}} はブラウザーの標準スタイルを使用しません。 blockquote は<em>インライン</em>要素 (初期値) であり、 {{cssxref("background-color")}} は <code>transparent</code> (初期値) ですが、 {{cssxref("font-size")}} は <code>small</code> (継承された値) のままで、かつ {{cssxref("color")}}は<code>blue</code> (継承された値) です。</p> -</div> +{{EmbedLiveSample("allunset", "200", "125")}} + +{{HTMLElement("blockquote")}} はブラウザーの標準スタイルを使用しません。*インライン*要素 (初期値) となり、 {{cssxref("background-color")}} は `transparent` (初期値) ですが、 {{cssxref("font-size")}} は `small` (継承値) のままで、かつ {{cssxref("color")}} は `blue` (継承値) になります。 -<div id="ex2" style="display: inline-block; width: 225px; vertical-align: top;"> -<h4 id="allinitial"><code>all:initial</code></h4> +#### `all:initial` -<pre class="brush: html hidden"><blockquote id="quote">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</blockquote> Phasellus eget velit sagittis.</pre> +```html hidden +<blockquote id="quote">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</blockquote> Phasellus eget velit sagittis. +``` -<pre class="brush: css hidden">body { font-size: small; background-color: #F0F0F0; color:blue; } +```css hidden +body { font-size: small; background-color: #F0F0F0; color:blue; } blockquote { background-color: skyblue; color: red; } -blockquote { all: initial; }</pre> -{{EmbedLiveSample("ex2", "200", "125")}} +blockquote { all: initial; } +``` -<p>{{HTMLElement("blockquote")}} はブラウザーの標準スタイルを使用しません。 blockquote は<em>インライン</em>要素 (初期値) であり、{{cssxref("background-color")}}<code>はtransparent</code> (初期値)、{{cssxref("font-size")}}<code>はnormal</code> (初期値)、且つ{{cssxref("color")}}は <code>black</code> (初期値)です。</p> -</div> +{{EmbedLiveSample("allinitial", "200", "125")}} + +{{HTMLElement("blockquote")}} はブラウザーの標準スタイルを使用しません。*インライン*要素 (初期値) となり、{{cssxref("background-color")}} は `transparent` (初期値)、{{cssxref("font-size")}} は `normal` (初期値)、 {{cssxref("color")}} は `black` (初期値) になります。 -<div id="ex3" style="display: inline-block; width: 225px; vertical-align: top;"> -<h4 id="allinherit"><code>all:inherit</code></h4> +#### `all:inherit` -<pre class="brush: html hidden"><blockquote id="quote">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</blockquote> Phasellus eget velit sagittis.</pre> +```html hidden +<blockquote id="quote">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</blockquote> Phasellus eget velit sagittis. +``` -<pre class="brush: css hidden">body { font-size: small; background-color: #F0F0F0; color:blue; } +```css hidden +body { font-size: small; background-color: #F0F0F0; color:blue; } blockquote { background-color: skyblue; color: red; } -blockquote { all: inherit; }</pre> -{{EmbedLiveSample("ex3", "200", "125")}} +blockquote { all: inherit; } +``` + +{{EmbedLiveSample("allinherit", "200", "125")}} -<p>{{HTMLElement("blockquote")}} はブラウザーの標準スタイルを使用しません。blockquoteは<em>ブロック</em>要素 (blockquoteを含んでいる{{HTMLElement("div")}}から継承された値)であり、{{cssxref("background-color")}}<code>はtransparent</code>(初期値)、{{cssxref("font-size")}}<code>はsmall</code> (継承された値)、且つ {{cssxref("color")}}は<code>blue</code> (継承された値)です。</p> +{{HTMLElement("blockquote")}} はブラウザーの標準スタイルを使用しません。*ブロック*要素 (包含要素である {{HTMLElement("body")}} からの継承値)であり、 {{cssxref("background-color")}} は `#F0F0F0` (継承値)、{{cssxref("font-size")}} は `small` (継承値) {{cssxref("color")}} は `blue` (継承値) です。 </div> -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{ SpecName('CSS4 Cascade', '#all-shorthand', 'all') }}</td> - <td>{{ Spec2('CSS4 Cascade') }}</td> - <td><code>revert</code> の値を追加。</td> - </tr> - <tr> - <td>{{ SpecName('CSS3 Cascade', '#all-shorthand', 'all') }}</td> - <td>{{ Spec2('CSS3 Cascade') }}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<p>{{cssinfo}}</p> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> - -<p>{{Compat("css.properties.all")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<p>CSS のグローバルキーワード値: {{cssxref("initial")}}, {{cssxref("inherit")}}, {{cssxref("unset")}}, {{cssxref("revert")}}</p> +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +CSS のグローバルキーワード値: {{cssxref("initial")}}, {{cssxref("inherit")}}, {{cssxref("unset")}}, {{cssxref("revert")}} |