From da778d8d0a9e9622c6a7fba6d1f9fb7d3ebf4a04 Mon Sep 17 00:00:00 2001 From: SphinxKnight Date: Thu, 19 Aug 2021 15:37:01 +0200 Subject: Removes wiki.d.m.o in absolute links (#1903) --- files/ja/learn/forms/form_validation/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'files/ja/learn') diff --git a/files/ja/learn/forms/form_validation/index.html b/files/ja/learn/forms/form_validation/index.html index 156709f76a..c167a03576 100644 --- a/files/ja/learn/forms/form_validation/index.html +++ b/files/ja/learn/forms/form_validation/index.html @@ -428,7 +428,7 @@ input:focus:invalid {
  •     メッセージはブラウザーのロケールに依存しており、ある言語のページでエラーメッセージが別の言語で表示されることがあり、これは下記の Firefox スクリーンショットで見ることができます。
    • -

    Example of an error message with Firefox in French on an English page

    +

    Example of an error message with Firefox in French on an English page

    これらのメッセージの外見やテキストを変更するには、制約検証 API の最も一般的なユースケースです。この使用法を例で詳しく見てみましょう。

    -- cgit v1.2.3-54-g00ecf From 9b0af1a8eeb3a7aa1b3683090bd972baad89a607 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Fri, 27 Aug 2021 20:33:50 +0900 Subject: Web/CSS/Cascade を更新 (#2140) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Markdown化 - 2021/08/13 時点の英語版に同期 --- .../cascade_and_inheritance/index.html | 2 +- files/ja/web/css/all/index.html | 6 +- files/ja/web/css/cascade/index.html | 211 --------------------- files/ja/web/css/cascade/index.md | 157 +++++++++++++++ 4 files changed, 161 insertions(+), 215 deletions(-) delete mode 100644 files/ja/web/css/cascade/index.html create mode 100644 files/ja/web/css/cascade/index.md (limited to 'files/ja/learn') diff --git a/files/ja/learn/css/building_blocks/cascade_and_inheritance/index.html b/files/ja/learn/css/building_blocks/cascade_and_inheritance/index.html index 39fb4bce37..324308ee1f 100644 --- a/files/ja/learn/css/building_blocks/cascade_and_inheritance/index.html +++ b/files/ja/learn/css/building_blocks/cascade_and_inheritance/index.html @@ -112,7 +112,7 @@ translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance
    -

    注: それらの動作の詳細については CSS カスケード入門の CSS 宣言のオリジンを参照してください。

    +

    注: それらの動作の詳細については CSS カスケード入門の CSS 宣言のオリジンを参照してください。

    リンクのリストを見て、ユニバーサル値 (universal values) がどのように機能するかを調べることができます。以下のライブサンプルでは、CSS に変更を加えて何が起こるかを確認できます。HTML と CSS を理解するには、実際にコードを試すのが最善の方法です。

    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;
    {{cssxref("revert")}}
    宣言が所属するスタイルシートの出所に応じて動作を指定します。
    -
    ユーザーエージェントのスタイルシート
    +
    ユーザーエージェントのスタイルシート
    unset と同等です。
    -
    ユーザーのスタイル
    +
    ユーザーのスタイル
    カスケードをユーザーエージェントレベルまでロールバックし、指定値が、その要素に対して作者レベルまたはユーザーレベルの規則が指定されていないかのように計算されるようにします。
    -
    作者のスタイル
    +
    作成者のスタイル
    カスケードをユーザーのレベルまでロールバックし、作者レベルの規則が要素に指定されていない場合は、指定値が計算されます。 revert の用途では、作者のオリジンはオーバーライドおよびアニメーションのオリジンが含まれます。
    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 ---- -
    {{CSSRef}}
    - -

    カスケードは、異なるソースから来るプロパティ値を組み合わせる方法を定義するアルゴリズムです。これはカスケーディングスタイルシートという名前で強調されているように、 CSS の中心を占めるものです。この記事では、カスケードとは何か、 {{Glossary("CSS")}} 宣言をカスケードする順番、そしてウェブ開発者にどのように影響するかを説明します。

    - -

    どの CSS エンティティがカスケードに関係するか

    - -

    CSS 宣言のみが、つまりプロパティ/値の組だけが、カスケードに加わります。つまり、宣言以外のエンティティを含む @-規則、例えば記述子を含む {{ cssxref("@font-face")}} などは、カスケードには加わりません。これらの場合、カスケードには全体としての @-規則のみがカスケードに加わります。ここで、 @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. -
    2. 次に、これらのルールをその重要度、つまり、 !important が後に続くかどうか、およびその起源に従って並べ替えます。カスケードは上流から下流に向けて行われます。つまり、ユーザー定義のスタイルシートによる !important の値は、ユーザーエージェントスタイルシートによる通常の値よりも優先されます。 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
      起源重要性
      1ユーザーエージェントnormal
      2ユーザーnormal
      3作成者normal
      4アニメーション
      5ユーザーエージェント!important
      6作成者!important
      7ユーザー!important
      8トランジション
      -
      3. -
    3. 同等の場合は、どれを選択するかに値の詳細度が考慮されます。
      4. -
    - -

    スタイルの初期化

    - -

    コンテンツのスタイルの変更が完了した後で、それ自体を既知の状態に戻す必要がある状況に陥ることがあります。アニメーションやテーマの変更などの場合に起こるかもしれません。 CSS プロパティ {{cssxref("all")}} を使用すると、 CSS 内の (ほぼ) すべてのものを既知の状態に素早く戻すことができます。

    - -

    allでは、すべてのプロパティを初期 (既定) 状態、前のレベルのカスケードから継承した状態、特定の起源 (ユーザーエージェントスタイルシート、作成者スタイルシート、またはユーザースタイルシート) のいずれかに直ちに復元することを選択できます。または、プロパティの値を完全にクリアすることもできます。

    - -

    CSS アニメーションとカスケード

    - -

    CSS アニメーションは、 {{cssxref("@keyframes")}} @-規則を使用して、状態間のアニメーションを定義します。キーフレームはカスケードされません。つまり、 CSS は常に単一の {{cssxref("@keyframes")}} から値を取得し、複数の値を混合することはありません。

    - -

    複数のキーフレームが適用された場合は、最も重要な文書で定義されている最新のものを選択しますが、すべてを組み合わせることはありません。

    - -

    例

    - -

    さまざまなオリジンにまたがる CSS の複数のソースを含む例を見てみましょう。ここには、ユーザーエージェントスタイルシート、2つの作成者スタイルシート、ユーザースタイルシート、および HTML 内のインラインスタイルがあります。

    - -

    ユーザーエージェント CSS:

    - -
    li { margin-left: 10px }
    - -

    作成者 CSS 1:

    - -
    li { margin-left: 0 } /* 初期化のため */
    - -

    作成者 CSS 2:

    - -
    @media screen {
-  li { margin-left: 3px }
-}
-
-@media print {
-  li { margin-left: 1px }
-}
-
    - -

    ユーザー CSS:

    - -
    .specific { margin-left: 1em }
    - -

    HTML:

    - -
    <ul>
-  <li class="specific">1<sup>st</sup></li>
-  <li>2<sup>nd</sup></li>
-</ul>
-
    - -

    この場合、 li および .specific 規則内の宣言を適用する必要があります。 !importantとして宣言されている宣言はないため、優先順位は、ユーザースタイルシートまたはユーザーエージェントスタイルシートの前の作成者スタイルシートです。

    - -

    ここでは3つの宣言が競合しています。

    - -
    margin-left: 0
    - -
    margin-left: 3px
    - -
    margin-left: 1px
    - -

    最後のものは (画面上で) 無視され、最初の2つは同じセレクターを持つため、同じ詳細度があります。したがって、次に選択されるのは同じ詳細度のうちの最後のものです。

    - -
    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")}}初回定義
    - -

    関連情報

    - - 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 + +``` + +この場合、 `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}} -- cgit v1.2.3-54-g00ecf From a7dacefb9fca1c204dac4a66f63f0baa954d0c02 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 29 Aug 2021 12:26:38 +0900 Subject: Web/CSS/CSS_Background_and_Borders を移動 (#2177) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 中身を Web/CSS/CSS_Backgrounds_and_Borders/ へ移動 - Markdown化し、2021/08/22 時点の英語版に同期 --- files/ja/learn/css/howto/create_fancy_boxes/index.html | 4 ++-- files/ja/web/css/background-color/index.html | 2 +- .../border-image_generator/index.md | 11 +++++++++++ .../border-radius_generator/index.md | 12 ++++++++++++ files/ja/web/css/css_backgrounds_and_borders/index.html | 4 ++-- 5 files changed, 28 insertions(+), 5 deletions(-) create mode 100644 files/ja/web/css/css_backgrounds_and_borders/border-image_generator/index.md create mode 100644 files/ja/web/css/css_backgrounds_and_borders/border-radius_generator/index.md (limited to 'files/ja/learn') diff --git a/files/ja/learn/css/howto/create_fancy_boxes/index.html b/files/ja/learn/css/howto/create_fancy_boxes/index.html index 74d0b3b379..1df6bf3bdc 100644 --- a/files/ja/learn/css/howto/create_fancy_boxes/index.html +++ b/files/ja/learn/css/howto/create_fancy_boxes/index.html @@ -71,12 +71,12 @@ translation_of: Learn/CSS/Howto/create_fancy_boxes

    Backgrounds

    -

    装飾的なボックスについて話すとき、それを扱うためのコアとなるプロパティは background-* プロパティです。 背景をいじり始めると、CSS ボックスはあなたが満たすための空白のキャンバスになります。

    +

    装飾的なボックスについて話すとき、それを扱うためのコアとなるプロパティは background-* プロパティです。 背景をいじり始めると、CSS ボックスはあなたが満たすための空白のキャンバスになります。

    いくつかの実用的な例に進む前に、背景について知っておくべきことが2つあるので、少し後退しましょう。

      -
    • 一つのボックスに複数の背景を設定することが可能です。 それらは層のように互いの上に積み重ねられています。
      • +
    • 一つのボックスに複数の背景を設定することが可能です。 それらは層のように互いの上に積み重ねられています。
    • 背景は単色や画像のどちらでもかまいません。 単色は常に表面全体を塗りつぶしますが、画像は拡大縮小して配置することができます。
    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;

    関連情報

      -
    • 複数の背景
      • +
    • 複数の背景
    • {{cssxref("<color>")}} データ型
    • その他の色に関するプロパティ: {{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")}}
    • CSS を使用した HTML の要素への色の適用
      • 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_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/index.html b/files/ja/web/css/css_backgrounds_and_borders/index.html index a7e5a5bb6b..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,9 +74,9 @@ translation_of: Web/CSS/CSS_Backgrounds_and_Borders
      背景画像の拡大縮小や繰り返しを変更する方法を説明します。
      CSS を使った HTML の要素への色の適用
      CSS の色が境界を含む HTML でどのように使われるかを概観します。
      -
      境界画像作成ツール
      +
      境界画像作成ツール
      境界画像 ({{cssxref("border-image")}} プロパティ) を見ながら作ることができる対話型のツールです。
      -
      境界角丸作成ツール
      +
      境界角丸作成ツール
      角の丸み ({{cssxref("border-radius")}} プロパティ) を見ながら作ることができる対話型のツールです。
      ボックスの影作成ツール
      要素の背後の影 ({{cssxref("box-shadow")}} プロパティ) を見ながら作ることができる対話型のツールです。
      -- cgit v1.2.3-54-g00ecf