From 869dd2069c695ee7040cd3261713212155819f42 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Mon, 14 Dec 2020 12:18:12 -0500 Subject: final dump 2020-12-14 --- files/ja/web/css/_colon_-moz-drag-over/index.html | 33 ++++++++++++--- files/ja/web/css/_colon_focus-within/index.html | 25 +++++------ files/ja/web/css/_colon_lang/index.html | 43 +++++++++---------- files/ja/web/css/contain-intrinsic-size/index.html | 49 ++++++++++++++++++++++ files/ja/web/css/content-visibility/index.html | 10 +---- .../box_alignment_in_css_grid_layout/index.html | 34 +++++++-------- 6 files changed, 129 insertions(+), 65 deletions(-) create mode 100644 files/ja/web/css/contain-intrinsic-size/index.html (limited to 'files/ja/web/css') diff --git a/files/ja/web/css/_colon_-moz-drag-over/index.html b/files/ja/web/css/_colon_-moz-drag-over/index.html index f52d2475d1..7415097af4 100644 --- a/files/ja/web/css/_colon_-moz-drag-over/index.html +++ b/files/ja/web/css/_colon_-moz-drag-over/index.html @@ -3,10 +3,14 @@ title: ':-moz-drag-over' slug: 'Web/CSS/:-moz-drag-over' tags: - CSS - - Mozilla 拡張 + - 'CSS:Mozilla Extensions' + - Firefox + - Mozilla + - NeedsCompatTable - Non-standard + - Pseudo-class - Reference - - 疑似クラス + - Selector translation_of: 'Web/CSS/:-moz-drag-over' ---
{{CSSRef}}{{Non-standard_header}}
@@ -15,14 +19,14 @@ translation_of: 'Web/CSS/:-moz-drag-over'

構文

-
:-moz-drag-over
+
:-moz-drag-over
 

 
-
例

+
例

 
 
HTML

 
-
<table border="1">
+
<table border="1">
   <tr>
     <td width="100px" height="100px">Drag Over</td>
   </tr>
