diff options
| author | Masahiro FUJIMOTO <mfujimot@gmail.com> | 2021-09-04 00:46:12 +0900 |
|---|---|---|
| committer | Masahiro FUJIMOTO <mfujimot@gmail.com> | 2021-09-04 00:46:12 +0900 |
| commit | fe6f6abf2b7c497bf1f97f73a82dde7cf48eb79f (patch) | |
| tree | 51b7edfc370236684a203f4e69ae67bb7d24b549 /files/ja/web/css | |
| parent | 04ea4edc83cc12142ed151bbea2c65cffc8e76f6 (diff) | |
| parent | eeb07fe338cdc90092841d717919f46f9d9e3ff9 (diff) | |
| download | translated-content-fe6f6abf2b7c497bf1f97f73a82dde7cf48eb79f.tar.gz translated-content-fe6f6abf2b7c497bf1f97f73a82dde7cf48eb79f.tar.bz2 translated-content-fe6f6abf2b7c497bf1f97f73a82dde7cf48eb79f.zip | |
Merge branch 'main' into 20210818-Glossary/Type
Diffstat (limited to 'files/ja/web/css')
/linear-gradient.png?h=dependabot/github_actions/actions/github-script-6&id=fe6f6abf2b7c497bf1f97f73a82dde7cf48eb79f){kind=link}
/radial_gradient.png?h=dependabot/github_actions/actions/github-script-6&id=fe6f6abf2b7c497bf1f97f73a82dde7cf48eb79f){kind=link}
61 files changed, 4406 insertions, 3121 deletions
diff --git a/files/ja/web/css/@media/any-pointer/index.html b/files/ja/web/css/@media/any-pointer/index.html deleted file mode 100644 index 63866a9862..0000000000 --- a/files/ja/web/css/@media/any-pointer/index.html +++ /dev/null @@ -1,105 +0,0 @@ ---- -title: any-pointer -slug: Web/CSS/@media/any-pointer -tags: - - '@media' - - CSS - - メディアクエリ - - メディア特性 - - リファレンス -translation_of: Web/CSS/@media/any-pointer ---- -<div>{{cssref}}</div> - -<p><a href="/ja/docs/CSS">CSS</a> の <strong><code>any-pointer</code></strong> <a href="/ja/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">メディア特性</a>は、ユーザーが (マウスなどの) <em>何かの</em>ポインティングデバイスを持っているか、もしそうならば、どれだけの正確性を持っているかを調べるために使用することができます。</p> - -<div class="note"> -<p><strong>メモ:</strong> <em>第一の</em>ポインティングデバイスの正確性を調べたい場合は、代わりに <code><a href="/ja/docs/Web/CSS/@media/pointer">pointer</a></code> を使用してください。</p> -</div> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<p><code>any-pointer</code> 特性は、以下の一覧の中から一つのキーワード値で指定します。</p> - -<dl> - <dt><code>none</code></dt> - <dd>利用できるポインティングデバイスがありません。</dd> - <dt><code>coarse</code></dt> - <dd>正確性が限定されたポインティングデバイスが、少なくとも一つ含まれています。</dd> - <dt><code>fine</code></dt> - <dd>正確性が高いポインティングデバイスが、少なくとも一つ含まれています。</dd> -</dl> - -<div class="note"> -<p><strong>メモ:</strong> 異なる性質を持つ複数の機器が利用できる場合は、複数の値に一致することがありますが、 <code>none</code> はポインティングデバイスがない場合のみ一致します。</p> -</div> - -<h2 id="Example" name="Example">例</h2> - -<p>この例は、精度の高いポインターを持つユーザーには小さなチェックボックスを、粗いポインターを持つユーザーには大きなチェックボックスを生成します。</p> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><input id="test" type="checkbox" /> -<label for="test">Look at me!</label></pre> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: css">input[type="checkbox"]:checked { - background: gray; -} - -@media (any-pointer: fine) { - input[type="checkbox"] { - -moz-appearance: none; - -webkit-appearance: none; - appearance: none; - width: 15px; - height: 15px; - border: 1px solid blue; - } -} - -@media (any-pointer: coarse) { - input[type="checkbox"] { - -moz-appearance: none; - -webkit-appearance: none; - appearance: none; - width: 30px; - height: 30px; - border: 2px solid red; - } -}</pre> - -<h3 id="Result" name="Result">結果</h3> - -<p>{{EmbedLiveSample("Example")}}</p> - -<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 Media Queries', '#descdef-media-any-pointer', 'any-pointer')}}</td> - <td>{{Spec2('CSS4 Media Queries')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> - -<p>{{Compat("css.at-rules.media.any-pointer")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/en-US/docs/Web/CSS/@media/pointer"><code>pointer</code> メディア特性</a></li> -</ul> diff --git a/files/ja/web/css/@media/any-pointer/index.md b/files/ja/web/css/@media/any-pointer/index.md new file mode 100644 index 0000000000..3610b1d54c --- /dev/null +++ b/files/ja/web/css/@media/any-pointer/index.md @@ -0,0 +1,86 @@ +--- +title: any-pointer +slug: Web/CSS/@media/any-pointer +tags: + - '@media' + - CSS + - メディアクエリー + - メディア特性 + - リファレンス +translation_of: Web/CSS/@media/any-pointer +--- +<div>{{cssref}}</div> + +**`any-pointer`** は [CSS](/ja/docs/Web/CSS) の[メディア特性](/ja/docs/Web/CSS/Media_Queries/Using_media_queries#media_features)で、ユーザーが (マウスなどの) *何らかの*ポインティングデバイスを持っているか、もしそうならば、どれだけの正確性を持っているかを調べます。 + +> **Note:** *第一の*ポインティングデバイスの正確性を調べたい場合は、代わりに [`pointer`](/ja/docs/Web/CSS/@media/pointer) を使用してください。 + +## 構文 + +`any-pointer` 特性は、以下の一覧の中から一つのキーワード値で指定します。 + +- `none` + - : 利用できるポインティングデバイスがありません。 +- `coarse` + - : 正確性が限定されたポインティングデバイスが、少なくとも一つ含まれています。 +- `fine` + - : 正確性が高いポインティングデバイスが、少なくとも一つ含まれています。 + +> **Note:** 異なる性質を持つ複数の機器が利用できる場合は、複数の値に一致することがありますが、 `none` はポインティングデバイスがない場合のみ一致します。 + +<h2 id="Examples">例</h2> + +この例は、精度の高いポインターを持つユーザーには小さなチェックボックスを、精度の低いポインターを持つユーザーには大きなチェックボックスを生成します。大きなチェックボックスは小さなチェックボックスよりも後に宣言されているので優先されます。 + +### HTML + +```html +<input id="test" type="checkbox" /> +<label for="test">Look at me!</label> +``` + +### CSS + +```css +input[type="checkbox"]:checked { + background: gray; +} + +@media (any-pointer: fine) { + input[type="checkbox"] { + -moz-appearance: none; + -webkit-appearance: none; + appearance: none; + width: 15px; + height: 15px; + border: 1px solid blue; + } +} + +@media (any-pointer: coarse) { + input[type="checkbox"] { + -moz-appearance: none; + -webkit-appearance: none; + appearance: none; + width: 30px; + height: 30px; + border: 2px solid red; + } +} +``` + +### 結果 + +{{EmbedLiveSample("Examples")}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [`pointer` メディア特性](/ja/docs/Web/CSS/@media/pointer) diff --git a/files/ja/web/css/all/index.html b/files/ja/web/css/all/index.html index f751b17f0b..242d45c7e8 100644 --- a/files/ja/web/css/all/index.html +++ b/files/ja/web/css/all/index.html @@ -42,11 +42,11 @@ all: revert; <dt>{{cssxref("revert")}}</dt> <dd>宣言が所属するスタイルシートの出所に応じて動作を指定します。 <dl> - <dt><a href="/ja/docs/Web/CSS/Cascade#User-agent_stylesheets">ユーザーエージェントのスタイルシート</a></dt> + <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#User_stylesheets">ユーザーのスタイル</a></dt> + <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#Author_stylesheets">作者のスタイル</a></dt> + <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> diff --git a/files/ja/web/css/background-color/index.html b/files/ja/web/css/background-color/index.html index 1090e44454..50dde1024a 100644 --- a/files/ja/web/css/background-color/index.html +++ b/files/ja/web/css/background-color/index.html @@ -147,7 +147,7 @@ background-color: unset;</pre> <h2 id="See_also" name="See_also">関連情報</h2> <ul> - <li><a href="/ja/docs/Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds">複数の背景</a></li> + <li><a href="/ja/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_CSS_multiple_backgrounds">複数の背景</a></li> <li>{{cssxref("<color>")}} データ型</li> <li>その他の色に関するプロパティ: {{cssxref("color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}}, {{cssxref("column-rule-color")}}</li> <li><a href="/ja/docs/Web/HTML/Applying_color">CSS を使用した HTML の要素への色の適用</a></li> diff --git a/files/ja/web/css/box-shadow/index.html b/files/ja/web/css/box-shadow/index.html index 5fb4b74744..d28db18a1e 100644 --- a/files/ja/web/css/box-shadow/index.html +++ b/files/ja/web/css/box-shadow/index.html @@ -29,7 +29,7 @@ translation_of: Web/CSS/box-shadow <p><code>box-shadow</code> プロパティで、ほぼすべての要素のフレームから影を落とすことができます。 {{cssxref("border-radius")}} が指定された場合は、影もその丸みを反映します。複数のボックスの影の重ね合わせ順は、複数の<a href="/ja/CSS/text-shadow">テキストの影</a>の場合と同様になります (最初に指定された影が最も手前に来ます)。</p> -<p><a href="/ja/docs/Web/CSS/CSS_Box_Model/Box-shadow_generator">Box-shadow generator</a> は、 <code>box-shadow</code> を対話的に作成できるツールです。</p> +<p><a href="/ja/docs/Web/CSS/CSS_Backgrounds_and_Borders/Box-shadow_generator">ボックスの影作成ツール</a>は、 <code>box-shadow</code> を対話的に作成できるツールです。</p> <h2 id="Syntax" name="Syntax">構文</h2> diff --git a/files/ja/web/css/cascade/index.html b/files/ja/web/css/cascade/index.html deleted file mode 100644 index fe6ecec340..0000000000 --- a/files/ja/web/css/cascade/index.html +++ /dev/null @@ -1,211 +0,0 @@ ---- -title: CSS カスケード入門 -slug: Web/CSS/Cascade -tags: - - CSS - - CSS カスケードと継承 - - Reference - - カスケード - - ガイド - - スタイル - - スタイルシート - - レイアウト -translation_of: Web/CSS/Cascade ---- -<div>{{CSSRef}}</div> - -<p><strong>カスケード</strong>は、異なるソースから来るプロパティ値を組み合わせる方法を定義するアルゴリズムです。これは<em>カスケーディング</em>スタイルシートという名前で強調されているように、 CSS の中心を占めるものです。<span class="seoSummary">この記事では、カスケードとは何か、 {{Glossary("CSS")}} <a href="/ja/docs/Web/API/CSSStyleDeclaration">宣言</a>をカスケードする順番、そしてウェブ開発者にどのように影響するかを説明します。</span></p> - -<h2 id="Which_CSS_entities_participate_in_the_cascade" name="Which_CSS_entities_participate_in_the_cascade">どの CSS エンティティがカスケードに関係するか</h2> - -<p>CSS 宣言のみが、つまりプロパティ/値の組だけが、カスケードに加わります。つまり、宣言以外のエンティティを含む <a href="/ja/docs/Web/CSS/At-rule">@-規則</a>、例えば<em>記述子</em>を含む {{ cssxref("@font-face")}} などは、カスケードには加わりません。これらの場合、カスケードには全体としての @-規則のみがカスケードに加わります。ここで、 <code>@font-face</code> は <code><a href="/ja/docs/Web/CSS/@font-face/font-family">font-family</a></code> 記述子で識別されます。いくつかの <code>@font-face</code> 規則に同じ記述子が定義されていた場合は、全体から見て、最も適切な <code>@font-face</code> が考慮されます。</p> - -<p>大部分の @-規則 — {{cssxref("@media")}}, {{cssxref("@document")}}, {{cssxref("@supports")}} の中など — に含まれる宣言はカスケードに加わりますが、 {{cssxref("@keyframes")}} に含まれる宣言は加わりません。 <code>@font-face</code> と同様に、 @-規則全体のみがカスケードアルゴリズムによって選択されます。</p> - -<p>最後に、 {{cssxref("@import")}} および {{cssxref("@charset")}} は特定のアルゴリズムに従い、カスケードアルゴリズムには影響を与えないことに注意してください。</p> - -<h2 id="Origin_of_CSS_declarations" name="Origin_of_CSS_declarations">CSS 宣言のオリジン</h2> - -<p>CSS カスケードアルゴリズムの役割は、 CSS プロパティの正しい値を決定するために CSS 宣言を選択することです。 CSS 宣言は、 <strong>{{anch("User-agent stylesheets", "ユーザーエージェントスタイルシート")}}</strong>, <strong>{{anch("Author stylesheets", "ページ作成者スタイルシート")}}</strong>, <strong>{{anch("User stylesheets", "ユーザースタイルシート")}}</strong> など、さまざまなものに由来します。</p> - -<p>スタイルシートはこれらの異なる起源に由来しますが、それらは範囲が重複しています。これを機能させるために、カスケードアルゴリズムはそれらの相互作用を定義します。</p> - -<h3 id="User-agent_stylesheets" name="User-agent_stylesheets">ユーザーエージェントスタイルシート</h3> - -<p>ブラウザーには、任意の文書に既定のスタイルを提供する基本的なスタイルシートがあります。これらのスタイルシートには<strong>ユーザーエージェントスタイルシート</strong>という名前が付けられています。実際のスタイルシートを使用するブラウザーもあれば、コードでシミュレートするブラウザーもありますが、最終的な結果は同じです。</p> - -<p>一部のブラウザーでは、ユーザーがユーザーエージェントスタイルシートを変更することができます。ユーザーエージェントスタイルシートに関するいくつかの制約は HTML 仕様書によって設定されていますが、ブラウザーにはまだ多くの自由度があります。つまり、ブラウザーごとに大きな違いがあります。開発プロセスを簡素化するために、ウェブ開発者は多くの場合、 CSS リセットスタイルシートを使用して、特定のニーズに合わせて変更を開始する前に、共通のプロパティ値を既知の状態にします。</p> - -<h3 id="Author_stylesheets" name="Author_stylesheets">ページ作成者スタイルシート</h3> - -<p><strong>ページ作成者スタイルシート</strong>は、スタイルシートの最も一般的な種類です。これらは、特定のウェブページまたはサイトのデザインの一部としてスタイルを定義するスタイルシートです。ページの作成者は、1つ以上のスタイルシートを使用して文書のスタイルを定義します。スタイルシートは、ウェブサイトの外観 (テーマ) を定義します。</p> - -<h3 id="User_stylesheets" name="User_stylesheets">ユーザースタイルシート</h3> - -<p>ウェブサイトのユーザー (または読者) は、ユーザーの希望に合わせて使い勝手を調整するように設計された独自の<strong>ユーザースタイルシート</strong>を使用して、多くのブラウザーでスタイルを上書きすることを選択できます。</p> - -<h2 id="Cascading_order" name="Cascading_order">カスケード順</h2> - -<p>カスケードアルゴリズムは、文書の各要素の各プロパティに適用する値を見つける方法を決定します。</p> - -<ol> - <li>最初に、さまざまな起源からすべての規則をフィルタリングして、特定の要素に適用されるルールのみを保持します。つまり、セレクターが指定された要素と一致し、適切な <code>media</code> @-規則の一部である規則を意味します。</li> - <li>次に、これらのルールをその重要度、つまり、 <code>!important</code> が後に続くかどうか、およびその起源に従って並べ替えます。カスケードは上流から下流に向けて行われます。つまり、ユーザー定義のスタイルシートによる <code>!important</code> の値は、ユーザーエージェントスタイルシートによる通常の値よりも優先されます。 - <table class="standard-table"> - <thead> - <tr> - <th scope="col"></th> - <th scope="col">起源</th> - <th scope="col">重要性</th> - </tr> - </thead> - <tbody> - <tr> - <td>1</td> - <td>ユーザーエージェント</td> - <td>normal</td> - </tr> - <tr> - <td>2</td> - <td>ユーザー</td> - <td>normal</td> - </tr> - <tr> - <td>3</td> - <td>作成者</td> - <td>normal</td> - </tr> - <tr> - <td>4</td> - <td>アニメーション</td> - <td></td> - </tr> - <tr> - <td>5</td> - <td>ユーザーエージェント</td> - <td><code>!important</code></td> - </tr> - <tr> - <td>6</td> - <td>作成者</td> - <td><code>!important</code></td> - </tr> - <tr> - <td>7</td> - <td>ユーザー</td> - <td><code>!important</code></td> - </tr> - <tr> - <td>8</td> - <td>トランジション</td> - <td></td> - </tr> - </tbody> - </table> - </li> - <li>同等の場合は、どれを選択するかに値の<a href="/ja/docs/Web/CSS/Specificity">詳細度</a>が考慮されます。</li> -</ol> - -<h2 id="Resetting_styles" name="Resetting_styles">スタイルの初期化</h2> - -<p>コンテンツのスタイルの変更が完了した後で、それ自体を既知の状態に戻す必要がある状況に陥ることがあります。アニメーションやテーマの変更などの場合に起こるかもしれません。 CSS プロパティ {{cssxref("all")}} を使用すると、 CSS 内の (ほぼ) すべてのものを既知の状態に素早く戻すことができます。</p> - -<p><code>all</code>では、すべてのプロパティを初期 (既定) 状態、前のレベルのカスケードから継承した状態、特定の起源 (ユーザーエージェントスタイルシート、作成者スタイルシート、またはユーザースタイルシート) のいずれかに直ちに復元することを選択できます。または、プロパティの値を完全にクリアすることもできます。</p> - -<h2 id="CSS_animations_and_the_cascade" name="CSS_animations_and_the_cascade">CSS アニメーションとカスケード</h2> - -<p><a href="/ja/docs/Web/CSS/CSS_Animations">CSS アニメーション</a>は、 {{cssxref("@keyframes")}} @-規則を使用して、状態間のアニメーションを定義します。キーフレームはカスケードされません。つまり、 CSS は常に単一の {{cssxref("@keyframes")}} から値を取得し、複数の値を混合することはありません。</p> - -<p>複数のキーフレームが適用された場合は、最も重要な文書で定義されている最新のものを選択しますが、すべてを組み合わせることはありません。</p> - -<h2 id="Example" name="Example">例</h2> - -<p>さまざまなオリジンにまたがる CSS の複数のソースを含む例を見てみましょう。ここには、ユーザーエージェントスタイルシート、2つの作成者スタイルシート、ユーザースタイルシート、および HTML 内のインラインスタイルがあります。</p> - -<p><strong>ユーザーエージェント CSS:</strong></p> - -<pre class="brush:css;">li { margin-left: 10px }</pre> - -<p><strong>作成者 CSS 1:</strong></p> - -<pre class="brush:css;">li { margin-left: 0 } /* 初期化のため */</pre> - -<p><strong>作成者 CSS 2:</strong></p> - -<pre class="brush:css;">@media screen { - li { margin-left: 3px } -} - -@media print { - li { margin-left: 1px } -} -</pre> - -<p><strong>ユーザー CSS:</strong></p> - -<pre class="brush:css;">.specific { margin-left: 1em }</pre> - -<p><strong>HTML:</strong></p> - -<pre class="brush:html;"><ul> - <li class="specific">1<sup>st</sup></li> - <li>2<sup>nd</sup></li> -</ul> -</pre> - -<p>この場合、 <code>li</code> および <code>.specific</code> 規則内の宣言を適用する必要があります。 <code>!important</code>として宣言されている宣言はないため、優先順位は、ユーザースタイルシートまたはユーザーエージェントスタイルシートの前の作成者スタイルシートです。</p> - -<p>ここでは3つの宣言が競合しています。</p> - -<pre class="brush:css;">margin-left: 0</pre> - -<pre class="brush:css;">margin-left: 3px</pre> - -<pre class="brush:css;">margin-left: 1px</pre> - -<p>最後のものは (画面上で) 無視され、最初の2つは同じセレクターを持つため、同じ詳細度があります。したがって、次に選択されるのは同じ詳細度のうちの最後のものです。</p> - -<pre class="brush:css;">margin-left: 3px</pre> - -<p>カスケードアルゴリズムは詳細度アルゴリズムの前に適用されるため、ユーザー CSS で定義された宣言はより高い詳細度を持ちますが、選択されないことに注意してください。</p> - -<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")}}</td> - <td>{{Spec2("CSS4 Cascade")}}</td> - <td>プロパティをカスケードレベルに戻すことができる {{CSSxRef("revert")}} キーワードを追加。</td> - </tr> - <tr> - <td>{{SpecName("CSS3 Cascade")}}</td> - <td>{{Spec2("CSS3 Cascade")}}</td> - <td>カスケードオリジンの上書を削除。 W3C 標準で使用されなかったため。</td> - </tr> - <tr> - <td>{{SpecName("CSS2.1", "cascade.html", "the cascade")}}</td> - <td>{{Spec2("CSS2.1")}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName("CSS1", "#the-cascade", "the cascade")}}</td> - <td>{{Spec2("CSS1")}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance">とても簡単な CSS カスケードの紹介</a></li> - <li>{{CSS_Key_Concepts}}</li> -</ul> diff --git a/files/ja/web/css/cascade/index.md b/files/ja/web/css/cascade/index.md new file mode 100644 index 0000000000..a1e6481a60 --- /dev/null +++ b/files/ja/web/css/cascade/index.md @@ -0,0 +1,157 @@ +--- +title: CSS カスケード入門 +slug: Web/CSS/Cascade +tags: + - CSS + - Reference + - カスケード + - ガイド + - スタイル + - スタイルシート + - レイアウト +translation_of: Web/CSS/Cascade +--- +{{CSSRef}} + +**カスケード**は、異なるソースから来るプロパティ値を組み合わせる方法を定義するアルゴリズムです。これは*カスケーディング*スタイルシートという名前で強調されているように、 CSS の中心を占めるものです。この記事では、カスケードとは何か、 {{Glossary("CSS")}} の[宣言](/ja/docs/Web/API/CSSStyleDeclaration)をカスケードする順番、そしてウェブ開発者にどのように影響するかを説明します。 + +## どの CSS エンティティがカスケードに関係するか + +CSS 宣言のみが、つまりプロパティ/値の組だけが、カスケードに加わります。つまり、宣言以外のエンティティを含む[アット規則](/ja/docs/Web/CSS/At-rule)、例えば*記述子*を含む {{ cssxref("@font-face")}} などは、カスケードには加わりません。これらの場合、カスケードには全体としてのアット規則のみがカスケードに加わります。ここで、 `@font-face` は [`font-family`](/ja/docs/Web/CSS/@font-face/font-family) 記述子で識別されます。いくつかの `@font-face` 規則に同じ記述子が定義されていた場合は、全体から見て、最も適切な `@font-face` が考慮されます。 + +大部分のアット規則 — {{cssxref("@media")}}、{{cssxref("@document")}}、{{cssxref("@supports")}} の中など — に含まれる宣言はカスケードに加わりますが、 {{cssxref("@keyframes")}} に含まれる宣言は加わりません。 `@font-face` と同様に、アット規則全体のみがカスケードアルゴリズムによって選択されます。 + +最後に、 {{cssxref("@import")}} および {{cssxref("@charset")}} は特定のアルゴリズムに従い、カスケードアルゴリズムには影響を与えないことに注意してください。 + +## CSS 宣言のオリジン + +CSS カスケードアルゴリズムの役割は、 CSS プロパティの正しい値を決定するために CSS 宣言を選択することです。 CSS 宣言は、**{{anch("User-agent stylesheets", "ユーザーエージェントスタイルシート")}}**、**{{anch("Author stylesheets", "ページ作成者スタイルシート")}}**、**{{anch("User stylesheets", "ユーザースタイルシート")}}**など、さまざまなものに由来します。 + +スタイルシートの起源はこのように異なりますが、その範囲は重複しています。これを実現するために、カスケードアルゴリズムが相互作用を定義しています。 + +### ユーザーエージェントスタイルシート + +ブラウザーには、任意の文書に既定のスタイルを提供する基本的なスタイルシートがあります。これらのスタイルシートには**ユーザーエージェントスタイルシート**と呼ばれています。実際のスタイルシートを使用するブラウザーもあれば、コードでシミュレートするブラウザーもありますが、最終的な結果は同じです。 + +ブラウザーによっては、ユーザーがユーザーエージェントスタイルシートを変更することができます。ユーザーエージェントスタイルシートに関するいくつかの制約は HTML 仕様書によって設定されていますが、ブラウザーにはまだ多くの自由度があります。つまり、ブラウザーごとに大きな違いがあります。開発プロセスを簡素化するために、ウェブ開発者は多くの場合、 CSS リセットスタイルシートを使用して、特定のニーズに合わせて変更を開始する前に、共通のプロパティ値を既知の状態にします。 + +### 作成者スタイルシート + +**作成者スタイルシート**は、スタイルシートの最も一般的な種類です。これらは、特定のウェブページまたはサイトのデザインの一部としてスタイルを定義するスタイルシートです。ページの作成者は、1つ以上のスタイルシートを使用して文書のスタイルを定義します。スタイルシートは、ウェブサイトの外観 (テーマ) を定義します。 + +### ユーザースタイルシート + +ウェブサイトのユーザー (または読者) は、ユーザーの希望に合わせて使い勝手を調整するように設計された独自の**ユーザースタイルシート**を使用して、多くのブラウザーでスタイルを上書きすることを選択できます。 + +## カスケード順 + +カスケードアルゴリズムは、文書の各要素の各プロパティに適用する値を見つける方法を決定します。 + +1. 最初に、さまざまな起源からすべての規則をフィルタリングして、特定の要素に適用されるルールのみを保持します。つまり、セレクターが指定された要素と一致し、適切な `media` アット規則の一部である規則を意味します。 +2. 次に、これらの規則をその重要度、つまり、 `!important` が後に続くかどうか、およびその起源に従って並べ替えます。カスケードは上流から下流に向けて行われます。つまり、ユーザー定義のスタイルシートによる `!important` の値は、ユーザーエージェントスタイルシートによる通常の値よりも優先されます。 + + | | 起源 | 重要度 | + | --- | -------------------- | ------------ | + | 1 | ユーザーエージェント | 通常 | + | 2 | ユーザー | 通常 | + | 3 | 作成者 | 通常 | + | 4 | アニメーション | | + | 5 | 作成者 | `!important` | + | 6 | ユーザー | `!important` | + | 7 | ユーザーエージェント | `!important` | + | 8 | トランジション | | + +3. 同等の場合は、[詳細度](/ja/docs/Web/CSS/Specificity)を考慮してどれを選択するかを考慮します。 + +## スタイルの初期化 + +コンテンツがスタイルの変更を終えた後、スタイルを既知の状態に戻す必要が出てくることがあります。これは、アニメーションやテーマの変更などの場合に起こります。 CSS プロパティの {{cssxref("all")}} を使うと、 CSS 内の (ほぼ) すべてのものを既知の状態に素早く戻すことができます。 + +`all` では、すべてのプロパティを、初期状態 (既定)、カスケードの前のレベルから引き継いだ状態、特定のオリジン (ユーザーエージェントスタイルシート、作成者スタイルシート、ユーザースタイルシート)、さらにはプロパティの値を完全にクリアする状態のいずれかにすぐに戻すことができます。 + +## CSS アニメーションとカスケード + +[CSS アニメーション](/ja/docs/Web/CSS/CSS_Animations)は、 {{cssxref("@keyframes")}} アット規則を使用して、状態間のアニメーションを定義します。キーフレームはカスケードされません。つまり、 CSS は常に単一の {{cssxref("@keyframes")}} から値を取得し、複数の値を混在させることはありません。 + +複数のキーフレームが適用された場合は、最も重要な文書で定義されている最新のものを選択しますが、すべてを組み合わせることはありません。 + +## 例 + +さまざまなオリジンにまたがる CSS の複数のソースを含む例を見てみましょう。ここには、ユーザーエージェントスタイルシート、 2 つの作成者スタイルシート、ユーザースタイルシート、および HTML 内のインラインスタイルがあります。 + +**ユーザーエージェント CSS:** + +```css +li { margin-left: 10px } +``` + +**作成者 CSS 1:** + +```css +li { margin-left: 0 } /* これは初期化 */ +``` + +**作成者 CSS 2:** + +```css +@media screen { + li { margin-left: 3px } +} + +@media print { + li { margin-left: 1px } +} +``` + +**ユーザー CSS:** + +```css +.specific { margin-left: 1em } +``` + +**HTML:** + +```html +<ul> + <li class="specific">1<sup>st</sup></li> + <li>2<sup>nd</sup></li> +</ul> +``` + +この場合、 `li` および `.specific` 規則内の宣言を適用する必要があります。 `!important`として宣言されている宣言はないため、優先順位は、ユーザースタイルシートまたはユーザーエージェントスタイルシートの前の作成者スタイルシートです。 + +ここでは 3 つの宣言が競合しています。 + +```css +margin-left: 0 +``` + +```css +margin-left: 3px +``` + +```css +margin-left: 1px +``` + +最後のものは (画面上で) 無視され、最初の 2 つは同じセレクターを持つため、同じ詳細度があります。したがって、次に選択されるのは同じ詳細度のうちの最後のものです。 + +```css +margin-left: 3px +``` + +カスケードアルゴリズムは詳細度アルゴリズムの前に適用されるため、ユーザー CSS で定義された宣言はより高い詳細度を持ちますが、選択されないことに注意してください。 + +## 仕様書 + +| 仕様書 | 状態 | コメント | +| ------------------------------------------------------------------------ | -------------------------------- | ----------------------------------------------------------------------------------------------------- | +| {{SpecName("CSS4 Cascade")}} | {{Spec2("CSS4 Cascade")}} | プロパティをカスケードレベルに戻すことができる {{CSSxRef("revert")}} キーワードを追加。 | +| {{SpecName("CSS3 Cascade")}} | {{Spec2("CSS3 Cascade")}} | カスケードオリジンの上書きを削除。 W3C 標準で使用されなかったため。 | +| {{SpecName("CSS2.1", "cascade.html", "the cascade")}} | {{Spec2("CSS2.1")}} | | +| {{SpecName("CSS1", "#the-cascade", "the cascade")}} | {{Spec2("CSS1")}} | 初回定義 | + +## 関連情報 + +- [とても簡単な CSS カスケードの紹介](/ja/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance) +- {{CSS_Key_Concepts}} diff --git a/files/ja/web/css/color-scheme/index.md b/files/ja/web/css/color-scheme/index.md new file mode 100644 index 0000000000..48121555dd --- /dev/null +++ b/files/ja/web/css/color-scheme/index.md @@ -0,0 +1,85 @@ +--- +title: color-scheme +slug: Web/CSS/color-scheme +tags: + - CSS + - CSS Colors + - CSS Property + - HTML Colors + - HTML Styles + - Layout + - Reference + - Styling HTML + - Styling text + - Web + - color-adjust + - recipe:css-property +browser-compat: css.properties.color-scheme +translation_of: Web/CSS/color-scheme +--- +{{CSSRef}} + +**`color-scheme`** は CSS のプロパティで、要素がどのような配色で快適に表示されるかを示すことができます。 + +オペレーティングシステムの配色の一般的な選択肢は、「ライト」と「ダーク」、または「中間モード」と「夜モード」です。ユーザーがこれらの配色のいずれかを選択すると、 OS はユーザーインターフェースを調整します。これには、フォームコントロール、スクロールバー、および CSS システムカラーの使用値が含まれます。 + +## 構文 + +```css +color-scheme: normal; +color-scheme: light; +color-scheme: dark; +color-scheme: light dark; + +/* グローバル値 */ +color-scheme: inherit; +color-scheme: initial; +color-scheme: revert; +color-scheme: unset; +``` + +`color-scheme` プロパティの値は以下のキーワードのうちの一つである必要があります。 + +### 値 + +- `normal` + - : この要素がどの配色も認識しないため、ブラウザーの既定の配色でレンダリングするべきであることを示します。 +- `light` + - : オペレーティングシステムのライト配色を使用して要素をレンダリングできることを示します。 +- `dark` + - : オペレーティングシステムのダーク配色を使用して要素をレンダリングできることを示します。 + +## 公式定義 + +{{cssinfo}} + +## 形式文法 + +{{csssyntax}} + +## 例 + +### 配色への適合 + +ページ全体をユーザーの配色設定に合わせるには、 `color-scheme` を {{cssxref(":root")}} 要素で設定してください。 + +```css +:root { + color-scheme: light dark; +} +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [CSS を使った HTML の要素への色の適用](/ja/docs/Web/HTML/Applying_color) +- その他の色に関するプロパティ: {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}}, {{cssxref("column-rule-color")}} +- {{cssxref("background-image")}} +- {{cssxref("-webkit-print-color-adjust")}} diff --git a/files/ja/web/css/css_background_and_borders/border-image_generator/index.html b/files/ja/web/css/css_backgrounds_and_borders/border-image_generator/index.html index 8ce5bab6e9..521db7ba49 100644 --- a/files/ja/web/css/css_background_and_borders/border-image_generator/index.html +++ b/files/ja/web/css/css_backgrounds_and_borders/border-image_generator/index.html @@ -1,11 +1,12 @@ --- title: 境界画像作成ツール -slug: Web/CSS/CSS_Background_and_Borders/Border-image_generator +slug: Web/CSS/CSS_Backgrounds_and_Borders/Border-image_generator tags: - CSS - CSS 背景と境界 - ツール translation_of: Web/CSS/CSS_Background_and_Borders/Border-image_generator +original_slug: Web/CSS/CSS_Background_and_Borders/Border-image_generator --- <p>このツールを使用して、 CSS3 の {{cssxref("border-image")}} の値を作成できます。</p> diff --git a/files/ja/web/css/css_backgrounds_and_borders/border-image_generator/index.md b/files/ja/web/css/css_backgrounds_and_borders/border-image_generator/index.md new file mode 100644 index 0000000000..a986269354 --- /dev/null +++ b/files/ja/web/css/css_backgrounds_and_borders/border-image_generator/index.md @@ -0,0 +1,11 @@ +--- +title: 境界画像作成ツール +slug: Web/CSS/CSS_Backgrounds_and_Borders/Border-image_generator +tags: + - CSS + - ツール +translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Border-image_generator +--- +このツールを使用して、 CSS3 の {{cssxref("border-image")}} の値を作成できます。 + +{{EmbedGHLiveSample("css-examples/tools/border-image-generator/", '100%', 1200)}} diff --git a/files/ja/web/css/css_background_and_borders/border-radius_generator/index.html b/files/ja/web/css/css_backgrounds_and_borders/border-radius_generator/index.html index 4ce39890a7..cec4217518 100644 --- a/files/ja/web/css/css_background_and_borders/border-radius_generator/index.html +++ b/files/ja/web/css/css_backgrounds_and_borders/border-radius_generator/index.html @@ -1,12 +1,13 @@ --- title: Border-radius ジェネレーター -slug: Web/CSS/CSS_Background_and_Borders/Border-radius_generator +slug: Web/CSS/CSS_Backgrounds_and_Borders/Border-radius_generator tags: - CSS - CSS Borders - CSS 境界と背景 - Tools translation_of: Web/CSS/CSS_Background_and_Borders/Border-radius_generator +original_slug: Web/CSS/CSS_Background_and_Borders/Border-radius_generator --- <p>このツールは CSS3 の {{cssxref("border-radius")}} の効果を生成するために使用することができます。</p> diff --git a/files/ja/web/css/css_backgrounds_and_borders/border-radius_generator/index.md b/files/ja/web/css/css_backgrounds_and_borders/border-radius_generator/index.md new file mode 100644 index 0000000000..878cf642be --- /dev/null +++ b/files/ja/web/css/css_backgrounds_and_borders/border-radius_generator/index.md @@ -0,0 +1,12 @@ +--- +title: 境界角丸作成ツール +slug: Web/CSS/CSS_Backgrounds_and_Borders/Border-radius_generator +tags: + - CSS + - CSS Borders + - Tools +translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Border-radius_generator +--- +このツールを使用して、 CSS3 の {{cssxref("border-radius")}} の効果を生成することができます。 + +{{EmbedGHLiveSample("css-examples/tools/border-radius-generator/", '100%', 900)}} diff --git a/files/ja/web/css/css_backgrounds_and_borders/box-shadow_generator/index.md b/files/ja/web/css/css_backgrounds_and_borders/box-shadow_generator/index.md new file mode 100644 index 0000000000..963bf61cb4 --- /dev/null +++ b/files/ja/web/css/css_backgrounds_and_borders/box-shadow_generator/index.md @@ -0,0 +1,32 @@ +--- +title: ボックスの影作成ツール +slug: Web/CSS/CSS_Backgrounds_and_Borders/Box-shadow_generator +tags: + - CSS + - Tools + - box-shadow +translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Box-shadow_generator +--- +このツールで CSS の {{cssxref("box-shadow")}} 効果を組み立てて、 CSS オブジェクトにボックスの影の効果を追加することができます。 + +{{EmbedGHLiveSample("css-examples/tools/box-shadow-generator/", '100%', 900)}} + +ボックスの影作成ツールは、 1 つまたは複数のボックスの影を要素に追加することができます。 + +ツールを開くと、右上の部分に四角形があります。これがシャドウを適用する対象となる要素です。この要素が選択されている状態 (ページを最初に読み込んだときの状態) では、基本的なスタイルを適用することができます。 + +- カラーピッカーツールを使って、要素の {{cssxref("color")}} を設定しましょう。 +- "border" チェックボックスを使って、要素の {{cssxref("border")}} をつけましょう。 +- スライダーを使って、要素の {{cssxref("top")}}, {{cssxref("left")}}, {{cssxref("width")}}, {{cssxref("height")}} の各プロパティを設定しましょう。 + +ボックスの影を追加するには、左上の「+」ボタンをクリックしてください。これで影を追加し、左側の列に並べます。それで新しい影の値を設定することができるようになります。 + +- カラーピッカーツールを使って、影の {{cssxref("color")}} を設定しましょう。 +- "inset" チェックボックスを使って、影が内側になるようにしましょう。 +- スライダーを使って、影の位置、ぼかし、広がりを設定しましょう。 + +他の影を追加するには、「+」をまたクリックしてください。ここで設定した値は、この新しい影にも適用されます。左上の↑と↓のボタンで、 2 つの影の適用順を変更します。左側の列で最初の影をクリックして再度選択してください。要素のスタイルを更新するには、要素を選択し、上部にある「element」というボタンをクリックします。 + +要素に {{cssxref("::before")}} と {{cssxref("::after")}} の擬似要素を追加して、ボックスの影を付けることもできます。要素とその擬似要素を切り替えるには、上部にある「element」「:before」「:after」と書かれたボタンを使います。 + +右下のボックスには、要素と `before::` または `::after` 擬似要素の CSS が表示されます。 diff --git a/files/ja/web/css/css_backgrounds_and_borders/index.html b/files/ja/web/css/css_backgrounds_and_borders/index.html index 6e43c5ab15..43b9ab080f 100644 --- a/files/ja/web/css/css_backgrounds_and_borders/index.html +++ b/files/ja/web/css/css_backgrounds_and_borders/index.html @@ -74,11 +74,11 @@ translation_of: Web/CSS/CSS_Backgrounds_and_Borders <dd>背景画像の拡大縮小や繰り返しを変更する方法を説明します。</dd> <dt><a href="/ja/docs/Web/HTML/Applying_color">CSS を使った HTML の要素への色の適用</a></dt> <dd>CSS の色が境界を含む HTML でどのように使われるかを概観します。</dd> - <dt><a href="/ja/docs/Web/CSS/CSS_Background_and_Borders/Border-image_generator">境界画像作成ツール</a></dt> + <dt><a href="/ja/docs/Web/CSS/CSS_Backgrounds_and_Borders/Border-image_generator">境界画像作成ツール</a></dt> <dd>境界画像 ({{cssxref("border-image")}} プロパティ) を見ながら作ることができる対話型のツールです。</dd> - <dt><a href="/ja/docs/Web/CSS/CSS_Background_and_Borders/Border-radius_generator">境界角丸作成ツール</a></dt> + <dt><a href="/ja/docs/Web/CSS/CSS_Backgrounds_and_Borders/Border-radius_generator">境界角丸作成ツール</a></dt> <dd>角の丸み ({{cssxref("border-radius")}} プロパティ) を見ながら作ることができる対話型のツールです。</dd> - <dt><a href="/ja/docs/Web/CSS/CSS_Box_Model/Box-shadow_generator">ボックスの影作成ツール</a></dt> + <dt><a href="/ja/docs/Web/CSS/CSS_Backgrounds_and_Borders/Box-shadow_generator">ボックスの影作成ツール</a></dt> <dd>要素の背後の影 ({{cssxref("box-shadow")}} プロパティ) を見ながら作ることができる対話型のツールです。</dd> </dl> diff --git a/files/ja/web/css/css_flow_layout/index.html b/files/ja/web/css/css_flow_layout/index.html index a16c0cbd4f..3021ce3f4a 100644 --- a/files/ja/web/css/css_flow_layout/index.html +++ b/files/ja/web/css/css_flow_layout/index.html @@ -43,7 +43,7 @@ translation_of: Web/CSS/CSS_Flow_Layout <li>{{Glossary("Block/CSS", "ブロック (CSS)")}}</li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/ja/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/ja/docs/Web/CSS/Reference"><strong>CSS リファレンス</strong></a></li> diff --git a/files/ja/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.html b/files/ja/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.html index b6a71891c9..118bc26766 100644 --- a/files/ja/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.html +++ b/files/ja/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.html @@ -554,7 +554,7 @@ dd { <p>It may be that you come up with your own use cases for auto-placement or any other part of grid layout. If you do, raise them as issues or add to an existing issue that could solve your use case. This will help to make future versions of the specification better.</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/ja/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/ja/docs/Web/CSS/Reference"><strong>CSS リファレンス</strong></a></li> diff --git a/files/ja/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html b/files/ja/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html index 0037394932..667917d069 100644 --- a/files/ja/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html +++ b/files/ja/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html @@ -664,7 +664,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout <h2 id="Subnav">Subnav</h2> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/ja/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/ja/docs/Web/CSS/Reference"><strong>CSS リファレンス</strong></a></li> diff --git a/files/ja/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html b/files/ja/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html index 536a0e931a..3f83a21dbd 100644 --- a/files/ja/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html +++ b/files/ja/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html @@ -648,7 +648,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout <p><code>margin-right</code> または <code>margin-left</code> で自動マージンを使用した場合、および <code>top</code> 、<code>right</code> 、<code>bottom</code> 、<code>left</code> を使って位置を絶対指定した場合、書字方向が尊重されません。次のガイドでは、CSS グリッドレイアウト・ボックス配置と書字方向の間における相互作用を見ていきます。複数の言語で表示するサイトを開発したり、言語や書字方向を混ぜたサイトをデザインするなら、非常に役立つでしょう。</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/ja/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/ja/docs/Web/CSS/Reference"><strong>CSS リファレンス</strong></a></li> diff --git a/files/ja/web/css/css_grid_layout/index.html b/files/ja/web/css/css_grid_layout/index.html index 77237096cf..59e1592ef5 100644 --- a/files/ja/web/css/css_grid_layout/index.html +++ b/files/ja/web/css/css_grid_layout/index.html @@ -206,7 +206,7 @@ translation_of: Web/CSS/CSS_Grid_Layout <h2 id="Subnav">Subnav</h2> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/ja/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/ja/docs/Web/CSS/Reference"><strong>CSS リファレンス</strong></a></li> diff --git a/files/ja/web/css/css_grid_layout/layout_using_named_grid_lines/index.html b/files/ja/web/css/css_grid_layout/layout_using_named_grid_lines/index.html index 6358de6b22..5f67402f98 100644 --- a/files/ja/web/css/css_grid_layout/layout_using_named_grid_lines/index.html +++ b/files/ja/web/css/css_grid_layout/layout_using_named_grid_lines/index.html @@ -436,7 +436,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines <p>That’s all I need. I don’t need to do any calculations, grid automatically removed my 10 pixel gutter track before assigning the space to the <code>1fr</code> column tracks. As you start to build out your own layouts, you will find that the syntax becomes more familiar and you choose the ways that work best for you and the type of projects you like to build. Try building some common patterns with these various methods, and you will soon find your most productive way to work. Then, in the next guide we will look at how grid can position items for us - without us needing to use placement properties at all!</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/ja/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/ja/docs/Web/CSS/Reference"><strong>CSS リファレンス</strong></a></li> diff --git a/files/ja/web/css/css_grid_layout/relationship_of_grid_layout/index.html b/files/ja/web/css/css_grid_layout/relationship_of_grid_layout/index.html index 2650339665..476cf929bf 100644 --- a/files/ja/web/css/css_grid_layout/relationship_of_grid_layout/index.html +++ b/files/ja/web/css/css_grid_layout/relationship_of_grid_layout/index.html @@ -574,7 +574,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout <li><a href="/ja/docs/Web/CSS/CSS_Columns">段組みレイアウトガイド</a></li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/ja/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/ja/docs/Web/CSS/Reference"><strong>CSS リファレンス</strong></a></li> diff --git a/files/ja/web/css/filter/index.html b/files/ja/web/css/filter/index.html deleted file mode 100644 index 35e7ac52bf..0000000000 --- a/files/ja/web/css/filter/index.html +++ /dev/null @@ -1,1138 +0,0 @@ ---- -title: filter -slug: Web/CSS/filter -tags: - - CSS - - CSS プロパティ - - Reference - - SVG - - SVG フィルター - - filter - - フィルター効果 -translation_of: Web/CSS/filter ---- -<div>{{CSSRef}}</div> - -<p><span class="seoSummary"><strong><code>filter</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、ぼかしや色変化などのグラフィック効果を要素に適用します。フィルターは画像、背景、境界の描画を調整するためによく使われます。</span></p> - -<p>CSS 標準に含まれているものは、定義済みの効果を実現するためのいくつかの関数です。 <a href="/ja/docs/Web/SVG/Element/filter">SVG フィルター要素</a>への URL で SVG フィルターを参照することもできます。</p> - -<div>{{EmbedInteractiveExample("pages/css/filter.html")}}</div> - -<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush:css no-line-numbers notranslate">/* SVG フィルターへの URL */ -filter: url("filters.svg#filter-id"); - -/* <filter-function> 値 */ -filter: blur(5px); -filter: brightness(0.4); -filter: contrast(200%); -filter: drop-shadow(16px 16px 20px blue); -filter: grayscale(50%); -filter: hue-rotate(90deg); -filter: invert(75%); -filter: opacity(25%); -filter: saturate(30%); -filter: sepia(60%); - -/* 複数のフィルター */ -filter: contrast(175%) brightness(3%); - -/* フィルターを使用しない */ -filter: none; - -/* グローバル値 */ -filter: inherit; -filter: initial; -filter: unset; -</pre> - -<p>次のように関数と共に使用してください。</p> - -<pre class="syntaxbox notranslate">filter: <filter-function> [<filter-function>]* | none -</pre> - -<p>SVG の {{SVGElement("filter")}} 要素への参照の場合は、次のようにしてください。</p> - -<pre class="syntaxbox notranslate">filter: url(file.svg#filter-element-id) -</pre> - -<h3 id="Interpolation" name="Interpolation">補間</h3> - -<p>最初のフィルターと最後のフィルターの両方が同じ長さの関数リストであり、 {{cssxref("<url>")}} を持たない場合、それぞれのフィルター関数はその固有の規則に従って補間されます。長さが異なる場合は、長い方のリストから欠落している等価なフィルター関数が、空白値を使って短い方のリストの最後に追加され、すべてのフィルター関数がその固有の規則に従って補間されます。一方のフィルターが <code>none</code> である場合は、フィルター関数の既定値を用いて、もう一方のフィルター関数のリストに置き換えられ、すべてのフィルター関数がその固有の規則に従って補間されます。それ以外の場合は、離散補間が使用されます。</p> - -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> - -{{csssyntax}} - -<h2 id="Examples" name="Examples">例</h2> - -<p>定義済み関数を使用した例が以下にあります。個別の例についてはそれぞれの関数を参照してください。</p> - -<pre class="brush: css notranslate">.mydiv { - filter: grayscale(50%); -} - -/* Gray all images by 50% and blur by 10px */ -img { - filter: grayscale(0.5) blur(10px); -}</pre> - -<p>URL 関数を使用して SVG リソースを使用した例は以下の通りです。</p> - -<pre class="brush: css notranslate">.target { - filter: url(#c1); -} - -.mydiv { - filter: url(commonfilters.xml#large-blur); -} -</pre> - -<h2 id="Functions" name="Functions">関数</h2> - -<p><code>filter</code> プロパティは <code>none</code> または以下にある関数を一つ以上使って指定します。いずれかの関数の引数が妥当でない場合、関数は <code>none</code> を返します。特に示す場合を除いて、パーセント記号付きの値 (<code>34%</code> など) を取る関数は、10進数の値 (<code>0.34</code> など) も受け付けます。</p> - -<p>単一の <code>filter</code> プロパティに2つ以上の関数を指定した場合、同じフィルター関数を2つ以上の <code>filter</code> プロパティに別々に適用した場合とは異なる結果になります。</p> - -<h3 id="SVG_filter" name="SVG_filter">SVG フィルター</h3> - -<h4 id="url">url()</h4> - -<p>外部 XML ファイルに埋め込むことができる <a href="/ja/docs/Web/SVG/Element/filter">SVG フィルター</a>を指す URI を取ります。</p> - -<pre class="brush: css notranslate">filter: url(resources.svg#c1) -</pre> - -<h3 id="Filter_functions" name="Filter_functions">フィルター関数</h3> - -<h4 id="blur">blur()</h4> - -<p>{{cssxref("filter-function/blur", "blur()")}} 関数は、入力画像にガウスぼかしを適用します。 <code>radius</code> の値は、ガウス関数の標準偏差の値、つまり画面上のいくつのピクセルが互いに溶け込むかを定義します。補間のための空白値は <code>0</code> です。 この引数は CSS の長さとして指定されますが、パーセント値は受け付けません。</p> - -<pre class="brush: css notranslate">filter: blur(5px) -</pre> - -<div id="blur_example" class="hidden"> -<pre class="brush: html notranslate"> <table class="standard-table"> - <thead> - <tr> - <th style="text-align: left;" scope="col">元の画像</th> - <th style="text-align: left;" scope="col">ライブ例</th> - <th style="text-align: left;" scope="col">同等の SVG</th> - <th style="text-align: left;" scope="col">画像による例</th> - </tr> - </thead> - <tbody> - <tr> - <td><img alt="Test_Form.jpg" id="img1" class="internal default" src="/files/3710/Test_Form_2.jpg" style="width: 100%;" /></td> - <td><img alt="Test_Form.jpg" id="img2" class="internal default" src="/files/3710/Test_Form_2.jpg" style="width: 100%;" /></td> - <td> - <div class="svg-container"> - <svg id="img3" overflow="visible" viewbox="0 0 212 161" color-interpolation-filters="sRGB"> - <filter id="svgBlur" x="-5%" y="-5%" width="110%" height="110%"> - <feGaussianBlur in="SourceGraphic" stdDeviation="3.5"/> - </filter> - <image xlink:href="/files/3710/Test_Form_2.jpeg" filter="url(#svgBlur)" width="212px" height="161px"/> - </svg> - </div> - </td> - <td><img alt="Test_Form_s.jpg" id="img4" class="internal default" src="/files/3711/Test_Form_2_s.jpg" style="width: 100%;" /></td> - </tr> - </tbody> -</table></pre> - -<pre class="brush: css notranslate">html { - height:100%; -} -body { - font: 14px/1.286 "Lucida Grande", "Lucida Sans Unicode", "DejaVu Sans", Lucida, Arial, Helvetica, sans-serif; - color: rgb(51, 51, 51); - height:100%; - overflow:hidden; -} -#img2 { - width:100%; - height:auto; - -webkit-filter:blur(5px); - -ms-filter:blur(5px); - filter:blur(5px); } -table.standard-table { - border: 1px solid rgb(187, 187, 187); - border-collapse: collapse; - border-spacing: 0; - margin: 0 0 1.286em; - height: 100%; - width: 85%; -} -table.standard-table th { - border: 1px solid rgb(187, 187, 187); - padding: 0px 5px; - background: none repeat scroll 0% 0% rgb(238, 238, 238); - text-align: left; - font-weight: bold; -} -table.standard-table td { - padding: 5px; - border: 1px solid rgb(204, 204, 204); - text-align: left; - vertical-align: top; - width:25%; - height:auto; -} -#img3 { - height:100%; -} -</pre> -</div> - -<pre class="brush: html notranslate"><svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg"> - <filter id="svgBlur" x="-5%" y="-5%" width="110%" height="110%"> - <feGaussianBlur in="SourceGraphic" stdDeviation="5"/> - </filter> -</svg></pre> - -<div>{{EmbedLiveSample('blur_example','100%','236px','','', 'no-codepen')}}</div> - -<h4 id="brightness">brightness()</h4> - -<p>{{cssxref("filter-function/brightness", "brightness()")}} 関数は、入力画像に線形乗数を適用して明るさを明るくしたり暗くしたりします。 <code>0%</code> の値を設定すると、完全な黒の画像が作成されます。 <code>100%</code> の値を指定すると、入力は変更されません。その他の値は効果の線形乗数です。 <code>100%</code> を超える値が許されており、より明るい結果が得られます。補間時の空白値は <code>1</code> です。</p> - -<pre class="brush: css notranslate">filter: brightness(2)</pre> - -<pre class="brush: html notranslate"><svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg"> - <filter id="brightness"> - <feComponentTransfer> - <feFuncR type="linear" slope="[amount]"/> - <feFuncG type="linear" slope="[amount]"/> - <feFuncB type="linear" slope="[amount]"/> - </feComponentTransfer> - </filter> -</svg></pre> - -<div id="brightness_example" class="hidden"> -<pre class="brush: html notranslate"><table class="standard-table"> - <thead> - <tr> - <th style="text-align: left;" scope="col">元の画像</th> - <th style="text-align: left;" scope="col">ライブ例</th> - <th style="text-align: left;" scope="col">同等の SVG</th> - <th style="text-align: left;" scope="col">画像による例</th> - </tr> - </thead> - <tbody> - <tr> - <td><img alt="Test_Form.jpg" id="img1" class="internal default" src="/files/3708/Test_Form.jpg" style="width: 100%;" /></td> - <td><img alt="Test_Form.jpg" id="img2" class="internal default" src="/files/3708/Test_Form.jpg" style="width: 100%;" /></td> - <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 286 217" color-interpolation-filters="sRGB"> - <filter id="brightness"> - <feComponentTransfer> - <feFuncR type="linear" slope="2"/> - <feFuncG type="linear" slope="2"/> - <feFuncB type="linear" slope="2"/> - </feComponentTransfer> - </filter> - <image xlink:href="/files/3708/Test_Form.jpg" filter="url(#brightness)" width="286px" height="217px" /> -</svg><div></td> - <td><img alt="Test_Form_s.jpg" id="img4" class="internal default" src="/files/3709/Test_Form_s.jpg" style="width: 100%;" /></td> - </tr> - </tbody> -</table> -</pre> - -<pre class="brush: css notranslate">html { - height:100%; -} -body { - font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif; - color: rgb(51, 51, 51); - height:100%; - overflow:hidden; -} -#img2 { - width:100%; - height:auto; - -moz-filter:brightness(2); - -webkit-filter:brightness(2); - -ms-filter:brightness(2); - filter:brightness(2); } -table.standard-table { - border: 1px solid rgb(187, 187, 187); - border-collapse: collapse; - border-spacing: 0px; - margin: 0px 0px 1.286em; - height:100%; - width: 85%; -} -table.standard-table th { - border: 1px solid rgb(187, 187, 187); - padding: 0px 5px; - background: none repeat scroll 0% 0% rgb(238, 238, 238); - text-align: left; - font-weight: bold; -} -table.standard-table td { - padding: 5px; - border: 1px solid rgb(204, 204, 204); - text-align: left; - vertical-align: top; - width:25%; - height:auto; -} -#img3 { - height:100%; -} -</pre> -</div> - -<p>{{EmbedLiveSample('brightness_example','100%','231px','','', 'no-codepen')}}</p> - -<h4 id="contrast">contrast()</h4> - -<p>{{cssxref("filter-function/contrast", "contrast()")}} 関数は、入力画像のコントラストを調整します。 <code>0%</code> の値を指定すると完全にグレーの画像が作成されます。 <code>100%</code> の値を指定すると、入力画像は変更されません。 <code>100%</code> を超える値を指定すると、よりコントラストの高い結果が得られます。補完時の空白値は <code>1</code> です。</p> - -<pre class="brush: css notranslate">filter: contrast(200%) -</pre> - -<pre class="brush: html notranslate"><svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg"> - <filter id="contrast"> - <feComponentTransfer> - <feFuncR type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/> - <feFuncG type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/> - <feFuncB type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/> - </feComponentTransfer> - </filter> -</svg> -</pre> - -<div id="contrast_example" class="hidden"> -<pre class="brush: html notranslate"><table class="standard-table"> - <thead> - <tr> - <th style="text-align: left;" scope="col">元の画像</th> - <th style="text-align: left;" scope="col">ライブ例</th> - <th style="text-align: left;" scope="col">同等の SVG</th> - <th style="text-align: left;" scope="col">画像による例</th> - </tr> - </thead> - <tbody> - <tr> - <td><img alt="Test_Form_3.jpeg" id="img1" class="internal default" src="/files/3712/Test_Form_3.jpeg" style="width: 100%;" /></td> - <td><img alt="Test_Form_3.jpg" id="img2" class="internal default" src="/files/3712/Test_Form_3.jpeg" style="width: 100%;" /></td> - <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 240 151" color-interpolation-filters="sRGB"> - <filter id="contrast"> - <feComponentTransfer> - <feFuncR type="linear" slope="2" intercept="-0.5"/> - <feFuncG type="linear" slope="2" intercept="-0.5"/> - <feFuncB type="linear" slope="2" intercept="-0.5"/> - </feComponentTransfer> - </filter> - <image xlink:href="/files/3712/Test_Form_3.jpeg" filter="url(#contrast)" width="240px" height="151px" /> -</svg><div></td> - <td><img alt="Test_Form_s.jpg" id="img4" class="internal default" src="/files/3713/Test_Form_3_s.jpg" style="width: 100%;" /></td> - </tr> - </tbody> -</table> -</pre> - -<pre class="brush: css notranslate">html { - height:100%; -} -body { - font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif; - color: rgb(51, 51, 51); - height:100%; - overflow:hidden; -} -#img2 { - width:100%; - height:auto; - -moz-filter:contrast(200%); - -webkit-filter:contrast(200%); - -ms-filter:contrast(200%); - filter:contrast(200%); } -table.standard-table { - border: 1px solid rgb(187, 187, 187); - border-collapse: collapse; - border-spacing: 0px; - margin: 0px 0px 1.286em; - width: 85%; - height: 100%; -} -table.standard-table th { - border: 1px solid rgb(187, 187, 187); - padding: 0px 5px; - background: none repeat scroll 0% 0% rgb(238, 238, 238); - text-align: left; - font-weight: bold; -} -table.standard-table td { - padding: 5px; - border: 1px solid rgb(204, 204, 204); - text-align: left; - vertical-align: top; - width:25%; - height:auto; -} -#img3 { - height:100%; -} -</pre> -</div> - -<div>{{EmbedLiveSample('contrast_example','100%','203px','','', 'no-codepen')}}</div> - -<h4 id="drop-shadow">drop-shadow()</h4> - -<p>{{cssxref("filter-function/drop-shadow", "drop-shadow()")}} 関数は、入力画像に効果を適用します。ドロップシャドウとは、入力画像のアルファマスクを特定の色で、ずらしてぼやかして描画したものを画像の下に合成したものです。この関数は <code><shadow></code> 型 (<a href="https://www.w3.org/TR/css-backgrounds-3/#typedef-shadow">CSS3 Backgrounds</a> で定義) の引数を受け取りますが、 <code>inset</code> キーワードは使用できません。この関数は、より確立された {{cssxref("box-shadow")}} プロパティに似ています。違いはフィルターであること、より良い性能を得るためにハードウェアアクセラレーションを提供しているブラウザーがあることです。 <code><shadow></code> 引数の値は次の通りです。</p> - -<dl> - <dt><code><offset-x></code> <code><offset-y></code> <small>(必須)</small></dt> - <dd>二つの {{cssxref("<length>")}} 値で、影をずらす大きさを設定します。 <code><offset-x></code> は水平の距離を指定します。負の数の場合、影を要素の左側に配置します。 <code><offset-y></code> は垂直の距離を指定します。負の数の場合、影を要素の上に配置します。利用可能な単位は {{cssxref("<length>")}} を参照してください。<br> - 両方の値が <code>0</code> である場合は、影は要素の背後に配置されます (そして、 <code><blur-radius></code> や <code><spread-radius></code> を設定することで、ぼかしの効果を生成することができます)。</dd> - <dt><code><blur-radius></code> <small>(オプション)</small></dt> - <dd>これは三番目の {{cssxref("<length>")}} 値です。この値が大きくなるほど、ぼかしが大きくなり、影がより大きく薄くなります。負の数を指定することはできません。指定されなかった場合は、 <code>0</code> (影の縁がはっきりしている) になります。</dd> - <dt><code><color></code> <small>(オプション)</small></dt> - <dd>指定可能なキーワードや記述方法は {{cssxref("<color>")}} 値を参照してください。指定されなかった場合は、使用される色はブラウザーに依存します。 - 普通は {{cssxref("<color>")}} プロパティの値ですが、 Safari では現在のところ、この場合には透明な影を描くことに注意してください。</dd> -</dl> - -<pre class="brush: css notranslate">filter: drop-shadow(16px 16px 10px black)</pre> - -<pre class="brush: html notranslate"><svg style="position: absolute; top: -999999px" xmlns="http://www.w3.org/2000/svg"> - <filter id="drop-shadow"> - <feGaussianBlur in="SourceAlpha" stdDeviation="[radius]"/> - <feOffset dx="[offset-x]" dy="[offset-y]" result="offsetblur"/> - <feFlood flood-color="[color]"/> - <feComposite in2="offsetblur" operator="in"/> - <feMerge> - <feMergeNode/> - <feMergeNode in="SourceGraphic"/> - </feMerge> - </filter> -</svg> -</pre> - -<div id="shadow_example" class="hidden"> -<pre class="brush: html notranslate"><table class="standard-table"> - <thead> - <tr> - <th style="text-align: left;" scope="col">元の画像</th> - <th style="text-align: left;" scope="col">ライブ例</th> - <th style="text-align: left;" scope="col">同等の SVG</th> - <th style="text-align: left;" scope="col">画像による例</th> - </tr> - </thead> - <tbody> - <tr> - <td><img alt="Test_Form_4.jpeg" id="img1" class="internal default" src="/files/3714/Test_Form_4.jpeg" style="width: 100%;" /></td> - <td><img alt="Test_Form_4.jpg" id="img2" class="internal default" src="/files/3714/Test_Form_4.jpeg" style="width: 100%;" /></td> - <td> - <div class="svg-container"> - <svg xmlns="http://www.w3.org/2000/svg" id="img3" overflow="visible" viewbox="0 0 213 161" color-interpolation-filters="sRGB"> - <defs> - <image id="MyImage" xlink:href="/files/3714/Test_Form_4.jpeg" width="213px" height="161px"/> - </defs> - <filter id="drop-shadow" x="-50%" y="-50%" width="200%" height="200%"> - <feOffset dx="9" dy="9" in="SourceAlpha"/> - <feGaussianBlur stdDeviation="5"/> - </filter> - <use xlink:href="#MyImage" filter="url(#drop-shadow)"/> - <use xlink:href="#MyImage"/> - </svg> - </div> - </td> - <td><img alt="Test_Form_4_s.jpg" id="img4" class="internal default" src="/files/3715/Test_Form_4_s.jpg" style="width: 100%;" /></td> - </tr> - <tr> - <td><img alt="Test_Form_4 distorded border - 元の画像" id="img11" class="internal default" src="/files/8467/Test_Form_4_irregular-shape_opacity-gradient.png" style="width: 100%;" /></td> - <td><img alt="Test_Form_4 distorded border - ライブ例" id="img12" class="internal default" src="/files/8467/Test_Form_4_irregular-shape_opacity-gradient.png" style="width: 100%;" /></td> - <td> - <div class="svg-container"> - <svg xmlns="http://www.w3.org/2000/svg" id="img13" overflow="visible" viewbox="0 0 213 161" color-interpolation-filters="sRGB"> - <defs> - <image id="MyImage2" xlink:href="/files/8467/Test_Form_4_irregular-shape_opacity-gradient.png" width="213px" height="161px"/> - </defs> - <filter id="drop-shadow2" x="-50%" y="-50%" width="200%" height="200%"> - <feOffset dx="5" dy="5.5" in="SourceAlpha"/> - <feGaussianBlur stdDeviation="2.5"/> - <feComponentTransfer> - <feFuncA type="table" tableValues="0 0.8"/> - </feComponentTransfer> - </filter> - <use xlink:href="#MyImage2" filter="url(#drop-shadow2)"/> - <use xlink:href="#MyImage2"/> - </svg> - </div> - </td> - <td><img alt="Test_Form_4 distorded border drop shadow - 画像による例" id="img14" class="internal default" src="/files/8469/Test_Form_4_irregular-shape_opacity-gradient_drop-shadow.png" style="width: 100%;" /></td> - </tr> - </tbody> -</table> -</pre> - -<pre class="brush: css notranslate">html { - height:100%; -} -body { - font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif; - color: rgb(51, 51, 51); - height:100%; - overflow:hidden; -} -#img2 { - width:100%; - height:auto; - -moz-filter: drop-shadow(16px 16px 10px black); - -webkit-filter: drop-shadow(16px 16px 10px black); - -ms-filter: drop-shadow(16px 16px 10px black); - filter: drop-shadow(16px 16px 10px black); -} -#img12 { - width:100%; - height:auto; - -moz-filter: drop-shadow(8px 9px 5px rgba(0,0,0,.8)); - -webkit-filter: drop-shadow(8px 9px 5px rgba(0,0,0,.8)); - -ms-filter: drop-shadow(8px 9px 5px rgba(0,0,0,.8)); - filter: drop-shadow(8px 9px 5px rgba(0,0,0,.8)); -} -table.standard-table { - border: 1px solid rgb(187, 187, 187); - border-collapse: collapse; - border-spacing: 0px; - margin: 0px 0px 1.286em; - width: 85%; - height: 100%; -} -#irregular-shape { - width: 64%; -} -table.standard-table th { - border: 1px solid rgb(187, 187, 187); - padding: 0px 5px; - background: none repeat scroll 0% 0% rgb(238, 238, 238); - text-align: left; - font-weight: bold; -} -table.standard-table td { - padding: 5px; - border: 1px solid rgb(204, 204, 204); - text-align: left; - vertical-align: top; - width:25%; - height:auto; -} -#img3, #img13 { - width:100%; - height:auto; -} -</pre> -</div> - -<div>{{EmbedLiveSample('shadow_example','100%','300px','','', 'no-codepen')}}</div> - -<h4 id="grayscale">grayscale()</h4> - -<p>{{cssxref("filter-function/grayscale", "grayscale()")}} 関数は入力画像をグレースケールに変換します。 <code>amount</code> の値は変換の程度を定義します。 <code>100%</code> の値は完全にグレースケールになります。 <code>0%</code> では入力画像が変化しないままになります。 <code>0%</code> と <code>100%</code> の間は効果の線形乗数になります。補完時の空白値は <code>0</code> です。</p> - -<pre class="brush: css notranslate">filter: grayscale(100%)</pre> - -<div id="grayscale_example" class="hidden"> -<pre class="brush: html notranslate"><table class="standard-table"> - <thead> - <tr> - <th style="text-align: left;" scope="col">元の画像</th> - <th style="text-align: left;" scope="col">ライブ例</th> - <th style="text-align: left;" scope="col">同等の SVG</th> - <th style="text-align: left;" scope="col">画像による例</th> - </tr> - </thead> - <tbody> - <tr> - <td><img alt="Test_Form_5.jpeg" id="img1" class="internal default" src="/files/3716/Test_Form_5.jpeg" style="width: 100%;" /></td> - <td><img alt="Test_Form_5.jpg" id="img2" class="internal default" src="/files/3716/Test_Form_5.jpeg" style="width: 100%;" /></td> - <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 276 184" color-interpolation-filters="sRGB"> - <filter id="grayscale"> - <feColorMatrix type="matrix" - values="0.2126 0.7152 0.0722 0 0 - 0.2126 0.7152 0.0722 0 0 - 0.2126 0.7152 0.0722 0 0 - 0 0 0 1 0"/> - </filter> - <image xlink:href="/files/3716/Test_Form_5.jpeg" filter="url(#grayscale)" width="276px" height="184px" /> -</svg><div></td> - <td><img alt="Test_Form_5_s.jpg" id="img4" class="internal default" src="/files/3717/Test_Form_5_s.jpg" style="width: 100%;" /></td> - </tr> - </tbody> -</table> -</pre> - -<pre class="brush: css notranslate">html { - height:100%; -} -body { - font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif; - color: rgb(51, 51, 51); - height:100%; - overflow:hidden; -} -#img2 { - width:100%; - height:auto; - -moz-filter:grayscale(100%); - -webkit-filter:grayscale(100%); - -ms-filter:grayscale(100%); - filter:grayscale(100%); } -table.standard-table { - border: 1px solid rgb(187, 187, 187); - border-collapse: collapse; - border-spacing: 0px; - margin: 0px 0px 1.286em; - width: 85%; - height: 100%; -} -table.standard-table th { - border: 1px solid rgb(187, 187, 187); - padding: 0px 5px; - background: none repeat scroll 0% 0% rgb(238, 238, 238); - text-align: left; - font-weight: bold; -} -table.standard-table td { - padding: 5px; - border: 1px solid rgb(204, 204, 204); - text-align: left; - vertical-align: top; - width:25%; - height:auto; -} -#img3 { - height:100%; -} -</pre> -</div> - -<div>{{EmbedLiveSample('grayscale_example','100%','209px','','', 'no-codepen')}}</div> - -<h4 id="hue-rotate">hue-rotate()</h4> - -<p>{{cssxref("filter-function/hue-rotate", "hue-rotate()")}} 関数は、入力画像の色相を回転させます。 <code class="property">angle</code> の値は、色相環を何度回転させて入力サンプルを調整するかを定義します。 <code>0deg</code> の値を指定すると入力は変更されません。補完時の空白値は <code>0</code> です。最大値はありませんが、 <code>360deg</code> を超える値の以上の値の場合は回り込みになります。</p> - -<pre class="brush: css notranslate">filter: hue-rotate(90deg)</pre> - -<div id="huerotate_example" class="hidden"> -<pre class="brush: html notranslate"><table class="standard-table"> - <thead> - <tr> - <th style="text-align: left;" scope="col">元の画像</th> - <th style="text-align: left;" scope="col">ライブ例</th> - <th style="text-align: left;" scope="col">同等の SVG</th> - <th style="text-align: left;" scope="col">画像による例</th> - </tr> - </thead> - <tbody> - <tr> - <td><img alt="Test_Form_6.jpeg" id="img1" class="internal default" src="/files/3718/Test_Form_6.jpeg" style="width: 100%;" /></td> - <td><img alt="Test_Form_6.jpg" id="img2" class="internal default" src="/files/3718/Test_Form_6.jpeg" style="width: 100%;" /></td> - <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 266 190" color-interpolation-filters="sRGB"> - <filter id="hue-rotate"> - <feColorMatrix type="hueRotate" - values="90"/> - </filter> - <image xlink:href="/files/3718/Test_Form_6.jpeg" filter="url(#hue-rotate)" width="266px" height="190px" /> -</svg><div></td> - <td><img alt="Test_Form_6_s.jpg" id="img4" class="internal default" src="/files/3719/Test_Form_6_s.jpg" style="width: 100%;" /></td> - </tr> - </tbody> -</table> -</pre> - -<pre class="brush: css notranslate">html { - height:100%; -} -body { - font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif; - color: rgb(51, 51, 51); - height:100%; - overflow:hidden; -} -#img2 { - width:100%; - height:auto; - -moz-filter:hue-rotate(90deg); - -webkit-filter:hue-rotate(90deg); - -ms-filter:hue-rotate(90deg); - filter:hue-rotate(90deg); } -table.standard-table { - border: 1px solid rgb(187, 187, 187); - border-collapse: collapse; - border-spacing: 0px; - margin: 0px 0px 1.286em; - width: 85%; - height: 100%; -} -table.standard-table th { - border: 1px solid rgb(187, 187, 187); - padding: 0px 5px; - background: none repeat scroll 0% 0% rgb(238, 238, 238); - text-align: left; - font-weight: bold; -} -table.standard-table td { - padding: 5px; - border: 1px solid rgb(204, 204, 204); - text-align: left; - vertical-align: top; - width:25%; - height:auto; -} -#img3 { - height:100%; -} -</pre> -</div> - -<pre class="brush: html notranslate"><svg style="position: absolute; top: -999999px" xmlns="http://www.w3.org/2000/svg"> - <filter id="svgHueRotate" > - <feColorMatrix type="hueRotate" values="[angle]" /> - <filter /> -</svg></pre> - -<p>{{EmbedLiveSample('huerotate_example','100%','221px','','', 'no-codepen')}}</p> - -<h4 id="invert">invert()</h4> - -<p>{{cssxref("filter-function/invert", "invert()")}} 関数は、入力画像のサンプルを反転します。 <code class="property">amount</code> の値は、変換の度合を定義します。 <code>100%</code> の値を指定すると、完全に反転されます。 <code>0%</code> では入力画像が変化しないままになります。 <code>0%</code> と <code>100%</code> の間は効果の線形乗数になります。補完時の空白値は <code>0</code> です。</p> - -<pre class="brush: css notranslate">filter: invert(100%)</pre> - -<div id="invert_example" class="hidden"> -<pre class="brush: html notranslate"><table class="standard-table"> - <thead> - <tr> - <th style="text-align: left;" scope="col">元の画像</th> - <th style="text-align: left;" scope="col">ライブ例</th> - <th style="text-align: left;" scope="col">同等の SVG</th> - <th style="text-align: left;" scope="col">画像による例</th> - </tr> - </thead> - <tbody> - <tr> - <td><img alt="Test_Form_7.jpeg" id="img1" class="internal default" src="/files/3720/Test_Form_7.jpeg" style="width: 100%;" /></td> - <td><img alt="Test_Form_7.jpg" id="img2" class="internal default" src="/files/3720/Test_Form_7.jpeg" style="width: 100%;" /></td> - <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 183 276" color-interpolation-filters="sRGB"> - <filter id="invert"> - <feComponentTransfer> - <feFuncR type="table" tableValues="1 0"/> - <feFuncG type="table" tableValues="1 0"/> - <feFuncB type="table" tableValues="1 0"/> - </feComponentTransfer> - </filter> - <image xlink:href="/files/3720/Test_Form_7.jpeg" filter="url(#invert)" width="183px" height="276px" /> -</svg><div></td> - <td><img alt="Test_Form_7_s.jpg" id="img4" class="internal default" src="/files/3721/Test_Form_7_s.jpg" style="width: 100%;" /></td> - </tr> - </tbody> -</table> -</pre> - -<pre class="brush: css notranslate">html { - height:100%; -} -body { - font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif; - color: rgb(51, 51, 51); - height:100%; - overflow:hidden; -} -#img2 { - width:100%; - height:auto; - -moz-filter: invert(100%); - -webkit-filter: invert(100%); - -ms-filter: invert(100%); - filter: invert(100%); } -table.standard-table { - border: 1px solid rgb(187, 187, 187); - border-collapse: collapse; - border-spacing: 0px; - margin: 0px 0px 1.286em; - width: 85%; - height: 100%; -} -table.standard-table th { - border: 1px solid rgb(187, 187, 187); - padding: 0px 5px; - background: none repeat scroll 0% 0% rgb(238, 238, 238); - text-align: left; - font-weight: bold; -} -table.standard-table td { - padding: 5px; - border: 1px solid rgb(204, 204, 204); - text-align: left; - vertical-align: top; - width:25%; - height:auto; -} -#img3 { - height:100%; -} -</pre> -</div> - -<p>{{EmbedLiveSample('invert_example','100%','407px','','', 'no-codepen')}}</p> - -<h4 id="opacity">opacity()</h4> - -<p>{{cssxref("filter-function/opacity", "opacity()")}} 関数は、入力画像のサンプルに透過度を適用します。 <code class="property">amount</code> の値は、変換の度合を定義します。 <code>0%</code> の値を指定すると、完全に透明になります。 <code>100%</code> では入力画像が変化しないままになります。 <code>0%</code> と <code>100%</code> の間は効果の線形乗数になります。これは、入力画像のサンプルに量を乗算することに相当します。補完時の空白値は <code>1</code> です。この関数は、より確立された {{cssxref("opacity")}} プロパティに似ていますが、フィルターの場合、一部のブラウザーでは性能を向上させるためにハードウェアアクセラレーションを提供する点が異なります。</p> - -<pre class="brush: css notranslate">filter: opacity(50%)</pre> - -<div id="opacity_example" class="hidden"> -<pre class="brush: html notranslate"><table class="standard-table"> - <thead> - <tr> - <th style="text-align: left;" scope="col">元の画像</th> - <th style="text-align: left;" scope="col">ライブ例</th> - <th style="text-align: left;" scope="col">同等の SVG</th> - <th style="text-align: left;" scope="col">画像による例</th> - </tr> - </thead> - <tbody> - <tr> - <td><img alt="Test_Form_14.jpeg" id="img1" class="internal default" src="/files/3725/Test_Form_14.jpeg" style="width: 100%;" /></td> - <td><img alt="Test_Form_14.jpg" id="img2" class="internal default" src="/files/3725/Test_Form_14.jpeg" style="width: 100%;" /></td> - <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 276 183" color-interpolation-filters="sRGB"> - <filter id="opacity"> - <feComponentTransfer> - <feFuncA type="table" tableValues="0 0.5"> - </feComponentTransfer> - </filter> - <image xlink:href="/files/3725/Test_Form_14.jpeg" filter="url(#opacity)" width="276px" height="183px" /> -</svg><div></td> - <td><img alt="Test_Form_14_s.jpg" id="img4" class="internal default" src="/files/3726/Test_Form_14_s.jpg" style="width: 100%;" /></td> - </tr> - </tbody> -</table> -</pre> - -<pre class="brush: css notranslate">html { - height:100%; -} -body { - font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif; - color: rgb(51, 51, 51); - height:100%; - overflow:hidden; -} -#img2 { - width:100%; - height:auto; - -moz-filter: opacity(50%); - -webkit-filter: opacity(50%); - -ms-filter: opacity(50%); - filter: opacity(50%); } -table.standard-table { - border: 1px solid rgb(187, 187, 187); - border-collapse: collapse; - border-spacing: 0px; - margin: 0px 0px 1.286em; - width: 85%; - height: 100%; -} -table.standard-table th { - border: 1px solid rgb(187, 187, 187); - padding: 0px 5px; - background: none repeat scroll 0% 0% rgb(238, 238, 238); - text-align: left; - font-weight: bold; -} -table.standard-table td { - padding: 5px; - border: 1px solid rgb(204, 204, 204); - text-align: left; - vertical-align: top; - width:25%; - height:auto; -} -#img3 { - height:100%; -} -</pre> -</div> - -<p>{{EmbedLiveSample('opacity_example','100%','210px','','', 'no-codepen')}}</p> - -<h4 id="saturate">saturate()</h4> - -<p>{{cssxref("filter-function/saturate", "saturate()")}} 関数は、入力画像の彩度を変化させます。 <code class="property">amount</code> の値は、変換の度合を定義します。 <code>0%</code> の値を指定すると、無彩色になります。 <code>100%</code> では入力画像が変化しないままになります。 <code>0%</code> と <code>100%</code> の間は効果の線形乗数になります。 <code>100%</code> を超える値を指定することもでき、彩度を増した結果になります。補完時の空白値は <code>1</code> です。</p> - -<pre class="brush: css notranslate">filter: saturate(200%)</pre> - -<div id="saturate_example" class="hidden"> -<pre class="brush: html notranslate"><table class="standard-table"> - <thead> - <tr> - <th style="text-align: left;" scope="col">元の画像</th> - <th style="text-align: left;" scope="col">ライブ例</th> - <th style="text-align: left;" scope="col">同等の SVG</th> - <th style="text-align: left;" scope="col">画像による例</th> - </tr> - </thead> - <tbody> - <tr> - <td><img alt="Test_Form_9.jpeg" id="img1" class="internal default" src="/files/3722/Test_Form_9.jpeg" style="width: 100%;" /></td> - <td><img alt="Test_Form_9.jpg" id="img2" class="internal default" src="/files/3722/Test_Form_9.jpeg" style="width: 100%;" /></td> - <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 201 239" color-interpolation-filters="sRGB"> - <filter id="saturate"> - <feColorMatrix type="saturate" - values="2"/> - </filter> - <image xlink:href="/files/3722/Test_Form_9.jpeg" filter="url(#saturate)" width="201px" height="239px" /> -</svg><div></td> - <td><img alt="Test_Form_9_s.jpg" id="img4" class="internal default" src="/files/3724/Test_Form_9_s.jpeg" style="width: 100%;" /></td> - </tr> - </tbody> -</table> -</pre> - -<pre class="brush: css notranslate">html { - height:100%; -} -body { - font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif; - color: rgb(51, 51, 51); - height:100%; - overflow:hidden; -} -#img2 { - width:100%; - height:auto; - -moz-filter: saturate(200%); - -webkit-filter: saturate(200%); - -ms-filter: saturate(200%); - filter: saturate(200%); } -table.standard-table { - border: 1px solid rgb(187, 187, 187); - border-collapse: collapse; - border-spacing: 0px; - margin: 0px 0px 1.286em; - width: 85%; - height: 100%; -} -table.standard-table th { - border: 1px solid rgb(187, 187, 187); - padding: 0px 5px; - background: none repeat scroll 0% 0% rgb(238, 238, 238); - text-align: left; - font-weight: bold; -} -table.standard-table td { - padding: 5px; - border: 1px solid rgb(204, 204, 204); - text-align: left; - vertical-align: top; - width:25%; - height:auto; -} -#img3 { - height:100%; -} -</pre> -</div> - -<p>{{EmbedLiveSample('saturate_example','100%','332px','')}}</p> - -<h4 id="sepia">sepia()</h4> - -<p>{{cssxref("filter-function/sepia", "sepia()")}} 関数は、入力画像をセピア調にします。 <code class="property">amount</code> の値は、変換の度合を定義します。 <code>100%</code> の値を指定すると、完全にセピア調になります。 <code>0%</code> では入力画像が変化しないままになります。 <code>0%</code> と <code>100%</code> の間は効果の線形乗数になります。補完時の空白値は <code>0</code> です。</p> - -<pre class="brush: css notranslate">filter: sepia(100%)</pre> - -<div id="sepia_example" class="hidden"> -<pre class="brush: html notranslate"><table class="standard-table"> - <thead> - <tr> - <th style="text-align: left;" scope="col">元の画像</th> - <th style="text-align: left;" scope="col">ライブ例</th> - <th style="text-align: left;" scope="col">同等の SVG</th> - <th style="text-align: left;" scope="col">画像による例</th> - </tr> - </thead> - <tbody> - <tr> - <td><img alt="Test_Form_12.jpeg" id="img1" class="internal default" src="/files/3727/Test_Form_12.jpeg" style="width: 100%;" /></td> - <td><img alt="Test_Form_12.jpg" id="img2" class="internal default" src="/files/3727/Test_Form_12.jpeg" style="width: 100%;" /></td> - <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 259 194" color-interpolation-filters="sRGB"> - <filter id="sepia"> - <feColorMatrix type="matrix" - values="0.393 0.769 0.189 0 0 - 0.349 0.686 0.168 0 0 - 0.272 0.534 0.131 0 0 - 0 0 0 1 0"/> - </filter> - <image xlink:href="/files/3727/Test_Form_12.jpeg" filter="url(#sepia)" width="259px" height="194px" /> -</svg><div></td> - <td><img alt="Test_Form_12_s.jpg" id="img4" class="internal default" src="/files/3728/Test_Form_12_s.jpg" style="width: 100%;" /></td> - </tr> - </tbody> -</table> -</pre> - -<pre class="brush: css notranslate">html { - height:100%; -} -body { - font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif; - color: rgb(51, 51, 51); - height:100%; - overflow:hidden; -} -#img2 { - width:100%; - height:auto; - -moz-filter: sepia(100%); - -webkit-filter: sepia(100%); - -ms-filter: sepia(100%); - filter: sepia(100%); } -table.standard-table { - border: 1px solid rgb(187, 187, 187); - border-collapse: collapse; - border-spacing: 0px; - margin: 0px 0px 1.286em; - width: 85%; - height: 100%; -} -table.standard-table th { - border: 1px solid rgb(187, 187, 187); - padding: 0px 5px; - background: none repeat scroll 0% 0% rgb(238, 238, 238); - text-align: left; - font-weight: bold; -} -table.standard-table td { - padding: 5px; - border: 1px solid rgb(204, 204, 204); - text-align: left; - vertical-align: top; - width:25%; - height:auto; -} -#img3 { - height:100%; -} -</pre> -</div> - -<p>{{EmbedLiveSample('sepia_example','100%','229px','','', 'no-codepen')}}</p> - -<h2 id="Combining_functions" name="Combining_functions">関数の組み合わせ</h2> - -<p>いくつかの関数を組み合わせてレンダリングを操作することができます。次の例では、画像のコントラストと明るさを強調しています。</p> - -<pre class="brush: css notranslate">filter: contrast(175%) brightness(103%)</pre> - -<div id="combination_example" class="hidden"> -<pre class="brush: html notranslate"><table class="standard-table"> - <thead> - <tr> - <th style="text-align: left;" scope="col">元の画像</th> - <th style="text-align: left;" scope="col">ライブ例</th> - <th style="text-align: left;" scope="col">画像による例</th> - </tr> - </thead> - <tbody> - <tr> - <td><img alt="Test_Form_8.jpeg" id="img1" class="internal default" src="/files/3729/Test_Form_8.jpeg" style="width: 100%;" /></td> - <td><img alt="Test_Form_8.jpg" id="img2" class="internal default" src="/files/3729/Test_Form_8.jpeg" style="width: 100%;" /></td> - <td><img alt="Test_Form_8_s.jpg" id="img4" class="internal default" src="/files/3730/Test_Form_8_s.jpeg" style="width: 100%;" /></td> - </tr> - </tbody> -</table> -</pre> - -<pre class="brush: css notranslate">html { - height:100%; -} -body { - font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif; - color: rgb(51, 51, 51); - height:100%; - overflow:hidden; -} -#img2 { - width:100%; - height:auto; - -moz-filter: contrast(175%) brightness(103%); - -webkit-filter: contrast(175%) brightness(103%); - -ms-filter: contrast(175%) brightness(103%); - filter: contrast(175%) brightness(103%); -} -table.standard-table { - border: 1px solid rgb(187, 187, 187); - border-collapse: collapse; - border-spacing: 0px; - margin: 0px 0px 1.286em; - width: 85%; - height: 100%; -} -table.standard-table th { - border: 1px solid rgb(187, 187, 187); - padding: 0px 5px; - background: none repeat scroll 0% 0% rgb(238, 238, 238); - text-align: left; - font-weight: bold; -} -table.standard-table td { - padding: 5px; - border: 1px solid rgb(204, 204, 204); - text-align: left; - vertical-align: top; - width:25%; - height:auto; -} -#img3 { - height:100%; -} -</pre> -</div> - -<p>{{EmbedLiveSample('combination_example','100%','209px','','', 'no-codepen')}}</p> - -<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('Filters 1.0', '#FilterProperty', 'filter')}}</td> - <td>{{Spec2('Filters 1.0')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<div>{{cssinfo}}</div> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.filter")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a class="internal" href="/ja/docs/Applying_SVG_effects_to_HTML_content">HTML コンテンツへの SVG 効果の適用</a></li> - <li>The {{cssxref("mask")}} property</li> - <li><a class="internal" href="/ja/docs/Web/SVG">SVG</a></li> - <li><a class="external" href="http://www.html5rocks.com/en/tutorials/filters/understanding-css/">Understanding CSS filters</a>, HTML5Rocks! article</li> - <li><a href="http://www.coding-dude.com/wp/css/css-image-effects/">CSS Image Effects</a> using filter combinations for creating vintage photos</li> -</ul> diff --git a/files/ja/web/css/filter/index.md b/files/ja/web/css/filter/index.md new file mode 100644 index 0000000000..c71814bc21 --- /dev/null +++ b/files/ja/web/css/filter/index.md @@ -0,0 +1,1159 @@ +--- +title: filter +slug: Web/CSS/filter +tags: + - CSS + - CSS プロパティ + - Reference + - SVG + - SVG フィルター + - recipe:css-property +browser-compat: css.properties.filter +translation_of: Web/CSS/filter +--- +{{CSSRef}} + +**`filter`** は [CSS](/ja/docs/Web/CSS) のプロパティで、ぼかしや色変化などのグラフィック効果を要素に適用します。フィルターは画像、背景、境界の描画を調整するためによく使われます。 + +CSS 標準に含まれているものは、定義済みの効果を実現するためのいくつかの関数です。[SVG の filter 要素](/ja/docs/Web/SVG/Element/filter)への URL で SVG フィルターを参照することもできます。 + +{{EmbedInteractiveExample("pages/css/filter.html")}} + +## 構文 + +```css +/* SVG フィルターへの URL */ +filter: url("filters.svg#filter-id"); + +/* <filter-function> 値 */ +filter: blur(5px); +filter: brightness(0.4); +filter: contrast(200%); +filter: drop-shadow(16px 16px 20px blue); +filter: grayscale(50%); +filter: hue-rotate(90deg); +filter: invert(75%); +filter: opacity(25%); +filter: saturate(30%); +filter: sepia(60%); + +/* 複数のフィルター */ +filter: contrast(175%) brightness(3%); + +/* フィルターを使用しない */ +filter: none; + +/* グローバル値 */ +filter: inherit; +filter: initial; +filter: revert; +filter: unset; +``` + +次のように関数と共に使用してください。 + +```css +filter: <filter-function> [<filter-function>]* | none +``` + +SVG の {{SVGElement("filter")}} 要素への参照の場合は、次のようにしてください。 + +```css +filter: url(file.svg#filter-element-id) +``` + +### 補間 + +最初のフィルターと最後のフィルターの両方が同じ長さの関数リストであり、 {{cssxref("url()","url()")}} を持たない場合、それぞれのフィルター関数はその固有の規則に従って補間されます。長さが異なる場合は、長い方のリストから欠落している等価なフィルター関数が、空白値を使って短い方のリストの最後に追加され、すべてのフィルター関数がその固有の規則に従って補間されます。一方のフィルターが `none` である場合は、フィルター関数の既定値を用いて、もう一方のフィルター関数のリストに置き換えられ、すべてのフィルター関数がその固有の規則に従って補間されます。それ以外の場合は、離散補間が使用されます。 + +## 関数 + +`filter` プロパティは `none` または以下にある関数を一つ以上使って指定します。いずれかの関数の引数が妥当でない場合、関数は `none` を返します。特に示す場合を除いて、パーセント記号付きの値 (`34%` など) を取る関数は、10進数の値 (`0.34` など) も受け付けます。 + +単一の `filter` プロパティに2つ以上の関数を指定した場合、同じフィルター関数を2つ以上の `filter` プロパティに別々に適用した場合とは異なる結果になります。 + +### SVG フィルター + +#### url() + +外部 XML ファイルに埋め込むことができる [SVG フィルター](/ja/docs/Web/SVG/Element/filter)を指す URI を取ります。 + +```css +filter: url(resources.svg#c1) +``` + +### フィルター関数 + +#### blur() + +{{cssxref("filter-function/blur()", "blur()")}} 関数は、入力画像にガウスぼかしを適用します。 `radius` の値は、ガウス関数の標準偏差の値、つまり画面上のいくつのピクセルが互いに溶け込むかを定義します。補間のための空白値は `0` です。 この引数は CSS の長さとして指定されますが、パーセント値は受け付けません。 + +```css +filter: blur(5px) +``` + +```html hidden + <table class="standard-table"> + <thead> + <tr> + <th style="text-align: left;" scope="col">Original image</th> + <th style="text-align: left;" scope="col">Live example</th> + <th style="text-align: left;" scope="col">SVG Equivalent</th> + <th style="text-align: left;" scope="col">Static example</th> + </tr> + </thead> + <tbody> + <tr> + <td><img id="img1" class="internal default" src="test_form_2.jpeg" style="width: 100%;" /></td> + <td><img id="img2" class="internal default" src="test_form_2.jpeg" style="width: 100%;" /></td> + <td> + <div class="svg-container"> + <svg id="img3" overflow="visible" viewbox="0 0 212 161" color-interpolation-filters="sRGB"> + <filter id="svgBlur" x="-5%" y="-5%" width="110%" height="110%"> + <feGaussianBlur in="SourceGraphic" stdDeviation="3.5"/> + </filter> + <image xlink:href="test_form_2.jpeg" filter="url(#svgBlur)" width="212px" height="161px"/> + </svg> + </div> + </td> + <td><img id="img4" class="internal default" src="test_form_2_s.jpg" style="width: 100%;" /></td> + </tr> + </tbody> +</table> +``` + +```css hidden +html { + height:100%; +} +body { + font: 14px/1.286 "Lucida Grande", "Lucida Sans Unicode", "DejaVu Sans", Lucida, Arial, Helvetica, sans-serif; + color: rgb(51, 51, 51); + height:100%; + overflow:hidden; +} +#img2 { + width:100%; + height:auto; + -webkit-filter:blur(5px); + -ms-filter:blur(5px); + filter:blur(5px); } +table.standard-table { + border: 1px solid rgb(187, 187, 187); + border-collapse: collapse; + border-spacing: 0; + margin: 0 0 1.286em; + height: 100%; + width: 85%; +} +table.standard-table th { + border: 1px solid rgb(187, 187, 187); + padding: 0px 5px; + background: none repeat scroll 0% 0% rgb(238, 238, 238); + text-align: left; + font-weight: bold; +} +table.standard-table td { + padding: 5px; + border: 1px solid rgb(204, 204, 204); + text-align: left; + vertical-align: top; + width:25%; + height:auto; +} +#img3 { + height:100%; +} +``` + +```svg +<svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg"> + <filter id="svgBlur" x="-5%" y="-5%" width="110%" height="110%"> + <feGaussianBlur in="SourceGraphic" stdDeviation="5"/> + </filter> +</svg> +``` + +{{EmbedLiveSample('blur','100%','236px','','', 'no-codepen')}} + +#### brightness() + +{{cssxref("filter-function/brightness()", "brightness()")}} 関数は、入力画像に線形乗数を適用して明るさを明るくしたり暗くしたりします。 `0%` の値を設定すると、完全な黒の画像が作成されます。 `100%` の値を指定すると、入力は変更されません。その他の値は効果の線形乗数です。 `100%` を超える値が許されており、より明るい結果が得られます。補間時の空白値は `1` です。 + +```css +filter: brightness(2) +``` + +```svg +<svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg"> + <filter id="brightness"> + <feComponentTransfer> + <feFuncR type="linear" slope="[amount]"/> + <feFuncG type="linear" slope="[amount]"/> + <feFuncB type="linear" slope="[amount]"/> + </feComponentTransfer> + </filter> +</svg> +``` + +```html hidden +<table class="standard-table"> + <thead> + <tr> + <th style="text-align: left;" scope="col">Original image</th> + <th style="text-align: left;" scope="col">Live example</th> + <th style="text-align: left;" scope="col">SVG Equivalent</th> + <th style="text-align: left;" scope="col">Static example</th> + </tr> + </thead> + <tbody> + <tr> + <td><img id="img1" class="internal default" src="test_form.jpg" style="width: 100%;" /></td> + <td><img id="img2" class="internal default" src="test_form.jpg" style="width: 100%;" /></td> + <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 286 217" color-interpolation-filters="sRGB"> + <filter id="brightness"> + <feComponentTransfer> + <feFuncR type="linear" slope="2"/> + <feFuncG type="linear" slope="2"/> + <feFuncB type="linear" slope="2"/> + </feComponentTransfer> + </filter> + <image xlink:href="test_form.jpg" filter="url(#brightness)" width="286px" height="217px" /> +</svg><div></td> + <td><img id="img4" class="internal default" src="test_form_s.jpg" style="width: 100%;" /></td> + </tr> + </tbody> +</table> +``` + +```css hidden +html { + height:100%; +} +body { + font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif; + color: rgb(51, 51, 51); + height:100%; + overflow:hidden; +} +#img2 { + width:100%; + height:auto; + -moz-filter:brightness(2); + -webkit-filter:brightness(2); + -ms-filter:brightness(2); + filter:brightness(2); } +table.standard-table { + border: 1px solid rgb(187, 187, 187); + border-collapse: collapse; + border-spacing: 0px; + margin: 0px 0px 1.286em; + height:100%; + width: 85%; +} +table.standard-table th { + border: 1px solid rgb(187, 187, 187); + padding: 0px 5px; + background: none repeat scroll 0% 0% rgb(238, 238, 238); + text-align: left; + font-weight: bold; +} +table.standard-table td { + padding: 5px; + border: 1px solid rgb(204, 204, 204); + text-align: left; + vertical-align: top; + width:25%; + height:auto; +} +#img3 { + height:100%; +} +``` + +{{EmbedLiveSample('brightness','100%','231px','','', 'no-codepen')}} + +#### contrast() + +{{cssxref("filter-function/contrast()", "contrast()")}} 関数は、入力画像のコントラストを調整します。 `0%` の値を指定すると完全にグレーの画像が作成されます。 `100%` の値を指定すると、入力画像は変更されません。 `100%` を超える値を指定すると、よりコントラストの高い結果が得られます。補完時の空白値は `1` です。 + +```css +filter: contrast(200%) +``` + +```svg +<svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg"> + <filter id="contrast"> + <feComponentTransfer> + <feFuncR type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/> + <feFuncG type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/> + <feFuncB type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/> + </feComponentTransfer> + </filter> +</svg> +``` + +```html hidden +<table class="standard-table"> + <thead> + <tr> + <th style="text-align: left;" scope="col">Original image</th> + <th style="text-align: left;" scope="col">Live example</th> + <th style="text-align: left;" scope="col">SVG Equivalent</th> + <th style="text-align: left;" scope="col">Static example</th> + </tr> + </thead> + <tbody> + <tr> + <td><img id="img1" class="internal default" src="test_form_3.jpeg" style="width: 100%;" /></td> + <td><img id="img2" class="internal default" src="test_form_3.jpeg" style="width: 100%;" /></td> + <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 240 151" color-interpolation-filters="sRGB"> + <filter id="contrast"> + <feComponentTransfer> + <feFuncR type="linear" slope="2" intercept="-0.5"/> + <feFuncG type="linear" slope="2" intercept="-0.5"/> + <feFuncB type="linear" slope="2" intercept="-0.5"/> + </feComponentTransfer> + </filter> + <image xlink:href="test_form_3.jpeg" filter="url(#contrast)" width="240px" height="151px" /> +</svg><div></td> + <td><img id="img4" class="internal default" src="test_form_3_s.jpg" style="width: 100%;" /></td> + </tr> + </tbody> +</table> +``` + +```css hidden +html { + height:100%; +} +body { + font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif; + color: rgb(51, 51, 51); + height:100%; + overflow:hidden; +} +#img2 { + width:100%; + height:auto; + -moz-filter:contrast(200%); + -webkit-filter:contrast(200%); + -ms-filter:contrast(200%); + filter:contrast(200%); } +table.standard-table { + border: 1px solid rgb(187, 187, 187); + border-collapse: collapse; + border-spacing: 0px; + margin: 0px 0px 1.286em; + width: 85%; + height: 100%; +} +table.standard-table th { + border: 1px solid rgb(187, 187, 187); + padding: 0px 5px; + background: none repeat scroll 0% 0% rgb(238, 238, 238); + text-align: left; + font-weight: bold; +} +table.standard-table td { + padding: 5px; + border: 1px solid rgb(204, 204, 204); + text-align: left; + vertical-align: top; + width:25%; + height:auto; +} +#img3 { + height:100%; +} +``` + +{{EmbedLiveSample('contrast','100%','203px','','', 'no-codepen')}} + +#### drop-shadow() + +{{cssxref("filter-function/drop-shadow()", "drop-shadow()")}} 関数は、入力画像に効果を適用します。ドロップシャドウとは、入力画像のアルファマスクを特定の色で、ずらしてぼやかして描画したものを画像の下に合成したものです。この関数は `<shadow>` 型 ([CSS3 Backgrounds](https://www.w3.org/TR/css-backgrounds-3/#typedef-shadow) で定義) の引数を受け取りますが、 `inset` キーワードは使用できません。この関数は、より確立された {{cssxref("box-shadow")}} プロパティに似ています。違いはフィルターであること、一部のブラウザーでは性能を改善するためにハードウェアアクセラレーションを提供していることです。 `<shadow>` 引数の値は次の通りです。 + +- `<offset-x>` `<offset-y>` (必須) + - : 二つの {{cssxref("<length>")}} 値で、影をずらす大きさを設定します。 `<offset-x>` は水平の距離を指定します。負の数の場合、影を要素の左側に配置します。 `<offset-y>` は垂直の距離を指定します。負の数の場合、影を要素の上に配置します。利用可能な単位は {{cssxref("<length>")}} を参照してください。 + 両方の値が `0` である場合は、影は要素の背後に配置されます (そして、 `<blur-radius>` や `<spread-radius>` を設定することで、ぼかしの効果を生成することができます)。</dd> +- `<blur-radius>` (オプション) + - : これは三番目の {{cssxref("<length>")}} 値です。この値が大きくなるほど、ぼかしが大きくなり、影がより大きく薄くなります。負の数を指定することはできません。指定されなかった場合は、 `0` (影の縁がはっきりしている) になります。</dd> +- `<color>` (オプション) + - : 指定可能なキーワードや記述方法は {{cssxref("<color>")}} 値を参照してください。指定されなかった場合は、使用される色はブラウザーに依存します。 - 普通は {{cssxref("<color>")}} プロパティの値ですが、 Safari では現在のところ、この場合には透明な影を描くことに注意してください。</dd> +</dl> + +```css +filter: drop-shadow(16px 16px 10px black) +``` + +```svg +<svg style="position: absolute; top: -999999px" xmlns="http://www.w3.org/2000/svg"> + <filter id="drop-shadow"> + <feGaussianBlur in="SourceAlpha" stdDeviation="[radius]"/> + <feOffset dx="[offset-x]" dy="[offset-y]" result="offsetblur"/> + <feFlood flood-color="[color]"/> + <feComposite in2="offsetblur" operator="in"/> + <feMerge> + <feMergeNode/> + <feMergeNode in="SourceGraphic"/> + </feMerge> + </filter> +</svg> +``` + +```html hidden +<table class="standard-table"> + <thead> + <tr> + <th style="text-align: left;" scope="col">Original image</th> + <th style="text-align: left;" scope="col">Live example</th> + <th style="text-align: left;" scope="col">SVG Equivalent</th> + <th style="text-align: left;" scope="col">Static example</th> + </tr> + </thead> + <tbody> + <tr> + <td><img id="img1" class="internal default" src="test_form_4.jpeg" style="width: 100%;" /></td> + <td><img id="img2" class="internal default" src="test_form_4.jpeg" style="width: 100%;" /></td> + <td> + <div class="svg-container"> + <svg xmlns="http://www.w3.org/2000/svg" id="img3" overflow="visible" viewbox="0 0 213 161" color-interpolation-filters="sRGB"> + <defs> + <image id="MyImage" xlink:href="test_form_4.jpeg" width="213px" height="161px"/> + </defs> + <filter id="drop-shadow" x="-50%" y="-50%" width="200%" height="200%"> + <feOffset dx="9" dy="9" in="SourceAlpha"/> + <feGaussianBlur stdDeviation="5"/> + </filter> + <use xlink:href="#MyImage" filter="url(#drop-shadow)"/> + <use xlink:href="#MyImage"/> + </svg> + </div> + </td> + <td><img id="img4" class="internal default" src="test_form_4_s.jpg" style="width: 100%;" /></td> + </tr> + <tr> + <td><img alt="test_form_4 distorted border - Original image" id="img11" class="internal default" src="test_form_4_irregular-shape_opacity-gradient.png" style="width: 100%;" /></td> + <td><img alt="test_form_4 distorted border - Live example" id="img12" class="internal default" src="test_form_4_irregular-shape_opacity-gradient.png" style="width: 100%;" /></td> + <td> + <div class="svg-container"> + <svg xmlns="http://www.w3.org/2000/svg" id="img13" overflow="visible" viewbox="0 0 213 161" color-interpolation-filters="sRGB"> + <defs> + <image id="MyImage2" xlink:href="test_form_4_irregular-shape_opacity-gradient.png" width="213px" height="161px"/> + </defs> + <filter id="drop-shadow2" x="-50%" y="-50%" width="200%" height="200%"> + <feOffset dx="5" dy="5.5" in="SourceAlpha"/> + <feGaussianBlur stdDeviation="2.5"/> + <feComponentTransfer> + <feFuncA type="table" tableValues="0 0.8"/> + </feComponentTransfer> + </filter> + <use xlink:href="#MyImage2" filter="url(#drop-shadow2)"/> + <use xlink:href="#MyImage2"/> + </svg> + </div> + </td> + <td><img alt="test_form_4 distorted border drop shadow - Static example" id="img14" class="internal default" src="test_form_4_irregular-shape_opacity-gradient_drop-shadow.png" style="width: 100%;" /></td> + </tr> + </tbody> +</table> +``` + +```css hidden +html { + height:100%; +} +body { + font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif; + color: rgb(51, 51, 51); + height:100%; + overflow:hidden; +} +#img2 { + width:100%; + height:auto; + -moz-filter: drop-shadow(16px 16px 10px black); + -webkit-filter: drop-shadow(16px 16px 10px black); + -ms-filter: drop-shadow(16px 16px 10px black); + filter: drop-shadow(16px 16px 10px black); +} +#img12 { + width:100%; + height:auto; + -moz-filter: drop-shadow(8px 9px 5px rgba(0,0,0,.8)); + -webkit-filter: drop-shadow(8px 9px 5px rgba(0,0,0,.8)); + -ms-filter: drop-shadow(8px 9px 5px rgba(0,0,0,.8)); + filter: drop-shadow(8px 9px 5px rgba(0,0,0,.8)); +} +table.standard-table { + border: 1px solid rgb(187, 187, 187); + border-collapse: collapse; + border-spacing: 0px; + margin: 0px 0px 1.286em; + width: 85%; + height: 100%; +} +#irregular-shape { + width: 64%; +} +table.standard-table th { + border: 1px solid rgb(187, 187, 187); + padding: 0px 5px; + background: none repeat scroll 0% 0% rgb(238, 238, 238); + text-align: left; + font-weight: bold; +} +table.standard-table td { + padding: 5px; + border: 1px solid rgb(204, 204, 204); + text-align: left; + vertical-align: top; + width:25%; + height:auto; +} +#img3, #img13 { + width:100%; + height:auto; +} +``` + +{{EmbedLiveSample('drop-shadow','100%','400px','','', 'no-codepen')}} + +#### grayscale() + +{{cssxref("filter-function/grayscale()", "grayscale()")}} 関数は入力画像をグレースケールに変換します。 `amount` の値は変換の程度を定義します。 `100%` の値は完全にグレースケールになります。 `0%` では入力画像が変化しないままになります。 `0%` と `100%` の間は効果の線形乗数になります。補完時の空白値は `0` です。 + +```css +filter: grayscale(100%) +``` + +```html hidden +<table class="standard-table"> + <thead> + <tr> + <th style="text-align: left;" scope="col">Original image</th> + <th style="text-align: left;" scope="col">Live example</th> + <th style="text-align: left;" scope="col">SVG Equivalent</th> + <th style="text-align: left;" scope="col">Static example</th> + </tr> + </thead> + <tbody> + <tr> + <td><img id="img1" class="internal default" src="test_form_5.jpeg" style="width: 100%;" /></td> + <td><img id="img2" class="internal default" src="test_form_5.jpeg" style="width: 100%;" /></td> + <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 276 184" color-interpolation-filters="sRGB"> + <filter id="grayscale"> + <feColorMatrix type="matrix" + values="0.2126 0.7152 0.0722 0 0 + 0.2126 0.7152 0.0722 0 0 + 0.2126 0.7152 0.0722 0 0 + 0 0 0 1 0"/> + </filter> + <image xlink:href="test_form_5.jpeg" filter="url(#grayscale)" width="276px" height="184px" /> +</svg><div></td> + <td><img id="img4" class="internal default" src="test_form_5_s.jpg" style="width: 100%;" /></td> + </tr> + </tbody> +</table> +``` + +```css hidden +html { + height:100%; +} +body { + font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif; + color: rgb(51, 51, 51); + height:100%; + overflow:hidden; +} +#img2 { + width:100%; + height:auto; + -moz-filter:grayscale(100%); + -webkit-filter:grayscale(100%); + -ms-filter:grayscale(100%); + filter:grayscale(100%); } +table.standard-table { + border: 1px solid rgb(187, 187, 187); + border-collapse: collapse; + border-spacing: 0px; + margin: 0px 0px 1.286em; + width: 85%; + height: 100%; +} +table.standard-table th { + border: 1px solid rgb(187, 187, 187); + padding: 0px 5px; + background: none repeat scroll 0% 0% rgb(238, 238, 238); + text-align: left; + font-weight: bold; +} +table.standard-table td { + padding: 5px; + border: 1px solid rgb(204, 204, 204); + text-align: left; + vertical-align: top; + width:25%; + height:auto; +} +#img3 { + height:100%; +} +``` + +{{EmbedLiveSample('grayscale','100%','209px','','', 'no-codepen')}} + +#### hue-rotate() + +{{cssxref("filter-function/hue-rotate()", "hue-rotate()")}} 関数は、入力画像の色相を回転させます。 `angle` の値は、色相環を何度回転させて入力サンプルを調整するかを定義します。 `0deg` の値を指定すると入力は変更されません。補完時の空白値は `0` です。最大値はありませんが、 `360deg` を超える値の以上の値の場合は回り込みになります。 + +```css +filter: hue-rotate(90deg) +``` + +```html hidden +<table class="standard-table"> + <thead> + <tr> + <th style="text-align: left;" scope="col">Original image</th> + <th style="text-align: left;" scope="col">Live example</th> + <th style="text-align: left;" scope="col">SVG Equivalent</th> + <th style="text-align: left;" scope="col">Static example</th> + </tr> + </thead> + <tbody> + <tr> + <td><img id="img1" class="internal default" src="test_form_6.jpeg" style="width: 100%;" /></td> + <td><img id="img2" class="internal default" src="test_form_6.jpeg" style="width: 100%;" /></td> + <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 266 190" color-interpolation-filters="sRGB"> + <filter id="hue-rotate"> + <feColorMatrix type="hueRotate" + values="90"/> + </filter> + <image xlink:href="test_form_6.jpeg" filter="url(#hue-rotate)" width="266px" height="190px" /> +</svg><div></td> + <td><img id="img4" class="internal default" src="test_form_6_s.jpg" style="width: 100%;" /></td> + </tr> + </tbody> +</table> +``` + +```css hidden +html { + height:100%; +} +body { + font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif; + color: rgb(51, 51, 51); + height:100%; + overflow:hidden; +} +#img2 { + width:100%; + height:auto; + -moz-filter:hue-rotate(90deg); + -webkit-filter:hue-rotate(90deg); + -ms-filter:hue-rotate(90deg); + filter:hue-rotate(90deg); } +table.standard-table { + border: 1px solid rgb(187, 187, 187); + border-collapse: collapse; + border-spacing: 0px; + margin: 0px 0px 1.286em; + width: 85%; + height: 100%; +} +table.standard-table th { + border: 1px solid rgb(187, 187, 187); + padding: 0px 5px; + background: none repeat scroll 0% 0% rgb(238, 238, 238); + text-align: left; + font-weight: bold; +} +table.standard-table td { + padding: 5px; + border: 1px solid rgb(204, 204, 204); + text-align: left; + vertical-align: top; + width:25%; + height:auto; +} +#img3 { + height:100%; +} +``` + +```html +<svg style="position: absolute; top: -999999px" xmlns="http://www.w3.org/2000/svg"> + <filter id="svgHueRotate"> + <feColorMatrix type="hueRotate" values="[angle]"/> + </filter> +</svg> +``` + +{{EmbedLiveSample('hue-rotate','100%','221px','','', 'no-codepen')}} + +#### invert() + +{{cssxref("filter-function/invert()", "invert()")}} 関数は、入力画像のサンプルを反転します。 `amount` の値は、変換の度合を定義します。 `100%` の値を指定すると、完全に反転されます。 `0%` では入力画像が変化しないままになります。 `0%` と `100%` の間は効果の線形乗数になります。補完時の空白値は `0` です。 + +```css +filter: invert(100%) +``` + +```html hidden +<table class="standard-table"> + <thead> + <tr> + <th style="text-align: left;" scope="col">Original image</th> + <th style="text-align: left;" scope="col">Live example</th> + <th style="text-align: left;" scope="col">SVG Equivalent</th> + <th style="text-align: left;" scope="col">Static example</th> + </tr> + </thead> + <tbody> + <tr> + <td><img id="img1" class="internal default" src="test_form_7.jpeg" style="width: 100%;" /></td> + <td><img id="img2" class="internal default" src="test_form_7.jpeg" style="width: 100%;" /></td> + <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 183 276" color-interpolation-filters="sRGB"> + <filter id="invert"> + <feComponentTransfer> + <feFuncR type="table" tableValues="1 0"/> + <feFuncG type="table" tableValues="1 0"/> + <feFuncB type="table" tableValues="1 0"/> + </feComponentTransfer> + </filter> + <image xlink:href="test_form_7.jpeg" filter="url(#invert)" width="183px" height="276px" /> +</svg><div></td> + <td><img id="img4" class="internal default" src="test_form_7_s.jpg" style="width: 100%;" /></td> + </tr> + </tbody> +</table> +``` + +```css hidden +html { + height:100%; +} +body { + font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif; + color: rgb(51, 51, 51); + height:100%; + overflow:hidden; +} +#img2 { + width:100%; + height:auto; + -moz-filter: invert(100%); + -webkit-filter: invert(100%); + -ms-filter: invert(100%); + filter: invert(100%); } +table.standard-table { + border: 1px solid rgb(187, 187, 187); + border-collapse: collapse; + border-spacing: 0px; + margin: 0px 0px 1.286em; + width: 85%; + height: 100%; +} +table.standard-table th { + border: 1px solid rgb(187, 187, 187); + padding: 0px 5px; + background: none repeat scroll 0% 0% rgb(238, 238, 238); + text-align: left; + font-weight: bold; +} +table.standard-table td { + padding: 5px; + border: 1px solid rgb(204, 204, 204); + text-align: left; + vertical-align: top; + width:25%; + height:auto; +} +#img3 { + height:100%; +} +``` + +{{EmbedLiveSample('invert','100%','407px','','', 'no-codepen')}} + +#### opacity() + +{{cssxref("filter-function/opacity()", "opacity()")}} 関数は、入力画像のサンプルに透過度を適用します。 `amount` の値は、変換の度合を定義します。 `0%` の値を指定すると、完全に透明になります。 `100%` では入力画像が変化しないままになります。 `0%` と `100%` の間は効果の線形乗数になります。これは、入力画像のサンプルに量を乗算することに相当します。補完時の空白値は `1` です。この関数は、より確立された {{cssxref("opacity")}} プロパティに似ていますが、フィルターの場合、一部のブラウザーでは性能を向上させるためにハードウェアアクセラレーションを提供する点が異なります。 + +```css +filter: opacity(50%) +``` + +```html hidden +<table class="standard-table"> + <thead> + <tr> + <th style="text-align: left;" scope="col">Original image</th> + <th style="text-align: left;" scope="col">Live example</th> + <th style="text-align: left;" scope="col">SVG Equivalent</th> + <th style="text-align: left;" scope="col">Static example</th> + </tr> + </thead> + <tbody> + <tr> + <td><img id="img1" class="internal default" src="test_form_14.jpeg" style="width: 100%;" /></td> + <td><img id="img2" class="internal default" src="test_form_14.jpeg" style="width: 100%;" /></td> + <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 276 183" color-interpolation-filters="sRGB"> + <filter id="opacity"> + <feComponentTransfer> + <feFuncA type="table" tableValues="0 0.5"> + </feComponentTransfer> + </filter> + <image xlink:href="test_form_14.jpeg" filter="url(#opacity)" width="276px" height="183px" /> +</svg><div></td> + <td><img id="img4" class="internal default" src="test_form_14_s.jpg" style="width: 100%;" /></td> + </tr> + </tbody> +</table> +``` + +```css hidden +html { + height:100%; +} +body { + font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif; + color: rgb(51, 51, 51); + height:100%; + overflow:hidden; +} +#img2 { + width:100%; + height:auto; + -moz-filter: opacity(50%); + -webkit-filter: opacity(50%); + -ms-filter: opacity(50%); + filter: opacity(50%); } +table.standard-table { + border: 1px solid rgb(187, 187, 187); + border-collapse: collapse; + border-spacing: 0px; + margin: 0px 0px 1.286em; + width: 85%; + height: 100%; +} +table.standard-table th { + border: 1px solid rgb(187, 187, 187); + padding: 0px 5px; + background: none repeat scroll 0% 0% rgb(238, 238, 238); + text-align: left; + font-weight: bold; +} +table.standard-table td { + padding: 5px; + border: 1px solid rgb(204, 204, 204); + text-align: left; + vertical-align: top; + width:25%; + height:auto; +} +#img3 { + height:100%; +} +``` + +{{EmbedLiveSample('opacity','100%','210px','','', 'no-codepen')}} + +#### saturate() + +{{cssxref("filter-function/saturate()", "saturate()")}} 関数は、入力画像の彩度を変化させます。 `amount` の値は、変換の度合を定義します。 `0%` の値を指定すると、無彩色になります。 `100%` では入力画像が変化しないままになります。 `0%` と `100%` の間は効果の線形乗数になります。 `100%` を超える値を指定することもでき、彩度を増した結果になります。補完時の空白値は `1` です。 + +```css +filter: saturate(200%) +``` + +```html hidden +<table class="standard-table"> + <thead> + <tr> + <th style="text-align: left;" scope="col">Original image</th> + <th style="text-align: left;" scope="col">Live example</th> + <th style="text-align: left;" scope="col">SVG Equivalent</th> + <th style="text-align: left;" scope="col">Static example</th> + </tr> + </thead> + <tbody> + <tr> + <td><img id="img1" class="internal default" src="test_form_9.jpeg" style="width: 100%;" /></td> + <td><img id="img2" class="internal default" src="test_form_9.jpeg" style="width: 100%;" /></td> + <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 201 239" color-interpolation-filters="sRGB"> + <filter id="saturate"> + <feColorMatrix type="saturate" + values="2"/> + </filter> + <image xlink:href="test_form_9.jpeg" filter="url(#saturate)" width="201px" height="239px" /> +</svg><div></td> + <td><img id="img4" class="internal default" src="test_form_9_s.jpg" style="width: 100%;" /></td> + </tr> + </tbody> +</table> +``` + +```css hidden +html { + height:100%; +} +body { + font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif; + color: rgb(51, 51, 51); + height:100%; + overflow:hidden; +} +#img2 { + width:100%; + height:auto; + -moz-filter: saturate(200%); + -webkit-filter: saturate(200%); + -ms-filter: saturate(200%); + filter: saturate(200%); } +table.standard-table { + border: 1px solid rgb(187, 187, 187); + border-collapse: collapse; + border-spacing: 0px; + margin: 0px 0px 1.286em; + width: 85%; + height: 100%; +} +table.standard-table th { + border: 1px solid rgb(187, 187, 187); + padding: 0px 5px; + background: none repeat scroll 0% 0% rgb(238, 238, 238); + text-align: left; + font-weight: bold; +} +table.standard-table td { + padding: 5px; + border: 1px solid rgb(204, 204, 204); + text-align: left; + vertical-align: top; + width:25%; + height:auto; +} +#img3 { + height:100%; +} +``` + +{{EmbedLiveSample('saturate','100%','332px','','', 'no-codepen')}} + +#### sepia() + +{{cssxref("filter-function/sepia()", "sepia()")}} 関数は、入力画像をセピア調にします。 `amount` の値は、変換の度合を定義します。 `100%` の値を指定すると、完全にセピア調になります。 `0%` では入力画像が変化しないままになります。 `0%` と `100%` の間は効果の線形乗数になります。補完時の空白値は `0` です。 + +```css +filter: sepia(100%) +``` + +```html hidden +<table class="standard-table"> + <thead> + <tr> + <th style="text-align: left;" scope="col">Original image</th> + <th style="text-align: left;" scope="col">Live example</th> + <th style="text-align: left;" scope="col">SVG Equivalent</th> + <th style="text-align: left;" scope="col">Static example</th> + </tr> + </thead> + <tbody> + <tr> + <td><img id="img1" class="internal default" src="test_form_12.jpeg" style="width: 100%;" /></td> + <td><img id="img2" class="internal default" src="test_form_12.jpeg" style="width: 100%;" /></td> + <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 259 194" color-interpolation-filters="sRGB"> + <filter id="sepia"> + <feColorMatrix type="matrix" + values="0.393 0.769 0.189 0 0 + 0.349 0.686 0.168 0 0 + 0.272 0.534 0.131 0 0 + 0 0 0 1 0"/> + </filter> + <image xlink:href="test_form_12.jpeg" filter="url(#sepia)" width="259px" height="194px" /> +</svg><div></td> + <td><img id="img4" class="internal default" src="test_form_12_s.jpg" style="width: 100%;" /></td> + </tr> + </tbody> +</table> +``` + +```css hidden +html { + height:100%; +} +body { + font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif; + color: rgb(51, 51, 51); + height:100%; + overflow:hidden; +} +#img2 { + width:100%; + height:auto; + -moz-filter: sepia(100%); + -webkit-filter: sepia(100%); + -ms-filter: sepia(100%); + filter: sepia(100%); } +table.standard-table { + border: 1px solid rgb(187, 187, 187); + border-collapse: collapse; + border-spacing: 0px; + margin: 0px 0px 1.286em; + width: 85%; + height: 100%; +} +table.standard-table th { + border: 1px solid rgb(187, 187, 187); + padding: 0px 5px; + background: none repeat scroll 0% 0% rgb(238, 238, 238); + text-align: left; + font-weight: bold; +} +table.standard-table td { + padding: 5px; + border: 1px solid rgb(204, 204, 204); + text-align: left; + vertical-align: top; + width:25%; + height:auto; +} +#img3 { + height:100%; +} +``` + +{{EmbedLiveSample('sepia','100%','229px','','', 'no-codepen')}} + +<h2 id="Combining_functions">関数の組み合わせ</h2> + +いくつかの関数を組み合わせてレンダリングを操作することができます。次の例では、画像のコントラストと明るさを強調しています。 + +```css +filter: contrast(175%) brightness(103%) +``` + +```html hidden +<table class="standard-table"> + <thead> + <tr> + <th style="text-align: left;" scope="col">Original image</th> + <th style="text-align: left;" scope="col">Live example</th> + <th style="text-align: left;" scope="col">Static example</th> + </tr> + </thead> + <tbody> + <tr> + <td><img id="img1" class="internal default" src="test_form_8.jpeg" style="width: 100%;" /></td> + <td><img id="img2" class="internal default" src="test_form_8.jpeg" style="width: 100%;" /></td> + <td><img id="img4" class="internal default" src="test_form_8_s.jpg" style="width: 100%;" /></td> + </tr> + </tbody> +</table> +``` + +```css hidden +html { + height:100%; +} +body { + font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif; + color: rgb(51, 51, 51); + height:100%; + overflow:hidden; +} +#img2 { + width:100%; + height:auto; + -moz-filter: contrast(175%) brightness(103%); + -webkit-filter: contrast(175%) brightness(103%); + -ms-filter: contrast(175%) brightness(103%); + filter: contrast(175%) brightness(103%); +} +table.standard-table { + border: 1px solid rgb(187, 187, 187); + border-collapse: collapse; + border-spacing: 0px; + margin: 0px 0px 1.286em; + width: 85%; + height: 100%; +} +table.standard-table th { + border: 1px solid rgb(187, 187, 187); + padding: 0px 5px; + background: none repeat scroll 0% 0% rgb(238, 238, 238); + text-align: left; + font-weight: bold; +} +table.standard-table td { + padding: 5px; + border: 1px solid rgb(204, 204, 204); + text-align: left; + vertical-align: top; + width:25%; + height:auto; +} +#img3 { + height:100%; +} +``` + +{{EmbedLiveSample('Combining_functions','100%','209px','','', 'no-codepen')}} + +## 公式定義 + +{{cssinfo}} + +## 形式文法 + +{{csssyntax}} + +## 例 + +### フィルター関数の適用 + +定義済み関数を使用した例が以下にあります。個別の例についてはそれぞれの関数を参照してください。 + +```css +.mydiv { + filter: grayscale(50%); +} + +/* Gray all images by 50% and blur by 10px */ +img { + filter: grayscale(0.5) blur(10px); +} +``` + +### SVG フィルターの適用 + +URL 関数を使用して SVG リソースを使用した例は以下の通りです。 + +```css +.target { + filter: url(#c1); +} + +.mydiv { + filter: url(commonfilters.xml#large-blur); +} +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [HTML コンテンツへの SVG 効果の適用](/ja/docs/Web/SVG/Applying_SVG_effects_to_HTML_content) +- {{cssxref("mask")}} プロパティ +- [SVG](/ja/docs/Web/SVG) diff --git a/files/ja/web/css/flex-shrink/index.html b/files/ja/web/css/flex-shrink/index.html deleted file mode 100644 index 16392cd2d4..0000000000 --- a/files/ja/web/css/flex-shrink/index.html +++ /dev/null @@ -1,126 +0,0 @@ ---- -title: flex-shrink -slug: Web/CSS/flex-shrink -tags: - - CSS - - CSS Flexible Boxes - - CSS Property - - CSS フレックスボックス - - NeedsContent - - Reference - - 'recipe:css-property' -translation_of: Web/CSS/flex-shrink ---- -<div>{{CSSRef}}</div> - -<p><span class="seoSummary"><strong><code>flex-shrink</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、フレックスアイテムの縮小係数を設定します。すべてのフレックスアイテムの寸法がフレックスコンテナーよりも大きい場合、アイテムは <code>flex-shrink</code> の数値に従って縮小して収まります。</span></p> - -<p>使用時は <code>flex-shrink</code> は {{cssxref("flex-grow")}} や {{cssxref("flex-basis")}} などの他のフレックスプロパティと共に使用され、ふつうは {{cssxref("flex")}} の一括指定を使用して定義されます。</p> - -<div>{{EmbedInteractiveExample("pages/css/flex-shrink.html")}}</div> - -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush:css no-line-numbers notranslate">/* <number> 値 */ -flex-shrink: 2; -flex-shrink: 0.6; - -/* グローバル値 */ -flex-shrink: inherit; -flex-shrink: initial; -flex-shrink: unset; -</pre> - -<p><code>flex-shrink</code> プロパティは単一の <code><a href="#<number>"><number></a></code> で指定します。</p> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt><code id="<number>"><number></code></dt> - <dd>{{cssxref("<number>")}} をご覧ください。負の値は無効です。既定値は 1 です。</dd> -</dl> - -<h2 id="Formal_definition" name="Formal_definition">公式定義</h2> - -<p>{{cssinfo}}</p> - -<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2> - -{{csssyntax}} - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="フレックスアイテムの縮小係数の設定">フレックスアイテムの縮小係数の設定</h3> - -<h4 id="HTML">HTML</h4> - -<div id="Live_Sample"> -<pre class="brush: html notranslate"><p>全体の幅は 500px で、フレックスアイテムの flex-basis は 120px です。</p> -<p>A、B、C には flex-shrink:1 が、D と E には flex-shrink:2 が設定されています。</p> -<p>D と E の幅は他より狭くなります。</p> -<div id="content"> - <div class="box" style="background-color:red;">A</div> - <div class="box" style="background-color:lightblue;">B</div> - <div class="box" style="background-color:yellow;">C</div> - <div class="box1" style="background-color:brown;">D</div> - <div class="box1" style="background-color:lightgreen;">E</div> -</div> -</pre> - -<h4 id="CSS">CSS</h4> - -<pre class="brush: css notranslate">#content { - display: flex; - width: 500px; -} - -#content div { - flex-basis: 120px; - border: 3px solid rgba(0,0,0,.2); -} - -.box { - flex-shrink: 1; -} - -.box1 { - flex-shrink: 2; -} -</pre> -</div> - -<h4 id="Result" name="Result">結果</h4> - -<p>{{EmbedLiveSample('Setting_flex_item_shrink_factor', 500, 300)}}</p> - -<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('CSS3 Flexbox', '#flex-shrink', 'flex-shrink')}}</td> - <td>{{Spec2('CSS3 Flexbox')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.flex-shrink")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>CSS フレックスボックスガイド: <em><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">フレックスボックスの基本概念</a></em></li> - <li>CSS フレックスボックスガイド: <em><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax">フレックスアイテムの主軸方向における比率の制御</a></em></li> -</ul> diff --git a/files/ja/web/css/flex-shrink/index.md b/files/ja/web/css/flex-shrink/index.md new file mode 100644 index 0000000000..7984548518 --- /dev/null +++ b/files/ja/web/css/flex-shrink/index.md @@ -0,0 +1,108 @@ +--- +title: flex-shrink +slug: Web/CSS/flex-shrink +tags: + - CSS + - CSS Flexible Boxes + - CSS Property + - CSS フレックスボックス + - NeedsContent + - Reference + - recipe:css-property +browser-compat: css.properties.flex-shrink +translation_of: Web/CSS/flex-shrink +--- +{{CSSRef}} + +**`flex-shrink`** は [CSS](/ja/docs/Web/CSS) のプロパティで、フレックスアイテムの縮小係数を設定します。すべてのフレックスアイテムの寸法がフレックスコンテナーよりも大きい場合、アイテムは `flex-shrink` の数値に従って縮小して収まります。 + +使用時は `flex-shrink` は {{cssxref("flex-grow")}} や {{cssxref("flex-basis")}} などの他のフレックスプロパティと共に使用され、ふつうは {{cssxref("flex")}} の一括指定を使用して定義されます。 + +{{EmbedInteractiveExample("pages/css/flex-shrink.html")}} + +## 構文 + +```css +/* <number> 値 */ +flex-shrink: 2; +flex-shrink: 0.6; + +/* グローバル値 */ +flex-shrink: inherit; +flex-shrink: initial; +flex-shrink: revert; +flex-shrink: unset; +``` + +`flex-shrink` プロパティは単一の `<number>` で指定します。 + +### 値 + +- `<number>` + - : {{cssxref("<number>")}} を参照してください。負の値は無効です。既定値は 1 です。 + +## 公式定義 + +{{cssinfo}} + +## 形式文法 + +{{csssyntax}} + +## 例 + +<h3 id="Setting_flex_item_shrink_factor">フレックスアイテムの縮小係数の設定</h3> + +#### HTML + +```html +<p>全体の幅は 500px で、フレックスアイテムの flex-basis は 120px です。</p> +<p>A、B、C には flex-shrink:1 が、D と E には flex-shrink:2 が設定されています。</p> +<p>D と E の幅は他より狭くなります。</p> +<div id="content"> + <div class="box" style="background-color:red;">A</div> + <div class="box" style="background-color:lightblue;">B</div> + <div class="box" style="background-color:yellow;">C</div> + <div class="box1" style="background-color:brown;">D</div> + <div class="box1" style="background-color:lightgreen;">E</div> +</div> +``` + +#### CSS + +```css +#content { + display: flex; + width: 500px; +} + +#content div { + flex-basis: 120px; + border: 3px solid rgba(0,0,0,.2); +} + +.box { + flex-shrink: 1; +} + +.box1 { + flex-shrink: 2; +} +``` + +#### 結果 + +{{EmbedLiveSample('Setting_flex_item_shrink_factor', 500, 300)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- CSS フレックスボックスガイド: _[フレックスボックスの基本概念](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)_ +- CSS フレックスボックスガイド: _[フレックスアイテムの主軸方向における比率の制御](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax)_ diff --git a/files/ja/web/css/font-variant-alternates/index.html b/files/ja/web/css/font-variant-alternates/index.html deleted file mode 100644 index 19abc10c3d..0000000000 --- a/files/ja/web/css/font-variant-alternates/index.html +++ /dev/null @@ -1,126 +0,0 @@ ---- -title: font-variant-alternates -slug: Web/CSS/font-variant-alternates -tags: - - CSS - - CSS Fonts - - CSS Property - - Reference -translation_of: Web/CSS/font-variant-alternates ---- -<div>{{CSSRef}}</div> - -<p><span class="seoSummary"><strong><code>font-variant-alternates</code></strong>CSSプロパティは代替グリフの使用を制御します。代替グリフは{{cssxref("@font-feature-values")}}で定義された代替名で参照される可能性があります。</span></p> - -<pre class="brush:css no-line-numbers">/* 予約語 */ -font-variant-alternates: normal; -font-variant-alternates: historical-forms; - -/* 函数表記値 */ -font-variant-alternates: stylistic(user-defined-ident); -font-variant-alternates: styleset(user-defined-ident); -font-variant-alternates: character-variant(user-defined-ident); -font-variant-alternates: swash(user-defined-ident); -font-variant-alternates: ornaments(user-defined-ident); -font-variant-alternates: annotation(user-defined-ident); -font-variant-alternates: swash(ident1) annotation(ident2); - -/* 大域値 */ -font-variant-alternates: initial; -font-variant-alternates: inherit; -font-variant-alternates: unset; -</pre> - -<p>{{cssxref("@font-feature-values")}}@規則は，OpenType機能と関連付けられた代替グリフ函数（<code>stylistic</code>，<code>styleset</code>，<code>character-variant</code>，<code>swash</code>，<code>ornament</code>，又は<code>annotation</code>）用の名前を定義できます。本プロパティを用いて，（{{cssxref("@font-feature-values")}}で定義された）対人可読な名前をスタイルシートで使うことができます。</p> - -<p>{{cssinfo}}</p> - -<h2 id="書式">書式</h2> - -<p>本プロパティは二つの形式の内一方を取ります:</p> - -<ul> - <li>予約語<code>normal</code></li> - <li>一又は複数の後掲した他の予約語及び函数（空白区切り・順不同）</li> -</ul> - -<h3 id="値">値</h3> - -<dl> - <dt><code>normal</code></dt> - <dd>この予約語は代替グリフを無効にします。</dd> - <dt><code>historical-forms</code></dt> - <dd>この予約語は歴史的形式――過去には一般的だったけれども今日そうではないグリフ――を有効にします。OpenTypeの<code>hist</code>機能タグに相当します。</dd> - <dt><code><a name="stylistic()"></a>stylistic()</code></dt> - <dd>この函数は個々の文字に対する様式的代替 (stylistic alternates) を有効にします。引数には数値に割り当てられたフォント固有の名称を指定します。OpenTypeの<code>salt</code>機能タグ（例: <code>salt 2</code>）に相当します。</dd> - <dt><code><a name="styleset()"></a>styleset()</code></dt> - <dd>この函数は一連の文字に対する様式的代替を有効にします。引数には数値に割り当てられたフォント固有の名称を指定します。OpenTypeの<code>ssXY</code>機能タグ（例: <code>ss02</code>）に相当します。</dd> - <dt><code><a name="character-variant()"></a>character-variant()</code></dt> - <dd>この函数は文字に対する様式的代替を有効にします。<code>styleset()</code>に似ていますが，一連の文字に対して一貫したグリフを作成せず，個々の文字が持つ様式は独立しており整合する必要はありません。引数には数値に割り当てられたフォント固有の名称を指定します。OpenTypeの<code>cvXY</code>機能タグ（例: <code>cv02</code>）に相当します。</dd> - <dt><code><a name="swash()"></a>swash()</code></dt> - <dd>この函数は<a href="https://en.wikipedia.org/wiki/Swash_%28typography%29">先端装飾</a>〔訳注: グリフの先端を流線的に延長する装飾。<a href="http://www.fishtailstudio.com/others/gd201601.pdf#page=252">訳語参考</a>〕グリフを有効にします。引数には数値に割り当てられたフォント固有の名称を指定します。OpenTypeの<code>swsh</code>及び<code>cswh</code>機能タグ（例: <code>swsh 2</code>及び<code>cswh 2</code>）に相当します。</dd> - <dt><code><a name="ornaments()"></a>ornaments()</code></dt> - <dd>この函数は<a href="https://ja.wikipedia.org/wiki/%E3%83%95%E3%83%AB%E3%83%BC%E3%83%AD%E3%83%B3">花形装飾活字</a>及び他の飾り文字グリフのような装飾を有効にします。引数には数値に割り当てられたフォント固有の名称を指定します。OpenTypeの<code>ornm</code>機能タグ（例: <code>ornm 2</code>）に相当します。 - <div class="note"><strong>注意:</strong> 文義を維持する目的で，フォント設計者は，箇条書き記号 (U+2022) の装飾的変形としてのUnicodeの飾り文字とマッチしないような装飾を含めるべきです。幾つかの既存のフォントがこの助言に従っていないことに留意して下さい。</div> - </dd> - <dt><code><a name="annotation()"></a>annotation()</code></dt> - <dd>この函数は丸数字又は鏡文字などの表記を有効にします。引数には数値に割り当てられたフォント固有の名称を指定します。OpenTypeの<code>nalt</code>機能タグ（例: <code>nalt 2</code>）に相当します。</dd> -</dl> - -<h3 id="形式文法">形式文法</h3> - -{{csssyntax}} - -<h2 id="例">例</h2> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><p>Firefox rocks!</p> -<p class="variant">Firefox rocks!</p> -</pre> - -<h3 id="CSS"><span class="pun">CSS</span></h3> - -<pre class="brush: css">@font-feature-values "Leitura Display Swashes" { - @swash { fancy: 1 } -} - -p { - font-size: 1.5rem; -} - -.variant { - font-family: Leitura Display Swashes; - font-variant-alternates: swash(fancy); -}</pre> - -<h3 id="結果">結果</h3> - -<div class="note"> -<p><strong>注意:</strong> この例を正しく閲覧するには，OpenTypeフォント<em>Leitura Display Swashes</em>を導入する必要があります。<a href="http://fontsgeek.com/fonts/Leitura-Display-Swashes">fontsgeek.com</a>等から試験目的の無償版が入手できます。</p> -</div> - -<p>{{ EmbedLiveSample('Example', '', '', '', 'Web/CSS/font-variant-alternates') }}</p> - -<h2 id="仕様書">仕様書</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('CSS3 Fonts', '#propdef-font-variant-alternates', 'font-variant-alternates')}}</td> - <td>{{Spec2('CSS3 Fonts')}}</td> - <td>初期定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_Compatibility" name="Browser_Compatibility">ブラウザ互換性</h2> - -<p>{{Compat("css.properties.font-variant-alternates")}}</p> diff --git a/files/ja/web/css/font-variant-alternates/index.md b/files/ja/web/css/font-variant-alternates/index.md new file mode 100644 index 0000000000..d2a89132cb --- /dev/null +++ b/files/ja/web/css/font-variant-alternates/index.md @@ -0,0 +1,124 @@ +--- +title: font-variant-alternates +slug: Web/CSS/font-variant-alternates +tags: + - CSS + - CSS Fonts + - CSS Property + - Reference + - recipe:css-property +browser-compat: css.properties.font-variant-alternates +translation_of: Web/CSS/font-variant-alternates +--- +{{CSSRef}} + +**`font-variant-alternates`** は CSS のプロパティで、代替書体の使用を制御します。代替書体は {{cssxref("@font-feature-values")}} で定義された代替名で参照される可能性があります。 + +```css +/* キーワード値 */ +font-variant-alternates: normal; +font-variant-alternates: historical-forms; + +/* 関数表記値 */ +font-variant-alternates: stylistic(user-defined-ident); +font-variant-alternates: styleset(user-defined-ident); +font-variant-alternates: character-variant(user-defined-ident); +font-variant-alternates: swash(user-defined-ident); +font-variant-alternates: ornaments(user-defined-ident); +font-variant-alternates: annotation(user-defined-ident); +font-variant-alternates: swash(ident1) annotation(ident2); + +/* グローバル値 */ +font-variant-alternates: initial; +font-variant-alternates: inherit; +font-variant-alternates: revert; +font-variant-alternates: unset; +``` + +{{cssxref("@font-feature-values")}} アット規則は、代替書体関数 (`stylistic`, `styleset`, `character-variant`, `swash`, `ornament`, `annotation`) の名前を定義し、その名前を OpenType の引数と関連付けることができます。このプロパティはスタイルシート内で ({{cssxref("@font-feature-values")}} で定義された) 人間が読める名前を利用できるようにします。 + +## 構文 + +このプロパティは二つの形式のうち一つを取ります。 + +- キーワード `normal` +- または、その他の下記のキーワードおよび関数を空白区切り、順不同で 1 つ以上 + +### 値 + +- `normal` + - : このキーワードは代替書体を無効にします。 +- `historical-forms` + - : このキーワードは歴史的形式 — 過去には一般的だったけれども今日そうではない書体を有効にします。 OpenType の `hist` の値に対応します。 +- `stylistic()` + - : この関数は、個々の文字に対して表現の変更を可能にします。この引数は、フォント固有の名前を数値に対応づけたものです。 OpenType の `salt` の値に相当します (例: `salt 2`)。 +- `styleset()` + - : この関数は、一連の文字に対するスタイルの代替を可能にします。この引数は、フォント固有の名前を数値に対応づけたものです。 OpenType の `ssXY` の値に相当します (例: `ss02`)。 +- `character-variant()` + - : この関数は、文字に対して特定のスタイルの選択肢を有効にします。 `styleset()` に似ていますが、一連の文字に対してまとまった書体を作成するわけではありませんので、個々の文字は独立した、整合が取れているとは限らないスタイルになります。この引数は、フォント固有の名前を数値に対応づけたものです。 OpenType の `cvXY` の値に相当します (例: `cv02`)。 +- `swash()` + - : この関数は、[先端装飾](https://en.wikipedia.org/wiki/Swash_%28typography%29)書体を有効にします。この引数は、フォント固有の名前を数値に対応づけたものです。 OpenType の `swsh` および `cswh` の値に相当します (例: `swsh 2` および `cswh 2`)。 +- `ornaments()` + + - : この関数は、[フルーロン](https://ja.wikipedia.org/wiki/%E3%83%95%E3%83%AB%E3%83%BC%E3%83%AD%E3%83%B3)およびその他の飾り書体などの装飾を有効にします。 OpenType の `ornm` の値に相当します (例: `ornm 2`)。 + + > **Note:** テキストの意味を保持するために、フォントデザイナーは、 Unicode のディングバット文字に一致しない装飾を、ビュレット文字 (U+2022) の装飾的な変種として含めるべきです。既存のフォントの中には、このアドバイスに従わないものもあるので注意が必要です。 + +- `annotation()` + - : この関数は、丸数字や鏡文字などの注釈表記を有効にします。この函数は丸数字又は鏡文字などの表記を有効にします。この引数は、フォント固有の名前を数値に対応づけたものです。 OpenType の `nalt` の値に相当します (例: `nalt 2`)。 + +## 公式定義 + +{{CSSInfo}} + +## 形式文法 + +{{csssyntax}} + +<h2 id="Examples">例</h2> + +### HTML + +```html +<p>Firefox rocks!</p> +<p class="variant">Firefox rocks!</p> +``` + +### CSS + +```css +@font-feature-values "Leitura Display Swashes" { + @swash { fancy: 1 } +} + +p { + font-size: 1.5rem; +} + +.variant { + font-family: Leitura Display Swashes; + font-variant-alternates: swash(fancy); +} +``` + +### 結果 + +> **Note:** この例を有効にするには、 OpenType フォントの _Leitura Display Swashes_ をインストールする必要があります。試験用途の無償版が、 [fontsgeek.com](https://fontsgeek.com/fonts/Leitura-Display-Swashes) などにあります。 + +{{ EmbedLiveSample('Examples', '', '', '', 'Web/CSS/font-variant-alternates') }} + +## 仕様書 + +Not part of any standard. + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("font-variant")}} +- {{cssxref("font-variant-caps")}} +- {{cssxref("font-variant-east-asian")}} +- {{cssxref("font-variant-ligatures")}} +- {{cssxref("font-variant-numeric")}} diff --git a/files/ja/web/css/gradient/conic-gradient()/index.md b/files/ja/web/css/gradient/conic-gradient()/index.md new file mode 100644 index 0000000000..7372d1f6bb --- /dev/null +++ b/files/ja/web/css/gradient/conic-gradient()/index.md @@ -0,0 +1,243 @@ +--- +title: conic-gradient() +slug: Web/CSS/gradient/conic-gradient() +tags: + - CSS + - CSS Function + - CSS Images + - Function + - Graphics + - Layout + - Reference + - Web + - gradient +browser-compat: css.types.image.gradient.conic-gradient +translation_of: Web/CSS/gradient/conic-gradient() +original_slug: Web/CSS/conic-gradient() +--- +{{CSSRef}} + +**`conic-gradient()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、 (中心から広がるのではなく) 中心点の周りを回りながら色が変化する画像を生成します。扇型グラデーションの例としては、円グラフや色相環などがあります。 `conic-gradient()` 関数の結果は {{CSSxRef("<gradient>")}} データ型のオブジェクトであり、これは {{CSSxRef("<image>")}} の特殊型です。 + +{{EmbedInteractiveExample("pages/css/function-conic-gradient.html")}} + +## 構文 + +```css +/* 45度回転した扇形グラデーション、 + 青で始まり赤で終わる */ +conic-gradient(from 45deg, blue, red); + +/* 青みがかった紫のボックス。グラデーションは青から赤へと + 進みます。しかし、扇形グラデーションの中心が左上にある + ため、右下の四分の一しか見えません。 */ +conic-gradient(from 90deg at 0 0, blue, red); + +/* 色相環 */ +background: conic-gradient( + hsl(360, 100%, 50%), + hsl(315, 100%, 50%), + hsl(270, 100%, 50%), + hsl(225, 100%, 50%), + hsl(180, 100%, 50%), + hsl(135, 100%, 50%), + hsl(90, 100%, 50%), + hsl(45, 100%, 50%), + hsl(0, 100%, 50%) +); +``` + +### 値 + +- {{CSSxRef("<angle>")}} + - : `from` キーワードに続いて角度を指定することで、時計回りのグラデーションの位置を定義します。 +- `<position>` + - : {{cssxref("background-position")}} プロパティと同じ長さ、順番、キーワード値を使用して、グラデーションの中心の位置を定義します。省略すると、既定値は`center`、すなわちグラデーションに配置されます。 +- `<angular-color-stop>` + - : 色経由点の {{CSSxRef("<color>")}} 値で、その後にオプションで 1 ～ 2 個の位置 (グラデーションの円周軸に沿った {{CSSxRef("<angle>")}}) が続きます。 +- `<color-hint>` + - : 隣接する色経由点の間でグラデーションがどのように進行するかを定義する補間のヒントです。長さは、 2 つの色経由点の間のどの位置でグラデーションの色が色の遷移の中間点に到達するかを定義します。省略した場合、色の遷移の中間点は 2 つの色経由点間の中間点になります。 + +> **Note:** [CSS グラデーションにおける色経由点](#gradient_with_multiple_color_stops)の描画は、 [SVG グラデーション](/ja/docs/Web/SVG/Tutorial/Gradients)と同じ規則に従います。 + +## 解説 + +他のグラデーションと同様、扇形グラデーションは[自身の寸法を持ちません](/ja/docs/Web/CSS/image#description)。つまり、自然の寸法や推奨される寸法、推奨される縦横比もありません。自身の寸法は適用先の要素の寸法、または要素の寸法以外で設定された `<image>` の寸法に一致します。 + +繰り返して 360 度の回転を埋める扇形グラデーションを生成するには、代わりに {{CSSxRef("gradient/repeating-conic-gradient()", "repeating-conic-gradient()")}} 関数を使用してください。 + +`<gradient>` は `<image>` データ型に属するため、 `<image>` が使用できるところでしか使用できません。このため、 `conic-gradient()` は {{CSSxRef("background-color")}} や、その他の {{CSSxRef("<color>")}} データ型を使用するプロパティでは動作しません。</p> + +> **Note:** 英語ではなぜ "conic" (円錐) グラデーションと呼ばれるのか。色経由点が一方よりもう一方が明るい場合、上から見た円錐のように見えるからです。 + +### 扇型グラデーションの構成 + +<p>扇形グラデーションの構文は放射グラデーションと似ていますが、色経由点はグラデーションの中心から現れるグラデーション軸上ではなく、グラデーション円弧、すなわち円周上に配置されます。扇形グラデーションでは、色の遷移は円の中心を回るように、上から始まって時計回りに行われます。放射グラデーションでは、色の遷移は楕円の中心から外に向けて、すべての方向に行われます。</p> + + + +扇形グラデーションは、回転角度とグラデーションの中心を指定し、色経由点のリストを指定します。[長さ](/ja/docs/Web/CSS/length)を指定して色経由点を配置する線形グラデーションや放射グラデーションとは異なり、扇形グラデーションの色経由点は角度を指定します。単位には[度](/ja/docs/Web/CSS/angle)を表す `deg`、グラードを表す `grad`、ラジアンを表す `rad`、回転数を表す `turn` があります。 1 つの円は 360 度、 400 グラード、 2π ラジアン、 1 回転になります。扇形グラデーションに対応しているブラウザーはパーセント値も受け付けており、 100% は 360 度に相当しますが、これは仕様にはありません。 + +放射グラデーションと同様に、扇形グラデーションの構文では、グラデーションの中心を画像内のどこにでも、あるいは画像の外側にでも配置することができます。位置の値は、 2 値の背景位置の構文に似ています。 + +グラデーション円弧は、グラデーションの円周です。グラデーションまたは円弧の*始点*は北、つまり 12 時の方向です。そして、グラデーションは _from_ の角度だけ回転します。グラデーションの色は、角度のついた色経由点、それらの開始点、終了点、および、その間、および、任意の角度のついた色経由点によって決定されます。色間の遷移は、隣接する色の色経由点の間のカラーヒントで変更することができます。 + +#### グラデーションのカスタマイズ + +グラデーション円弧上に角度のついた色経由点をさらに追加することで、複数の色の間で高度なカスタマイズされた遷移を行うことができます。色経由点の位置は、 {{CSSxRef("<angle>")}} を使って明示的に定義することができます。色経由点の位置を指定しない場合は、前の色経由点と後の色経由点の中間に配置されます。最初の色経由点と最後の色経由点に角度を指定しない場合、その値はそれぞれ 0deg と 360deg です。次の2つのグラデーションは同等です。 + +```css +conic-gradient(red, orange, yellow, green, blue); +conic-gradient(red 0deg, orange 90deg, yellow 180deg, green 270deg, blue 360deg); +``` + +既定では、色はある色経由点の色から次の色経由点の色へとスムーズに移行し、色と色の中間点が色移行の中間点となります。カラーヒントを追加して色遷移の中間点を示すことで、この色遷移の中間点を 2 つの色経由点間の任意の位置に移動させることができます。次の例は、開始点から 10% の印までは赤一色で、回転の 80% 以上で赤から青に移行し、最後の 10% は青一色になっています。しかし、赤から青へのグラデーション変化の中間点は 20％ の位置になります。 80grad (20％) のカラーヒントがなかった場合は 50％ の位置になります。 + +```css +conic-gradient(red 40grad, 80grad, blue 360grad); +``` + +2 つ以上の色経由点が同じ場所にある場合、その場所で宣言された最初の色と最後の色の間に不連続の (硬い) 色変化として表示されます。扇形グラデーションを使用して円グラフを作成するには、 -- 背景画像はアクセシビリティが確保できないため、正しい方法ではありませんが -- 隣接する 2 つの色経由点の色経由点の角度が同じである、硬い色経由点を使用します。これを実現する最も簡単な方法は、複数のポジションの色経由点を使用することです。次の 2 つの宣言は等価です。 + +```css +conic-gradient(#fff 0.09turn, #bbb 0.09turn, #bbb 0.27turn, #666 0.27turn, #666 0.54turn, #000 0.54turn); +conic-gradient(#fff 0turn 0.09turn, #bbb 0.09turn 0.27turn, #666 0.27turn 0.54turn, #000 0.54turn 1turn); +``` + +色経由点は、昇順に並べる必要があります。後続の色経由点がより低い値であった場合、前の色経由点の値を上書きし、硬い (不連続の) 色変化を生成します。次の例では、 30% の地点で赤から黄色に変化し、グラデーションの 35% の地点で黄色から青に変化しています。 + +```css +conic-gradient(red .8rad, yellow .6rad, blue 1.3rad); +``` + +扇形グラデーションでは、他にもさまざまな効果を作り出すことができます。奇しくも市松模様もその一つです。左上と右下の白、左下と右上の黒で四分円を作り、グラデーションを16回 (横に4回、下に4回) 繰り返すと市松模様になります。 + +```css +conic-gradient(#fff 90deg, #000 0.25turn 0.5turn, #fff 1rad 1.5rad, #000 300grad); +background-size: 25% 25%; +``` + +そして、そうですね、異なる角度のユニットを混ぜて使うこともできますが、やめておきましょう。以上、読みにくかったですね。 + +## アクセシビリティの考慮 + +ブラウザは、背景画像に関する特別な情報を支援技術に提供しません。これは主に画面リーダーにとって重要なことで、画面リーダーはその存在を告知しないため、ユーザーに何も伝えられません。扇形グラデーションを使って円グラフや市松模様などの効果を出すことは可能ですが、 CSS 画像は代替テキストを割り当てるネイティブな方法を提供していないため、扇形グラデーションで表現された画像は画面リーダーのユーザーが認知することはできません。ページの全体的な目的を理解するために重要な情報が画像に含まれている場合は、文書内で意味的に記述する方が良いでしょう。 + +- [MDN WCAG を理解する, ガイドライン 1.1 の説明](/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.1_%e2%80%94_providing_text_alternatives_for_non-text_content) +- [Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html) + +## 例 + +<h3 id="Gradient_at_40-degrees">40 度のグラデーション</h3> + +```css hidden +div { + width: 100px; + height: 100px; +} +``` + +```html hidden +<div></div> +``` + +```css +div { + background-image: + conic-gradient(from 40deg, #fff, #000); +} +``` + +{{EmbedLiveSample("Gradient_at_40-degrees", 120, 120)}} + +<h3 id="Off-centered_gradient">中心をずらしたグラデーション</h3> + +```css hidden +div { + width: 100px; + height: 100px; +} +``` + +```html hidden +<div></div> +``` + +```css +div { + background: conic-gradient(from 0deg at 0% 25%, blue, green, yellow 180deg); +} +``` + +{{EmbedLiveSample("Off-centered_gradient", 120, 120)}} + +<h3 id="Gradient_pie-chart">グラデーションの円グラフ</h3> + +This example uses multi-position color stops, with adjacent colors having the same color stop value, creating a striped effect. + +```css hidden +div { + width: 100px; + height: 100px; +} +``` + +```html hidden +<div></div> +``` + +```css +div { + background: conic-gradient( + red 36deg, orange 36deg 170deg, yellow 170deg); + border-radius: 50% +} +``` + +{{EmbedLiveSample("Gradient_pie-chart", 120, 120)}} + +<h3 id="Checkerboard">市松模様</h3> + +```css hidden +div { + width: 100px; + height: 100px; +} +``` + +```html hidden +<div></div> +``` + +```css +div { + background: + conic-gradient(#fff 0.25turn, #000 0.25turn 0.5turn, #fff 0.5turn 0.75turn, #000 0.75turn) + top left / 25% 25% repeat; + border: 1px solid; +} +``` + +{{EmbedLiveSample("Checkerboard", 120, 120)}} + +### その他の conic-gradient の例 + +他の例は [CSS グラデーションの使用](/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients)を参照してください。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [CSS グラデーションの使用](/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients) +- 他のグラデーション関数: {{cssxref("gradient/repeating-conic-gradient()", "repeating-conic-gradient()")}}, {{cssxref("gradient/linear-gradient()", "linear-gradient()")}}, {{cssxref("gradient/repeating-linear-gradient()", "repeating-linear-gradient()")}}, {{cssxref("gradient/radial-gradient()", "radial-gradient()")}}, {{cssxref("gradient/repeating-radial-gradient()", "repeating-radial-gradient()")}} +- {{cssxref("<image>")}} +- {{cssxref("image/image()","image()")}} +- {{cssxref("element()")}} +- {{cssxref("image/image-set()","image-set()")}} +- {{cssxref("cross-fade()")}} diff --git a/files/ja/web/css/gradient/index.html b/files/ja/web/css/gradient/index.html deleted file mode 100644 index 6192d160da..0000000000 --- a/files/ja/web/css/gradient/index.html +++ /dev/null @@ -1,184 +0,0 @@ ---- -title: <gradient> -slug: Web/CSS/gradient -tags: - - CSS - - CSS Data Type - - CSS Images - - Data Type - - Graphics - - Layout - - Reference -translation_of: Web/CSS/gradient ---- -<div>{{CSSRef}}</div> - -<p><strong><code><gradient></code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/CSS_Types">データ型</a>で、2色以上の連続的な色の変化で構成される特殊な型の {{cssxref("<image>")}} です。</p> - -<div>{{EmbedInteractiveExample("pages/css/type-gradient.html")}}</div> - -<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> - -<p>CSS グラデーションは<a href="/ja/docs/Web/CSS/image#no_intrinsic">固有の寸法を持ちません</a>。つまり、自然又は推奨される寸法や、推奨される縦横比を持ちません。実際の寸法は適用される要素に一致します。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<p><code><gradient></code> データ型は、以下のリストにある関数型のうちの一つによって定義します。</p> - -<div id="linear-gradient"> -<h4 id="Linear_gradient" name="Linear_gradient"><ruby>線形<rp> (</rp><rt>linear</rt><rp>) </rp></ruby>グラデーション</h4> - -<p>色が仮想の直線に沿って変化します。 {{cssxref("linear-gradient", "linear-gradient()")}} 関数で生成されます。</p> -</div> - -<div id="radial-gradient"> -<h4 id="Radial_gradient" name="Radial_gradient"><ruby>放射<rp> (</rp><rt>radical</rt><rp>) </rp></ruby>グラデーション</h4> - -<p>色が中央点 (origin) から連続的に変化します。 {{cssxref("radial-gradient", "radial-gradient()")}} 関数で生成されます。</p> -</div> - -<div id="repeating-gradient"> -<h4 id="Repeating_gradient" name="Repeating_gradient"><ruby>反復<rp> (</rp><rt>repeating</rt><rp>) </rp></ruby>グラデーション</h4> - -<p>要素全体を埋めるのに必要なだけ、グラデーションを繰り返します。 {{cssxref("repeating-linear-gradient", "repeating-linear-gradient()")}} 及び {{cssxref("repeating-radial-gradient", "repeating-radial-gradient()")}} 関数で生成されます。</p> -</div> - -<div id="conic-gradient"> -<h4 id="Conic_gradient" name="Conic_gradient"><ruby>扇形<rp> (</rp><rt>conic</rt><rp>) </rp></ruby>グラデーション</h4> - -<p>色が円を描くように連続的に変化します。 {{cssxref("conic-gradient", "conic-gradient()")}} 関数で生成されます。</p> -</div> - -<h2 id="Interpolation" name="Interpolation">補間</h2> - -<p>色に関する他の補間操作と同様、グラデーションはアルファ乗算済み色空間で計算されます。これは、色と透過性が同時に変化するときに、予期しない灰色が現れるのを避けるためです。 (古いブラウザーは、 <a href="/ja/docs/Web/CSS/color_value#transparent_keyword">transparent キーワード</a>を使用するとこれを使用しないことがあるので注意してください。)</p> - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="Linear_gradient_example" name="Linear_gradient_example">線形グラデーションの例</h3> - -<p>単純な線形グラデーションです。</p> - -<div class="hidden"> -<pre class="brush: html notranslate"><div class="linear-gradient">Linear gradient</div> -</pre> - -<pre class="brush: css notranslate">div { - width: 240px; - height: 80px; -}</pre> -</div> - -<pre class="brush: css notranslate">.linear-gradient { - background: linear-gradient(to right, - red, orange, yellow, green, blue, indigo, violet); -}</pre> - -<p>{{EmbedLiveSample('Linear_gradient_example', 240, 80)}}</p> - -<h3 id="Radial_gradient_example" name="Radial_gradient_example">放射グラデーションの例</h3> - -<p>単純な放射グラデーションです。</p> - -<div class="hidden"> -<pre class="brush: html notranslate"><div class="radial-gradient">Radial gradient</div> -</pre> - -<pre class="brush: css notranslate">div { - width: 240px; - height: 80px; -}</pre> -</div> - -<pre class="brush: css notranslate">.radial-gradient { - background: radial-gradient(red, yellow, rgb(30, 144, 255)); -} -</pre> - -<p>{{EmbedLiveSample('Radial_gradient_example', 240, 80)}}</p> - -<h3 id="Repeating_gradient_examples" name="Repeating_gradient_examples">反復グラデーションの例</h3> - -<p>単純な線形および放射の反復グラデーションの例です。</p> - -<div class="hidden"> -<pre class="brush: html notranslate"><div class="linear-repeat">Repeating linear gradient</div> -<br> -<div class="radial-repeat">Repeating radial gradient</div> -</pre> - -<pre class="brush: css notranslate">div { - width: 240px; - height: 80px; -}</pre> -</div> - -<pre class="brush: css notranslate">.linear-repeat { - background: repeating-linear-gradient(to top left, - lightpink, lightpink 5px, white 5px, white 10px); -} - -.radial-repeat { - background: repeating-radial-gradient(powderblue, powderblue 8px, white 8px, white 16px); -}</pre> - -<p>{{EmbedLiveSample('Repeating_gradient_examples', 240, 180)}}</p> - -<h3 id="Conic_gradient_example" name="Conic_gradient_example">扇形グラデーションの例</h3> - -<p>単純な扇形グラデーションの例です。なお、まだこれはブラウザーの間で十分に対応されていません。</p> - -<div class="hidden"> -<pre class="brush: html notranslate"><div class="conic-gradient">Conic gradient</div> -</pre> - -<pre class="brush: css notranslate">div { - width: 200px; - height: 200px; -}</pre> -</div> - -<pre class="brush: css notranslate">.conic-gradient { - background: conic-gradient(lightpink, white, powderblue); -} -</pre> - -<p>{{EmbedLiveSample('Conic_gradient_example', 240, 200)}}</p> - -<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 Images', '#gradients', '<gradient>')}}</td> - <td>{{Spec2('CSS4 Images')}}</td> - <td>conic-gradient を追加</td> - </tr> - <tr> - <td>{{SpecName('CSS3 Images', '#gradients', '<gradient>')}}</td> - <td>{{Spec2('CSS3 Images')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<div>{{Compat("css.types.image.gradient")}}</div> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients">CSS グラデーションの使用</a></li> - <li>グラデーション関数: {{cssxref("linear-gradient", "linear-gradient()")}}, {{cssxref("radial-gradient", "radial-gradient()")}}, {{cssxref("repeating-linear-gradient", "repeating-linear-gradient()")}}, {{cssxref("repeating-radial-gradient", "repeating-radial-gradient()")}}, {{cssxref("conic-gradient", "conic-gradient()")}}</li> - <li><a href="/ja/docs/Web/CSS/CSS_Types">CSS の基本データ型</a></li> - <li><a href="/ja/docs/Web/CSS/CSS_Values_and_Units">CSS 単位と値</a></li> - <li><a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Values_and_units">CSS 入門: 値と単位</a></li> -</ul> diff --git a/files/ja/web/css/gradient/index.md b/files/ja/web/css/gradient/index.md new file mode 100644 index 0000000000..5123beb559 --- /dev/null +++ b/files/ja/web/css/gradient/index.md @@ -0,0 +1,163 @@ +--- +title: <gradient> +slug: Web/CSS/gradient +tags: + - CSS + - CSS Data Type + - CSS Images + - Data Type + - Graphics + - Layout + - Reference +browser-compat: css.types.image.gradient +translation_of: Web/CSS/gradient +--- +{{CSSRef}} + +The **`<gradient>`** は [CSS](/ja/docs/Web/CSS) の[データ型](/ja/docs/Web/CSS/CSS_Types)で、 2 色以上の連続的な色の変化で構成される特殊な型の {{cssxref("<image>")}} です。 + +{{EmbedInteractiveExample("pages/css/type-gradient.html")}} + +CSS グラデーションは[自身の寸法を持ちません](/ja/docs/Web/CSS/image#description)。つまり、自然または推奨される寸法や、推奨される縦横比を持ちません。実際の寸法は適用される要素に一致します。 + +## 構文 + +`<gradient>` データ型は、以下のリストにある関数型のうちの一つによって定義します。 + +#### 線形グラデーション + +線形グラデーション (linear gradient) は、色が仮想の直線に沿って変化します。 {{cssxref("gradient/linear-gradient()", "linear-gradient()")}} 関数で生成されます。 + +#### 放射グラデーション + +放射グラデーション (radical gradient) は、色が中央点 (origin) から連続的に変化します。 {{cssxref("gradient/radial-gradient()", "radial-gradient()")}} 関数で生成されます。 + +#### 反復グラデーション + +反復グラデーション (repeating gradient) は、要素全体を埋めるのに必要なだけ、グラデーションを繰り返します。 {{cssxref("gradient/repeating-linear-gradient()", "repeating-linear-gradient()")}} および {{cssxref("gradient/repeating-radial-gradient()", "repeating-radial-gradient()")}} 関数で生成されます。 + +#### 扇形グラデーション + +扇形グラデーション (conic gradient) は、色が円を描くように連続的に変化します。 {{cssxref("gradient/conic-gradient()", "conic-gradient()")}} 関数で生成されます。 + +## 補間 + +色に関する他の補間操作と同様、グラデーションはアルファ乗算済み色空間で計算されます。これは、色と透過性が同時に変化するときに、予期しない灰色が現れるのを避けるためです。 (古いブラウザーは、 [transparent キーワード](/ja/docs/Web/CSS/color_value#transparent_keyword)を使用するとこれを使用しないことがあるので注意してください。) + +## 例 + +<h3 id="Linear_gradient_example">線形グラデーションの例</h3> + +単純な線形グラデーションです。 + +```html hidden +<div class="linear-gradient">Linear gradient</div> +``` + +```css hidden +div { + width: 240px; + height: 80px; +} +``` + +```css +.linear-gradient { + background: linear-gradient(to right, + red, orange, yellow, green, blue, indigo, violet); +} +``` + +{{EmbedLiveSample('Linear_gradient_example', 240, 120)}} + +<h3 id="Radial_gradient_example">放射グラデーションの例</h3> + +単純な放射グラデーションです。 + +```html hidden +<div class="radial-gradient">Radial gradient</div> +``` + +```css hidden +div { + width: 240px; + height: 80px; +} +``` + +```css +.radial-gradient { + background: radial-gradient(red, yellow, rgb(30, 144, 255)); +} +``` + +{{EmbedLiveSample('Radial_gradient_example', 240, 120)}} + +<h3 id="Repeating_gradient_examples">反復グラデーションの例</h3> + +単純な線形および放射の反復グラデーションの例です。 + +```html hidden +<div class="linear-repeat">Repeating linear gradient</div> +<br> +<div class="radial-repeat">Repeating radial gradient</div> +``` + +```css hidden +div { + width: 240px; + height: 80px; +} +``` + +```css +.linear-repeat { + background: repeating-linear-gradient(to top left, + lightpink, lightpink 5px, white 5px, white 10px); +} + +.radial-repeat { + background: repeating-radial-gradient(powderblue, powderblue 8px, white 8px, white 16px); +} +``` + +{{EmbedLiveSample('Repeating_gradient_examples', 240, 220)}} + +<h3 id="Conic_gradient_example">扇形グラデーションの例</h3> + +単純な扇形グラデーションの例です。なお、まだこれはブラウザーの間で十分に対応されていません。 + +```html hidden +<div class="conic-gradient">Conic gradient</div> +``` + +```css hidden +div { + width: 200px; + height: 200px; +} +``` + +```css +.conic-gradient { + background: conic-gradient(lightpink, white, powderblue); +} +``` + +{{EmbedLiveSample('Conic_gradient_example', 240, 240)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [CSS グラデーションの使用](/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients) +- グラデーション関数: {{cssxref("gradient/linear-gradient()", "linear-gradient()")}}, {{cssxref("gradient/repeating-linear-gradient()", "repeating-linear-gradient()")}}, {{cssxref("gradient/radial-gradient()", "radial-gradient()")}}, {{cssxref("gradient/repeating-radial-gradient()", "repeating-radial-gradient()")}}, {{cssxref("gradient/conic-gradient()", "conic-gradient()")}}, {{cssxref("gradient/repeating-conic-gradient()", "repeating-conic-gradient()")}} +- [CSS の基本データ型](/ja/docs/Web/CSS/CSS_Types) +- [CSS の単位と値](/ja/docs/Web/CSS/CSS_Values_and_Units) +- [CSS 入門: 値と単位](/ja/docs/Learn/CSS/Building_blocks/Values_and_units) diff --git a/files/ja/web/css/gradient/linear-gradient()/index.md b/files/ja/web/css/gradient/linear-gradient()/index.md new file mode 100644 index 0000000000..963db61405 --- /dev/null +++ b/files/ja/web/css/gradient/linear-gradient()/index.md @@ -0,0 +1,198 @@ +--- +title: linear-gradient() +slug: Web/CSS/gradient/linear-gradient() +tags: + - CSS + - CSS 画像 + - CSS 関数 + - Function + - Graphics + - Layout + - Reference + - Web + - gradient +translation_of: Web/CSS/gradient/linear-gradient() +original_slug: Web/CSS/linear-gradient() +browser-compat: css.types.image.gradient.linear-gradient +--- +{{CSSRef}} + +**`linear-gradient()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、二つ以上の色の連続的な直線に沿った変化から構成される画像を生成します。結果は {{CSSxRef("<gradient>")}} データ型のオブジェクトであり、これは {{CSSxRef("<image>")}} の特殊型です。 + +{{EmbedInteractiveExample("pages/css/function-linear-gradient.html")}} + +## 構文 + +```css +/* 45度に傾いたグラデーションで、 + 青から始まり赤で終わる */ +linear-gradient(45deg, blue, red); + +/* 右下から左上に向かうグラデーションで、 + 青から始まり赤で終わる */ +linear-gradient(to left top, blue, red); + +/* 色経由点: 下から上に向かうグラデーションで、 + 青から始まり、長さの 40% のところで緑になり、 + 赤で終わる */ +linear-gradient(0deg, blue, green 40%, red); + +/* 色ヒント: 左から右に向かうグラデーションで、 + 赤から始まり、グラデーションの長さ全体の + 10% に中間点が来て、残りの 90% の長さをかけて + 青色に変わる */ +linear-gradient(.25turn, red, 10%, blue); + +/* 複数位置の色経由点: 45 度傾いたグラデーションで、 + 左下半分が赤で右上半分が青、 + 赤から青への変化は明確な線 */ +linear-gradient(45deg, red 0 50%, blue 50% 100%); +``` + +### 値 + +- `<side-or-corner>` + + - : グラデーション軸の開始点の位置。指定する場合は、 `to` に続けて 2 つ以下のキーワードから成ります。一つは水平方向の辺 (`left` または `right`)、もう一方は垂直方向の辺 (`top` または `bottom`) です。辺を表すキーワードは順不同です。指定しない場合は、 `to bottom` が既定になります。 + + `to top`, `to bottom`, `to left`, `to right` の値は、 `0deg`, `180deg`, `270deg`, `90deg` の角度にそれぞれ対応します。他の値は角度に変換されます。 + +- {{CSSxRef("<angle>")}} + - : グラデーション軸の方向を角度で示します。 `0deg` の値は `to top` と等価で、値が増加するとそこから時計回りに回ります。</dd> +- `<linear-color-stop>` + - : 色経由点の {{CSSxRef("<color>")}} の値であり、任意でその後に停止位置を指定します (グラデーションの軸に沿った {{CSSxRef("<percentage>")}} または {{CSSxRef("<length>")}} の位置)。</dd> +- `<color-hint>` + - : 隣り合う色経由点の間でどのようにグラデーションが進むかを定義する補間のヒントです。長さによって、どの位置で二つの色経由点のグラデーション色が色の移行の中間点に達するかを定義します。省略された場合、色の移行の中間点は二つの色経由点の中点になります。 + +> **Note:** [CSS グラデーションにおける色経由点](#gradient_with_multiple_color_stops)の描画は、 [SVG グラデーション](/ja/docs/Web/SVG/Tutorial/Gradients)と同じ規則に従います。 +> +> なお、上記の最初の例は、 Mozilla Firefox (特にバージョン 80.0b3) では、正確には図のようには表示されません。描かれているように表示するには、 html の height プロパティを 100% または 100vh に設定する必要があります。 + +## 解説 + +他のグラデーションと同様、線形グラデーションは[自身の寸法を持ちません](/ja/docs/Web/CSS/image#description)。つまり、画像本来の寸法や、推奨される縦横比を持たないということです。実際の寸法は、適用先の要素の寸法と一致します。 + +繰り返して領域を埋め尽くす線形グラデーションを生成するには、代わりに {{cssxref("gradient/repeating-linear-gradient()", "repeating-linear-gradient()")}} 関数を使用してください。 + +`<gradient>` は CSS の `<image>` データ型に所属しますので、 `<image>` が使用できるところでのみ使用できます。このため、 `linear-gradient` は {{CSSxRef("background-color")}} や、その他の {{CSSxRef("<color>")}} を要求するプロパティでは動作しません。 + +### 線形グラデーションの構成 + +線形グラデーションは、グラデーション軸 (Gradient line) と呼ばれる軸によって定義されます。軸上の各点にはそれぞれ違った色が割り当てられます。なめらかなグラデーションを作成するために、 `linear-gradient()` 関数はグラデーション軸と直行する直線を、グラデーション軸上の交点の色で連続して引きます。 + + + +グラデーション軸は、グラデーション画像を含むボックスの中心と、角度によって定義されます。グラデーションの色は、開始点 (Starting point)、 終了点 (Ending point) と、省略可能な色経由点 (color-stop point) の各点でそれぞれ定義されます。 + +開始点は、グラデーション軸の最初の色が始まる点です。終了点は最後の色が終わるところです。これらの点は、グラデーション軸とそれに直交し、ボックスの同一象限にあるコーナーを通る直線との交点によって定義されます。ただ、もっと簡単に、ボックスの中心を原点としたときの開始点の点対称な位置としても定義できます。こうした何だかややこしい開始点と終了点の定義が、*マジックコーナー*と呼ばれる興味深い効果を生みました。開始点と終了点に近いコーナーは、それぞれ開始点と終了点と同じ色を持ちます。 + +#### グラデーションのカスタマイズ + +グラデーション軸に色経由点を追加することで、開始点と終了点の間で高度にカスタマイズした変化を作成することができます。色経由点は {{CSSxRef("<length>")}} や {{CSSxRef("<percentage>")}} データ型を使って、明示的に定義することができます。もし場所を定義しなかったときは、直前の点と直後の点の中間点になります。以下の二つのグラデーションは等価です。 + +```css +linear-gradient(red, orange, yellow, green, blue); +linear-gradient(red 0%, orange 25%, yellow 50%, green 75%, blue 100%); +``` + +ある色経由点の色から次の色経由点の色まで滑らかに色が変化し、色と色の中間点は、既定では色の変化の中間の位置になります。色の変化の中間点をどこに置くかを示すために、二つの色の間でラベルのない % の色ヒントを追加することで、色の中間点を二つの色経由点の間の任意の位置に移動することができます。次の例では、純粋な赤を先頭から 10% の位置まで、純粋な青を 90% の位置から末尾までに配置します。 10% から 90％ までの間は、赤から青への色変化ですが、色ヒントがない 30% があるので、変化の中間点は 50% の位置ではなく 30% の位置になります。 + +```css +linear-gradient(red 10%, 30%, blue 90%); +``` + +二つ以上の色経由点が同じ位置である場合、その位置で宣言された最初と最後の色の間で明確な線になります。 + +色経由点は昇順に並べてください。次の色経由点がより小さな値になると、以前の色経由点を上書きすることになり、急な変化になります。以下の例では、赤から始まって 40% の位置で黄色になり、それから 25% にわたって黄色から青への変化になります。 + +```css +linear-gradient(red 40%, yellow 30%, blue 65%); +``` + +色経由点には複数の位置が利用できます。 CSS 宣言の中で二つの位置を含めることで、二つの隣り合う色経由点として色を宣言することができます。 + +```css +linear-gradient(red 0%, orange 10%, orange 30%, yellow 50%, yellow 70%, green 90%, green 100%); +linear-gradient(red, orange 10% 30%, yellow 50% 70%, green 90%); +linear-gradient(red 0%, orange 10% 30%, yellow 50% 70%, green 90% 100%); +``` + +既定では、 0% の経由点に色がない場合、宣言されている最初の色がその場所の色になります。同様に、最後の色経由点に位置が宣言されていない場合は、最後の色が 100% の位置まで続くか、 100% の位置の色になります。 + +## 例 + +<h3 id="Gradient_at_a_45-degree_angle">45 度 のグラデーション</h3> + +```css hidden +body { + width: 100vw; + height: 100vh; +} +``` + +```css +body { + background: linear-gradient(45deg, red, blue); +} +``` + +{{EmbedLiveSample("Gradient_at_a_45-degree_angle", 120, 120)}} + +<h3 id="Gradient_that_starts_at_60_of_the_gradient_line">グラデーション軸の 60% から始まるグラデーション</h3> + +```css hidden +body { + width: 100vw; + height: 100vh; +} +``` + +```css +body { + background: linear-gradient(135deg, orange 60%, cyan); +} +``` + +{{EmbedLiveSample("Gradient_that_starts_at_60_of_the_gradient_line", 120, 120)}} + +<h3 id="Gradient_with_multi-position_color_stops">複数の位置の色経由点があるグラデーション</h3> + +この例は複数の位置の色経由点を使用しており、隣り合う色に同じ色経由値があるため、縞模様の効果になります。 + +```css hidden +body { + width: 100vw; + height: 100vh; +} +``` + +```css +body { + background: linear-gradient(to right, + red 20%, orange 20% 40%, yellow 40% 60%, green 60% 80%, blue 80%); +} +``` + +{{EmbedLiveSample("Gradient_with_multi-position_color_stops", 120, 120)}} + +<h3 id="More_linear-gradient_examples">その他のグラデーションの例</h3> + +他の例は [CSS グラデーションの使用](/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients)を参照してください。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [CSS グラデーションの使用](/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients) +- 他のグラデーション関数: {{cssxref("gradient/repeating-linear-gradient()", "repeating-linear-gradient()")}}, {{cssxref("gradient/radial-gradient()", "radial-gradient()")}}, {{cssxref("gradient/repeating-radial-gradient()", "repeating-radial-gradient()")}}, {{cssxref("gradient/conic-gradient()", "conic-gradient()")}}, {{cssxref("gradient/repeating-conic-gradient()", "repeating-conic-gradient()")}} +- {{CSSxRef("<image>")}} +- {{cssxref("element()")}} +- {{cssxref("image/image()","image()")}} +- {{cssxref("image/image-set()","image-set()")}} +- {{cssxref("cross-fade()")}} diff --git a/files/ja/web/css/gradient/linear-gradient()/linear-gradient.png b/files/ja/web/css/gradient/linear-gradient()/linear-gradient.png Binary files differnew file mode 100644 index 0000000000..240da5855e --- /dev/null +++ b/files/ja/web/css/gradient/linear-gradient()/linear-gradient.png diff --git a/files/ja/web/css/gradient/radial-gradient()/index.md b/files/ja/web/css/gradient/radial-gradient()/index.md new file mode 100644 index 0000000000..127f5f85ac --- /dev/null +++ b/files/ja/web/css/gradient/radial-gradient()/index.md @@ -0,0 +1,143 @@ +--- +title: radial-gradient() +slug: Web/CSS/gradient/radial-gradient() +tags: + - CSS + - CSS Function + - CSS Images + - Function + - Graphics + - Layout + - Reference + - Web + - gradient +translation_of: Web/CSS/gradient/radial-gradient() +original_slug: Web/CSS/radial-gradient() +browser-compat: css.types.image.gradient.radial-gradient +--- +{{CSSRef}} + +**`radial-gradient()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、二つ以上の色の連続的な推移が原点から放射状に広がる画像を生成します。形状は円形または楕円形にになります。関数の結果は {{cssxref("<gradient>")}} データ型のオブジェクトであり、これは {{cssxref("<image>")}} の特殊形です。 + +{{EmbedInteractiveExample("pages/css/function-radial-gradient.html")}} + +## 構文 + +```css +/* コンテナーの中央にあるグラデーション、 + 赤で始まり、青へ変わり、緑で終わる */ +radial-gradient(circle at center, red 0, blue, green 100%) +``` + +放射状のグラデーションは、グラデーションの中心 (0％ の楕円の位置) と、*末端図形* (100％ の楕円) の大きさと形状を示すことで指定します。 + +## 値 + +- {{cssxref("<position>")}} + - : グラデーションの位置で、 {{cssxref("background-position")}} や {{cssxref("transform-origin")}} と同じ方法で解釈されます。指定されなかった場合、既定値は `center` です。 +- `<ending-shape>` + - : グラデーションの末端図形です。値は `circle` (つまり、グラデーションの形状が一定の半径の円) か `ellipse` (つまり、軸に沿った楕円) のいずれかです。指定されなかった場合、既定値は `ellipse` です。 +- `<size>` + + - : グラデーションの末端図形の大きさを決定します。省略した場合の既定値は farthest-corner です。これは明示的に指定することも、キーワードで指定することもできます。ここでのキーワード定義では、グラデーションボックスのエッジは有限の線分ではなく、両方向に無限に伸びているものと考えてください。 + + グラデーションが円でも楕円でも `<size>` に以下のキーワードを使用することができます。 + + | キーワード | 説明 | + | ----------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | + | `closest-side` | グラデーションの末端図形は、ボックスの中心から最も近い辺 (circle の場合) または中心から最も近い縦の辺と横の辺 (ellipse の場合) に内接します。 | + | `closest-corner` | グラデーションの末端図形は、ボックスの中心から最も近い頂点に接するように大きさが調整されます。 | + | `farthest-side` | `closest-side` と同様ですが、末端図形がその中心から最も遠い辺 (または縦と横の辺) に接するように大きさが調整される点が異なります。 | + | `farthest-corner` | 既定値で、グラデーションの末端図形は、ボックスの中心から最も遠い頂点に接するように大きさが調整されます。 | + + `<ending-shape>` を `circle` と指定した場合、大きさを明示的に [`<length>`](/ja/docs/Web/CSS/length) として与えることができ、円形の広がりの大きさを明示的に指定します。負の値は不正です。 + + `<ending-shape>` を `ellipse` と指定するか省略した場合、大きさを二つの [`<length-percentage>`](/ja/docs/Web/CSS/length-percentage) で指定して明示的な楕円の大きさを指定することができます。 1 つ目の値は水平の広がり、 2 つ目の値は垂直の広がりです。パーセント値はグラデーションボックスの対応する長さからの相対値です。負の値は不正です。 + +- `<linear-color-stop>` + - : 色経由点の {{cssxref("<color>")}} 値と、それに続く 1 つまたは 2 つの省略可能な経由位置 (グラデーション軸沿いの {{cssxref("<percentage>")}} または {{cssxref("<length>")}}) です。 percentage が `0%`、または length が `0` の場合は、グラデーションの中心を表します。 `100%` は末端図形と仮想グラデーション光線の交点を表します。その間のパーセント値はグラデーション光線における直線的な位置です。 +- `<color-hint>` + - : color-hint は、隣り合う色経由点の間でどのようにグラデーションが進むかを定義する補間のヒントです。長さによって、どの位置で二つの色経由点のグラデーション色が色の移行の中間点に達するかを定義します。省略された場合、色の移行の中間点は二つの色経由点の中点になります。 + +## 解説 + +<p>他のグラデーションと同様、放射グラデーションは[自身の寸法を持ちません](/ja/docs/Web/CSS/image#description)。つまり、自然な寸法や推奨される寸法、推奨される縦横比もありません。具体的な寸法は、適用先の要素の寸法に一致します。 + +繰り返してコンテナーを埋める放射グラデーションを生成するには、代わりに {{cssxref("gradient/repeating-radial-gradient()", "repeating-radial-gradient()")}} 関数を使用してください。 + +`<gradient>` は `<image>` データ型に属するため、 `<image>` が使用できるところでしか使用できません。このため、 `radial-gradient()` は {{cssxref("background-color")}} や、その他の {{cssxref("<color>")}} データ型を使用するプロパティでは動作しません。</p> + +### 放射グラデーションの構成 + +放射グラデーションは*中心点*、*末端図形*、および二つ以上の*色経由点*で定義されます。 + +滑らかなグラデーションを生成するために、 `radial-gradient()` 関数は中央から*末端図形* (およびその先) に向けて一連の同心円の形状を描きます。図形の端は円または楕円です。 + +色経由点は、中心から右方向に水平に延びる*仮想グラデーション光線*の上に配置されます。色経由点の位置を決めるパーセント値は、図形の端とこのグラデーション光線の交点を `100%` としたときの相対値です。各形状は単色で、色は交差したグラデーション光線の色によって定義されます。 + +## 例 + +<h3 id="Simple_gradient">シンプルなグラデーション</h3> + +```html hidden +<div class="radial-gradient"></div> +``` + +```css hidden +.radial-gradient { + width: 240px; + height: 120px; +} +``` + +```css +.radial-gradient { + background-image: radial-gradient(cyan 0%, transparent 20%, salmon 40%); +} +``` + +{{EmbedLiveSample('Simple_gradient', 120, 120)}} + +<h3 id="Non-centered_gradient">中央から外れたグラデーション</h3> + +```html hidden +<div class="radial-gradient"></div> +``` + +```css hidden +.radial-gradient { + width: 240px; + height: 120px; +} +``` + +```css +.radial-gradient { + background-image: radial-gradient(farthest-corner at 40px 40px, + #f35 0%, #43e 100%); +} +``` + +{{EmbedLiveSample('Non-centered_gradient', 240, 120)}} + +### 他の radial-gradient の例 + +他の例は [CSS グラデーションの使用](/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients)を参照してください。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [CSS グラデーションの使用](/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients) +- 他のグラデーション関数: {{cssxref("gradient/repeating-radial-gradient()", "repeating-radial-gradient()")}}, {{cssxref("gradient/linear-gradient()", "linear-gradient()")}}, {{cssxref("gradient/repeating-linear-gradient()", "repeating-linear-gradient()")}}, {{cssxref("gradient/conic-gradient()", "conic-gradient()")}}, {{cssxref("gradient/repeating-conic-gradient()", "repeating-conic-gradient()")}} +- {{cssxref("<image>")}} +- {{cssxref("image/image()","image()")}} +- {{cssxref("element()")}} +- {{cssxref("image/image-set()","image-set()")}} +- {{cssxref("cross-fade()")}} diff --git a/files/ja/web/css/gradient/radial-gradient()/radial_gradient.png b/files/ja/web/css/gradient/radial-gradient()/radial_gradient.png Binary files differnew file mode 100644 index 0000000000..f16dc4e5da --- /dev/null +++ b/files/ja/web/css/gradient/radial-gradient()/radial_gradient.png diff --git a/files/ja/web/css/gradient/repeating-conic-gradient()/index.md b/files/ja/web/css/gradient/repeating-conic-gradient()/index.md new file mode 100644 index 0000000000..f9780d9829 --- /dev/null +++ b/files/ja/web/css/gradient/repeating-conic-gradient()/index.md @@ -0,0 +1,177 @@ +--- +title: repeating-conic-gradient() +slug: Web/CSS/gradient/repeating-conic-gradient() +tags: + - CSS + - CSS Function + - CSS Images + - Function + - Graphics + - Layout + - Reference + - Web + - gradient +browser-compat: css.types.image.gradient.repeating-conic-gradient +translation_of: Web/CSS/gradient/repeating-conic-gradient() +--- +{{CSSRef}} + +**`repeating-conic-gradient()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、 ([単一のグラデーション](conic-gradient())ではなく) 繰り返しのグラデーションからなる、色の遷移が (中心から[放射状に広がるのではなく](repeating-radial-gradient\(\))) 中心点の周りを回転する画像を生成します。 + +## 構文 + +```css +/* スターバースト: 青の上に青のスターブラスト: + このグラデーションは左上 4 分の 1 の位置を中心とした + 明るい青と暗い青のスターブラストで、 3 度傾いている + ため垂直線がありません。 */ +background: repeating-conic-gradient( + from 3deg at 25% 25%, + hsl(200, 100%, 50%) 0deg 15deg, + hsl(200, 100%, 60%) 10deg 30deg); +); +``` + +### 値 + +- {{CSSxRef("<angle>")}} + - : `from` キーワードに続いて角度を指定することで、時計回りのグラデーションの位置を定義します。 +- `<position>` + - : {{cssxref("background-position")}} プロパティと同じ長さ、順番、キーワード値を使用して、グラデーションの中心の位置を定義します。省略すると、既定値は`center`、すなわちグラデーションに配置されます。 +- `<angular-color-stop>` + - : 色経由点の {{CSSxRef("<color>")}} 値で、その後にオプションで 1 ～ 2 個の位置 (グラデーションの円周軸に沿った {{CSSxRef("<angle>")}}) が続きます。最後の色経由点から最初の色経由点までの角度が反復グラデーションの大きさを定義します。 +- `<color-hint>` + - : 隣接する色経由点の間でグラデーションがどのように進行するかを定義する補間のヒントです。長さは、 2 つの色経由点の間のどの位置でグラデーションの色が色の遷移の中間点に到達するかを定義します。省略した場合、色の遷移の中間点は 2 つの色経由点間の中間点になります。 + +> **Note:** [CSS グラデーションにおける色経由点](#gradient_with_multiple_color_stops)の描画は、 [SVG グラデーション](/ja/docs/Web/SVG/Tutorial/Gradients)と同じ規則に従います。 + +## 解説 + +反復扇形グラデーションの例にはスターバーストがあります。 `repeating-conic-gradient()` 関数の返値は {{CSSxRef("<gradient>")}} データ型のオブジェクトで、これは {{CSSxRef("<image>")}} の特殊形です。 + +最初と最後の色経由点がどちらも 0 度以上か 360 度未満になっていない場合、 conic-gradient は繰り返されません。 + +他のグラデーションと同様、扇形グラデーションは[自身の寸法を持ちません](/ja/docs/Web/CSS/image#description)。つまり、自然の寸法や推奨される寸法、推奨される縦横比もありません。自身の寸法は適用先の要素の寸法、または要素の寸法以外で設定された `<image>` の寸法に一致します。 + +`<gradient>` は `<image>` データ型に属するため、 `<image>` が使用できるところでしか使用できません。このため、 `conic-gradient()` は {{CSSxRef("background-color")}} や、その他の {{CSSxRef("<color>")}} データ型を使用するプロパティでは動作しません。</p> + +> **Note:** 反復しない扇形グラデーションを作成するには、グラデーションを 360 度の回転にするか、 {{cssxref("gradient/conic-gradient()", "conic-gradient()")}} 関数を使用するかしてください。 + +### 反復扇形グラデーションの理解 + +repeating-conic-gradient の構文は、 {{cssxref("gradient/conic-gradient()", "conic-gradient()")}} や {{cssxref("gradient/repeating-radial-gradient()", "repeating-radial-gradient()")}} の構文に似ています。反復しない扇形グラデーションのように、色経由点はグラデーションの円弧の周りに配置されます。反復放射グラデーションのように、反復部分の大きさは、最後の色経由点の角度から最初の色経由点を引いたものになります。 + + + +上記のグラデーションは 3 分の 1 が青、 3 分の 1 が赤、 3 分の 1 が黄色として定義されています。 + + repeating-conic-gradient(from 0deg, red 0deg 30deg, yellow 30deg 60deg, blue 60deg 90deg); + + repeating-radial-gradient(red 0 8%, yellow 8% 16%, blue 16% 24%); + + conic-gradient(red 120deg, yellow 120deg 240deg, blue 240deg); + + radial-gradient(red 33%, yellow 33% 66%, blue 66%); + +反復グラデーションを繰り返すためには、最初と最後の色経由点を定義します。繰り返さないグラデーションと同様に、最初と最後の色経由点は、明示的に宣言されていない場合、 0 と 100% または 360deg のいずれかであると仮定されます。これらの値を既定値とした場合、反復アークは360度となるため、繰り返されません。 + +繰り返しのない扇形グラデーションと同様に、色経由点はグラデーションの中心から出ているグラデーション軸上ではなく、グラデーション円弧 (円の円周) の周りに配置されます。 `from <angle>` が宣言されていない場合は一番上から始まり、最大と最小の色の角度の違いである角度の大きさ分だけ時計回りに進み、それを繰り返すことで、円の中心を回るように色が推移します。 + +繰り返しの扇形グラデーションは、回転角度とグラデーションの中心を指定し、さらに色経由点のリストを指定します。反復のない扇形グラデーションと同様に、反復扇形グラデーションの色経由点は {{cssxref('angle')}} で指定します。単位は、度は `deg`、グラデーションは `grad`、ラジアンは `rad`、ターンは `turn` です。円は、360 度、400 グラード、2πラジアン、1 ターンです。反復扇形グラデーションに対応しているブラウザーでは、360 度を 100% とするパーセント値も受け付けますが、これは仕様にはありません。 + +放射グラデーションと扇形グラデーションの構文は、グラデーションの中心を画像内または画像外の任意の場所に配置することができます。位置を指定する値は、 2 値の {{cssxref('background-position')}} の構文と同様です。 + +グラデーション円弧はグラデーションの円周の一部です。 0 度は北、つまり 12 時の方向です。グラデーションの色は、角度のついた色経由点、その開始点、終了点、そしてその間にある、任意の角度の色経由点ポイントによって決定されます。色の遷移は、隣接する色の色経由点の間にあるカラーヒントで変更することができます。 + +#### グラデーションのカスタマイズ + +グラデーションの円弧上に角度のついた色経由点ポイントをさらに追加することで、複数の色の間の高度なカスタマイズされた移行を行うことができます。色経由点の位置は、{{CSSxRef("<angle>")}} を使って明示的に定義することができます。色経由点の位置を指定しない場合は、その前の色経由点と後の色経由点の中間に配置されます。反復しないグラデーションと同様に、最初と最後の色経由点の角度を指定しない場合、その値は 0 度と 360 度になります。いずれの角度も指定しない場合は、非反復の円錐形グラデーションになります。最初と最後の色経由点にそれぞれ 0 度と 360 度以外の値を宣言すると、グラデーションはその値に基づいて繰り返されます。例えば、最初の色に角度を宣言せず、最後の色止めに 10% と宣言した場合、円弧は 10 回繰り返されます。むしろ、最初に宣言した色経由点が起点となり、最後の色経由点は最後に宣言した色経由点の角度となります。次の 2 つのグラデーションは等価です。 + +```css +repeating-conic-gradient(red, orange, yellow, green, blue 50%); +repeating-conic-gradient(from -45deg, red 45deg, orange, yellow, green, blue 225deg) +``` + +既定では、色はある色経由点の色から次の色経由点の色へとスムーズに移行し、色と色の中間点が色移行の中間点となります。この色遷移の中間点は、色遷移の中間点の位置を示すカラーヒントを追加することで、 2 つの色経由点間の任意の位置に移動させることができます。 + +2 つ以上の色経由点が同じ場所にある場合、その場所で宣言された最初の色と最後の色の間で硬い線になります。 + +異なる角度の単位を混在させることは可能ですが、やめておきましょう。 CSS が読みづらくなります。 + +## アクセシビリティの考慮 + +ブラウザは、背景画像に関する特別な情報を支援技術に提供しません。これは主に画面リーダーにとって重要なことで、画面リーダーはその存在を告知しないため、ユーザーに何も伝えられません。扇形グラデーションを使って円グラフや市松模様などの効果を出すことは可能ですが、 CSS 画像は代替テキストを割り当てるネイティブな方法を提供していないため、扇形グラデーションで表現された画像は画面リーダーのユーザーが認知することはできません。ページの全体的な目的を理解するために重要な情報が画像に含まれている場合は、文書内で意味的に記述する方が良いでしょう。 + +- [MDN WCAG を理解する, ガイドライン 1.1 の説明](/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.1_%e2%80%94_providing_text_alternatives_for_non-text_content) +- [Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html) + +## 例 + +<h3 id="Black_and_white_starburst">白黒のスターブラスト</h3> + +```css hidden +div { + width: 200px; + height: 200px; +} +``` + +```html hidden +<div></div> +``` + +```css +div { + background-image: + repeating-conic-gradient(#fff 0 9deg, #000 9deg 18deg); +} +``` + +{{EmbedLiveSample("Black_and_white_starburst", 220, 220)}} + +<h3 id="Off-centered_gradient">中心をずらしたグラデーション</h3> + +このグラデーションは 18 回繰り返されますが、右半分しか見えないので、 9 回の繰り返しにしか見えません。 + +```css hidden +div { + width: 200px; + height: 200px; +} +``` + +```html hidden +<div></div> +``` + +```css +div { + background: repeating-conic-gradient( + from 3deg at 25% 25%, + green, blue 2deg 5deg, green, yellow 15deg 18deg, green 20deg); +} +``` + +{{EmbedLiveSample("Off-centered_gradient", 220, 220)}} + +### その他の repeating-conic-gradient の例 + +それ以外の例は [CSS グラデーション](/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients)を参照してください。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [CSS グラデーションの使用](/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients) +- その他のグラデーション関数: {{cssxref("gradient/conic-gradient()", "conic-gradient()")}}, {{cssxref("gradient/linear-gradient()", "linear-gradient()")}}, {{cssxref("gradient/repeating-linear-gradient()", "repeating-linear-gradient()")}}, {{cssxref("gradient/radial-gradient()", "radial-gradient()")}}, {{cssxref("gradient/repeating-radial-gradient()", "repeating-radial-gradient()")}} +- {{cssxref("<image>")}} +- {{cssxref("image/image()","image()")}} +- {{cssxref("element()")}} +- {{cssxref("image/image-set()","image-set()")}} +- {{cssxref("cross-fade()")}} diff --git a/files/ja/web/css/gradient/repeating-linear-gradient()/index.md b/files/ja/web/css/gradient/repeating-linear-gradient()/index.md new file mode 100644 index 0000000000..de9a11c8ab --- /dev/null +++ b/files/ja/web/css/gradient/repeating-linear-gradient()/index.md @@ -0,0 +1,149 @@ +--- +title: repeating-linear-gradient() +slug: Web/CSS/gradient/repeating-linear-gradient() +tags: + - CSS + - CSS Function + - CSS Images + - Function + - Gradients + - Graphics + - Layout + - Reference + - Web +browser-compat: css.types.image.gradient.repeating-linear-gradient +translation_of: Web/CSS/gradient/repeating-linear-gradient() +original_slug: Web/CSS/repeating-linear-gradient() +--- +{{CSSRef}} + +**`repeating-linear-gradient()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、反復線形グラデーションによる画像を生成します。 {{cssxref("gradient/linear-gradient()", "linear-gradient()")}} と似ており、同じ引数を取りますが、両方向に無限に色経由点を繰り返してコンテナー全体を埋めます。関数の返値は {{cssxref("<gradient>")}} データ型のオブジェクトであり、これは {{cssxref("<image>")}} の特殊型です。 + +{{EmbedInteractiveExample("pages/css/function-repeating-linear-gradient.html")}} + +繰り返すグラデーションの長さは、最初の色経由点と最後の色経由点の間の距離です。最初の色に color-stop-length がない場合、 color-stop-length の既定値は 0 になります。それぞれの繰り返しにおいて、色経由点の位置は基本的な線形グラデーションの長さの倍数だけずらしたものになります。この結果、グラデーションの最初と最後の色は常に隣り合わせになります。二つが異なる色であれば、視覚的に明確な変わり目ができるでしょう。これは最初の色を最後の色として再び使用することで修正することができます。 + +他のグラデーションと同じく、線形反復グラデーションも[自身の寸法を持ちません](/ja/docs/Web/CSS/image#description)。つまり、本来の寸法も優先される寸法も、優先されるアスペクト比も持たないということです。実際の寸法は、適用先の要素の寸法と一致します。 + +`<gradient>` は CSS の `<image>` データ型に所属しますので、 `<image>` が使用できるところでのみ使用できます。このため、 `repeating-linear-gradient()` は {{Cssxref("background-color")}} や、その他の {{cssxref("<color>")}} を要求するプロパティでは動作しません。 + +## 構文 + +```css +/* 45 度方向に軸を延ばし、青で始め赤で終わり、 + 3 回繰り返す反復グラデーション */ +repeating-linear-gradient(45deg, blue, red 33.3%); + +/* 右下から左上に延び、青で始め赤で終わり、 + 20px ごとに繰り返す反復グラデーション */ +repeating-linear-gradient(to left top, blue, red 20px); + +/* 下から上に延び、青で始め、 40% から緑になり、 + 赤で終わるグラデーション。最後の色経由点が既定で + 100% なので、グラデーションは繰り返されない */ +repeating-linear-gradient(0deg, blue, green 40%, red); + +/* 5 回繰り返し、左から右に、赤で始まり、緑に変わり、 + 赤に戻るグラデーション */ +repeating-linear-gradient(to right, red 0%, green 10%, red 20%); +``` + +### 値 + +- `<side-or-corner>` + + - : グラデーション線の開始点の位置。指定する場合は、 `to` に続けて 2 つ以下のキーワードを指定します。一つは水平方向の辺 (`left` または `right`)、もう一方は垂直方向の辺 (`top` または `bottom`) です。辺を表すキーワードは順不同です。指定しない場合は、 `to bottom` が既定になります。 + + `to top`, `to bottom`, `to left`, `to right` の値は、 `0deg`, `180deg`, `270deg`, `90deg` の角度にそれぞれ対応します。他の値は角度に変換されます。 + +- {{cssxref("<angle>")}} + - : グラデーション線の方向を角度で示します。 `0deg` の値は `to top` と等価で、値が増加するとそこから時計回りに回ります。 +- `<linear-color-stop>` + - : 色経由点の {{CSSxRef("<color>")}} の値であり、任意でその後に停止位置を指定します(グラデーションの軸に沿った {{CSSxRef("<percentage>")}} または {{CSSxRef("<length>")}} の位置)。 `0%` のパーセント値または `0` の長さは、グラデーションの先頭を表します。 `100%` の値は画像の寸法の 100% であり、つまりグラデーションは反復されません。 +- `<color-hint>` + - : color-hint は、隣り合う色経由点の間でどのようにグラデーションが進むかを定義する補間のヒントです。長さによって、どの位置で二つの色経由点のグラデーション色が色の移行の中間点に達するかを定義します。省略された場合、色の移行の中間点は二つの色経由点の中点になります。 + +> **Note:** [CSS グラデーションにおける色経由点](#gradient_with_multiple_color_stops)の描画は、 [SVG グラデーション](/ja/docs/Web/SVG/Tutorial/Gradients)と同じ規則に従います。 + +### 形式文法 + +```css +repeating-linear-gradient( [ <angle> | to <side-or-corner> ,]? <color-stop-list> ) + \---------------------------------/ \---------------/ + グラデーション線の定義 色経由点のリスト + +where <side-or-corner> = [left | right] || [top | bottom] + and <color-stop-list> = [ <linear-color-stop> [, <color-hint>? ]? ]#, <linear-color-stop> + and <linear-color-stop> = <color> [ <color-stop-length> ]? + and <color-stop-length> = [ <percentage> | <length> ]{1,2} + and <color-hint> = [ <percentage> | <length> ] +``` + +## 例 + +<h3 id="Zebra_stripes">縞模様</h3> + +```css hidden +body { + width: 100vw; + height: 100vh; +} +``` + +```css +body { + background-image: repeating-linear-gradient(-45deg, + transparent, + transparent 20px, + black 20px, + black 40px); + /* 複数の色経由点の位置 */ + background-image: repeating-linear-gradient(-45deg, + transparent 0 20px, + black 20px 40px); +} +``` + +{{EmbedLiveSample('Zebra_stripes', 120, 120)}} + +<h3 id="Ten_repeating_horizontal_bars">10 回繰り返す水平線</h3> + +```css hidden +body { + width: 100vw; + height: 100vh; +} +``` + +```css +body { + background-image: repeating-linear-gradient(to bottom, + rgb(26,198,204), + rgb(26,198,204) 7%, + rgb(100,100,100) 10%); +} +``` + +{{EmbedLiveSample('Ten_repeating_horizontal_bars', 120, 120)}} + +最後の色経由点が 10% であり、グラデーションが垂直なので、反復グラデーション内の各グラデーションは 10% の高さになり、 10 本の水平線に相当します。 + +> **Note:** 他の例は [CSS グラデーションの使用](/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients)を参照してください。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [CSS グラデーションの使用](/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients) +- 他のグラデーション関数: {{cssxref("gradient/linear-gradient()", "linear-gradient()")}}, {{cssxref("gradient/radial-gradient()", "radial-gradient()")}}, {{cssxref("gradient/repeating-radial-gradient()", "repeating-radial-gradient()")}}, {{cssxref("gradient/conic-gradient()", "conic-gradient()")}}, {{cssxref("gradient/repeating-conic-gradient()", "repeating-conic-gradient()")}} +- {{cssxref("<image>")}} +- {{cssxref("image/image()","image()")}} +- {{cssxref("element()")}} +- {{cssxref("image/image-set()","image-set()")}} +- {{cssxref("cross-fade()")}} diff --git a/files/ja/web/css/gradient/repeating-radial-gradient()/index.md b/files/ja/web/css/gradient/repeating-radial-gradient()/index.md new file mode 100644 index 0000000000..8142f54a54 --- /dev/null +++ b/files/ja/web/css/gradient/repeating-radial-gradient()/index.md @@ -0,0 +1,152 @@ +--- +title: repeating-radial-gradient() +slug: Web/CSS/gradient/repeating-radial-gradient() +tags: + - CSS + - CSS Function + - CSS Images + - Function + - Gradients + - Graphics + - Layout + - Reference + - Web +browser-compat: css.types.image.gradient.repeating-radial-gradient +translation_of: Web/CSS/gradient/repeating-radial-gradient() +original_slug: Web/CSS/repeating-radial-gradient() +--- +{{CSSRef}} + +**`repeating-radial-gradient()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、原点から広がり反復するグラデーションから成る画像を生成します。 {{cssxref("gradient/radial-gradient()", "radial-gradient()")}} と似ており、同じ引数を取りますが、 {{cssxref("gradient/repeating-linear-gradient()", "repeating-linear-gradient()")}} と同様にすべての方向に色経由点を無限に繰り返してコンテナー全体を埋めます。関数の返値は {{cssxref("<gradient>")}} データ型のオブジェクトであり、これは {{cssxref("<image>")}} の特殊型です。 + +{{EmbedInteractiveExample("pages/css/function-repeating-radial-gradient.html")}} + +それぞれの繰り返しにおいて、色経由点の位置は基本的な放射グラデーションの寸法 (最初と最後の色経由点の間の距離) の倍数だけずらしたものになります。この結果、グラデーションの最初と最後の色は常に隣り合わせになります。二つが異なる色であれば、視覚的に明確な変わり目ができるので、最初の色を最後の色として繰り返すことで緩和できます。 + +他のグラデーションと同じく、放射反復グラデーションも[自身の寸法を持ちません](/ja/docs/Web/CSS/image#description)。つまり、本来の寸法も優先される寸法も、優先されるアスペクト比も持たないということです。実際の寸法は、適用先の要素の寸法と一致します。 + +`<gradient>` は `<image>` データ型に属するため、 `<image>` が使用できるところでしか使用できません。このため、 `repeating-radial-gradient()` は {{cssxref("background-color")}} や、その他の {{cssxref("<color>")}} データ型を使用するプロパティでは動作しません。 + +## 構文 + +```css +/* コンテナーの中央からのグラデーションで、 + 赤で始まり、青に変化し、緑で終わり、 + それぞれ 30px ごとに色が繰り返される */ +repeating-radial-gradient(circle at center, red 0, blue, green 30px); + +/* 左上の角付近の楕円形のグラデーションで、 + 赤で始まり、緑に変化し、また戻り、 + 中央と右下の角の間で5回繰り返され、 + 中央と左上の角の間は1回だけ */ +repeating-radial-gradient(farthest-corner at 20% 20%, red 0, green, red 20%); +``` + +### 値 + +- {{cssxref("<position>")}} + - : グラデーションの位置で、 {{cssxref("background-position")}} や {{cssxref("transform-origin")}} と同じ方法で解釈されます。指定されなかった場合、既定値は `center` です。 +- `<shape>` + - : グラデーションの形状です。 `circle` (グラデーションの形状が一定の半径の円の意味) か `ellipse` (軸に沿った楕円の意味) のいずれかです。指定されなかった場合、既定値は `ellipse` です。 +- `<extent-keyword>` + + - : 終端の形状の大きさを指定するキーワードです。利用可能な値は次の通りです。 + + | キーワード | 説明 | + | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | + | `closest-side` | グラデーションの終端の形状は、中心から最も近いボックスの辺に (circle の場合) または中心から最も近い縦の辺と横の辺に (ellipse の場合) 内接します。 | + | `closest-corner` | グラデーションの終端の形状は、ボックスの中心から最も近い頂点に接するように大きさが調整されます。 | + | `farthest-side` | `closest-side` と同様ですが、終端の形状がその中心から最も遠い辺 (または縦と横の辺) に接するように大きさが調整される点が異なります。 | + | `farthest-corner` | グラデーションの終端の形状は、ボックスの中心から最も遠い頂点に接するように大きさが調整されます。 | + + > **Note:** この関数の初期の実装では、他のキーワード (`cover` および `contain`) をそれぞれ標準の `farthest-corner` および `closest-side` の別名として含めていました。実装によってはすでに古い形を外しているので、標準的なキーワードのみを使用してください。 + +- `<color-stop>` + - : 色経由点の {{cssxref("<color>")}} 値と、それに続く省略可能な経由位置 (グラデーション軸沿いの {{cssxref("<percentage>")}} または {{cssxref("<length>")}}) です。 percentage が `0%`、または length が `0` の場合は、グラデーションの中心を表します。 `100%` は終端の形状と仮想グラデーション光の交点を表します。その間のパーセント値は仮想グラデーション光における直線的な位置です。 + +### 形式文法 + +```css +repeating-radial-gradient( + [[ circle || <length> ] [at <position>]? , | + [ ellipse || [<length> | <percentage> ]{2}] [at <position>]? , | + [[ circle | ellipse ] || <extent-keyword> ] [at <position>]? , | + at <position> , <color-stop-list> ) + \---------------------------------------------------------------/\-----------------/ + Contour, size and position of the ending shape List of color stops + +where <extent-keyword> = closest-corner | closest-side | farthest-corner | farthest-side + and <color-stop-list> = [ <linear-color-stop> [, <color-hint>? ]? ]#, <linear-color-stop> + and <linear-color-stop> = <color> [ <color-stop-length> ]? + and <color-stop-length> = [ <percentage> | <length> ]{1,2} + and <color-hint> = [ <percentage> | <length> ] +``` + +## 例 + +<h3 id="Black_and_white_gradient">白と黒のグラデーション</h3> + +```html hidden +<div class="radial-gradient"></div> +``` + +```css hidden +.radial-gradient { + width: 120px; + height: 120px; +} +``` + +```css +.radial-gradient { + background: repeating-radial-gradient(black, black 5px, white 5px, white 10px); +} +``` + +{{EmbedLiveSample('Black_and_white_gradient', 120, 120)}} + +<h3 id="Farthest-corner">最も遠い角</h3> + +```html hidden +<div class="radial-gradient"></div> +``` + +```css hidden +.radial-gradient { + width: 240px; + height: 120px; +} +``` + +```css +.radial-gradient { + background: repeating-radial-gradient(ellipse farthest-corner at 20% 20%, + red, black 5%, blue 5%, green 10%); + background: repeating-radial-gradient(ellipse farthest-corner at 20% 20%, + red 0 5%, green 5% 10%); +} +``` + +{{EmbedLiveSample('Farthest-corner', 120, 120)}} + +楕円のグラデーションは左上から 20% の位置が中心となり、中心と最も遠い角 (右下の角) の間で 10 回繰り返します。色経由点で複数の位置に対応しているブラウザーでは、赤と緑の縞模様の楕円が表示されます。この構文にまだ対応していないブラウザーでは、赤から黒、それから青から緑へと変化するグラデーションが表示されます。 + +> **Note:** 他の例は [CSS グラデーションの使用](/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients)をご覧ください。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [CSS グラデーションの使用](/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients) +- 他のグラデーション関数: {{cssxref("gradient/radial-gradient()", "radial-gradient()")}}, {{cssxref("gradient/linear-gradient()", "linear-gradient()")}}, {{cssxref("gradient/repeating-linear-gradient()", "repeating-linear-gradient()")}}, {{cssxref("gradient/conic-gradient()", "conic-gradient()")}}, {{cssxref("gradient/repeating-conic-gradient()", "repeating-conic-gradient()")}} +- {{cssxref("<image>")}} +- {{cssxref("image/image()","image()")}} +- {{cssxref("element()")}} +- {{cssxref("image/image-set()","image-set()")}} +- {{cssxref("cross-fade()")}} diff --git a/files/ja/web/css/grid-column-start/index.html b/files/ja/web/css/grid-column-start/index.html index 851c96552c..cf2f596e8d 100644 --- a/files/ja/web/css/grid-column-start/index.html +++ b/files/ja/web/css/grid-column-start/index.html @@ -181,7 +181,7 @@ grid-column-start: unset; <li>動画チュートリアル: <em><a href="http://gridbyexample.com/video/series-line-based-placement/">行ベースの配置</a></em></li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/ja/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/ja/docs/Web/CSS/Reference"><strong>CSS リファレンス</strong></a></li> diff --git a/files/ja/web/css/grid-column/index.html b/files/ja/web/css/grid-column/index.html index 8f96c2f915..3a6f29ac1d 100644 --- a/files/ja/web/css/grid-column/index.html +++ b/files/ja/web/css/grid-column/index.html @@ -132,7 +132,7 @@ translation_of: Web/CSS/grid-column <li>動画チュートリアル: <em><a href="http://gridbyexample.com/video/series-line-based-placement/">行ベースの配置</a></em></li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/ja/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/ja/docs/Web/CSS/Reference"><strong>CSS リファレンス</strong></a></li> diff --git a/files/ja/web/css/grid-row/index.html b/files/ja/web/css/grid-row/index.html index 5ec045442a..7531bbfdec 100644 --- a/files/ja/web/css/grid-row/index.html +++ b/files/ja/web/css/grid-row/index.html @@ -149,7 +149,7 @@ grid-row: unset; <li>動画チュートリアル: <em><a href="http://gridbyexample.com/video/series-line-based-placement/">行ベースの配置</a></em></li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/ja/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/ja/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> diff --git a/files/ja/web/css/grid-template-areas/index.html b/files/ja/web/css/grid-template-areas/index.html index ab3aa7b42a..f753d8596d 100644 --- a/files/ja/web/css/grid-template-areas/index.html +++ b/files/ja/web/css/grid-template-areas/index.html @@ -126,7 +126,7 @@ grid-template-areas: unset; <li>動画チュートリアル: <em><a href="http://gridbyexample.com/video/grid-template-areas/">Grid Template Areas</a></em></li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/ja/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/ja/docs/Web/CSS/Reference"><strong>CSS リファレンス</strong></a></li> diff --git a/files/ja/web/css/grid-template-columns/index.html b/files/ja/web/css/grid-template-columns/index.html index 8dd5cc65cc..d0b5627b94 100644 --- a/files/ja/web/css/grid-template-columns/index.html +++ b/files/ja/web/css/grid-template-columns/index.html @@ -158,7 +158,7 @@ grid-template-columns: unset; <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Subgrid">Subgrid</a></li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/ja/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/ja/docs/Web/CSS/Reference"><strong>CSS リファレンス</strong></a></li> diff --git a/files/ja/web/css/grid-template/index.html b/files/ja/web/css/grid-template/index.html index 7108c8f12b..c80fd2a006 100644 --- a/files/ja/web/css/grid-template/index.html +++ b/files/ja/web/css/grid-template/index.html @@ -152,7 +152,7 @@ footer { <li>動画チュートリアル:<em> <a href="http://gridbyexample.com/video/grid-template-shorthand/">Grid Template shorthand</a></em></li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/ja/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/ja/docs/Web/CSS/Reference"><strong>CSS リファレンス</strong></a></li> diff --git a/files/ja/web/css/grid/index.html b/files/ja/web/css/grid/index.html index f952fbd25d..6b5a8f0d1f 100644 --- a/files/ja/web/css/grid/index.html +++ b/files/ja/web/css/grid/index.html @@ -140,7 +140,7 @@ grid: unset; <li>グリッドレイアウトガイド: <em><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas#Grid_definition_shorthands">グリッドテンプレート領域 - グリッド定義の一括指定</a></em></li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/ja/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/ja/docs/Web/CSS/Reference"><strong>CSS リファレンス</strong></a></li> diff --git a/files/ja/web/css/image/image()/index.md b/files/ja/web/css/image/image()/index.md new file mode 100644 index 0000000000..e550541331 --- /dev/null +++ b/files/ja/web/css/image/image()/index.md @@ -0,0 +1,155 @@ +--- +title: image() +slug: Web/CSS/image/image() +tags: + - CSS + - CSS Function + - CSS Images + - Function + - Reference + - Web +browser-compat: css.types.image.image +translation_of: Web/CSS/image/image() +--- +{{CSSRef}} + +The **`image()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、 {{CSSxRef("<image>")}} を {{CSSxRef("url()")}} 関数と同様の様式で定義しますが、画像の書字方向を指定したり、メディアフラグメントで定義された画像の一部だけを表示したり、指定された画像がどれも描画できなかった場合の予備として単色を指定するなどの機能が追加されています。 + +> **Note:** CSS の `image()` 関数を {{DOMxRef("HTMLImageElement/Image", '<code>HTMLImageElement</code> のコンストラクターである <code>Image()</code>', '', 1)}} と混同しないでください。 + +## 構文 + +{{CSSSyntax("image()")}} + +ここで + +- `image-tags`{{Optional_Inline}} + - : 画像の書字方向、左書きならば `ltr`、右書きならば `rtl` です。 +- `image-src` {{Optional_Inline}} + - : 0 個以上の {{CSSxRef("url()")}} または {{CSSxRef("<string>")}} で、画像のソースをオプションの画像フラグメント識別子と共に指定します。 +- `color`{{Optional_Inline}} + - : 色であり、 `image-src` が見つからなかったり、対応していなかったり、宣言されていなかったりした場合の代替として使用される単色の背景色を指定します。 + +### 書字方向の認識 + +`image()` 表記の最初のオプション引数は、画像の書字方向です。この引数が含まれている場合、画像が反対の書字方向を持つ要素で使用されると、横書きモードでは画像が水平に反転します。書字方向を省略した場合は、言語の方向が変わっても画像は反転しません。 + +### 画像フラグメント + +`url()` と `image()` の大きな違いは、メディアフラグメント識別子 (開始点の x 軸と y 軸、幅と高さ) を画像ソースに追加することで、ソース画像の一部分のみを表示することができることです。引数で定義された画像の範囲は、独立した画像になります。構文は次のようになります。 + +```css +background-image: image('myimage.webp#xywh=0,20,40,60'); +``` + +要素の背景画像は、画像 _myImage.webp_ のうち、 0px, 20px の座標 (左上隅) から始まり、幅 40px、高さ 60px の部分になります。 + + +`#xywh=#,#,#,#` というメディアフラグメントの構文は、カンマで区切られた 4 つの数値を取ります。最初の 2 つの値は、作成されるボックスの始点の X および Y 座標を表します。 3 つ目の値はボックスの幅、最後の値は高さです。既定では、これらはピクセル値です。[メディア仕様書の spacial dimension definition](https://www.w3.org/TR/media-frags/#naming-space) によると、パーセント値にも対応しています。 + +```css +xywh=160,120,320,240 /* results in a 320x240 image at x=160 and y=120 */ +xywh=pixel:160,120,320,240 /* results in a 320x240 image at x=160 and y=120 */ +xywh=percent:25,25,50,50 /* results in a 50%x50% image at x=25% and y=25% */ +``` + +イメージフラグメントは、 `url()` 記法でも使用できます。 `#xywh=#,#,#,#` というメディアフラグメントの構文は「後方互換」であり、メディアフラグメントが理解できない場合は無視され、 `url()` で使用してもソースの呼び出しが壊れることはありません。ブラウザーがメディアフラグメントの表記を理解していない場合、フラグメントを無視して画像全体を表示します。 + +`image()` を理解できるブラウザーはフラグメント表記も理解できます。したがって、フラグメントが `image()` の中で理解できない場合は、その画像は無効とみなされます。 + +### 色による代替 + +`image()` で画像ソースと一緒に色が指定されていると、画像が無効で表示されない場合の代替として機能します。このような場合、`image()` 関数は、画像が含まれていないかのように描画を行い、単一色の画像を生成します。例として、白いテキストの背景に暗い色の画像を使用する場合を考えてみましょう。画像が描画されない場合、前景のテキストを読みやすくするために暗い背景色が必要になることがあります。 + +画像ソースを省略して色を含めることは有効で、色見本を作成します。背景色を宣言すると、すべての背景画像の下や後ろに配置されるのとは異なり、これは他の画像の上に (通常は半透明の) 色を配置するために使用できます。 + +色見本の寸法は、 {{CSSxRef("background-size")}} プロパティで設定できます。これは、要素全体を覆うように色を設定する `background-color` とは異なります。 `image(color)` と `background-color` の両方を配置すると、 {{CSSxRef("background-clip")}} と {{CSSxRef("background-origin")}} プロパティの影響を受けます。 + +## アクセシビリティの考慮 + +ブラウザーは、背景画像に関する特別な情報を支援技術に提供しません。これは主に画面リーダーにとって重要なことで、画面リーダーはその存在を告知しないため、ユーザーに何も伝えません。画像に、ページ全体の目的を理解するために重要な情報が含まれている場合は、文書内で意味的に記述したほうがよいでしょう。 + +- [MDN WCAG を理解する, ガイドライン 1.1 の説明](/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.1_%e2%80%94_providing_text_alternatives_for_non-text_content) +- [Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html) + +この機能は、画像の読み込みに失敗したときに予備の色を提供することで、アクセシビリティの向上に役立ちます。この機能は、すべての背景画像に背景色を含めることで実現できますが、 CSS の `image()` 関数では、画像の読み込みに失敗したときに背景色のみを含めることができます。つまり、透過 PNG/GIF/WebP の読み込みに失敗したときに、予備の色を追加することができます。 + +## 例 + +<h3 id="Directionally-sensitive_images">書字方向を意識した画像</h3> + +```html +<ul> + <li dir="ltr">行頭記号が左側で右向きの矢印になります。</li> + <li dir="rtl">行頭記号は同じ矢印で、左を指します。</li> +</ul> +``` + +```css +ul { + list-style-image: image(ltr 'rightarrow.png'); +} +``` + +左書きのリスト項目 (要素自体に `dir="ltr"` が設定されているもの、祖先から書字方向を継承しているもの、ページの既定値) では、画像がそのまま使用されます。 `<li>` に `dir="rtl"` が設定されているリスト項目や、祖先から右から左への指向性を受け継いでいるリスト項目 (アラビア語やヘブライ語に設定されている文書など) では、 `transform: scalex(-1)` が設定されているかのように、箇条書きのテキストが水平方向に反転して右に表示されます。テキストも左書きで表示されます。 + +{{EmbedLiveSample("Directionally-sensitive_images", "100%", 200)}} + +<h3 id="Displaying_a_section_of_the_background_image">背景画像のある範囲の表示</h3> + +```html +<div class="box">この上にカーソルを移動してください。どのように見えますか？</div> +``` + +```css +.box:hover { + cursor: image("sprite.png#xywh=32,64,16,16"); +} +``` + +ユーザーがボックスの上にカーソルを移動させると、カーソルは x=32 と y=64 の位置から始まる 16x16 ピクセルの範囲のスプライト画像に変わります。 + +{{EmbedLiveSample("Displaying_a_section_of_the_background_image", "100%", 100)}} + +<h3 id="Putting_color_on_top_of_a_background_image">背景画像の上に色を配置</h3> + +```css hidden +.quarterlogo {height: 200px; width: 200px; border: 1px solid;} +``` + +```css +.quarterlogo { + background-image: + image(rgba(0, 0, 0, 0.25)), + url("firefox.png"); + background-size: 25%; + background-repeat: no-repeat; +} +``` + +```html +<div class="quarterlogo">対応している場合、この div の4分の1は、ロゴが暗くなります</div> +``` + +上記の例は、 Firefox のロゴの背景画像に半透明の黒いマスクをかぶせています。 {{cssxref("background-color")}} プロパティを使用していた場合は、色はロゴ画像の上ではなく背後に表示されていたでしょう。また、コンテナー全体の背景色も同じになっていたでしょう。 `image()` と {{CSSxRef("background-size")}} プロパティを使用し、 {{CSSxRef("background-repeat")}} プロパティで画像が繰り返されないようにしたため、色見本はコンテナーの 4 分の 1 しか覆っていません。 + +{{EmbedLiveSample("Putting_color_on_top_of_a_background_image", "100%", 220)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## See also + +- {{CSSxRef("<image>")}} +- {{CSSxRef("element()")}} +- {{CSSxRef("url()")}} +- {{CSSxRef("clip-path")}} +- {{CSSxRef("-moz-image-rect")}} +- {{CSSxRef("<gradient>")}} +- {{CSSxRef("image/image-set()")}} +- {{CSSxRef("cross-fade()")}} diff --git a/files/ja/web/css/image/image-set()/index.md b/files/ja/web/css/image/image-set()/index.md new file mode 100644 index 0000000000..8fbb72453c --- /dev/null +++ b/files/ja/web/css/image/image-set()/index.md @@ -0,0 +1,93 @@ +--- +title: image-set() +slug: Web/CSS/image/image-set() +tags: + - CSS + - CSS Function + - CSS-4 Images + - Function + - Reference + - Web +browser-compat: css.types.image.image-set +translation_of: Web/CSS/image/image-set() +original_slug: Web/CSS/image-set() +--- +{{cssref}} + +**`image-set()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)表記で、主に高解像度の画面において、指定されたセットから最も適切な CSS 画像をブラウザーに選択させる方法です。 + +解像度と帯域は端末やネットワークアクセスによって様々です。 `image-set()` 関数は、画像オプションのセットを提供して — それぞれが解像度の宣言に関連付けられ — ブラウザーが端末および設定にもっともふさわしいものを選択することで、ユーザーの端末にもっとも適切な解像度の画像を配信します。解像度はファイルサイズのプロキシーとして使用することができます。 — 高解像度の画面で遅いモバイル接続を使用しているユーザーエージェントは、高解像度の画面の読み込みを待つよりも、低解像度の画像を受信したほうが良いかもしれません。 + +`image-set()` はそれぞれのユーザーが必要なことを判断するのではなく、オプションを提供することができます。 + +## 構文 + +```css +image-set() = image-set( <image-set-option># ) +where <image-set-option> = [ <image> | <string> ] <resolution> and + <string> is an <url> +``` + +### 値 + +- `<image>` + - : [`<image>`](/ja/docs/Web/CSS/image) は画像セット以外のあらゆる画像を指定できます。 `image-set()` 関数は他の `image-set()` 関数の中に入れ子にすることはできません。 +- `<string>` + - : 画像への `url()` です。 +- `<resolution>`{{optional_inline}} + - : [`<resolution>`](/ja/docs/Web/CSS/resolution) の単位には、 `x` や `dppx` (dots per pixel 単位)、dpi (dots per inch)、dpcm (dots per centimeter) があります。 `image-set()` 内の画像すべて、解像度が固有でなければなりません。 +- `type(<string>)`{{optional_inline}} + - : 有効な MIME タイプの文字列、例えば "image/jpeg" です。 + +## 例 + +### image-set() を使用して代替の background-image オプションの提供 + +この例は [`image-set()`](https://drafts.csswg.org/css-images-4/#funcdef-image-set) を使用して 2 つの代替 {{cssxref("background-image")}} オプションを提供する方法を示しています。解像度の必要性に応じて、通常版と高解像度版から選択します。 + +{{EmbedGHLiveSample("css-examples/images/image-set.html", '100%', 600)}} + +> **Note:** 上記の例では、 `-webkit` の接頭辞が付いた版を Chrome および Safari に対応させるために併用しています。 Firefox 90 では (標準のプロパティを追加していない開発者の互換性を確保するために) `-webkit-image-set()` を `image-set()` の別名として使用する対応が追加されました。 + +### image-set() を使用して別な画像形式を提供 + +次の例では `type()` 関数を使用して画像を AVIF および JPEG 形式で提供しています。ブラウザーが avif に対応している場合は、このバージョンが選択されます。それ以外の場合は jpeg バージョンを使用します。 + +{{EmbedGHLiveSample("css-examples/images/image-set-type.html", '100%', 600)}} + +#### 代替画像の提供 + +`image-set()` には内蔵のフォールバックはありません。したがって、この関数に対応していないブラウザーのための背景画像を設定するには、 `image-set()` を使用する行の前に別の宣言が必要です。 + +```css +.box { + background-image: url("large-balloons.jpg"); + background-image: image-set( + url("large-balloons.avif") type("image/avif"), + url("large-balloons.jpg") type("image/jpeg")); +} +``` + +## アクセシビリティの考慮 + +<p>ブラウザーは支援技術に対して、背景画像についての特別な情報を何も提供しません。これは主に読み上げソフトにとって重要であり、読み上げソフトは背景画像が存在することをアナウンスせず、したがってユーザーには何も伝えられません。もし画像がページ全体の目的を理解するのに重要な情報を含んでいる場合は、文書中に意味的に記述するようにしてください。</p> + +- [MDN WCAG を理解する, ガイドライン 1.1 の解説](/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.1_%e2%80%94_providing_text_alternatives_for_non-text_content) +- [Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html) + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("image")}} +- {{cssxref("image/image()", "image()")}} +- {{cssxref("element()")}} +- {{cssxref("url()")}} +- {{cssxref("<gradient>")}} +- {{cssxref("cross-fade()")}} diff --git a/files/ja/web/css/image/index.html b/files/ja/web/css/image/index.html deleted file mode 100644 index a719ebf3e6..0000000000 --- a/files/ja/web/css/image/index.html +++ /dev/null @@ -1,174 +0,0 @@ ---- -title: <image> -slug: Web/CSS/image -tags: - - CSS - - CSS Data Type - - CSS Images - - Data Type - - Graphics - - Layout - - Reference - - Web -translation_of: Web/CSS/image ---- -<p>{{CSSRef}}</p> - -<p><strong><code><image></code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/CSS_Types">データ型</a>で、二次元の画像を表現します。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<p><code><image></code> データ型は以下のいずれかによって表すことができます。</p> - -<ul> - <li>{{CSSxRef("<url>")}} データ型で記述された画像</li> - <li>{{CSSxRef("<gradient>")}} データ型</li> - <li>{{CSSxRef("element")}} 関数で定義されたウェブページの一部</li> - <li>{{CSSxRef("image()")}} 関数で定義された画像、画像フラグメント、単色の色</li> - <li>{{CSSxRef("cross-fade")}} 関数で定義された2つ以上の画像の合成</li> - <li>{{CSSxRef("image-set")}} 関数で定義された、解像度に基づいて定義された画像の選択</li> -</ul> - -<h2 id="Description" name="Description">解説</h2> - -<p>CSS はさまざま種類の画像を扱うことができます。</p> - -<ul> - <li>JPEG や PNG やその他の<a href="https://en.wikipedia.org/wiki/Raster_graphics">ラスタ形式</a>など、<ruby><em>固有の寸法</em><rp> (</rp><rt><em>intrinsic dimensions</em></rt><rp>)</rp></ruby> (自然の寸法) を持つ画像。</li> - <li>一部の .ico 形式のように、単一のファイルの中に複数のバージョンが存在する、<em>複数の固有の寸法</em>を持つ画像。 (この場合、固有の寸法は領域に収まる最も大きな画像であり、かつアスペクト比が包含ボックスに最も近いものになります。)</li> - <li>SVG またはその他の<a href="https://en.wikipedia.org/wiki/Vector_graphics">ベクター形式</a>のように、固有の寸法を持たないが、幅と高さの間に固有のアスペクト比のある画像。</li> - <li id="no_intrinsic">CSS のグラデーションなど、<em>固有の寸法がなく、固有のアスペクト比もない</em>画像。</li> -</ul> - -<p>CSS はオブジェクトの<em>正しい</em>寸法を、 (1) <em>固有の寸法</em>、 (2) CSS の {{CSSxRef("width")}}, {{CSSxRef("height")}}, {{CSSxRef("background-size")}} などの CSS プロパティで定義された<em>指定された寸法</em>、 (3) 画像が使用されるプロパティの種類によって指定された、以下のような<em>既定の寸法</em>によって特定します。</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">オブジェクトの種類 (CSS プロパティ)</th> - <th scope="col">既定のオブジェクトの寸法</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{CSSxRef("background-image")}}</td> - <td>要素の background の置かれる領域の寸法</td> - </tr> - <tr> - <td>{{CSSxRef("list-style-image")}}</td> - <td><code>1em</code> の文字の寸法</td> - </tr> - <tr> - <td>{{CSSxRef("border-image-source")}}</td> - <td>要素の境界画像領域の寸法</td> - </tr> - <tr> - <td>{{CSSxRef("cursor")}}</td> - <td>クライアントのシステムにおける通常のカーソルの寸法に合うブラウザーが定義した寸法</td> - </tr> - <tr> - <td>{{CSSxRef("mask-image")}}</td> - <td>?</td> - </tr> - <tr> - <td>{{CSSxRef("shape-outside")}}</td> - <td>?</td> - </tr> - <tr> - <td>{{CSSxRef("mask-border-source")}}</td> - <td>?</td> - </tr> - <tr> - <td>@counter-style の {{CSSxRef("symbols")}}</td> - <td>危険性のある機能です。対応している場合、クライアントのシステムでのカーソルの寸法に合わせたブラウザー定義の寸法です。</td> - </tr> - <tr> - <td>擬似要素 ({{CSSxRef("::after")}} または {{cssxref("::before")}}) の {{CSSxRef("content")}}</td> - <td>300px × 150px の矩形</td> - </tr> - </tbody> -</table> - -<p>正しいオブジェクトの寸法は、次のアルゴリズムを使って計算されます。</p> - -<ul> - <li>指定された寸法に<em>幅と高さの両方</em>が定義されていれば、その値が実際の寸法に使われます。</li> - <li>指定された寸法に<em>幅と高さのどちらかのみ</em>が定義されていれば、欠けている値は次のいずれかで決められます。画像固有の比率、指定値がマッチするなら画像固有の寸法、既定のオブジェクトの寸法の値。</li> - <li>指定された寸法が<em>幅と高さを定義していない</em>ときは、画像固有のアスペクト比に一致し、既定のオブジェクトの寸法をどの方向にも超過しないような値が計算され、実際のオブジェクト寸法に使われます。画像に固有のアスペクト比がないときは、画像が用いられるオブジェクト固有のアスペクト比が使われます。オブジェクトが固有のアスペクト比を持たないときは、欠けた幅や高さは既定のオブジェクトサイズからとられます。</li> -</ul> - -<div class="note"><strong>注:</strong> すべてのブラウザーがすべてのプロパティですべての種類の画像に対応しているわけではありません。詳細は<a href="#Browser_compatibility">ブラウザーの互換性</a>の節をご覧ください。</div> - -<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮</h2> - -<p>ブラウザーは、背景画像に関する特別な情報を支援技術に提供しません。これは主に読み上げアプリにとって重要であり、読み上げアプリはその存在を告知しないため、ユーザーには何も伝えません。ページの全体的な目的を理解する上で重要な情報が画像に含まれている場合は、文書の中でその意味を記述した方が良いでしょう。</p> - -<ul> - <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_%E2%80%94_Providing_text_alternatives_for_non-text_content">MDN "WCAG を理解する ― ガイドライン 1.1 の解説"</a></li> - <li><a href="https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html">Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0</a></li> -</ul> - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="Valid_images" name="Valid_images">有効な画像</h3> - -<pre class="brush: css example-good notranslate">url(test.jpg) /* <url>、但し test.jpg は実在する画像 */ -linear-gradient(blue, red) /* <gradient> */ -element(#realid) /* element() 関数で参照されるウェブページの一部、 - ページ上に "realid" が実在する ID である場合 */ -image(ltr 'arrow.png#xywh=0,0,16,16', red) - /* arrow.png が対応している画像であれば、 <url> の元画像の - 左上から 16x16 を選択し、そうでなければ赤一色の見本になります。 - 言語が右書きの場合は、画像は水平方向に反転します。 */ -cross-fade(20% url(twenty.png), url(eighty.png)) - /* 多重露光の画像で、 twenty が 20% の露光で、 - eighty が 80% の露光になる */ -image-set('test.jpg' 1x, 'test-2x.jpg' 2x) - /* 様々な解像度による画像の選択 */</pre> - -<h3 id="Invalid_images" name="Invalid_images">無効な画像</h3> - -<pre class="brush: css example-bad notranslate">nourl.jpg /* 画像ファイルは url() 関数により示す必要がある */ -url(report.pdf) /* url() 関数で指すファイルは画像でなければならない */ -element(#fakeid) /* 要素 ID はページ上に実在する ID でなければならない */ -image(z.jpg#xy=0,0) /* 空間フラグメントは xywh=#,#,#,# の書式で書かなければならない */ -image-set('cat.jpg' 1x, 'dog.jpg' 1x) /* 画像セット内の画像はすべて異なる解像度でなければならない */ -</pre> - -<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 Images", "#typedef-image", "<image>")}}</td> - <td>{{Spec2("CSS4 Images")}}</td> - <td>Adds {{CSSxRef("element()")}}, {{CSSxRef("image()")}}, {{CSSxRef("image-set")}}, {{CSSxRef("conic-gradient")}}, {{CSSxRef("repeating-conic-gradient", "repeating-conic-gradient()")}}, {{CSSxRef("image-resolution")}} を追加</td> - </tr> - <tr> - <td>{{SpecName("CSS3 Images", "#typedef-image", "<image>")}}</td> - <td>{{Spec2("CSS3 Images")}}</td> - <td>初回定義。これ以前は <code><image></code> データ型の明示的な定義はなし。画像は <code>url()</code> 関数記法でしか定義できなかった</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.types.image")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{CSSxRef("<gradient>")}}</li> - <li>{{CSSxRef("element")}}</li> - <li>{{CSSxRef("imagefunction", "image()")}}</li> - <li>{{CSSxRef("image-set")}}</li> - <li>{{CSSxRef("cross-fade")}}</li> -</ul> diff --git a/files/ja/web/css/image/index.md b/files/ja/web/css/image/index.md new file mode 100644 index 0000000000..26c1d0939c --- /dev/null +++ b/files/ja/web/css/image/index.md @@ -0,0 +1,114 @@ +--- +title: <image> +slug: Web/CSS/image +tags: + - CSS + - CSS Data Type + - CSS Images + - Data Type + - Graphics + - Layout + - Reference + - Web +browser-compat: css.types.image +translation_of: Web/CSS/image +--- +{{CSSRef}} + +**`<image>`** は [CSS](/ja/docs/Web/CSS) の [データ型](/ja/docs/Web/CSS/CSS_Types)で、二次元の画像を表現します。 + +## 構文 + +`<image>` データ型は以下のいずれかによって表すことができます。 + +- {{CSSxRef("url()", "url()")}} データ型で記述された画像 +- {{CSSxRef("<gradient>")}} データ型 +- {{CSSxRef("element()","element()")}} 関数で定義されたウェブページの一部 +- {{CSSxRef("image/image()","image()")}} 関数で定義された画像、画像フラグメント、単色の色 +- {{CSSxRef("cross-fade()","cross-fade()")}} 関数で定義された 2 つ以上の画像の合成 +- {{CSSxRef("image/image-set()","image-set()")}} 関数で定義された、解像度に基づいて定義された画像の選択 + +## 解説 + +CSS はさまざま種類の画像を扱うことができます。 + +- JPEG、PNG、その他の[ラスター形式](https://ja.wikipedia.org/wiki/ビットマップ画像)の画像のように、*自身の寸法* (自然の寸法) を持つ画像。 +- 単一のファイルの中に複数のバージョンが存在する、*複数の自身の寸法*を持つ画像。 (この場合、自身の寸法は領域に収まる最も大きな画像であり、かつ縦横比が包含ボックスに最も近いものになります。) +- SVG またはその他の[ベクター形式](https://ja.wikipedia.org/wiki/ベクター画像)の画像のように、自身の寸法を持たないが、幅と高さの間に自身の縦横比のある画像。 +- CSS グラデーションなど、*自身の寸法がなく、固有の縦横比もない*画像。 +</ul> + +CSS はオブジェクトの*実際の*寸法を、 (1) *自身の寸法*、 (2) CSS の {{CSSxRef("width")}}, {{CSSxRef("height")}}, {{CSSxRef("background-size")}} などのプロパティで定義された*指定の寸法*、 (3) 画像が使用されるプロパティの種類によって指定された、以下のような*既定の寸法*によって特定します。 + +| オブジェクトの種類 (CSS プロパティ) | 既定のオブジェクトの寸法 | +| ----------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | +| {{CSSxRef("background-image")}} | 要素の背景が配置される領域の寸法 | +| {{CSSxRef("list-style-image")}} | `1em` の文字の寸法 | +| {{CSSxRef("border-image-source")}} | 要素の境界画像領域の寸法 | +| {{CSSxRef("cursor")}} | クライアントのシステムにおける通常のカーソルの寸法に合わせたブラウザー定義の寸法 | +| {{CSSxRef("mask-image")}} | ? | +| {{CSSxRef("shape-outside")}} | ? | +| {{CSSxRef("mask-border-source")}} | ? | +| @counter-style の {{CSSxRef("symbols()")}} | リスクあり。対応している場合、クライアントのシステムにおける通常のカーソルの寸法に合わせたブラウザー定義の寸法 | +| 擬似要素 ({{CSSxRef("::after")}}/{{CSSxRef("::before")}}) の {{CSSxRef("content")}} | 300px × 150px の矩形 | + +正しいオブジェクトの寸法は、次のアルゴリズムを使って計算されます。 + +- 指定された寸法に*幅と高さの両方*が定義されている場合は、その値が実際の寸法に使われます。 +- 指定された寸法に*幅と高さのどちらかのみ*が定義されている場合は、もう一方の値は、画像自身の比率、指定値が一致するなら画像自身の寸法、既定のオブジェクトの寸法の値の何れかを使用して決められます。 +- 指定された寸法が*幅も高さも定義していない*場合は、実際のオブジェクトの寸法は、画像自身の縦横比に一致し、かつ既定のオブジェクトの寸法をどちらの方向にも超過しない値が計算されます。画像自身の縦横比がない場合は、適用されるオブジェクト自身の縦横比が使用されます。このオブジェクトにも縦横比が存在しない場合は、残りの幅または高さは既定のオブジェクトの寸法から取られます。 + +> **Note:** すべてのブラウザーがすべてのプロパティですべての種類の画像に対応しているわけではありません。詳細は[ブラウザーの互換性の節](#ブラウザーの互換性)を参照してください。 + +## アクセシビリティの考慮 + +ブラウザーは、背景画像に関する特別な情報を支援技術に提供しません。これは主に読み上げアプリにとって重要であり、読み上げアプリはその存在を告知しないため、ユーザーには何も伝えません。ページの全体的な目的を理解する上で重要な情報が画像に含まれている場合は、文書の中でその意味を記述した方が良いでしょう。 + +- [MDN WCAG を理解する, ガイドライン 1.1 の解説](/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.1_%e2%80%94_providing_text_alternatives_for_non-text_content) +- [Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html) + +## 例 + +### 有効な画像 + +```css example-good +url(test.jpg) /* <url>、但し test.jpg は実在する画像 */ +linear-gradient(blue, red) /* <gradient> */ +element(#realid) /* element() 関数で参照されるウェブページの一部、 + ページ上に "realid" が実在する ID である場合 */ +image(ltr 'arrow.png#xywh=0,0,16,16', red) + /* arrow.png が対応している画像であれば、 <url> の元画像の + 左上から 16x16 を選択し、そうでなければ赤一色の見本になります。 + 言語が右書きの場合は、画像は水平方向に反転します。 */ +cross-fade(20% url(twenty.png), url(eighty.png)) + /* 多重露光の画像で、 twenty が 20% の露光で、 + eighty が 80% の露光になる */ +image-set('test.jpg' 1x, 'test-2x.jpg' 2x) + /* 様々な解像度による画像の選択 */ +``` + +### 無効な画像 + +```css example-bad +nourl.jpg /* 画像ファイルは url() 関数により示す必要がある */ +url(report.pdf) /* url() 関数で指すファイルは画像でなければならない */ +element(#fakeid) /* 要素 ID はページ上に実在する ID でなければならない */ +image(z.jpg#xy=0,0) /* 空間フラグメントは xywh=#,#,#,# の書式で書かなければならない */ +image-set('cat.jpg' 1x, 'dog.jpg' 1x) /* 画像セット内の画像はすべて異なる解像度でなければならない */ +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{CSSxRef("<gradient>")}} +- {{CSSxRef("element()","element()")}} +- {{CSSxRef("image/image()", "image()")}} +- {{CSSxRef("image/image-set()","image-set()")}} +- {{CSSxRef("cross-fade()","cross-fade()")}} diff --git a/files/ja/web/css/image/paint()/index.md b/files/ja/web/css/image/paint()/index.md new file mode 100644 index 0000000000..78368413bd --- /dev/null +++ b/files/ja/web/css/image/paint()/index.md @@ -0,0 +1,103 @@ +--- +title: paint() +slug: Web/CSS/image/paint() +tags: + - CSS + - CSS Function + - CSS4-images + - Function + - Houdini + - Reference + - Web +browser-compat: css.types.image.paint +translation_of: Web/CSS/image/paint() +original_slug: Web/CSS/paint() +--- +{{CSSRef}}{{SeeCompatTable}} + +**`paint()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、 PaintWorklet で生成された {{cssxref("<image>")}} の値を定義します。 + +## 構文 + +```css +paint(workletName, parameters) +``` + +凡例 + +- _workletName_ + - : 登録された Worklet の名前です。 +- _parameters_ + - : PaintWorklet へ渡される省略可能な追加の引数です。 + +## 例 + +<h3 id="Basic_usage_example">基本的な使用例</h3> + +CSS の paint() 関数で追加の引数を渡すことができます。この例では、二つの引数を渡しています。リストアイテムのグループの背景画像が塗りつぶしか輪郭線だけかと、輪郭線の太さです。 + +```html hidden +<ul> + <li>item 1</li> + <li>item 2</li> + <li>item 3</li> + <li>item 4</li> + <li>item 5</li> + <li>item 6</li> + <li>item 7</li> + <li>item 8</li> + <li>item 9</li> + <li>item 10</li> + <li>item 11</li> + <li>item 12</li> + <li>item 13</li> + <li>item 14</li> + <li>item 15</li> + <li>item 16</li> + <li>item 17</li> + <li>item 18</li> + <li>item 19</li> + <li>item 20</li> +</ul> +``` + +```js hidden + CSS.paintWorklet.addModule('https://mdn.github.io/houdini-examples/cssPaint/intro/worklets/hilite.js'); +``` + +```css +li { + --boxColor: hsla(55, 90%, 60%, 1.0); + background-image: paint(hollowHighlights, stroke, 2px); +} + +li:nth-of-type(3n) { + --boxColor: hsla(155, 90%, 60%, 1.0); + background-image: paint(hollowHighlights, filled, 3px); +} + +li:nth-of-type(3n+1) { + --boxColor: hsla(255, 90%, 60%, 1.0); + background-image: paint(hollowHighlights, stroke, 1px); +} +``` + +boxColor を定義しているセレクターブロックにカスタムプロパティを設定しました。カスタムプロパティは PaintWorklet にアクセスすることができます。 + +{{EmbedLiveSample("Basic_usage_example", 300, 300)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{domxref('PaintWorklet')}} +- {{domxref('CSS Painting API')}} +- [CSS Painting API の使用](/ja/docs/Web/API/CSS_Painting_API/Guide) +- {{cssxref("<image>")}} +- {{domxref("canvas")}} diff --git a/files/ja/web/css/inheritance/index.html b/files/ja/web/css/inheritance/index.html index bf2dd3f663..9bf6dfaa86 100644 --- a/files/ja/web/css/inheritance/index.html +++ b/files/ja/web/css/inheritance/index.html @@ -38,7 +38,7 @@ translation_of: Web/CSS/inheritance <h2 id="Non-inherited_properties" name="Non-inherited_properties">非継承プロパティ</h2> -<p>値を持たない<strong>非継承プロパティ</strong>が要素に指定された場合、要素はプロパティの<a href="/ja/docs/Web/CSS/initial_value" title="ja/docs/Web/CSS/initial_value">初期値</a>（※各プロパティのページの「概要」の章に記されています）を取得します。</p> +<p>値を持たない<strong>非継承プロパティ</strong>が要素に指定された場合、要素はプロパティの<a href="/ja/docs/Web/CSS/initial_value">初期値</a>（※各プロパティのページの「概要」の章に記されています）を取得します。</p> <p>非継承プロパティの一般的な例としては {{ Cssxref("border") }} プロパティが挙げられます。次の様なスタイルルールを指定し、</p> diff --git a/files/ja/web/css/length/index.html b/files/ja/web/css/length/index.html deleted file mode 100644 index 35a96136a5..0000000000 --- a/files/ja/web/css/length/index.html +++ /dev/null @@ -1,264 +0,0 @@ ---- -title: <length> -slug: Web/CSS/Length -tags: - - CSS - - CSS データ型 - - CSS 値と単位 - - Layout - - Reference - - Web - - length - - ウェブ - - レイアウト -translation_of: Web/CSS/length ---- -<div>{{CSSRef}}</div> - -<p><a href="/ja/docs/Web/CSS" title="CSS">CSS</a> の <strong><code><length></code></strong> <a href="/ja/docs/Web/CSS/CSS_Types">データ型</a>は、長さの値を表します。長さは {{Cssxref("width")}}, {{Cssxref("height")}}, {{Cssxref("margin")}}, {{Cssxref("padding")}}, {{Cssxref("border-width")}}, {{Cssxref("font-size")}}, {{Cssxref("text-shadow")}} など数多くの CSS プロパティで使用されています。</p> - -<div class="note"> -<p><strong>注:</strong> {{cssxref("<percentage>")}} 値も CSS の長さに使用され、 <code><length></code> 値を受け付ける同じプロパティの一部でも使用することができますが、 <code><length></code> 値と同じものではありません。 {{cssxref("<length-percentage>")}} を参照してください。</p> -</div> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<p><code><length></code> データ型は一つの {{cssxref("<number>")}} とそれに続く以下に挙げる単位の一つから成ります。単位と数値の間に空白は置きません。数値 <code>0</code> の後の単位は省略可能です。</p> - -<div class="note"> -<p><strong>注:</strong> 負の <code><length></code> を許容するプロパティとそうでないプロパティがあります。</p> -</div> - -<h3 id="Units" name="Units">単位</h3> - -<h4 id="Relative_length_units" name="Relative_length_units">相対的な長さの単位</h4> - -<p>相対的な長さとは、他の長さに従って長さを指定することです。単位によって、これは特定の文字の寸法であったり、<a href="/ja/docs/Web/CSS/line-height">行の高さ</a>であったり、 {{glossary("viewport")}} の寸法であったりします。</p> - -<h5 id="Font-relative_lengths" name="Font-relative_lengths">フォント関連の長さ</h5> - -<p>フォント関連の長さは、 <code><length></code> 値を特定の文字の寸法や、現在要素またはその親に影響しているフォントを表す用語で定義されます。</p> - -<div class="note"> -<p><strong>注:</strong> これらの単位、特に <code>em</code> と <code>rem</code> は、ユーザーがフォントの大きさを変更しても <a href="http://24ways.org/2006/compose-to-a-vertical-rhythm">ページの vertical rhythm</a> を維持するような、拡縮可能なレイアウトを作成するためによく使われます。</p> -</div> - -<dl> - <dt><code id="cap">cap</code> {{experimental_inline}}</dt> - <dd>その要素の {{Cssxref("font")}} における "cap height" （ふつうの大文字の高さ）を表します。</dd> - <dt><code id="ch">ch</code></dt> - <dd>その要素の {{Cssxref("font")}} における "0" (ゼロ、Unicode 文字 U+0030) の幅、より正確に言えば advance measure です。<br> - <br> - "0" の文字の大きさを判断することが不可能または無意味である場合、幅が 0.5em、高さが 1em と仮定します。</dd> - <dt><code id="em">em</code></dt> - <dd>その要素の {{Cssxref("font-size")}} の計算値を表します。{{Cssxref("font-size")}} プロパティ自身に使われた場合は、要素に<em>継承された</em>フォントの大きさを表します。</dd> - <dt><code id="ex">ex</code></dt> - <dd>その要素の {{Cssxref("font")}} における <a href="http://en.wikipedia.org/wiki/X-height">x-height</a> です。 'x' の文字を持つフォントでは一般的に、フォントにおける小文字の高さに相当します。多くのフォントでは <code>1ex ≈ 0.5em </code> です。</dd> - <dt><code id="ic">ic</code> {{experimental_inline}}</dt> - <dd>描画に使用されるフォントにおける「水」（U+6C34）の文字の advance measure と同じです。</dd> - <dt><code id="lh">lh</code> {{experimental_inline}}</dt> - <dd>使用されている要素の {{Cssxref("line-height")}} プロパティの計算値と同じで、絶対的な長さに変換されます。</dd> - <dt><code id="rem">rem</code></dt> - <dd>ルート要素（ふつうは {{HTMLElement("html")}}）の {{Cssxref("font-size")}} を表します。ルート要素の {{Cssxref("font-size")}} で使うと初期値を表します（多くのブラウザーでは既定値は <code>16px</code> ですが、ユーザー設定によって変わる可能性があります）。</dd> - <dt><code id="rlh">rlh</code> {{experimental_inline}}</dt> - <dd>ルート要素（ふつうは {{HTMLElement("html")}}）の {{Cssxref("line-height")}} プロパティの計算値と同じで、絶対的な長さに変換されます。ルート要素の {{Cssxref("font-size")}} または {{Cssxref("line-height")}} プロパティに使われた場合は、プロパティの初期値になります。</dd> -</dl> - -<h5 id="Viewport-percentage_lengths" name="Viewport-percentage_lengths">ビューポートのパーセント値による長さ</h5> - -<p>ビューポートのパーセント値による長さは、{{glossary("viewport", "ビューポート")}}、つまり文書の見える範囲の寸法に対する相対的な <code><length></code> 値を定義します。ビューポートの長さは {{cssxref("@page")}} で宣言されたブロックでは無効です。</p> - -<dl> - <dt><code id="vh">vh</code></dt> - <dd>ビューポートの初期値の<a href="/ja/docs/Web/CSS/All_About_The_Containing_Block">包含ブロック</a>における高さの1%と同じです。</dd> - <dt><code id="vw">vw</code></dt> - <dd>ビューポートの初期値の<a href="/ja/docs/Web/CSS/All_About_The_Containing_Block">包含ブロック</a>における幅の1%と同じです。</dd> - <dt><code id="vi">vi</code> {{experimental_inline}}</dt> - <dd>初期値の<a href="/ja/docs/Web/CSS/All_About_The_Containing_Block">包含ブロック</a>における、ルート要素の<a href="/ja/docs/Web/CSS/CSS_Logical_Properties#inline-dimension">インライン軸</a>の寸法の1%と同じです。</dd> - <dt><code id="vb">vb</code> {{experimental_inline}}</dt> - <dd>初期値の<a href="/ja/docs/Web/CSS/All_About_The_Containing_Block">包含ブロック</a>における、ルート要素の<a href="/ja/docs/Web/CSS/CSS_Logical_Properties#block-dimension">ブロック軸</a>の寸法の1%と同じです。</dd> - <dt><code id="vmin">vmin</code></dt> - <dd><code>vw</code> と <code>vh</code> の小さい方です。</dd> - <dt><code id="vmax">vmax</code></dt> - <dd><code>vw</code> と <code>vh</code> の大きい方です。</dd> -</dl> - -<h4 id="Absolute_length_units" name="Absolute_length_units">絶対的な長さの単位</h4> - -<p>絶対的な長さの単位は、出力メディアの物理的な特性が分かっている場合（印刷レイアウトなど）に物理的な長さを表します。これはある単位を物理的な単位に固定してから、これを基準に他の単位を定義します。固定する単位は画面のような低解像度の端末か、あるいはプリンターのような高解像度の端末かによって異なります。</p> - -<p>低解像度の端末では、<code>px</code> の単位が物理的な<em>参照ピクセル</em>を表し、その他の単位はこれを基準に定義されます。例えば <code>1in</code> は <code>96px</code> と定義され、これは <code>72pt</code> と等しくなります。このような端末では結果的に、インチ (<code>in</code>)、センチメートル (<code>cm</code>)、ミリメートル (<code>mm</code>) といった単位で表される長さは、同名の物理的な単位と同じ長さになるとは限りません。</p> - -<p>高解像度の端末では、インチ (<code>in</code>)、センチメートル (<code>cm</code>)、ミリメートル (<code>mm</code>) は対応する物理的な単位と同じになります。従って、 <code>px</code> の単位は、それ (1インチの1/96) を基準に定義されます。</p> - -<div class="note"> -<p><strong>注:</strong> たくさんのユーザーが、テキストが読みやすくなるよう{{glossary("user agent", "ユーザーエージェント")}}の既定のフォントの大きさを拡大しています。絶対的な長さで指定すると、大きさが固定され、ユーザー設定によって拡大しなくなるため、アクセシビリティ上の問題が発生します。この理由から、 <code>font-size</code> を設定する場合には、 (<code>em</code> や <code>rem</code> のような) 相対的な単位が適しています。</p> -</div> - -<dl> - <dt><code id="px">px</code></dt> - <dd>1ピクセルです。画面表示では、伝統的に端末の1ピクセル (ドット) を表します。しかし、<em>プリンター</em>や<em>高解像度の画面</em>では、 CSS の1ピクセルが端末の複数ピクセルになることがります。 <code>1px</code> = <code>1in</code> の1/96です。</dd> - <dt><code id="cm">cm</code></dt> - <dd>1センチメートルです。 <code>1cm</code> = <code>96px/2.54</code> です。</dd> - <dt><code id="mm">mm</code></dt> - <dd>1ミリメートルです。 <code>1mm</code> = <code>1cm</code> の1/10です。</dd> - <dt><code id="q">Q</code> {{experimental_inline}}</dt> - <dd>1/4ミリメートルです。 <code>1Q</code> = <code>1cm</code> の1/40です。</dd> - <dt><code id="in">in</code></dt> - <dd>1インチです。 <code>1in</code> = <code>2.54cm</code> = <code>96px</code> です。</dd> - <dt><code id="pc">pc</code></dt> - <dd>1パイカです。 <code>1pc</code> = <code>12pt</code> = <code>1in</code> の1/6です。</dd> - <dt><code id="pt">pt</code></dt> - <dd>1ポイントです。 <code>1pt</code> = <code>1in</code> の1/72です。</dd> - <dt><code id="mozmm">mozmm</code> {{non-standard_inline}}, Firefox 59 で削除</dt> - <dd>実験的な単位で、表示する大きさや解像度に依存せず、正確に1ミリメートルで描画します。必要とされるのはまれですが、特にモバイル端末では有用かもしれません。</dd> -</dl> - -<h2 id="Interpolation" name="Interpolation">補間</h2> - -<p>アニメーションの場合、 <code><length></code> データ型の値は浮動小数点の実数として補間されます。補間は計算値に対して行われます。補間の速度は、アニメーションに関連付けられた<a href="/ja/docs/Web/CSS/single-transition-timing-function">タイミング関数</a>によって定められます。</p> - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="Length_unit_comparison" name="Length_unit_comparison">長さの単位の比較</h3> - -<p>以下のデモでは、入力欄に <code><length></code> の値 (例えば <code>300px</code>, <code>50%</code>, <code>30vw</code>) を入力することができ、 <kbd>Return</kbd> を押したときにバーの長さが反映されます。</p> - -<p>これにより、様々な長さの単位の効果を比較し対照させることができます。</p> - -<h4 id="HTML">HTML</h4> - -<pre class="brush: html notranslate"><div class="outer"> - <div class="input-container"> - <label>長さを入力してください:</label> - <input type="text" id="length"> - </div> - <div class="inner"> - - </div> -</div> -<div class="results"> -</div></pre> - -<h4 id="CSS">CSS</h4> - -<pre class="brush: css notranslate">html { - font-family: sans-serif; - font-weight: bold; - box-sizing: border-box; -} - -.outer { - width: 100%; - height: 50px; - background-color: #eee; - position: relative; -} - -.inner { - height: 50px; - background-color: #999; - box-shadow: inset 3px 3px 5px rgba(255,255,255,0.5), - inset -3px -3px 5px rgba(0,0,0,0.5); -} - -.result { - height: 20px; - background-color: #999; - box-shadow: inset 3px 3px 5px rgba(255,255,255,0.5), - inset -3px -3px 5px rgba(0,0,0,0.5); - background-color: orange; - display: flex; - align-items: center; - margin-top: 10px; -} - -.result code { - position: absolute; - margin-left: 20px; -} - -.results { - margin-top: 10px; -} - -.input-container { - position: absolute; - display: flex; - justify-content: flex-start; - align-items: center; - height: 50px; -} - -label { - margin: 0 10px 0 20px; -}</pre> - -<h4 id="JavaScript">JavaScript</h4> - -<pre class="brush: js notranslate">const inputDiv = document.querySelector('.inner'); -const inputElem = document.querySelector('input'); -const resultsDiv = document.querySelector('.results'); - -inputElem.addEventListener('change', () => { - inputDiv.style.width = inputElem.value; - - const result = document.createElement('div'); - result.className = 'result'; - result.style.width = inputElem.value; - result.innerHTML = `<code>width: ${inputElem.value}</code>`; - resultsDiv.appendChild(result); - - inputElem.value = ''; - inputElem.focus(); -})</pre> - -<h4 id="Result" name="Result">結果</h4> - -<p>{{EmbedLiveSample('Length_unit_comparison','100%', 700)}}</p> - -<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 Values', '#lengths', '<length>')}}</td> - <td>{{Spec2('CSS4 Values')}}</td> - <td><code>vi</code>, <code>vb</code>, <code>ic</code>, <code>lh</code>, <code>rlh</code> の単位を追加。</td> - </tr> - <tr> - <td>{{SpecName('CSS3 Values', '#lengths', '<length>')}}</td> - <td>{{Spec2('CSS3 Values')}}</td> - <td><code>ch</code>, <code>rem</code>, <code>vw</code>, <code>vh</code>, <code>vmin</code>, <code>vmax</code>, <code>Q</code> の単位を追加。</td> - </tr> - <tr> - <td>{{SpecName('CSS2.1', 'syndata.html#length-units', '<length>')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td><code>em</code>, <code>pt</code>, <code>pc</code>, <code>px</code> の単位の明示的な定義。</td> - </tr> - <tr> - <td>{{SpecName('CSS1', '#length-units', '<length>')}}</td> - <td>{{Spec2('CSS1')}}</td> - <td>初回定義。 <code>em</code>, <code>pt</code>, <code>pc</code>, <code>px</code> の単位の暗黙的な定義。</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.types.length")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Values_and_units">CSS 値と単位チュートリアル</a></li> - <li><a href="/ja/docs/Web/CSS/CSS_Values_and_Units">CSS 値と単位リファレンス</a></li> - <li><a href="/ja/docs/Web/CSS/CSS_Box_Model">ボックスモデル</a></li> -</ul> diff --git a/files/ja/web/css/length/index.md b/files/ja/web/css/length/index.md new file mode 100644 index 0000000000..2a08df09c4 --- /dev/null +++ b/files/ja/web/css/length/index.md @@ -0,0 +1,224 @@ +--- +title: <length> +slug: Web/CSS/length +tags: + - CSS + - CSS Data Type + - Data Type + - Layout + - Reference + - Web + - length +browser-compat: css.types.length +translation_of: Web/CSS/length +--- +{{CSSRef}} + +**`<length>`** は [CSS](/ja/docs/Web/CSS) の[データ型](/ja/docs/Web/CSS/CSS_Types)で、長さの値を表します。長さは {{Cssxref("width")}}、{{Cssxref("height")}}、{{Cssxref("margin")}}、{{Cssxref("padding")}}、{{Cssxref("border-width")}}、{{Cssxref("font-size")}}、{{Cssxref("text-shadow")}} など数多くの CSS プロパティで使用されています。 + +> **Note:** {{cssxref("<percentage>")}} 値も `<length>` 値を受け付ける同じプロパティの一部でも使用することができますが、 `<length>` 値と同じものではありません。 {{cssxref("<length-percentage>")}} を参照してください。 + +## 構文 + +`<length>` データ型は一つの {{cssxref("<number>")}} とそれに続く以下に挙げる単位の一つから成ります。単位と数値の間に空白は置きません。数値 `0` の後の単位は省略可能です。 + +> **Note:** 負の `<length>` を許容するプロパティとそうでないプロパティがあります。 + +### 単位 + +#### 相対的な長さの単位 + +相対的な長さとは、他の長さに従って長さを指定することです。単位によって、これは特定の文字の寸法であったり、[行の高さ](/ja/docs/Web/CSS/line-height)であったり、{{glossary("viewport", "ビューポート")}}の寸法であったりします。 + +##### フォントの相対長 + +フォントの相対長では、 `<length>` の値を、要素やその親で現在使われているフォントにおける、特定の文字やフォント属性の寸法で定義します。 + +> **Note:** これらの単位、特に `em` と `rem` は、ユーザーがフォントサイズを変更しても[ページの縦方向のリズム](https://24ways.org/2006/compose-to-a-vertical-rhythm)を維持する、スケーラブルなレイアウトを作るためによく使われます。 + +- `cap` {{experimental_inline}} + - : その要素の {{Cssxref("font")}} における "cap height" (ふつうの大文字の高さ) を表します。 +- `ch` + + - : その要素の {{Cssxref("font")}} における "0" (ゼロ、Unicode 文字 U+0030) の幅、より正確に言えば advance measure です。 + + "0" の文字の大きさを判断することが不可能または無意味である場合、幅が 0.5em、高さが 1em と仮定します。 + +- `em` + - : その要素の {{Cssxref("font-size")}} の計算値を表します。{{Cssxref("font-size")}} プロパティ自身に使われた場合は、要素に<em>継承された</em>フォントの大きさを表します。 +- `ex` + - : その要素の {{Cssxref("font")}} における [x-height](https://en.wikipedia.org/wiki/X-height) です。 'x' の文字を持つフォントでは一般的に、フォントにおける小文字の高さに相当します。多くのフォントでは `1ex ≈ 0.5em` です。 +- `ic` {{experimental_inline}} + - : 描画に使用されるフォントにおける「水」 (CJK water ideograph, U+6C34) の文字の advance measure と同じです。 +- `lh` {{experimental_inline}} + - : 使用されている要素の {{Cssxref("line-height")}} プロパティの計算値と同じで、絶対的な長さに変換されます。 +- `rem` + - : ルート要素 (ふつうは {{HTMLElement("html")}}) の {{Cssxref("font-size")}} を表します。ルート要素の {{Cssxref("font-size")}} で使うと初期値を表します (多くのブラウザーでは既定値は `16px` ですが、ユーザー設定によって変わる可能性があります)。 +- `rlh` {{experimental_inline}} + - : ルート要素 (ふつうは {{HTMLElement("html")}}) の {{Cssxref("line-height")}} プロパティの計算値と同じで、絶対的な長さに変換されます。ルート要素の {{Cssxref("font-size")}} または {{Cssxref("line-height")}} プロパティに使われた場合は、プロパティの初期値になります。 + +##### ビューポートのパーセント値による寸法 + +ビューポートのパーセント値による寸法は、{{glossary("viewport", "ビューポート")}}、つまり文書の見える範囲の寸法に対する相対的な `<length>` 値を定義します。ビューポートの寸法は {{cssxref("@page")}} で宣言されたブロックでは無効です。 + +- `vh` + - : ビューポートの初期値の[包含ブロック](/ja/docs/Web/CSS/Containing_block)における高さの 1% と同じです。 +- `vw` + - : ビューポートの初期値の[包含ブロック](/ja/docs/Web/CSS/Containing_block)における幅の 1% と同じです。 +- `vi` {{experimental_inline}} + - : 初期値の[包含ブロック](/ja/docs/Web/CSS/Containing_block)における、ルート要素の[インライン軸](/ja/docs/Web/CSS/CSS_Logical_Properties#block_vs._inline)の寸法の 1% と同じです。 +- `vb` {{experimental_inline}} + - : 初期値の[包含ブロック](/ja/docs/Web/CSS/Containing_block)における、ルート要素の[ブロック軸](/ja/docs/Web/CSS/CSS_Logical_Properties#block_vs._inline)の寸法の 1% と同じです。 +- `vmin` + - : `vw` と `vh` の小さい方です。 +- `vmax` + - : `vw` と `vh` の大きい方です。 +</dl> + +#### 絶対的な長さの単位 + +絶対的な長さの単位は、出力メディアの物理的な特性が分かっている場合 (印刷レイアウトなど) に物理的な長さを表します。これはある単位を物理的な単位に固定してから、これを基準に他の単位を定義します。固定する単位は画面のような低解像度の端末か、あるいはプリンターのような高解像度の端末かによって異なります。 + +低解像度の端末では、`px` の単位が物理的な*参照ピクセル*を表し、その他の単位はこれを基準に定義されます。例えば `1in` は `96px` と定義され、これは `72pt` と等しくなります。このような端末では結果的に、インチ (`in`)、センチメートル (`cm`)、ミリメートル (`mm`) といった単位で表される長さは、同名の物理的な単位と同じ長さになるとは限りません。</p> + +<p>高解像度の端末では、インチ (`in`)、センチメートル (`cm`)、ミリメートル (`mm`) は対応する物理的な単位と同じになります。従って、 `px` の単位は、それ (1 インチの 1/96) を基準に定義されます。</p> + +> **Note:** たくさんのユーザーが、テキストが読みやすくなるよう{{glossary("user agent", "ユーザーエージェント")}}の既定のフォントの大きさを拡大しています。絶対的な長さで指定すると、大きさが固定され、ユーザー設定によって拡大しなくなるため、アクセシビリティ上の問題が発生します。この理由から、 `font-size` を設定する場合には、 (`em` や `rem` のような) 相対的な単位が適しています。 + +- `px` + - : 1 ピクセルです。画面表示では、伝統的に端末の 1 ピクセル (ドット) を表します。しかし、*プリンター*や*高解像度の画面*では、 CSS の 1 ピクセルが端末の複数ピクセルになることがあります。 `1px` = `1in` の 1/96 です。 +- `cm` + - : 1センチメートルです。 `1cm` = `96px/2.54` です。 +- `mm` + - : 1ミリメートルです。 `1mm` = `1cm` の1/10です。 +- `Q` {{experimental_inline}} + - : 1/4ミリメートルです。 `1Q` = `1cm` の1/40です。 +- `in` + - : 1インチです。 `1in` = `2.54cm` = `96px` です。 +- `pc` + - : 1パイカです。 `1pc` = `12pt` = `1in` の1/6です。 +- `pt` + - : 1ポイントです。 `1pt` = `1in` の1/72です。 + +## 補間 + +アニメーションの場合、 `<length>` データ型の値は浮動小数点の実数として補間されます。補間は計算値に対して行われます。補間の速度は、アニメーションに関連付けられた[タイミング関数](/ja/docs/Web/CSS/easing-function)によって定められます。 + +## 例 + +<h3 id="Length_unit_comparison">長さの単位の比較</h3> + +以下のデモでは、入力欄に `<length>` の値 (例えば `300px`, `50%`, `30vw`) を入力することができ、 <kbd>Return</kbd> を押したときにバーの長さが反映されます。 + +これにより、様々な長さの単位の効果を比較し対照させることができます。 + +#### HTML + +```html +<div class="outer"> + <div class="input-container"> + <label>長さを入力してください:</label> + <input type="text" id="length"> + </div> + <div class="inner"> + + </div> +</div> +<div class="results"> +</div> +``` + +#### CSS + +```css +html { + font-family: sans-serif; + font-weight: bold; + box-sizing: border-box; +} + +.outer { + width: 100%; + height: 50px; + background-color: #eee; + position: relative; +} + +.inner { + height: 50px; + background-color: #999; + box-shadow: inset 3px 3px 5px rgba(255,255,255,0.5), + inset -3px -3px 5px rgba(0,0,0,0.5); +} + +.result { + height: 20px; + background-color: #999; + box-shadow: inset 3px 3px 5px rgba(255,255,255,0.5), + inset -3px -3px 5px rgba(0,0,0,0.5); + background-color: orange; + display: flex; + align-items: center; + margin-top: 10px; +} + +.result code { + position: absolute; + margin-left: 20px; +} + +.results { + margin-top: 10px; +} + +.input-container { + position: absolute; + display: flex; + justify-content: flex-start; + align-items: center; + height: 50px; +} + +label { + margin: 0 10px 0 20px; +} +``` + +#### JavaScript + +```js +const inputDiv = document.querySelector('.inner'); +const inputElem = document.querySelector('input'); +const resultsDiv = document.querySelector('.results'); + +inputElem.addEventListener('change', () => { + inputDiv.style.width = inputElem.value; + + const result = document.createElement('div'); + result.className = 'result'; + result.style.width = inputElem.value; + result.innerHTML = `<code>width: ${inputElem.value}</code>`; + resultsDiv.appendChild(result); + + inputElem.value = ''; + inputElem.focus(); +}) +``` + +#### 結果 + +{{EmbedLiveSample('Length_unit_comparison','100%', 700)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [CSS 値と単位チュートリアル](/ja/docs/Learn/CSS/Building_blocks/Values_and_units) +- [CSS 値と単位リファレンス](/ja/docs/Web/CSS/CSS_Values_and_Units) +- [ボックスモデル](/ja/docs/Web/CSS/CSS_Box_Model) diff --git a/files/ja/web/css/list-style-type/index.html b/files/ja/web/css/list-style-type/index.html deleted file mode 100644 index fb9dfc1575..0000000000 --- a/files/ja/web/css/list-style-type/index.html +++ /dev/null @@ -1,610 +0,0 @@ ---- -title: list-style-type -slug: Web/CSS/list-style-type -tags: - - CSS - - CSS プロパティ - - CSS リスト - - Reference -translation_of: Web/CSS/list-style-type ---- -<div>{{CSSRef}}</div> - -<p><strong><code>list-style-type</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、リスト項目要素のマーカーを設定します (円、文字、独自のカウンタースタイルなど)。</p> - -<div>{{EmbedInteractiveExample("pages/css/list-style-type.html")}}</div> - -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> - -<p>マーカーの<a href="/ja/docs/CSS/color_value" title="color">色</a>は、適用先の要素における色の計算値と同じになります。</p> - -<p>既定で <code>display: list-item</code> の値を持っている要素はわずかです ({{HTMLElement("li")}} と {{HTMLElement("summary")}})。しかし、 <code>list-style-type</code> プロパティは {{cssxref("display")}} の値が <code>list-item</code> に設定されているあらゆる要素に適用することができます。さらに、このプロパティは継承されるので、親要素 (普通は {{HTMLElement("ol")}} または {{HTMLElement("ul")}}) に設定することですべてのリスト項目に適用することができます。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush:css no-line-numbers notranslate">/* マーカーの種類の一例 */ -list-style-type: disc; -list-style-type: circle; -list-style-type: square; -list-style-type: decimal; -list-style-type: georgian; -list-style-type: trad-chinese-informal; -list-style-type: kannada; - -/* <string> */ -list-style-type: '-'; - -/* @counter-style 規則に該当する識別子 */ -list-style-type: custom-counter-style; - -/* キーワード値 */ -list-style-type: none; - -/* グローバル値 */ -list-style-type: inherit; -list-style-type: initial; -list-style-type: unset; -</pre> - -<p>list-style-type プロパティは、以下のいずれかで定義することができます。</p> - -<ul> - <li>単一の <code><a href="#<custom-ident>"><custom-ident></a></code> 値</li> - <li>単一の <code><a href="#symbols()">symbols()</a></code> 値</li> - <li>単一の <code><a href="#<string>"><string></a></code> 値</li> - <li><code><a href="#none">none</a></code> キーワード</li> -</ul> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt><a id="<custom-ident>" name="<custom-ident>">{{cssxref("custom-ident", "<custom-ident>")}}</a></dt> - <dd>{{cssxref("@counter-style")}} の値、または以下の定義済みスタイルのうちの一つに一致する識別子です。</dd> -</dl> - -<dl> - <dt><a id="symbols()" name="symbols()">{{cssxref("symbols()")}}</a></dt> - <dd>無名のリストスタイルを定義します。</dd> - <dt><a id="<string>" name="<string>">{{cssxref("<string>")}}</a></dt> - <dd>特定の文字列を、リストのマーカーとして使用します。</dd> - <dt><a id="none" name="none"><code>none</code></a></dt> - <dd>マーカーは表示されません。</dd> -</dl> - -<dl style=""> - <dt><code>disc</code></dt> - <dd> - <ul style="list-style-type: disc;"> - <li>塗りつぶされた円形 (既定値)</li> - </ul> - </dd> - <dt><code>circle</code></dt> - <dd> - <ul style="list-style-type: circle;"> - <li>中空円</li> - </ul> - </dd> - <dt><code>square</code></dt> - <dd> - <ul style="list-style-type: square;"> - <li>塗りつぶされた四角形</li> - </ul> - </dd> - <dt><code>decimal</code></dt> - <dd> - <ul style="list-style-type: decimal;"> - <li>数値</li> - <li>既定では 1 から始まります</li> - </ul> - </dd> - <dt><code>cjk-decimal</code> {{experimental_inline}}</dt> - <dd> - <ul> - <li>漢数字</li> - <li>例: 一, 二, 三, ..., 九八, 九九, 一〇〇</li> - </ul> - </dd> - <dt><code>decimal-leading-zero</code></dt> - <dd> - <ul style="list-style-type: decimal-leading-zero;"> - <li>数値</li> - <li>ゼロ埋めされて表示されます</li> - <li>例: 01, 02, 03, … 98, 99</li> - </ul> - </dd> - <dt><code>lower-roman</code></dt> - <dd> - <ul style="list-style-type: lower-roman;"> - <li>小文字のローマ数字</li> - <li>例: i, ii, iii, iv, v…</li> - </ul> - </dd> - <dt><code>upper-roman</code></dt> - <dd> - <ul style="list-style-type: upper-roman;"> - <li>大文字のローマ数字</li> - <li>例: I, II, III, IV, V…</li> - </ul> - </dd> - <dt><code>lower-greek</code></dt> - <dd> - <ul style="list-style-type: lower-greek;"> - <li>小文字のギリシャ語</li> - <li>アルファ、ベータ、ガンマ、…</li> - <li>例: α, β, γ…</li> - </ul> - </dd> - <dt><code>lower-alpha</code></dt> - <dt><code>lower-latin</code></dt> - <dd> - <ul style="list-style-type: lower-alpha;"> - <li>小文字の ASCII 文字</li> - <li>例: a, b, c, … z</li> - <li><code>lower-latin</code> は IE7 以前は対応していません</li> - <li>{{anch("Browser compatibility")}} の節も参照して下さい</li> - </ul> - </dd> - <dt><code>upper-alpha</code></dt> - <dt><code>upper-latin</code></dt> - <dd> - <ul style="list-style-type: upper-alpha;"> - <li>大文字の ASCII 文字</li> - <li>例: A, B, C, … Z</li> - <li><code>upper-latin</code> は IE7 以前は対応していません</li> - </ul> - </dd> - <dt><code>arabic-indic</code></dt> - <dt><code>-moz-arabic-indic</code></dt> - <dd> - <ul style=""> - <li>例</li> - </ul> - </dd> - <dt><code>armenian</code></dt> - <dd> - <ul style="list-style-type: armenian;"> - <li>伝統的なアルメニア語の数値表記</li> - <li>(ayb/ayp, ben/pen, gim/keem…</li> - </ul> - </dd> - <dt><code>bengali</code></dt> - <dt><code>-moz-bengali</code></dt> - <dd> - <ul style=""> - <li>例</li> - </ul> - </dd> - <dt><code>cambodian</code> {{experimental_inline}}*</dt> - <dd> - <ul style="list-style-type: cambodian;"> - <li>例</li> - <li><code>khmer</code> と同義</li> - </ul> - </dd> - <dt><code>cjk-earthly-branch</code></dt> - <dt><code>-moz-cjk-earthly-branch</code></dt> - <dd> - <ul style=""> - <li>例</li> - </ul> - </dd> - <dt><code>cjk-heavenly-stem</code></dt> - <dt><code>-moz-cjk-heavenly-stem</code></dt> - <dd> - <ul style=""> - <li>例</li> - </ul> - </dd> - <dt><code>cjk-ideographic</code>{{experimental_inline}}</dt> - <dd> - <ul style="list-style-type: cjk-ideographic;"> - <li><code>trad-chinese-informal</code> と同義</li> - <li>例: 一萬一千一百一十一</li> - </ul> - </dd> - <dt><code>devanagari</code></dt> - <dt><code>-moz-devanagari</code></dt> - <dd> - <ul style=""> - <li>例</li> - </ul> - </dd> - <dt><code>ethiopic-numeric</code> {{experimental_inline}}</dt> - <dd> - <ul style="list-style-type: ethiopic-numeric;"> - <li>例</li> - </ul> - </dd> - <dt><code>georgian</code></dt> - <dd> - <ul style="list-style-type: georgian;"> - <li>伝統的なジョージア語の数値表記</li> - <li>例: an, ban, gan, … he, tan, in…</li> - </ul> - </dd> - <dt><code>gujarati</code></dt> - <dt><code>-moz-gujarati</code></dt> - <dd> - <ul style=""> - <li>例</li> - </ul> - </dd> - <dt><code>gurmukhi</code></dt> - <dt><code>-moz-gurmukhi</code></dt> - <dd> - <ul style=""> - <li>例</li> - </ul> - </dd> - <dt><code>hebrew</code> {{experimental_inline}}</dt> - <dd> - <ul style="list-style-type: hebrew;"> - <li>伝統的なヘブライ語の数値表記</li> - </ul> - </dd> - <dt><code>hiragana</code> {{experimental_inline}}</dt> - <dd> - <ul style="list-style-type: hiragana;"> - <li>例: あ, い, う, え, お, か, き…</li> - <li>日本語の「あいうえお」</li> - </ul> - </dd> - <dt><code>hiragana-iroha</code> {{experimental_inline}}</dt> - <dd> - <ul style="list-style-type: hiragana-iroha;"> - <li>例: い, ろ, は, に, ほ, へ, と…</li> - <li>{{interwiki('wikipedia', 'いろは歌')}}は日本語の古い字音の並びです</li> - </ul> - </dd> - <dt><code>japanese-formal</code> {{experimental_inline}}</dt> - <dd> - <ul style="list-style-type: japanese-formal;"> - <li>法的または財務の文書で使用される、日本語の公的な数値表記</li> - <li>例: 壱萬壱阡壱百壱拾壱</li> - <li>似ている別の文字に書き換えられないようにするための漢字</li> - </ul> - </dd> - <dt><code>japanese-informal</code> {{experimental_inline}}</dt> - <dd> - <ul style="list-style-type: japanese-informal;"> - <li>日本語の日常的な数値表記</li> - </ul> - </dd> - <dt><code>kannada</code></dt> - <dt><code>-moz-kannada</code></dt> - <dd> - <ul style=""> - <li>例</li> - </ul> - </dd> - <dt style="list-style-type: katakana;"><code>katakana</code> {{experimental_inline}}</dt> - <dd> - <ul style="list-style-type: katakana;"> - <li>例: ア, イ, ウ, エ, オ, カ, キ…</li> - <li>日本語の「あいうえお」</li> - </ul> - </dd> - <dt><code>katakana-iroha</code> {{experimental_inline}}</dt> - <dd> - <ul style="list-style-type: katakana-iroha;"> - <li>例: イ, ロ, ハ, ニ, ホ, ヘ, ト…</li> - <li>{{interwiki('wikipedia', 'いろは歌')}}は日本語の古い字音の並びです</li> - </ul> - </dd> - <dt><code>khmer</code></dt> - <dt><code>-moz-khmer</code></dt> - <dd> - <ul style=""> - <li>例</li> - </ul> - </dd> - <dt><code>korean-hangul-formal</code> {{experimental_inline}}</dt> - <dd> - <ul style="list-style-type: korean-hangul-formal;"> - <li>朝鮮のハングルの数値表記</li> - <li>例: 일만 일천일백일십일</li> - </ul> - </dd> - <dt><code>korean-hanja-formal</code> {{experimental_inline}}</dt> - <dd> - <ul style="list-style-type: korean-hanja-formal;"> - <li>公的な朝鮮の漢数字</li> - <li>例: 壹萬 壹仟壹百壹拾壹</li> - </ul> - </dd> - <dt><code>korean-hanja-informal</code> {{experimental_inline}}</dt> - <dd> - <ul style="list-style-type: korean-hanja-informal;"> - <li>朝鮮の漢数字</li> - <li>例: 萬 一千百十一</li> - </ul> - </dd> - <dt><code>lao</code></dt> - <dt><code>-moz-lao</code></dt> - <dd> - <ul style=""> - <li>例</li> - </ul> - </dd> - <dt><code>lower-armenian</code> {{experimental_inline}}*</dt> - <dd> - <ul style="list-style-type: lower-armenian;"> - <li>例</li> - </ul> - </dd> - <dt><code>malayalam</code></dt> - <dt><code>-moz-malayalam</code></dt> - <dd> - <ul style=""> - <li>例</li> - </ul> - </dd> - <dt><code>mongolian</code> {{experimental_inline}}</dt> - <dd> - <ul style="list-style-type: mongolian;"> - <li>例</li> - </ul> - </dd> - <dt><code>myanmar</code></dt> - <dt><code>-moz-myanmar</code></dt> - <dd> - <ul style=""> - <li>例</li> - </ul> - </dd> - <dt><code>oriya</code></dt> - <dt><code>-moz-oriya</code></dt> - <dd> - <ul style=""> - <li>例</li> - </ul> - </dd> - <dt><code>persian</code> {{experimental_inline}}</dt> - <dt><code>-moz-persian</code></dt> - <dd> - <ul style=""> - <li>例</li> - </ul> - </dd> - <dt><code>simp-chinese-formal</code> {{experimental_inline}}</dt> - <dd> - <ul style="list-style-type: simp-chinese-formal;"> - <li>公的な簡体字中国語の数値表記</li> - <li>例: 壹万壹仟壹佰壹拾壹</li> - </ul> - </dd> - <dt><code>simp-chinese-informal</code> {{experimental_inline}}</dt> - <dd> - <ul style="list-style-type: simp-chinese-informal;"> - <li>簡体字中国語の日常的な数値表記</li> - <li>例: 一万一千一百一十一</li> - </ul> - </dd> - <dt><code>tamil</code> {{experimental_inline}}</dt> - <dt><code>-moz-tamil</code></dt> - <dd> - <ul style=""> - <li>例</li> - </ul> - </dd> - <dt><code>telugu</code></dt> - <dt><code>-moz-telugu</code></dt> - <dd> - <ul style=""> - <li>例</li> - </ul> - </dd> - <dt><code>thai</code></dt> - <dt><code>-moz-thai</code></dt> - <dd> - <ul style=""> - <li>例</li> - </ul> - </dd> - <dt><code>tibetan</code> {{experimental_inline}}*</dt> - <dd> - <ul style="list-style-type: tibetan;"> - <li>例</li> - </ul> - </dd> - <dt><code>trad-chinese-formal</code> {{experimental_inline}}</dt> - <dd> - <ul style="list-style-type: trad-chinese-formal;"> - <li>公的な繁体字中国語の数値表記</li> - <li>例: 壹萬壹仟壹佰壹拾壹</li> - </ul> - </dd> - <dt><code>trad-chinese-informal</code> {{experimental_inline}}</dt> - <dd> - <ul style="list-style-type: trad-chinese-informal;"> - <li>公的な場では使用しない、繁体字中国語の数値表記</li> - <li>例: 一萬一千一百一十一</li> - </ul> - </dd> - <dt><code>upper-armenian</code> {{experimental_inline}}*</dt> - <dd> - <ul style="list-style-type: upper-armenian;"> - <li>例</li> - </ul> - </dd> - <dt><code>disclosure-open</code> {{experimental_inline}}</dt> - <dd> - <ul style="list-style-type: disclosure-open;"> - <li>{{HTMLElement("details")}} などの展開ウィジェットを開いていることを示す記号</li> - </ul> - </dd> - <dt><code>disclosure-closed</code> {{experimental_inline}}</dt> - <dd> - <ul style="list-style-type: disclosure-closed;"> - <li>{{HTMLElement("details")}} などの展開ウィジェットを閉じていることを示す記号</li> - </ul> - </dd> -</dl> - -<h3 id="Non-standard_extensions" name="Non-standard_extensions">標準外の拡張</h3> - -<p>Mozilla (Firefox), Blink (Chrome and Opera), WebKit (Safari) が拡張した、様々な言語のマーカーです。ブラウザーの互換性の表で、ブラウザーがどの拡張に対応しているかを確認してください。</p> - -<dl style=""> - <dt><code>-moz-ethiopic-halehame</code></dt> - <dd> - <ul style=""> - <li>例</li> - </ul> - </dd> - <dt><code>-moz-ethiopic-halehame-am</code></dt> - <dd> - <ul style=""> - <li>例</li> - </ul> - </dd> - <dt><code>ethiopic-halehame-ti-er</code></dt> - <dt><code>-moz-ethiopic-halehame-ti-er</code></dt> - <dd> - <ul style=""> - <li>例</li> - </ul> - </dd> - <dt><code>ethiopic-halehame-ti-et</code></dt> - <dt><code>-moz-ethiopic-halehame-ti-et</code></dt> - <dd> - <ul style=""> - <li>例</li> - </ul> - </dd> - <dt><code>hangul</code></dt> - <dt><code>-moz-hangul</code></dt> - <dd> - <ul style=""> - <li>例</li> - <li>例</li> - <li>例</li> - </ul> - </dd> - <dt><code>hangul-consonant</code></dt> - <dt><code>-moz-hangul-consonant</code></dt> - <dd> - <ul style=""> - <li>例</li> - <li>例</li> - <li>例</li> - </ul> - </dd> - <dt><code>urdu</code></dt> - <dt><code>-moz-urdu</code></dt> - <dd> - <ul style=""> - <li>例</li> - </ul> - </dd> -</dl> - -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> - -{{csssyntax}} - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: css notranslate">ol.normal { - list-style-type: upper-alpha; -} - -/* or use the shortcut "list-style": */ -ol.shortcut { - list-style: upper-alpha; -} -</pre> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html notranslate"><ol class="normal">List 1 - <li>Hello</li> - <li>World</li> - <li>What's up?</li> -</ol> - -<ol class="shortcut">List 2 - <li>Looks</li> - <li>Like</li> - <li>The</li> - <li>Same</li> -</ol> -</pre> - -<h3 id="Result" name="Result">結果</h3> - -<p>{{EmbedLiveSample("Examples","200","300")}}</p> - -<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮事項</h2> - -<p>読み上げソフトの <a href="https://help.apple.com/voiceover/info/guide/">VoiceOver</a> には、 <code>list-style-type</code> の値に <code>none</code> が適用された順序なしリストをリストとして読み上げないという問題があります。リストが正しく読み上げられるようにするには、それぞれのリスト項目の前に<a href="https://en.wikipedia.org/wiki/Zero-width_space">幅ゼロの空白</a>を<a href="/ja/docs/Web/CSS/content">擬似コンテンツ</a>として追加する必要があります。これはデザインがバグ修正に影響されないことを保証し、リスト項目の表記が正しくなくなるわけではありません。</p> - -<pre class="brush: css notranslate">ul { - list-style: none; -} - -ul li::before { - content: "\200B"; -} - -</pre> - -<ul> - <li><a href="https://unfetteredthoughts.net/2017/09/26/voiceover-and-list-style-type-none/">VoiceOver and list-style-type: none – Unfettered Thoughts</a></li> - <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.3_%E2%80%94_Create_content_that_can_be_presented_in_different_ways">MDN Understanding WCAG, Guideline 1.3 explanations</a></li> - <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html" rel="noopener">Understanding Success Criterion 1.3.1 | W3C Understanding WCAG 2.0</a></li> -</ul> - -<h2 id="Notes" name="Notes">メモ</h2> - -<ul> - <li>一部の <code>list-style-types</code> の表示には、適切なフォントのインストールが必要です。</li> - <li><code>cjk-ideographic</code> は <code>trad-chinese-informal</code> と同義です。後方互換性のために残されています。</li> -</ul> - -<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('CSS3 Counter Styles', '#extending-css2', 'list-style-type')}}</td> - <td>{{Spec2("CSS3 Counter Styles")}}</td> - <td>CSS2.1 counters を再定義。<br> - <code>@counter-style</code> 規則に対応するため構文を拡張。<br> - <code>@counter-style</code> を使用して、一般的なスタイルである <code>hebrew</code>, <code>cjk-ideographic</code>, <code>hiragana</code>, <code>hiragana-iroha</code>, <code>katakana</code>, <code>katakana-iroha</code>, <code>japanese-formal</code>, <code>japanese-informal</code>, <code>simp-chinese-formal</code>, <code>trad-chinese-formal</code>, <code>simp-chinese-formal</code>, <code>trad-chinese-formal</code>,<code>korean-hangul-formal</code>, <code>korean-hanja-informal</code>, <code>korean-hanja-formal</code>, <code>cjk-decimal</code>, <code>ethiopic-numeric</code>, <code>disclosure-open</code>, <code>disclosure-closed</code> を定義。<br> - <code><counter-style></code> を <code>symbols()</code> 表記で拡張。</td> - </tr> - <tr> - <td>{{SpecName('CSS3 Lists', '#propdef-list-style-type', 'list-style-type')}}</td> - <td>{{Spec2('CSS3 Lists')}}</td> - <td>{{cssxref("<string>")}} の対応を追加し、 <code>@counter-style</code> 規則で使われる識別子をキーワードに追加。<br> - 単純な <code><string></code> の対応を追加。</td> - </tr> - <tr> - <td>{{SpecName('CSS2.1', 'generate.html#propdef-list-style-type', 'list-style-type')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<p>{{cssinfo}}</p> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.list-style-type")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{Cssxref("list-style")}}, {{Cssxref("list-style-image")}}, {{Cssxref("list-style-position")}}</li> -</ul> diff --git a/files/ja/web/css/list-style-type/index.md b/files/ja/web/css/list-style-type/index.md new file mode 100644 index 0000000000..518ab2a49c --- /dev/null +++ b/files/ja/web/css/list-style-type/index.md @@ -0,0 +1,581 @@ +--- +title: list-style-type +slug: Web/CSS/list-style-type +tags: + - CSS + - CSS プロパティ + - CSS リスト + - Reference + - recipe:css-property +browser-compat: css.properties.list-style-type +translation_of: Web/CSS/list-style-type +--- +{{CSSRef}} + +**`list-style-type`** は [CSS](/ja/docs/Web/CSS) のプロパティで、リスト項目要素のマーカーを設定します (円、文字、独自のカウンタースタイルなど)。</p> + +{{EmbedInteractiveExample("pages/css/list-style-type.html")}} + +マーカーの[色](/ja/docs/Web/CSS/color_value)は、適用先の要素における色の計算値と同じになります。 + +わずかな要素 ({{HTMLElement("li")}} と {{HTMLElement("summary")}}) だけが既定で `display: list-item` の値を持っています。しかし、 `list-style-type` プロパティは {{cssxref("display")}} の値が `list-item` に設定されているあらゆる要素に適用することができます。さらに、このプロパティは継承されるので、親要素 (普通は {{HTMLElement("ol")}} または {{HTMLElement("ul")}}) に設定することですべてのリスト項目に適用することができます。</p> + +## 構文 + +```css +/* マーカーの種類の一例 */ +list-style-type: disc; +list-style-type: circle; +list-style-type: square; +list-style-type: decimal; +list-style-type: georgian; +list-style-type: trad-chinese-informal; +list-style-type: kannada; + +/* <string> の値 */ +list-style-type: '-'; + +/* @counter-style 規則に一致する識別子 */ +list-style-type: custom-counter-style; + +/* キーワード値 */ +list-style-type: none; + +/* グローバル値 */ +list-style-type: inherit; +list-style-type: initial; +list-style-type: revert; +list-style-type: unset; +``` + +`list-style-type` プロパティは、以下のいずれかで定義することができます。 + +- 単一の `<custom-ident>` 値 +- 単一の `symbols()` 値 +- 単一の `<string>` 値 +- キーワード `none` + +注意事項: + +- 種類によっては期待通りに表示するために適切なフォントのインストールが必要です。 +- `cjk-ideographic` は `trad-chinese-informal` と同じです。歴史的な理由で存在しています。 + +### 値 + +- {{cssxref("custom-ident", "<custom-ident>")}} + - : {{cssxref("@counter-style")}} の値、または以下の定義済みスタイルのうちの一つに一致する識別子です。 +- {{cssxref("symbols()")}} + - : 無名のリストスタイルを定義します。 +- {{cssxref("<string>")}} + - : 特定の文字列を、リストのマーカーとして使用します。 +- `none` + - : マーカーは表示されません。 +- `disc` + - : 塗りつぶされた円形です (既定値)。 +- `circle` + - : 中空円です。 +- `square` + - : 塗りつぶされた四角形です。 +- `decimal` + - : 数値です。 1 から始まります。 +- `cjk-decimal` {{experimental_inline}} + - : 漢数字です。 +- `decimal-leading-zero` + - : 数値で、先頭がゼロ埋めされます。 +- `lower-roman` + - : 小文字のローマ数字です。 +- `upper-roman` + - : 大文字のローマ数字です。 +- `lower-greek` + - : 小文字の古代ギリシャ文字です。 +- `lower-alpha`, `lower-latin` + - : 小文字の ASCII 文字です。 +- `upper-alpha`, `upper-latin` + - : 大文字の ASCII 文字です。 +- `arabic-indic`, `-moz-arabic-indic` + - : アラビア－インド数字です。 +- `armenian` + - : 伝統的なアルメニア語の数値表記です。 +- `bengali`, `-moz-bengali` + - : ベンガル語の数値表記です。 +- `cambodian`/`khmer` + - : カンボジア／クメール語の数値表記です。 +- `cjk-earthly-branch`, `-moz-cjk-earthly-branch` + - : 漢字の「十二支」順です。 +- `cjk-heavenly-stem`, `-moz-cjk-heavenly-stem` + - : 漢字の「十干」順です。 +- `cjk-ideographic`{{experimental_inline}} + - : `trad-chinese-informal` と同じです。 +- `devanagari`, `-moz-devanagari` + - : デーヴァナーガリーの数値表記です。 +- `ethiopic-numeric` {{experimental_inline}} + - : エチオピア語の数値表記です。 +- `georgian` + - : 伝統的なジョージア語の数値表記です。 +- `gujarati`, `-moz-gujarati` + - : グジャラート語の数値表記です。 +- `gurmukhi`, `-moz-gurmukhi` + - : グルムキー語の数値表記です。 +- `hebrew` {{experimental_inline}} + - : 伝統的なヘブライ語の数値表記です。 +- `hiragana` {{experimental_inline}} + - : ひらがなの辞書順の文字です。 +- `hiragana-iroha` {{experimental_inline}} + - : ひらがなの{{interwiki('wikipedia', 'いろは歌', 'いろは順')}}の文字です。 +- `japanese-formal` {{experimental_inline}} + - : 法律や金融関係の書類に使用される日本の公的な数値表記です。漢字は、他の正しい文字に似せて修正することができないように設計されています。 +- `japanese-informal` {{experimental_inline}} + - : 日本語の日常的な数値表記です。 +- `kannada`, `-moz-kannada` + - : カンナダ語の数値表記です。 +- `katakana` {{experimental_inline}} + - : カタカナの辞書順の文字です。 +- `katakana-iroha` {{experimental_inline}} + - : カタカナの{{interwiki('wikipedia', 'いろは歌', 'いろは順')}}の文字です。 +- `korean-hangul-formal` {{experimental_inline}} + - : 韓国語のハングルの数値表記です。 +- `korean-hanja-formal` {{experimental_inline}} + - : 韓国語の公的な漢数字です。 +- `korean-hanja-informal` {{experimental_inline}} + - : 韓国語の漢数字です。 +- `lao`, `-moz-lao` + - : ラオス語の数値表記です。 +- `lower-armenian` {{experimental_inline}} + - : アルメニア語の小文字の数値表記です。 +- `malayalam`, `-moz-malayalam` + - : マラヤーラム語の数値表記です。 +- `mongolian` {{experimental_inline}} + - : モンゴル語の数値表記です。 +- `myanmar`, `-moz-myanmar` + - : ミャンマー語 (ビルマ語) の数値表記です。 +- `oriya`, `-moz-oriya` + - : オリヤー語の数値表記です。 +- `persian` {{experimental_inline}}, `-moz-persian` + - : ペルシャ語の数値表記です。 +- `simp-chinese-formal` {{experimental_inline}} + - : 公的な簡体字中国語の数値表記です。 +- `simp-chinese-informal` {{experimental_inline}} + - : 日常的な簡体字中国語の数値表記です。 +- `tamil` {{experimental_inline}}, `-moz-tamil` + - : タミル語の数値表記です。 +- `telugu`, `-moz-telugu` + - : テルグ語の数値表記です。 +- `thai`, `-moz-thai` + - : タイ語の数値表記です。 +- `tibetan` {{experimental_inline}}\* + - : チベット語の数値表記です。 +- `trad-chinese-formal` {{experimental_inline}} + - : 公的な繁体字中国語の数値表記です。 +- `trad-chinese-informal` {{experimental_inline}} + - : 日常的な繁体字中国語の数値表記です。 +- `upper-armenian` {{experimental_inline}}` + - : 伝統的なアルメニア語の大文字の数値表記です。 +- `disclosure-open` {{experimental_inline}} + - : {{HTMLElement("details")}} などの展開ウィジェットを開いていることを示す記号 +- `disclosure-closed` {{experimental_inline}} + - : {{HTMLElement("details")}} などの展開ウィジェットを閉じていることを示す記号 + +### 標準外の拡張 + +Mozilla (Firefox)、Blink (Chrome、Opera)、WebKit (Safari) では、他の言語のリストの種類に対応するために、さらにいくつかの定義済みの種類が提供されています。どのブラウザーがどの拡張に対応しているかを確認するには、互換性一覧表を参照してください。 + +- `-moz-ethiopic-halehame` +- `-moz-ethiopic-halehame-am` +- `ethiopic-halehame-ti-er`, `-moz-ethiopic-halehame-ti-er` +- `ethiopic-halehame-ti-et`, `-moz-ethiopic-halehame-ti-et` +- `hangul`, `-moz-hangul` +- `hangul-consonant`, `-moz-hangul-consonant` +- `urdu`, `-moz-urdu` + +## アクセシビリティの考慮 + +画面リーダーの [VoiceOver](https://help.apple.com/voiceover/info/guide/) には、 `list-style-type` の値に `none` が適用された順序なしリストをリストとして読み上げないという問題があります。リストが正しく読み上げられるようにするには、それぞれのリスト項目の前に[幅ゼロの空白](https://en.wikipedia.org/wiki/Zero-width_space)を[擬似コンテンツ](/ja/docs/Web/CSS/content)として追加する必要があります。これはデザインがバグ修正に影響されないことを保証し、リスト項目の表記が正しくなくなるわけではありません。 + +```css +ul { + list-style: none; +} + +ul li::before { + content: "\200B"; +} +``` + +- [VoiceOver and list-style-type: none – Unfettered Thoughts](https://unfetteredthoughts.net/2017/09/26/voiceover-and-list-style-type-none/) +- [MDN WCAG の理解、ガイドライン 1.3 の説明](/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.3_%E2%80%94_Create_content_that_can_be_presented_in_different_ways) +- [Understanding Success Criterion 1.3.1 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html) + +## 公式定義 + +{{cssinfo}} + +## 形式文法 + +{{csssyntax}} + +## 例 + +<h3 id="Setting_list_item_markers">リスト項目マーカーの設定</h3> + +#### HTML + +```html +List 1 +<ol class="normal"> + <li>Hello</li> + <li>World</li> + <li>What's up?</li> +</ol> + +List 2 +<ol class="shortcut"> + <li>Looks</li> + <li>Like</li> + <li>The</li> + <li>Same</li> +</ol> +``` + +#### CSS + +```css +ol.normal { + list-style-type: upper-alpha; +} + +/* or use the shortcut "list-style": */ +ol.shortcut { + list-style: upper-alpha; +} +``` + +#### 結果 + +{{EmbedLiveSample("Setting_list_item_markers","200","300")}} + +<h3 id="All_list_style_types">リストスタイルのすべての種類</h3> + +#### HTML + +```html +<ol> + <li>Apollo</li> + <li>Hubble</li> + <li>Chandra</li> + <li>Cassini-Huygens</li> + <li>Spitzer</li> +</ol> + +<h2>Choose a list style type:</h2> + +<div class="container"> + + <label for="disc"> + <input type="radio" id="disc" name="type" value="disc">disc + </label> + + <label for="circle"> + <input type="radio" id="circle" name="type" value="circle">circle + </label> + + <label for="square"> + <input type="radio" id="square" name="type" value="square">square + </label> + + <label for="decimal"> + <input type="radio" id="decimal" name="type" value="decimal">decimal + </label> + + <label for="cjk-decimal"> + <input type="radio" id="cjk-decimal" name="type" value="cjk-decimal">cjk-decimal + </label> + + <label for="decimal-leading-zero"> + <input type="radio" id="decimal-leading-zero" name="type" value="decimal-leading-zero">decimal-leading-zero + </label> + + <label for="lower-roman"> + <input type="radio" id="lower-roman" name="type" value="lower-roman">lower-roman + </label> + + <label for="upper-roman"> + <input type="radio" id="upper-roman" name="type" value="upper-roman">upper-roman + </label> + + <label for="lower-greek"> + <input type="radio" id="lower-greek" name="type" value="lower-greek">lower-greek + </label> + + <label for="lower-alpha"> + <input type="radio" id="lower-alpha" name="type" value="lower-alpha">lower-alpha, lower-latin + </label> + + <label for="upper-alpha"> + <input type="radio" id="upper-alpha" name="type" value="upper-alpha">upper-alpha, upper-latin + </label> + + <label for="arabic-indic"> + <input type="radio" id="arabic-indic" name="type" value="arabic-indic">arabic-indic + </label> + + <label for="armenian"> + <input type="radio" id="armenian" name="type" value="armenian">armenian + </label> + + <label for="bengali"> + <input type="radio" id="bengali" name="type" value="bengali">bengali + </label> + + <label for="cambodian"> + <input type="radio" id="cambodian" name="type" value="cambodian">cambodian + </label> + + <label for="cjk-earthly-branch"> + <input type="radio" id="cjk-earthly-branch" name="type" value="cjk-earthly-branch">cjk-earthly-branch + </label> + + <label for="cjk-heavenly-stem"> + <input type="radio" id="cjk-heavenly-stem" name="type" value="cjk-heavenly-stem">cjk-heavenly-stem + </label> + + <label for="cjk-ideographic"> + <input type="radio" id="cjk-ideographic" name="type" value="cjk-ideographic">cjk-ideographic + </label> + + <label for="devanagari"> + <input type="radio" id="devanagari" name="type" value="devanagari">devanagari + </label> + + <label for="ethiopic-numeric"> + <input type="radio" id="ethiopic-numeric" name="type" value="ethiopic-numeric">ethiopic-numeric + </label> + + <label for="georgian"> + <input type="radio" id="georgian" name="type" value="georgian">georgian + </label> + + <label for="gujarati"> + <input type="radio" id="gujarati" name="type" value="gujarati">gujarati + </label> + + <label for="gurmukhi"> + <input type="radio" id="gurmukhi" name="type" value="gurmukhi">gurmukhi + </label> + + <label for="hebrew"> + <input type="radio" id="hebrew" name="type" value="hebrew">hebrew + </label> + + <label for="hiragana"> + <input type="radio" id="hiragana" name="type" value="hiragana">hiragana + </label> + + <label for="hiragana-iroha"> + <input type="radio" id="hiragana-iroha" name="type" value="hiragana-iroha">hiragana-iroha + </label> + + <label for="japanese-formal"> + <input type="radio" id="japanese-formal" name="type" value="japanese-formal">japanese-formal + </label> + + <label for="japanese-informal"> + <input type="radio" id="japanese-informal" name="type" value="japanese-informal">japanese-informal + </label> + + <label for="kannada"> + <input type="radio" id="kannada" name="type" value="kannada">kannada + </label> + + <label for="katakana"> + <input type="radio" id="katakana" name="type" value="katakana">katakana + </label> + + <label for="katakana-iroha"> + <input type="radio" id="katakana-iroha" name="type" value="katakana-iroha">katakana-iroha + </label> + + <label for="khmer"> + <input type="radio" id="khmer" name="type" value="khmer">khmer + </label> + + <label for="korean-hangul-formal"> + <input type="radio" id="korean-hangul-formal" name="type" value="korean-hangul-formal">korean-hangul-formal + </label> + + <label for="korean-hanja-formal"> + <input type="radio" id="korean-hanja-formal" name="type" value="korean-hanja-formal">korean-hanja-formal + </label> + + <label for="korean-hanja-informal"> + <input type="radio" id="korean-hanja-informal" name="type" value="korean-hanja-informal">korean-hanja-informal + </label> + + <label for="lao"> + <input type="radio" id="lao" name="type" value="lao">lao + </label> + + <label for="lower-armenian"> + <input type="radio" id="lower-armenian" name="type" value="lower-armenian">lower-armenian + </label> + + <label for="malayalam"> + <input type="radio" id="malayalam" name="type" value="malayalam">malayalam + </label> + + <label for="mongolian"> + <input type="radio" id="mongolian" name="type" value="mongolian">mongolian + </label> + + <label for="myanmar"> + <input type="radio" id="myanmar" name="type" value="myanmar">myanmar + </label> + + <label for="oriya"> + <input type="radio" id="oriya" name="type" value="oriya">oriya + </label> + + <label for="persian"> + <input type="radio" id="persian" name="type" value="persian">persian + </label> + + <label for="simp-chinese-formal"> + <input type="radio" id="simp-chinese-formal" name="type" value="simp-chinese-formal">simp-chinese-formal + </label> + + <label for="simp-chinese-informal"> + <input type="radio" id="simp-chinese-informal" name="type" value="simp-chinese-informal">simp-chinese-informal + </label> + + <label for="tamil"> + <input type="radio" id="tamil" name="type" value="tamil">tamil + </label> + + <label for="telegu"> + <input type="radio" id="telegu" name="type" value="telegu">telegu + </label> + + <label for="thai"> + <input type="radio" id="thai" name="type" value="thai">thai + </label> + + <label for="tibetan"> + <input type="radio" id="tibetan" name="type" value="tibetan">tibetan + </label> + + <label for="trad-chinese-formal"> + <input type="radio" id="trad-chinese-formal" name="type" value="trad-chinese-formal">trad-chinese-formal + </label> + + <label for="trad-chinese-informal"> + <input type="radio" id="trad-chinese-informal" name="type" value="trad-chinese-informal">trad-chinese-informal + </label> + + <label for="upper-armenian"> + <input type="radio" id="upper-armenian" name="type" value="upper-armenian">upper-armenian + </label> + + <label for="disclosure-open"> + <input type="radio" id="disclosure-open" name="type" value="disclosure-open">disclosure-open + </label> + + <label for="disclosure-closed"> + <input type="radio" id="disclosure-closed" name="type" value="disclosure-closed">disclosure-closed + </label> + + <label for="-moz-ethiopic-halehame"> + <input type="radio" id="-moz-ethiopic-halehame" name="type" value="-moz-ethiopic-halehame">-moz-ethiopic-halehame + </label> + + <label for="-moz-ethiopic-halehame-am"> + <input type="radio" id="-moz-ethiopic-halehame-am" name="type" value="-moz-ethiopic-halehame-am">-moz-ethiopic-halehame-am + </label> + + <label for="ethiopic-halehame-ti-er"> + <input type="radio" id="ethiopic-halehame-ti-er" name="type" value="ethiopic-halehame-ti-er">ethiopic-halehame-ti-er + </label> + + <label for="ethiopic-halehame-ti-et"> + <input type="radio" id="ethiopic-halehame-ti-et" name="type" value="ethiopic-halehame-ti-et">ethiopic-halehame-ti-et + </label> + + <label for="hangul"> + <input type="radio" id="hangul" name="type" value="hangul">hangul + </label> + + <label for="hangul-consonant"> + <input type="radio" id="hangul-consonant" name="type" value="hangul-consonant">hangul-consonant + </label> + + <label for="urdu"> + <input type="radio" id="urdu" name="type" value="urdu">urdu + </label> + + <label for="-moz-ethiopic-halehame-ti-er"> + <input type="radio" id="-moz-ethiopic-halehame-ti-er" name="type" value="-moz-ethiopic-halehame-ti-er">-moz-ethiopic-halehame-ti-er + </label> + + <label for="-moz-ethiopic-halehame-ti-et"> + <input type="radio" id="-moz-ethiopic-halehame-ti-et" name="type" value="-moz-ethiopic-halehame-ti-et">-moz-ethiopic-halehame-ti-et + </label> + + <label for="-moz-hangul"> + <input type="radio" id="-moz-hangul" name="type" value="-moz-hangul">-moz-hangul + </label> + + <label for="-moz-hangul-consonant"> + <input type="radio" id="-moz-hangul-consonant" name="type" value="-moz-hangul-consonant">-moz-hangul-consonant + </label> + + <label for="-moz-urdu"> + <input type="radio" id="-moz-urdu" name="type" value="-moz-urdu">-moz-urdu + </label> + +</div> +``` + +#### CSS + +```css + +ol { + font-size: 1.2rem; +} + +.container { + column-count: 3; +} + +label { + display: block; +} + +input { + margin: .4rem; +} +``` + +#### JavaScript + +```js +const container = document.querySelector(".container"); +container.addEventListener("change", event => { + const list = document.querySelector("ol"); + list.setAttribute("style", `list-style-type: ${event.target.value}`); +}); +``` + +#### 結果 + +{{EmbedLiveSample("All_list_style_types", "600", "800")}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{Cssxref("list-style")}}, {{Cssxref("list-style-image")}}, {{Cssxref("list-style-position")}} diff --git a/files/ja/web/css/minmax()/index.html b/files/ja/web/css/minmax()/index.html index 9ab7b88e97..ca68c8d134 100644 --- a/files/ja/web/css/minmax()/index.html +++ b/files/ja/web/css/minmax()/index.html @@ -156,7 +156,7 @@ minmax(auto, 300px) </li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/ja/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/ja/docs/Web/CSS/Reference"><strong>CSS リファレンス</strong></a></li> diff --git a/files/ja/web/css/padding-bottom/index.html b/files/ja/web/css/padding-bottom/index.html index 877b22fa80..8aa21ff9bb 100644 --- a/files/ja/web/css/padding-bottom/index.html +++ b/files/ja/web/css/padding-bottom/index.html @@ -104,7 +104,7 @@ padding-bottom: unset; <h2 id="See_also" name="See_also">関連情報</h2> <ul> - <li><a href="/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model" title="ja/CSS/box model">CSS 基本ボックスモデルの紹介</a></li> + <li><a href="/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">CSS 基本ボックスモデルの紹介</a></li> <li>{{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-left")}} および {{cssxref("padding")}} 一括指定</li> <li>対応付けられる論理的プロパティ: {{cssxref("padding-block-start")}}, {{cssxref("padding-block-end")}}, {{cssxref("padding-inline-start")}}, {{cssxref("padding-inline-end")}} および一括指定の {{cssxref("padding-block")}} と {{cssxref("padding-inline")}}</li> </ul> diff --git a/files/ja/web/css/reference/index.html b/files/ja/web/css/reference/index.html index a9bc022589..673dbef605 100644 --- a/files/ja/web/css/reference/index.html +++ b/files/ja/web/css/reference/index.html @@ -95,7 +95,7 @@ div.menu-bar li:hover > ul { <dt><a href="/ja/docs/Web/CSS/Child_combinator">子結合子</a> <code><var>A</var> > <var>B</var></code></dt> <dd><code><var>B</var></code> で選択された要素のうち、 <code><var>A</var></code> で選択された要素の直接の子であるものを指定します。</dd> <dt><a href="/ja/docs/Web/CSS/Descendant_combinator">子孫結合子</a> <code><var>A</var> <var>B</var></code></dt> - <dd><code><var>B</var></code> で選択された要素のうち、 <code><var>A</var></code>, but is not necessarily a direct child.</dd> + <dd><code><var>B</var></code> で選択された要素のうち、 <code><var>A</var></code>で選択された要素の子孫であるものを指定します。直接の子である必要はありません。</dd> <dt><a href="/ja/docs/Web/CSS/Column_combinator">列結合子</a> <code><var>A</var> || <var>B</var></code> {{Experimental_Inline}}</dt> <dd><code><var>B</var></code> で指定された要素のうち、 <code><var>A</var></code> で指定された表の列にあるものを指定します。複数の列にまたがる要素は、そのすべての列のメンバーであるとみなされます。</dd> </dl> diff --git a/files/ja/web/css/text-decoration-color/index.html b/files/ja/web/css/text-decoration-color/index.html index 7b0322e9d0..f41da12a5c 100644 --- a/files/ja/web/css/text-decoration-color/index.html +++ b/files/ja/web/css/text-decoration-color/index.html @@ -3,14 +3,18 @@ title: text-decoration-color slug: Web/CSS/text-decoration-color tags: - CSS - - CSS テキスト - - CSS テキスト装飾 - - CSS プロパティ - - HTML スタイル - - HTML 色 + - CSS Property + - CSS Text + - CSS Text Decoration + - HTML Colors + - HTML Styles - Reference - - text-decoration-color - - 色 + - Styling HTML + - Styling text + - color + - colors + - 'recipe:css-property' +browser-compat: css.properties.text-decoration-color translation_of: Web/CSS/text-decoration-color --- <div>{{ CSSRef }}</div> @@ -21,14 +25,13 @@ translation_of: Web/CSS/text-decoration-color <div>{{EmbedInteractiveExample("pages/css/text-decoration-color.html")}}</div> -<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> <p>CSS はそれぞれの線種ごとに固有の色を指定する仕組みを直接は持っていません。しかしながら、この効果は要素を入れ子にして、それぞれの要素毎に ({{cssxref("text-decoration-line")}} プロパティで) 異なる線種を適用し、 (code>text-decoration-color で) 線の色を指定することで実現できます。</p> -<h2 id="Syntax" name="Syntax">構文</h2> +<h2 id="Syntax">構文</h2> <pre class="brush:css no-line-numbers">/* <color> 値 */ -text-decoration-color: currentColor; +text-decoration-color: currentcolor; text-decoration-color: red; text-decoration-color: #00ff00; text-decoration-color: rgba(255, 128, 128, 0.5); @@ -37,21 +40,40 @@ text-decoration-color: transparent; /* グローバル値 */ text-decoration-color: inherit; text-decoration-color: initial; +text-decoration-color: revert; text-decoration-color: unset; </pre> -<h3 id="Values" name="Values">値</h3> +<h3 id="Values">値</h3> <dl> - <dt>{{cssxref("<color>")}}</dt> - <dd>装飾線の色です。</dd> + <dt>{{cssxref("<color>")}}</dt> + <dd>装飾線の色です。</dd> </dl> -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> +<h2 id="Accessibility_concerns">アクセシビリティの考慮</h2> + +<p>テキストの色、テキストが置かれている背景、テキストの装飾線の間のコントラスト比が、弱視の人がページの内容を読むことができるように十分に高いことを確認ことが重要です。色のコントラスト比は、テキストと背景の色の輝度を比較して決定されます。</p> + +<p>色だけで意味を伝えるべきではありません。例えば、テキストの色と text-decoration-color の変更だけでは、リンクにフォーカスがあることを示すのに十分ではありません。</p> + +<ul> + <li><a href="https://webaim.org/resources/contrastchecker/">WebAIM: Color Contrast Checker</a></li> + <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN "WCAG を理解する ― ガイドライン 1.4 の解説"</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html">Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0</a></li> +</ul> + +<h2 id="Formal_definition">公式定義</h2> + +<p>{{CSSInfo}}</p> + +<h3 id="Formal_syntax">形式文法</h3> {{csssyntax}} -<h2 id="Examples" name="Examples">例</h2> +<h2 id="Examples">例</h2> + +<h3 id="Basic_example">基本的な例</h3> <pre class="brush: html"><p>This paragraph has <s>some erroneous text</s> inside it that I want to call attention to.</p></pre> @@ -62,51 +84,22 @@ text-decoration-color: unset; } s { - text-decoration-line: <code>line-through</code>; + text-decoration-line: line-through; text-decoration-color: red; text-decoration-style: wavy; }</pre> <p>{{ EmbedLiveSample('Examples') }}</p> -<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮事項</h2> - -<p>テキストの色、テキストが置かれている背景、テキストの装飾線の間のコントラスト比が、弱視の人がページの内容を読むことができるように十分に高いことを確認ことが重要です。色のコントラスト比は、テキストと背景の色の輝度を比較して決定されます。</p> - -<p>色だけで意味を伝えるべきではありません。例えば、テキストの色と text-decoration-color の変更だけでは、リンクにフォーカスがあることを示すのに十分ではありません。</p> - -<ul> - <li><a href="https://webaim.org/resources/contrastchecker/">WebAIM: Color Contrast Checker</a></li> - <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN "WCAG を理解する ― ガイドライン 1.4 の解説"</a></li> - <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html">Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0</a></li> -</ul> - -<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('CSS3 Text Decoration', '#text-decoration-color-property', 'text-decoration-color') }}</td> - <td>{{ Spec2('CSS3 Text Decoration') }}</td> - <td>初回定義。 {{cssxref("text-decoration")}} プロパティが複数の関連するプロパティを定義する一括指定になりました。</td> - </tr> - </tbody> -</table> +<h2 id="Specifications">仕様書</h2> -<p>{{cssinfo}}</p> +{{Specifications}} -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> +<h2 id="Browser_compatibility">ブラウザーの互換性</h2> -<p>{{Compat("css.properties.text-decoration-color")}}</p> +<p>{{Compat}}</p> -<h2 id="See_also" name="See_also">関連情報</h2> +<h2 id="See_also">関連情報</h2> <ul> <li>複数の行内装飾プロパティを一度に設定するときは、代わりに一括指定の {{cssxref("text-decoration")}} プロパティを使った方が便利かもしれません。</li> diff --git a/files/ja/web/css/text-emphasis-color/index.html b/files/ja/web/css/text-emphasis-color/index.html index eabcc4c410..44da77376c 100644 --- a/files/ja/web/css/text-emphasis-color/index.html +++ b/files/ja/web/css/text-emphasis-color/index.html @@ -8,15 +8,19 @@ tags: - CSS プロパティ - HTML 色 - Reference - - 文字列強調 + - Styling HTML + - Text Emphasis + - 'recipe:css-property' + - text-decoration-color +browser-compat: css.properties.text-emphasis-color translation_of: Web/CSS/text-emphasis-color --- <div>{{CSSRef}}</div> -<p><span class="seoSummary"><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>text-emphasis-color</code></strong> プロパティは、圏点の色を設定します。この値は一括指定の {{cssxref("text-emphasis")}} を使用して設定することもできます。</span></p> +<p><strong><code>text-emphasis-color</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、圏点の色を設定します。この値は一括指定の {{cssxref("text-emphasis")}} を使用して設定することもできます。</p> <pre class="brush:css no-line-numbers">/* 初期値 */ -text-emphasis-color: currentColor; +text-emphasis-color: currentcolor; /* <color> */ text-emphasis-color: #555; @@ -27,68 +31,58 @@ text-emphasis-color: transparent; /* グローバル値 */ text-emphasis-color: inherit; text-emphasis-color: initial; +text-emphasis-color: revert; text-emphasis-color: unset; </pre> -<p>{{cssinfo}}</p> +<h2 id="Syntax">構文</h2> -<h2 id="Syntax" name="Syntax">構文</h2> - -<h3 id="Values" name="Values">値</h3> +<h3 id="Values">値</h3> <dl> <dt><code><color></code></dt> - <dd>記号の色を定義します。 color が存在しない場合、既定で <code>currentColor</code> になります。</dd> + <dd>記号の色を定義します。 color が存在しない場合、既定で <code>currentcolor</code> になります。</dd> </dl> -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> +<h2 id="Formal_definition">公式定義</h2> + +<p>{{CSSInfo}}</p> + +<h3 id="Formal_syntax">形式文法</h3> {{csssyntax}} -<h2 id="Examples" name="Examples">例</h2> +<h2 id="Examples">例</h2> + +<h3 id="Emphasis_with_a_color_and_custom_character">色と固有の文字で強調</h3> -<h3 id="CSS">CSS</h3> +<h4 id="CSS">CSS</h4> -<pre class="brush: css">h3 { - text-emphasis-color: #555; +<pre class="brush: css">em { + text-emphasis-color: green; text-emphasis-style: "*"; }</pre> -<h3 id="HTML">HTML</h3> +<h4 id="HTML">HTML</h4> <pre class="brush: html"><p>Here's an example:</p> -<h3>This has emphasis marks!</h3> +<em>This has emphasis marks!</em> </pre> -<h3 id="Result" name="Result">結果</h3> +<h4 id="Result">結果</h4> -<p>{{EmbedLiveSample("Examples", 450, 100)}}</p> +<p>{{EmbedLiveSample("Emphasis_with_a_color_and_custom_character", 450, 100)}}</p> -<h2 id="Specifications" name="Specifications">仕様書</h2> +<h2 id="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('CSS3 Text Decoration', '#text-emphasis-color-property', 'text-emphasis')}}</td> - <td>{{Spec2('CSS3 Text Decoration')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> +{{Specifications}} -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> +<h2 id="Browser_compatibility">ブラウザーの互換性</h2> -<p>{{Compat("css.properties.text-emphasis-color")}}</p> +<p>{{Compat}}</p> -<h2 id="See_also" name="See_also">関連情報</h2> +<h2 id="See_also">関連情報</h2> <ul> <li>{{cssxref("<color>")}} データ型</li> diff --git a/files/ja/web/css/text-emphasis/index.html b/files/ja/web/css/text-emphasis/index.html index 8d838fe112..6d0ae6bf2c 100644 --- a/files/ja/web/css/text-emphasis/index.html +++ b/files/ja/web/css/text-emphasis/index.html @@ -14,21 +14,28 @@ translation_of: Web/CSS/text-emphasis --- <div>{{CSSRef}}</div> -<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>text-emphasis</code></strong> プロパティは、 (空白や制御文字を除く) テキストに圏点を適用します。これは {{cssxref("text-emphasis-style")}} と {{cssxref("text-emphasis-color")}} の<a href="/ja/docs/Web/CSS/Shorthand_properties">一括指定</a>です。</p> +<p><strong><code>text-emphasis</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、 (空白や制御文字を除く) テキストに圏点を適用します。これは {{cssxref("text-emphasis-style")}} と {{cssxref("text-emphasis-color")}} の<a href="/ja/docs/Web/CSS/Shorthand_properties">一括指定</a>です。</p> <div>{{EmbedInteractiveExample("pages/css/text-emphasis.html")}}</div> -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> - <p><code>text-emphasis</code> プロパティは、 {{cssxref("text-decoration")}} とは大きく異なります。 <code>text-decoration</code> プロパティは継承されず、指定される装飾は要素全体にわたって適用されます。しかし、 <code>text-emphasis</code> は継承されます。これは、子孫に対して圏点を変更できることを意味します。</p> -<p>圏点の大きさは、ルビと同様にフォントの大きさの約50%であり、 <code>text-emphasis</code> は現在の行間隔が圏点を表示するのに十分でない場合、行の高さに影響を与えることがあります。</p> +<p>圏点の大きさは、ルビと同様にフォントの大きさの約 50% であり、 <code>text-emphasis</code> は現在の行間隔が圏点を表示するのに十分でない場合、行の高さに影響を与えることがあります。</p> <div class="note"> -<p><code>text-emphasis</code> は、 {{cssxref("text-emphasis-position")}} の値をリセットしません。これは、圏点のスタイルと色がテキストで異なる場合に、圏点の位置を要求することがほとんど見込まれないためです。稀にこれを必要とする場合は、プロパティ {{cssxref("text-emphasis-position")}} を使用してください。</p> +<p><code>text-emphasis</code> は、 {{cssxref("text-emphasis-position")}} の値をリセットしません。これは、圏点のスタイルと色がテキストで異なる場合に、圏点の位置を要求することがほとんど見込まれないためです。これを必要とするような珍しい場合は、プロパティ {{cssxref("text-emphasis-position")}} を使用してください。</p> </div> -<h2 id="Syntax" name="Syntax">構文</h2> +<h2 id="Constituent_properties">構成要素のプロパティ</h2> + +<p>このプロパティは以下のプロパティの一括指定です。</p> + +<ul> + <li><a href="/ja/docs/Web/CSS/text-emphasis-color"><code>text-emphasis-color</code></a></li> + <li><a href="/ja/docs/Web/CSS/text-emphasis-style"><code>text-emphasis-style</code></a></li> +</ul> + +<h2 id="Syntax">構文</h2> <pre class="brush:css no-line-numbers">/* 初期値 */ text-emphasis: none; /* 圏点なし */ @@ -38,7 +45,7 @@ text-emphasis: 'x'; text-emphasis: '点'; text-emphasis: '\25B2'; text-emphasis: '*' #555; -text-emphasis: 'foo'; /* 使用するべきではない。計算されるか 'f' のみが表示される */ +text-emphasis: 'foo'; /* 使用するべきではない。 'f' のみとして計算や表示が行われる */ /* キーワード値 */ text-emphasis: filled; @@ -52,18 +59,19 @@ text-emphasis: filled sesame #555; /* グローバル値 */ text-emphasis: inherit; text-emphasis: initial; +text-emphasis: revert; text-emphasis: unset; </pre> -<h3 id="Values" name="Values">値</h3> +<h3 id="Values">値</h3> <dl> <dt><code>none</code></dt> <dd>圏点なし。</dd> <dt><code>filled</code></dt> - <dd>図形は単色で塗りつぶされます。 <code>filled</code> も <code>open</code> も指定されない場合は、これが既定値です。</dd> + <dd>図形が単色で塗りつぶされます。 <code>filled</code> も <code>open</code> も指定されない場合は、これが既定値です。</dd> <dt><code>open</code></dt> - <dd>図形は中抜きになります。</dd> + <dd>図形が中抜きになります。</dd> <dt><code>dot</code></dt> <dd>記号として小さな円を表示します。 filled dot は <code>'•'</code> (<code>U+2022</code>)、 open dot は <code>'◦'</code> (<code>U+25E6</code>) です。</dd> <dt><code>circle</code></dt> @@ -75,18 +83,22 @@ text-emphasis: unset; <dt><code>sesame</code></dt> <dd>記号としてゴマを表示します。 filled sesame は <code>'﹅'</code> (<code>U+FE45</code>)、 open sesame は<code>'﹆'</code> (<code>U+FE46</code>) です。これは、他の図形が与えられていない場合、縦書きモードで既定の形状です。</dd> <dt><code><string></code></dt> - <dd>記号として文字列を表示します。 <code><string></code> には1<em>文字</em>を超える文字列を指定しないでください。ユーザーエージェントは、1つより多い書記素クラスターから構成される文字列を短縮したり無視したりする可能性があります。</dd> + <dd>記号として文字列を表示します。 <code><string></code> には 1 <em>文字</em>を超える文字列を指定しないでください。ユーザーエージェントは、 1 つより多い書記素クラスターから構成される文字列を短縮したり無視したりする可能性があります。</dd> <dt><code><color></code></dt> - <dd>記号の色を定義します。 color を指定しない場合、既定では <code>currentColor</code> です。</dd> + <dd>記号の色を定義します。 color を指定しない場合、既定では <code>currentcolor</code> です。</dd> </dl> -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> +<h2 id="Formal_definition">公式定義</h2> + +<p>{{CSSInfo}}</p> + +<h2 id="Formal_syntax">形式文法</h2> {{csssyntax}} -<h2 id="Examples" name="Examples">例</h2> +<h2 id="Examples">例</h2> -<h3 id="A_heading_with_emphasis_shape_and_color" name="A_heading_with_emphasis_shape_and_color">強調して色を付けた見出し</h3> +<h3 id="A_heading_with_emphasis_shape_and_color">強調して色を付けた見出し</h3> <p>この例は、見出しの各文字に三角形の圏点を付けて描画します。</p> @@ -100,36 +112,19 @@ text-emphasis: unset; <pre class="brush: html"><h2>これは重要です！</h2></pre> -<h4 id="Result" name="Result">結果</h4> +<h4 id="Result">結果</h4> <p>{{EmbedLiveSample("A_heading_with_emphasis_shape_and_color", 500, 70)}}</p> -<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('CSS3 Text Decoration', '#text-emphasis-property', 'text-emphasis')}}</td> - <td>{{Spec2('CSS3 Text Decoration')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> +<h2 id="Specifications">仕様書</h2> -<p>{{cssinfo}}</p> +{{Specifications}} -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> +<h2 id="Browser_compatibility">ブラウザーの互換性</h2> -<p>{{Compat("css.properties.text-emphasis")}}</p> +<p>{{Compat}}</p> -<h2 id="See_also" name="See_also">関連情報</h2> +<h2 id="See_also">関連情報</h2> <ul> <li>個別指定プロパティ: {{cssxref('text-emphasis-style')}}, {{cssxref('text-emphasis-color')}}</li> diff --git a/files/ja/web/css/tools/index.html b/files/ja/web/css/tools/index.html deleted file mode 100644 index fb51e9d15d..0000000000 --- a/files/ja/web/css/tools/index.html +++ /dev/null @@ -1,30 +0,0 @@ ---- -title: ツール -slug: Web/CSS/Tools -tags: - - CSS - - Guide - - NeedsUpdate - - ガイド -translation_of: Web/CSS/Tools ---- -<div></div> - -<p>CSS は強力な機能を多数提供していますが、その中には使いこなすのが面倒だったり、引数が多かったりするので、作業をしながら視覚化できると便利です。このページでは、これらの機能を使ってコンテンツのスタイルを整えるための CSS を構築するのに役立つ便利なツールへのリンクをいくつか紹介しています。</p> - -<p>{{LandingPageListSubpages}}</p> - -<h2 id="Other_tools" name="Other_tools">その他のツール</h2> - -<ul> - <li>CSS アニメーション - <a href="http://jeremyckahn.github.io/stylie/">Stylie</a></li> - <li>端末のディスプレイ情報を調べる ({{Glossary("responsive web design")}} で役立ちます) - <a href="http://mydevice.io">mydevice.io</a></li> - <li>CSS メニュー - <a href="http://cssmenumaker.com/">cssmenumaker.com</a></li> - <li>強力でモダンな CSS リンターで、一貫性のある規約を施行し、スタイルシートでのエラーを回避するのに役立ちます - <a href="https://stylelint.io/">stylelint</a></li> -</ul> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/Web/CSS">CSS</a></li> -</ul> |
/linear-gradient.png?h=dependabot/github_actions/actions/github-script-6&id=fe6f6abf2b7c497bf1f97f73a82dde7cf48eb79f){kind=link}
/radial_gradient.png?h=dependabot/github_actions/actions/github-script-6&id=fe6f6abf2b7c497bf1f97f73a82dde7cf48eb79f){kind=link}