@@ -31,7 +35,7 @@ translation_of: 'Web/CSS/:-moz-drag-over'
 
 
CSS

 
-
td:-moz-drag-over {
+
td:-moz-drag-over {
   color: red;
 }
 

@@ -39,3 +43,20 @@ translation_of: 'Web/CSS/:-moz-drag-over'
 
結果

 
 
{{EmbedLiveSample("Example")}}

+
+
仕様書

+
+
いずれの標準にも含まれていません。

+
+
ブラウザーの互換性

+
+
+
+
{{Compat("css.selectors:-moz-drag-over")}}

+
+
関連情報

+
+
diff --git a/files/ja/web/css/_colon_focus-within/index.html b/files/ja/web/css/_colon_focus-within/index.html
index c5816dd2ca..1bc44e63ed 100644
--- a/files/ja/web/css/_colon_focus-within/index.html
+++ b/files/ja/web/css/_colon_focus-within/index.html
@@ -2,21 +2,21 @@
 title: ':focus-within'
 slug: 'Web/CSS/:focus-within'
 tags:
+  - ':focus'
+  - ':focus-within'
   - CSS
   - Layout
+  - Pseudo-class
   - Reference
+  - Selector
   - Web
-  - ウェブ
-  - セレクター
-  - レイアウト
-  - 疑似クラス
 translation_of: 'Web/CSS/:focus-within'
 ---
 
{{CSSRef}}

 
-
CSS の :focus-within 疑似クラスは、フォーカスを持っているか、フォーカスを持った要素を含む要素を表します。言い換えれば、それ自身が {{CSSxRef(":focus")}} 疑似クラスに該当するか、子孫に :focus に該当する要素がある要素を表します。 (これはシャドウツリーにおける子孫も含みます。)

+
CSS の :focus-within 擬似クラスは、フォーカスを持っているか、フォーカスを持った要素を含む要素を表します。言い換えれば、それ自身が {{CSSxRef(":focus")}} 擬似クラスに該当するか、子孫に :focus に該当する要素がある要素を表します。 (これはシャドウツリーにおける子孫も含みます。)

 
-
/* 子孫要素の一つにフォーカスがある <div> を選択 */
+
/* 子孫要素の一つにフォーカスがある <div> を選択 */
 div:focus-within {
   background: cyan;
 }

@@ -25,15 +25,15 @@ div:focus-within {
 
 
構文

 
-
{{CSSSyntax}}

+
{{CSSSyntax}}

 
-
例

+
例

 
 
この例では、何れかの入力欄にフォーカスが当たった時、特殊な色のスタイルにします。

 
 
HTML

 
-
<p>このフォームに入力してみてください。</p>
+
<p>このフォームに入力してみてください。</p>
 
 <form>
   <label for="given_name">名前:</label>
@@ -45,7 +45,7 @@ div:focus-within {
 
 
CSS

 
-
form {
+
form {
   border: 1px solid;
   color: gray;
   padding: 4px;
@@ -63,7 +63,7 @@ input {
 
 
結果

 
-
{{EmbedLiveSample("Example", 500, 150)}}

+
{{EmbedLiveSample("Examples", 500, 150)}}

 
 
仕様書

 
@@ -84,7 +84,7 @@ input {
  
 
 
-
ブラウザーの対応

+
ブラウザーの互換性

 
 
 
@@ -95,4 +95,5 @@ input {
 
diff --git a/files/ja/web/css/_colon_lang/index.html b/files/ja/web/css/_colon_lang/index.html
index 85c6321ad1..ea0bb496a5 100644
--- a/files/ja/web/css/_colon_lang/index.html
+++ b/files/ja/web/css/_colon_lang/index.html
@@ -3,60 +3,60 @@ title: ':lang'
 slug: 'Web/CSS/:lang'
 tags:
   - CSS
-  - ウェブ
-  - セレクター
-  - リファレンス
-  - レイアウト
-  - 疑似クラス
+  - Layout
+  - Pseudo-class
+  - Reference
+  - Selector
+  - Web
 translation_of: 'Web/CSS/:lang'
 ---
 
{{CSSRef}}

 
-
CSS の :lang() 疑似クラス は、要素を定義された言語に基づいて選択します。

+
:lang() はCSS の擬似クラスで、指定された言語に基づいて要素に一致させます。

 
-
/* 英語 (en) の <p> をすべて選択 */
+
/* <p> のうち English (en) のものをすべて選択 */
 p:lang(en) {
   quotes: '\201C' '\201D' '\2018' '\2019';
 }

 
 

-
メモ: HTML では、言語は {{htmlattrxref("lang")}} 属性と {{HTMLElement("meta")}} 要素、それに、可能であればプロトコルから得られる情報（HTTP ヘッダーなど）の組み合わせで決められます。他の文書型では、文書の言語を決定する他の方法があるかもしれません。

+
メモ: HTML では、言語は {{htmlattrxref("lang")}} 属性と {{HTMLElement("meta")}} 要素、それに、可能であればプロトコルから得られる情報 (HTTP ヘッダーなど) の組み合わせで決められます。他の文書型では、文書の言語を決定する他の方法があるかもしれません。

 

 
 
構文

 
 
形式文法

 
-
{{csssyntax}}

+
{{csssyntax}}

 
 
引数

 
 

  
<language-code>

- 
対象としたい言語を表す {{cssxref("<string>")}} です。利用可能な値は HTML の仕様書で定義されています。

+ 
{{cssxref("<string>")}} で、ターゲットにしたい言語を表します。受付可能な値は HTML 仕様書で定義されています。

 

 
 
例

 
-
この例では、 子結合子 を使用して引用要素 ({{htmlElement("q")}}) の親を選択するために :lang() 疑似クラスを使用しています。なお、この例はこの目的のための唯一の方法でも、文書型における最適な方法を示しているわけでもありません。また、 {{glossary("Unicode")}} の値は特殊な引用符を指定するために使用していることに注意してください。

+
この例では、 :lang() 疑似クラスを使用して引用要素 ({{htmlElement("q")}}) の親を選択するために 子結合子 を使用しています。なお、この例はこの目的のための唯一の方法でも、文書型における最適な方法を示しているわけでもありません。また、 {{glossary("Unicode")}} の値は特殊な引用符を指定するために使用していることに注意してください。

 
 
HTML

 
-
<div lang="en"><q>This English quote has a <q>nested</q> quote inside.</q></div>
+
<div lang="en"><q>This English quote has a <q>nested</q> quote inside.</q></div>
 <div lang="fr"><q>This French quote has a <q>nested</q> quote inside.</q></div>
 <div lang="de"><q>This German quote has a <q>nested</q> quote inside.</q></div>
 

 
 
CSS

 
-
:lang(en) > q { quotes: '\201C' '\201D' '\2018' '\2019'; }
+
:lang(en) > q { quotes: '\201C' '\201D' '\2018' '\2019'; }
 :lang(fr) > q { quotes: '« ' ' »'; }
 :lang(de) > q { quotes: '»' '«' '\2039' '\203A'; }
 

 
 
結果

 
-
{{EmbedLiveSample('Example', 350)}}

+
{{EmbedLiveSample('Examples', 350)}}

 
 
仕様書

 
@@ -64,8 +64,8 @@ p:lang(en) {
  
   
    仕様書
-   策定状況
-   コメント
+   状態
+   備考
   
  
  
@@ -87,10 +87,10 @@ p:lang(en) {
  
 
 
-
ブラウザー実装状況

+
ブラウザーの互換性

 
 

-
+
 
 
{{Compat("css.selectors.lang")}}

 

@@ -98,7 +98,8 @@ p:lang(en) {
 
関連情報

 
 
    
- 
  • 言語に関する疑似クラス: {{cssxref(":lang")}}, {{cssxref(":dir")}}
    • 
- 
  • HTML の {{htmlattrxref("lang")}} attribute
    • 
- 
  • BCP 47 - 言語を識別するタグ
    • 
+ 
  • 原語に関する擬似クラス: {{cssxref(":lang")}}, {{cssxref(":dir")}}
    • 
+ 
  • HTML の {{htmlattrxref("lang")}} 属性
    • 
+ 
  • HTML の {{htmlattrxref("translate")}} 属性
    • 
+ 
  • BCP 47 - Tags for Identifying Languages
    • 
 

diff --git a/files/ja/web/css/contain-intrinsic-size/index.html b/files/ja/web/css/contain-intrinsic-size/index.html
new file mode 100644
index 0000000000..a62a3a121a
--- /dev/null
+++ b/files/ja/web/css/contain-intrinsic-size/index.html
@@ -0,0 +1,49 @@
+---
+title: contain-intrinsic-size
+slug: Web/CSS/contain-intrinsic-size
+translation_of: Web/CSS/contain-intrinsic-size
+---
+
{{CSSRef}}

+
+
contains-intrinsic-size CSSプロパティは、content-visibilityで指定された要素の自然なサイズを制御します。

+
+
Syntax

+
+
/* <length> values */
+contain-intrinsic-size: 1000px;
+contain-intrinsic-size: 10rem;
+
+/* <percentage> value */
+contain-intrinsic-size: 10%;
+

+
+
Specifications

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
SpecificationStatusComment
{{SpecName('CSS4 Sizing', '#propdef-contain-intrinsic-size')}}{{Spec2('CSS4 Sizing')}}Initial definition

+
+
Browser compatibility

+
+
+
+
{{Compat("css.properties.contain-intrinsic-size")}}

+
+
See Also

+
+
diff --git a/files/ja/web/css/content-visibility/index.html b/files/ja/web/css/content-visibility/index.html
index d480c67fed..ac51db4435 100644
--- a/files/ja/web/css/content-visibility/index.html
+++ b/files/ja/web/css/content-visibility/index.html
@@ -5,12 +5,10 @@ translation_of: Web/CSS/content-visibility
 ---
 
{{CSSRef}}

 
-
content-visibility CSSプロパティは、要素がそのコンテンツをレンダリングするかどうかを制御するとともに、強力な包含セットを強制することで、ユーザーエージェントが必要になるまで大量のレイアウトとレンダリング作業を省略できるようにします。基本的に、ユーザーエージェントは、レイアウトやペイントなどの要素のレンダリング作業を必要になるまでスキップできるため、最初のページの読み込みがはるかに高速になります。

+
content-visibility CSSプロパティは、要素がそのコンテンツをレンダリングするかどうかを制御するとともに、強力な包含セットを強制することで、ユーザーエージェントが必要になるまで大量のレイアウトとレンダリング作業を省略できるようにします。基本的に、ユーザーエージェントは、レイアウトやペイントなどの要素のレンダリング作業を必要になるまでスキップできるため、最初のページの読み込みがはるかに高速になります。

 
 
文法

 
-
-
 
/* Keyword values */
 content-visibility: visible;
 content-visibility: hidden;
@@ -21,22 +19,16 @@ content-visibility: initial;
 content-visibility: unset;
 

 
-
-
 
値

 
 

  
visible

  

  
無効。要素のコンテンツは通常どおりにレイアウトおよびレンダリングされます。

-
-
  

  
hidden

  

  
要素はその内容をスキップします。スキップされたコンテンツは、ページ内検索、タブオーダーナビゲーションなどのユーザーエージェント機能にアクセスできたり、選択またはフォーカス可能であってはなりません。これは、display: noneをコンテンツに与えるのと似ています。

-
-
  

  
auto

  

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 2ca01d4bc6..764104469a 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
@@ -62,7 +62,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout
 
.wrapper {
   display: grid;
   grid-template-columns: repeat(8, 1fr);
-  gap: 10px;
+  grid-gap: 10px;
   grid-auto-rows: 100px;
   grid-template-areas:
     "a a a a b b b b"
@@ -96,7 +96,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout
 
{{ EmbedLiveSample('alignment_1', '500', '450') }}

 
 
-
align-self: start を設定すると、それぞれの子 <div> の高さは <div> の中身によって決定されることを覚えておいてください。対照的に、align-items を完全に省略すると、それぞれの子 <div> の高さはグリッドエリアを満たすように広がります。

+
align-self: start を設定すると、それぞれの子 <div> の高さはコンテンツの <div>  によって決定されることを覚えておいてください。また、align-self を完全に省略すると、それぞれの子 <div> の高さはグリッドエリアを満たすように広がります。

 
 
{{cssxref("align-items")}} プロパティはすべての子グリッドアイテムに {{cssxref("align-self")}} プロパティを設定します。これは、グリッドアイテム上で align-self を使えばプロパティを個別に設定できるということです。

 
@@ -125,7 +125,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout
 
.wrapper {
   display: grid;
   grid-template-columns: repeat(8, 1fr);
-  gap: 10px;
+  grid-gap: 10px;
   grid-auto-rows: 100px;
   grid-template-areas:
     "a a a a b b b b"
@@ -161,11 +161,11 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout
 
{{ EmbedLiveSample('alignment_2', '500', '450') }}

 
 
-
固有のアスペクト比を持つアイテム

+
アイテムと固有のアスペクト比

 
 
デフォルトでは、{{cssxref("align-self")}} の振る舞いはアイテムを広げます。しかし、固有のアスペクト比を持つアイテムの振る舞いは start になります。固有のアスペクト比を持つアイテムにデフォルトで stretch を設定するとアイテムを歪めるからです。

 
-
この振る舞いは現在、仕様で明確になっていますが、ブラウザーへの実装はまだ途上です。それまでの間、{{cssxref("align-self")}} と {{cssxref("justify-self")}} を start に設定することによって、グリッドの直接の子である画像などのアイテムが、デフォルトで広がらないことを保証できます。これは正しい動作を模倣します。

+
この振る舞いは現在、仕様で明確になっていますが、ブラウザーはまだ正しく実装していません。その間、{{cssxref("align-self")}} と {{cssxref("justify-self")}} を start に設定することによって、画像などのアイテムがグリッドの直接の子のようにデフォルトで広がらないことを保証できます。これは正しい動作を模倣します。

 
 
インライン軸上のアイテムの位置揃え

 
@@ -210,7 +210,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout
 
.wrapper {
   display: grid;
   grid-template-columns: repeat(8, 1fr);
-  gap: 10px;
+  grid-gap: 10px;
   grid-auto-rows: 100px;
   grid-template-areas:
     "a a a a b b b b"
@@ -248,11 +248,11 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout
 
 
{{cssxref("align-self")}} と {{cssxref("align-items")}} と同様に、グリッドコンテナに {{cssxref("justify-items")}} を適用することで、すべてのアイテムに {{cssxref("justify-self")}} の値を設定できます。

 
-
{{cssxref("justify-self")}} と {{cssxref("justify-items")}} プロパティはフレックスボックスに実装されていません。これはフレックスボックスが一次元であること、軸にそって複数のアイテムがあるかもしれず単一のアイテムを両端揃えすることができないことによります。フレックスボックスのメイン軸・インライン軸に沿って配置するには、{{cssxref("justify-content")}} プロパティを使用します。

+
{{cssxref("justify-self")}} と {{cssxref("justify-items")}} プロパティはフレックスボックスに実装されていません。これはフレックスボックスが一次元であること、軸にそって複数のアイテムがあるかもしれず単一のアイテムを揃えることができないことによります。フレックスボックスのメイン軸・インライン軸に沿って配置するには、{{cssxref("justify-content")}} プロパティを使用します。

 
 
ショートハンドプロパティ

 
-
{{CSSxRef("place-items")}} プロパティは {{CSSxRef("align-items")}} と {{CSSxRef("justify-items")}} のショートハンドであり、{{CSSxRef("place-self")}} は {{CSSxRef("align-self")}} と {{CSSxRef("justify-self")}} のショートハンドです。

+
{{CSSxRef("place-items")}} プロパティは {{CSSxRef("align-items")}} と {{CSSxRef("justify-items")}} のショートハンドであり、{{CSSxRef("place-item")}} は {{CSSxRef("align-self")}} と {{CSSxRef("justify-self")}} のショートハンドです。

 
 
エリア内のアイテムを中央に揃える

 
@@ -281,7 +281,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout
 
.wrapper {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
-  gap: 10px;
+  grid-gap: 10px;
   grid-auto-rows: 200px;
   grid-template-areas:
     ". a a ."
@@ -304,7 +304,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout
 
 
ブロック軸上のグリッドトラックの配置

 
-
グリッドトラックが使うエリアがグリッドコンテナより小さければ、コンテナ内にグリッドトラック自体を配置できます。繰り返しますが、これはブロック軸とインライン軸上で行われます。{{cssxref("align-content")}} はブロック軸上のトラックを配置し、{{cssxref("justify-content")}} はインライン軸上の配置を行います。{{cssxref("place-content")}} プロパティは {{cssxref("align-content")}} と {{cssxref("justify-content")}} のショートハンドです。{{cssxref("align-content")}} と {{cssxref("justify-content")}} と {{cssxref("place-content")}} の値は次の通りです。

+
グリッドトラックが使うエリアがグリッドコンテナより小さければ、コンテナ内にグリッドトラック自体を配置できます。繰り返しますが、これはブロック軸とインライン軸上で行われます。{{cssxref("align-content")}} はブロック軸方向でトラックを配置し、{{cssxref("justify-content")}} はインライン軸方向の配置を行います。{{cssxref("place-content")}} プロパティは {{cssxref("align-content")}} と {{cssxref("justify-content")}} のショートハンドです。{{cssxref("align-content")}} と {{cssxref("justify-content")}} と {{cssxref("place-content")}} の値は次の通りです。

 
 
    
  
  • normal
    • 
@@ -320,9 +320,9 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout
  
  • last baseline
    • 
 

 
-
以下の例では 500 ピクセル × 500 ピクセルのグリッドコンテナがあります。3 つの行トラックと列トラックがあり、それぞれ、幅 100 ピクセル、溝 10 ピクセルです。これはグリッドコンテナ内でブロックとインラインどちらの方向にも空間があることを意味します。

+
以下の例では 500 ピクセル × 500 ピクセルのグリッドコンテナがあります。3 つの行トラックと列トラックがあり、それぞれ、幅 100 ピクセル、溝 10 ピクセルです。これはグリッドコンテナ内でブロックとインラインどちらの方向にも隙間があることを意味します。

 
-
align-content プロパティはグリッド全体のグリッドコンテナに適用されます。グリッドレイアウトでのデフォルトの振る舞いは start で、これにより、グリッドトラックはグリッドの左上隅にあり、グリッドラインの始まりに対して整列しています。

+
align-content プロパティはグリッドコンテナに、すなわちすべてのグリッドに適用されます。グリッドレイアウトでのデフォルトの振る舞いは start で、これにより、グリッドトラックはグリッドの左上隅にあり、グリッドが始まるラインに合わせて整列しています。