diff options
Diffstat (limited to 'files/ja/web/css')
42 files changed, 84 insertions, 1953 deletions
diff --git a/files/ja/web/css/-moz-box-ordinal-group/index.html b/files/ja/web/css/-moz-box-ordinal-group/index.html deleted file mode 100644 index 147bdbd9b4..0000000000 --- a/files/ja/web/css/-moz-box-ordinal-group/index.html +++ /dev/null @@ -1,66 +0,0 @@ ---- -title: '-moz-box-ordinal-group' -slug: Web/CSS/-moz-box-ordinal-group -tags: - - CSS - - Mozilla 拡張 - - Non-standard - - Reference - - フレックスボックス -translation_of: Web/CSS/box-ordinal-group -translation_of_original: Web/CSS/-moz-box-ordinal-group ---- -<p>{{CSSRef}}{{warning("これは CSS フレックスボックスレイアウトモジュールの初期の草稿にあったプロパティであり、その後の草稿で置き換えられました。")}}</p> - -<p>このプロパティの代わりに何を使用するべきかについての詳細情報は <a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes">フレックスボックス</a>をご覧ください。</p> - -<h2 id="Summary" name="Summary">概要</h2> - -<p>要素が属する序数グループを示します。低い序数グループを持つ要素は、より高い序数を有するものの前に表示されます。</p> - -<h2 id="Values" name="Values">値</h2> - -<p>値はゼロより大きい整数でなければなりません。このプロパティの既定値は1です。</p> - -<h2 id="Examples" name="Examples">例</h2> - -<pre class="brush: html"><style type="text/css"> - #Flexbox { - display: -ms-box; - display: -moz-box; - display: -webkit-box; - } - - #text1 { - background: red; - -ms-box-ordinal-group: 4; - -moz-box-ordinal-group: 4; - -webkit-box-ordinal-group: 4; - } - - #text2 { - background: green; - -ms-box-ordinal-group: 3; - -moz-box-ordinal-group: 3; - -webkit-box-ordinal-group: 3; - } - - #text3 { - background: blue; - -ms-box-ordinal-group: 2; - -moz-box-ordinal-group: 2; - -webkit-box-ordinal-group: 2; - } - - #text4 { - background: orange; - } -</style> - -<div id="Flexbox"> - <div id="text1">text 1</div> - <div id="text2">text 2</div> - <div id="text3">text 3</div> - <div id="text4">text 4</div> -</div> -</pre> diff --git a/files/ja/web/css/-ms-high-contrast/index.html b/files/ja/web/css/@media/-ms-high-contrast/index.html index f98c01bc68..e45b3279fa 100644 --- a/files/ja/web/css/-ms-high-contrast/index.html +++ b/files/ja/web/css/@media/-ms-high-contrast/index.html @@ -1,6 +1,6 @@ --- title: '-ms-high-contrast' -slug: Web/CSS/-ms-high-contrast +slug: Web/CSS/@media/-ms-high-contrast tags: - '@media' - CSS @@ -9,6 +9,7 @@ tags: - メディア特性 - 標準外 translation_of: Web/CSS/@media/-ms-high-contrast +original_slug: Web/CSS/-ms-high-contrast --- <div>{{CSSRef}}{{Non-standard_header}}</div> diff --git a/files/ja/web/css/aural/index.html b/files/ja/web/css/@media/aural/index.html index ac66215e3c..df3fc07e2c 100644 --- a/files/ja/web/css/aural/index.html +++ b/files/ja/web/css/@media/aural/index.html @@ -1,11 +1,12 @@ --- title: aural -slug: Web/CSS/aural +slug: Web/CSS/@media/aural tags: - CSS - リファレンス - 非推奨 translation_of: Web/CSS/@media/aural +original_slug: Web/CSS/aural --- <div>{{CSSRef}} {{deprecated_header}} {{obsolete_header("6.0")}}</div> diff --git a/files/ja/web/css/@media/index/index.html b/files/ja/web/css/@media/index/index.html deleted file mode 100644 index b8b8d56198..0000000000 --- a/files/ja/web/css/@media/index/index.html +++ /dev/null @@ -1,12 +0,0 @@ ---- -title: 索引 -slug: Web/CSS/@media/Index -tags: - - '@media' - - CSS - - 索引 -translation_of: Web/CSS/@media/Index ---- -<p>{{CSSRef}}</p> - -<p>{{Index("/ja/docs/Web/CSS/@media")}}</p> diff --git a/files/ja/web/css/@viewport/height/index.html b/files/ja/web/css/@viewport/height/index.html deleted file mode 100644 index 38f093896b..0000000000 --- a/files/ja/web/css/@viewport/height/index.html +++ /dev/null @@ -1,86 +0,0 @@ ---- -title: height -slug: Web/CSS/@viewport/height -tags: - - '@viewport' - - At-rule descriptor - - CSS - - CSS Descriptor - - Reference -translation_of: Web/CSS/@viewport -translation_of_original: Web/CSS/@viewport/height ---- -<div>{{CSSRef}}</div> - -<p><code><strong>height</strong></code> は CSS の記述子で、ビューポートの {{cssxref("@viewport/min-height", "min-height")}} と {{cssxref("@viewport/max-height", "max-height")}} の両記述子を指定する一括指定記述子です。ビューポートの寸法を1つ指定すると、高さの最小値と最大値の両方を指定された値に設定します。</p> - -<p>ビューポートのを2つ指定した場合は、1つ目の値は最小の高さを設定し、2つ目の値は最大の高さを設定します。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush: css notranslate">/* 1つの値 */ -height: auto; -height: 320px; -height: 15em; - -/* Two values */ -height: 320px 200px; -</pre> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt><code>auto</code></dt> - <dd>使用値は他の CSS 記述子の値から計算されます。</dd> - <dt><code><length></code></dt> - <dd>負の数ではない絶対的または相対的な長さです。</dd> - <dt><code><percentage></code></dt> - <dd>拡大率 1.0 の初期ビューポートの幅や高さに対する相対的なパーセント値で、それぞれ水平方向と垂直方向の長さを表します。負の数であってはいけません。</dd> -</dl> - -<h2 id="Formal_definition" name="Formal_definition">公式定義</h2> - -<p>{{cssinfo}}</p> - -<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2> - -<pre class="syntaxbox notranslate">{{csssyntax}}</pre> - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="Setting_minimum_and_maximum_height" name="Setting_minimum_and_maximum_height">高さの最小値と最大値の設定</h3> - -<pre class="brush: css notranslate">@viewport { - height: 500px; -}</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('CSS3 Device', '#descdef-viewport-height', '"height" descriptor')}}</td> - <td>{{Spec2('CSS3 Device')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> - -<p>{{Compat("css.at-rules.viewport.height")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{cssxref("@viewport")}}</li> -</ul> diff --git a/files/ja/web/css/@viewport/max-height/index.html b/files/ja/web/css/@viewport/max-height/index.html deleted file mode 100644 index 0e9f9079f0..0000000000 --- a/files/ja/web/css/@viewport/max-height/index.html +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: max-height -slug: Web/CSS/@viewport/max-height -tags: - - '@viewport' - - CSS - - CSS Descriptor - - Reference -translation_of: Web/CSS/@viewport -translation_of_original: Web/CSS/@viewport/max-height ---- -<div>{{CSSRef}}</div> - -<p>CSS の <code><strong>max-height</strong></code> 記述子は、{{cssxref("@viewport")}} @-規則で定義された文書のビューポートの最大の高さを指定します。</p> - -<p>最大の高さの制約を考慮して、最初の高さは初期ビューポートの高さにできるだけ近い値に設定されます。</p> - -<p>{{cssinfo}}</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush: css">/* Keyword value */ -max-height: auto; - -/* <length> values */ -max-height: 400px; -max-height: 50em; -max-height: 20cm; - -/* <percentage> value */ -max-height: 75%;</pre> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt><code>auto</code></dt> - <dd>使用する値は他の CSS 記述子の値から計算されます。</dd> - <dt><code><length></code></dt> - <dd>負ではない絶対値または相対値。</dd> - <dt><code><percentage></code></dt> - <dd>垂直方向の長さについて、初期ビューポートの高さである表示倍率1.0 に対するパーセンテージの値。値は負ではない必要があります。</dd> -</dl> - -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> - -<pre class="syntaxbox">{{csssyntax}}</pre> - -<h2 id="Example" name="Example">例</h2> - -<pre class="brush: css">@viewport { - max-height: 600px; -}</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('CSS3 Device', '#descdef-viewport-max-height', '"max-height" descriptor')}}</td> - <td>{{Spec2('CSS3 Device')}}</td> - <td>初期定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2> - - - -<p>{{Compat("css.at-rules.viewport.max-height")}}</p> diff --git a/files/ja/web/css/@viewport/max-zoom/index.html b/files/ja/web/css/@viewport/max-zoom/index.html deleted file mode 100644 index 483e5c214f..0000000000 --- a/files/ja/web/css/@viewport/max-zoom/index.html +++ /dev/null @@ -1,89 +0,0 @@ ---- -title: max-zoom -slug: Web/CSS/@viewport/max-zoom -tags: - - '@viewport' - - At-rule descriptor - - CSS - - CSS Descriptor - - Reference -translation_of: Web/CSS/@viewport -translation_of_original: Web/CSS/@viewport/max-zoom ---- -<div>{{CSSRef}}</div> - -<p><strong><code>min-zoom</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の記述子で、 {{cssxref("@viewport")}} <a href="/ja/docs/Web/CSS/At-rule">アット規則</a>で定義され、文書の最大表示倍率を設定します。ブラウザーは自動的にもユーザーのリクエストでも、これより拡大することができません。</p> - -<p><em>表示倍率</em> が <code>1.0</code> または <code>100%</code> が、拡大縮小なしに対応します。より大きい値は拡大、より小さい値は縮小です。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush:css notranslate">/* キーワード値 */ -max-zoom: auto; - -/* <number> 値 */ -max-zoom: 0.8; -max-zoom: 2.0; - -/* <percentage> 値 */ -max-zoom: 150%; -</pre> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt><code>auto</code></dt> - <dd>{{glossary("user agent", "ユーザーエージェント")}}が文書の表示倍率の上限を設定します。</dd> - <dt>{{cssxref("<number>")}}</dt> - <dd>非負の数値で、表示倍率の上限です。</dd> - <dt>{{cssxref("<percentage>")}}</dt> - <dd>非負のパーセント値で、表示倍率の上限です。</dd> -</dl> - -<h2 id="Formal_definition" name="Formal_definition">公式定義</h2> - -<p>{{cssinfo}}</p> - -<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2> - -<pre class="syntaxbox notranslate">{{csssyntax}}</pre> - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="Setting_max-zoom" name="Setting_max-zoom">max-zoom の設定</h3> - -<pre class="notranslate"><code>@viewport { - max-zoom: 1.5; -}</code> -</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('CSS3 Device', '#max-zoom-desc', '"max-zoom" descriptor')}}</td> - <td>{{Spec2('CSS3 Device')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> - -<p>{{Compat("css.at-rules.viewport.max-zoom")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{cssxref("@viewport")}}</li> -</ul> diff --git a/files/ja/web/css/@viewport/min-zoom/index.html b/files/ja/web/css/@viewport/min-zoom/index.html deleted file mode 100644 index 01b0ae54b2..0000000000 --- a/files/ja/web/css/@viewport/min-zoom/index.html +++ /dev/null @@ -1,71 +0,0 @@ ---- -title: min-zoom -slug: Web/CSS/@viewport/min-zoom -tags: - - '@viewport' - - CSS - - CSS 記述子 - - リファレンス -translation_of: Web/CSS/@viewport -translation_of_original: Web/CSS/@viewport/min-zoom ---- -<div>{{CSSRef}}</div> - -<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>min-zoom</code></strong> 記述子は、 {{cssxref("@viewport")}} <a href="/ja/docs/Web/CSS/At-rule">@-規則</a>で定義され、文書の最小表示倍率を設定します。ブラウザーは自動的にもユーザーのリクエストでも、これより縮小することができません。</p> - -<p><em>表示倍率</em> が <code>1.0</code> 又は <code>100%</code> が、拡大縮小なしに対応します。より大きい値は拡大、より小さい値は縮小です。</p> - -<p>{{cssinfo}}</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush:css">/* キーワード値 */ -min-zoom: auto; - -/* <number> 値 */ -min-zoom: 0.8; -min-zoom: 2.0; - -/* <percentage> 値 */ -min-zoom: 150%; -</pre> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt><code>auto</code></dt> - <dd>{{glossary("user agent", "ユーザーエージェント")}}が文書の表示倍率の下限を設定します。</dd> - <dt>{{cssxref("<number>")}}</dt> - <dd>非負の数値で、表示倍率の下限です。</dd> - <dt>{{cssxref("<percentage>")}}</dt> - <dd>非負のパーセント値で、表示倍率の下限です。</dd> -</dl> - -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> - -<pre class="syntaxbox">{{csssyntax}}</pre> - -<h2 id="Specification" name="Specification">仕様書</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 Device', '#min-zoom-desc', '"min-zoom" descriptor')}}</td> - <td>{{Spec2('CSS3 Device')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> - -<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p> - -<p>{{Compat("css.at-rules.viewport.min-zoom")}}</p> diff --git a/files/ja/web/css/@viewport/viewport-fit/index.html b/files/ja/web/css/@viewport/viewport-fit/index.html deleted file mode 100644 index 97814ca702..0000000000 --- a/files/ja/web/css/@viewport/viewport-fit/index.html +++ /dev/null @@ -1,78 +0,0 @@ ---- -title: viewport-fit -slug: Web/CSS/@viewport/viewport-fit -tags: - - '@viewport' - - CSS - - CSS 記述子 - - Experimental - - Reference - - モバイル - - 画面レイアウト -translation_of: Web/CSS/@viewport -translation_of_original: Web/CSS/@viewport/viewport-fit ---- -<div>{{CSSRef}}{{Draft}}{{SeeCompatTable}}</div> - -<p>CSS の <strong><code>viewport-fit</code></strong> {{CSSxRef("@viewport")}} {{Glossary("Descriptor (CSS)", "記述子")}}は、文書のビューポートが画面をどのように埋めるかを制御します。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush: css; no-line-numbers">/* キーワード値 */ -viewport-fit: auto; -viewport-fit: contain; -viewport-fit: cover; -</pre> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt><code>auto</code></dt> - <dd>この値は初期状態のレイアウトビューポートに影響せず、ウェブページ全体が見えます。</dd> - <dt><code>contain</code></dt> - <dd>ビューポートは、画面内に内接する最も大きな長方形に合うように拡大縮小されます。</dd> - <dt><code>cover</code></dt> - <dd>ビューポートは、端末の画面の埋め尽くすように拡大縮小されます。これは重要なコンテンツが画面の外に出ないことを保証するために、<a href="/ja/docs/Web/CSS/env">安全領域差し込み変数</a>を使用するために強く推奨されます。</dd> -</dl> - -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> - -<pre class="syntaxbox">auto | contain | cover -</pre> - -<div class="hidden">この記述子はまだ <a href="https://github.com/mdn/data/blob/master/css/at-rules.json">https://github.com/mdn/data/blob/master/css/at-rules.json</a> に追加されていません。</div> - -<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮事項</h2> - -<p><code>viewport-fit</code> 記述子を使用するとき、すべての端末の画面が長方形であるとは限らなないので、<a href="/ja/docs/Web/CSS/env">安全領域差し込み変数</a>を使用してください。</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("CSS Round Display", "#viewport-fit-descriptor", '"viewport-fit" descriptor')}}</td> - <td>{{Spec2("CSS Round Display")}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> - -<p>{{Compat("css.at-rules.viewport.viewport-fit")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{CSSxRef("env", "env()")}}</li> -</ul> diff --git a/files/ja/web/css/@viewport/zoom/index.html b/files/ja/web/css/@viewport/zoom/index.html deleted file mode 100644 index f05447a501..0000000000 --- a/files/ja/web/css/@viewport/zoom/index.html +++ /dev/null @@ -1,91 +0,0 @@ ---- -title: zoom -slug: Web/CSS/@viewport/zoom -tags: - - '@viewport' - - At-rule descriptor - - CSS - - CSS Descriptor - - Graphics - - Layout - - Reference - - Web -translation_of: Web/CSS/@viewport -translation_of_original: Web/CSS/@viewport/zoom ---- -<div>{{CSSRef}}</div> - -<p><strong><code>zoom</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の記述子で、 {{cssxref("@viewport")}} <a href="/ja/docs/Web/CSS/At-rule">アット規則</a>で定義された文書の表示倍率の初期値を設定します。</p> - -<p><em>表示倍率</em> が <code>1.0</code> または <code>100%</code> が、拡大縮小なしに対応します。より大きい値は拡大、より小さい値は縮小です。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush:css notranslate">/* キーワード値 */ -zoom: auto; - -/* <number> 値 */ -zoom: 0.8; -zoom: 2.0; - -/* <percentage> 値 */ -zoom: 150%; -</pre> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt><code>auto</code></dt> - <dd>{{glossary("user agent", "ユーザーエージェント")}}が文書の表示倍率の初期値を設定します。ユーザーエージェントは表示倍率を決めるために、文書が表示されるキャンバス領域の寸法を使用することがあります。</dd> - <dt>{{cssxref("<number>")}}</dt> - <dd>表示倍率として使われる非負の数値です。</dd> - <dt>{{cssxref("<percentage>")}}</dt> - <dd>表示倍率として使われる非負のパーセント値です。</dd> -</dl> - -<h2 id="Formal_definition" name="Formal_definition">公式定義</h2> - -<p>{{cssinfo}}</p> - -<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2> - -<pre class="syntaxbox notranslate">{{csssyntax}}</pre> - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="Setting_viewport_zoom_factor" name="Setting_viewport_zoom_factor">ビューポートの zoom 係数の設定</h3> - -<pre class="notranslate"><code>@viewport { - zoom: 2.0; -}</code></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('CSS3 Device', '#the-lsquozoomrsquo-descriptor', '"zoom" descriptor')}}</td> - <td>{{Spec2('CSS3 Device')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> - -<p>{{Compat("css.at-rules.viewport.zoom")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{cssxref("@viewport")}}</li> -</ul> diff --git a/files/ja/web/css/_colon_-moz-alt-text/index.html b/files/ja/web/css/_colon_-moz-alt-text/index.html deleted file mode 100644 index be215a2997..0000000000 --- a/files/ja/web/css/_colon_-moz-alt-text/index.html +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: ':-moz-alt-text' -slug: 'Web/CSS/:-moz-alt-text' -tags: - - CSS - - CSS Reference - - Non-standard ---- -<p>{{Non-standard_header}}{{ CSSRef() }}{{ Fx_minversion_header(3) }}</p> - -<h2 id=".E6.A6.82.E8.A6.81" name=".E6.A6.82.E8.A6.81">概要</h2> - -<p><code>:-moz-alt-text</code> は読み込まれなかった画像のための代替テキストを提供する要素にマッチします。</p> - -<p>このセレクタは主にテーマ開発者によって使用されるものです。</p> - -<h2 id="Bugzilla" name="Bugzilla">Bugzilla</h2> - -<p>{{ Bug(11011) }}</p> diff --git a/files/ja/web/css/_colon_-moz-placeholder/index.html b/files/ja/web/css/_colon_-moz-placeholder/index.html deleted file mode 100644 index f9e7367a09..0000000000 --- a/files/ja/web/css/_colon_-moz-placeholder/index.html +++ /dev/null @@ -1,59 +0,0 @@ ---- -title: ':-moz-placeholder' -slug: 'Web/CSS/:-moz-placeholder' -tags: - - CSS - - CSS Reference - - Non-standard -translation_of: 'Web/CSS/:placeholder-shown' -translation_of_original: 'Web/CSS/:-moz-placeholder' ---- -<p>{{Non-standard_header}}{{ CSSRef() }}{{ gecko_minversion_header("2.0") }}</p> - -<div class="note"><strong>Note:</strong> The <code>:-moz-placeholder</code> pseudo-class is deprecated in Firefox 19 in favor of the {{ cssxref('::-moz-placeholder') }} pseudo-element.</div> - -<div class="note"><strong>Note: </strong>The CSSWG have decided to introduce <code>:placeholder-shown</code>. This functionality will be reintroduced in Gecko at some point in the future, unprefixed and under the new name. {{bug(1069012)}}</div> - -<h2 id="Summary" name="Summary">概要</h2> - -<p><code>:-moz-placeholder</code> は<a href="/en/HTML/HTML5/Forms_in_HTML5#The_placeholder_attribute" title="en/HTML/HTML5/Forms in HTML5#The placeholder attribute">プレースホルダ</a>を表示するフォーム要素にマッチします。この擬似クラスにより、Web 開発者やテーマデザイナーがプレースホルダの表示 (デフォルトは薄い灰色) をカスタマイズすることができます。</p> - -<p>たとえば、フォームフィールドの背景色をプレースホルダの色と似た色に変更した場合、プレースホルダが目立たなくなりうまく機能しません。しかし、この擬似クラスを利用してプレースホルダの文字色を変更すればいいのです。</p> - -<h2 id="Example" name="Example">例</h2> - -<p>この例はプレースホルダの文字色を緑色に変更しています。</p> - -<pre class="brush: html"><!doctype html> -<html> -<head> - <title>Placeholder demo</title> - <style type="text/css"> - input:-moz-placeholder { - color: green; - } - </style> -</head> -<body> - <input id="test" placeholder="Placeholder text!"> -</body> -</html> -</pre> - -<p><a href="/samples/cssref/moz-placeholder.html" title="https://developer.mozilla.org/samples/cssref/moz-placeholder.html">View this example live</a>.</p> - -<h2 id="Bugzilla" name="Bugzilla">Bugzilla</h2> - -<p>{{ Bug(457801) }}</p> - -<h2 id="Notes" name="Notes">注記</h2> - -<div class="note"><strong>Note:</strong> このページは Gecko 1.9 {{ geckoRelease("1.9") }} のリリース時に、<a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=11011" title="https://bugzilla.mozilla.org/show_bug.cgi?id=11011">全く異なる目的</a> から間違って作られていました。</div> - -<h3 id="SeeAlso" name="SeeAlso">参考</h3> - -<ul> - <li><a href="/en/HTML/HTML5/Forms_in_HTML5" title="en/HTML/HTML5/Forms in HTML5">Forms in HTML5</a></li> - <li>{{ HTMLElement("input") }}</li> - <li>{{ HTMLElement("textarea") }}</li> -</ul> diff --git a/files/ja/web/css/_colon_-webkit-autofill/index.html b/files/ja/web/css/_colon_autofill/index.html index 2e8ba6c793..fb2d418258 100644 --- a/files/ja/web/css/_colon_-webkit-autofill/index.html +++ b/files/ja/web/css/_colon_autofill/index.html @@ -1,12 +1,13 @@ --- title: ':-webkit-autofill' -slug: 'Web/CSS/:-webkit-autofill' +slug: Web/CSS/:autofill tags: - CSS - Non-standard - Reference - 擬似クラス -translation_of: 'Web/CSS/:-webkit-autofill' +translation_of: Web/CSS/:-webkit-autofill +original_slug: Web/CSS/:-webkit-autofill --- <div>{{CSSRef}}{{Non-standard_header}}</div> diff --git a/files/ja/web/css/auto/index.html b/files/ja/web/css/auto/index.html deleted file mode 100644 index cae634e45a..0000000000 --- a/files/ja/web/css/auto/index.html +++ /dev/null @@ -1,29 +0,0 @@ ---- -title: auto -slug: Web/CSS/auto -tags: - - CSS - - CSS Reference -translation_of: Web/CSS/width -translation_of_original: Web/CSS/auto ---- -<div> - {{CSSRef}}</div> -<h2 id="Summary" name="Summary">概要</h2> -<p>ユーザエージェントによって自動的に計算される値です。その具体的な効果は <code>auto</code> が適用されたプロパティ毎にそれぞれ異なります。</p> -<h2 id="Used_in" name="Used_in">auto 値の使用が可能なプロパティ</h2> -<ul> - <li>{{Cssxref("overflow")}}</li> - <li>{{Cssxref("overflow-x")}}</li> - <li>{{Cssxref("overflow-y")}}</li> - <li>{{Cssxref("cursor")}}</li> - <li>{{Cssxref("width")}}</li> - <li>{{Cssxref("marker-offset")}}</li> - <li>{{Cssxref("margin")}}</li> - <li>margin-* (left|bottom|top|right|start|end)</li> - <li>{{Cssxref("bottom")}}</li> - <li>{{Cssxref("left")}}</li> - <li>{{Cssxref("table-layout")}}</li> - <li>{{Cssxref("z-index")}}</li> - <li>{{Cssxref("column-width")}}</li> -</ul> diff --git a/files/ja/web/css/background-repeat/index.html b/files/ja/web/css/background-repeat/index.html index 5ca4c622ba..671f078202 100644 --- a/files/ja/web/css/background-repeat/index.html +++ b/files/ja/web/css/background-repeat/index.html @@ -178,7 +178,7 @@ div { /* 複数の画像 */ .seven { background-image: url(https://mdn.mozillademos.org/files/12005/starsolid.gif), - url(https://developer.cdn.mozilla.net/media/redesign/img/favicon32.png); + url(https://developer.mozilla.org/static/img/favicon32.png); background-repeat: repeat-x, repeat-y; height: 144px; diff --git a/files/ja/web/css/border-bottom-left-radius/index.html b/files/ja/web/css/border-bottom-left-radius/index.html index e1821163f7..e6805d19db 100644 --- a/files/ja/web/css/border-bottom-left-radius/index.html +++ b/files/ja/web/css/border-bottom-left-radius/index.html @@ -89,7 +89,7 @@ border-bottom-left-radius: inherit;</pre> <tr> <td style="padding: 1.5em;"> <div style="background-color: lightgreen; border: solid 1px black; border-bottom-left-radius: 40px 40px; width: 100px; height: 100px;"> - <div style="display: none;">.</div> + <div class="hidden">.</div> </div> </td> <td>境界として使用されている円弧 @@ -103,7 +103,7 @@ div { <tr> <td style="padding: 1.5em;"> <div style="background-color: lightgreen; border: solid 1px black; border-bottom-left-radius: 40px 20px; width: 100px; height: 100px;"> - <div style="display: none;">.</div> + <div class="hidden">.</div> </div> </td> <td>境界として使用されている楕円の弧 @@ -117,7 +117,7 @@ div { <tr> <td style="padding: 1.5em;"> <div style="background-color: lightgreen; border: solid 1px black; border-bottom-left-radius: 40%; width: 100px; height: 100px;"> - <div style="display: none;">.</div> + <div class="hidden">.</div> </div> </td> <td>ボックスは正方形。境界として使用されている円弧 @@ -131,7 +131,7 @@ div { <tr> <td style="padding: 1.5em;"> <div style="background-color: lightgreen; border: solid 1px black; border-bottom-left-radius: 40%; width: 100px; height: 200px;"> - <div style="display: none;">.</div> + <div class="hidden">.</div> </div> </td> <td>ボックスは正方形ではない。境界として使用されている楕円の弧 @@ -145,7 +145,7 @@ div { <tr> <td style="padding: 1.5em;"> <div style="border: black 3px double; border-bottom-left-radius: 40%; height: 100px; width: 100px; background-color: rgb(250,20,70); background-clip: content-box;"> - <div style="display: none;">.</div> + <div class="hidden">.</div> </div> </td> <td>背景色は境界で切り取られる diff --git a/files/ja/web/css/border-bottom-right-radius/index.html b/files/ja/web/css/border-bottom-right-radius/index.html index a757c6aa39..090de6ee4a 100644 --- a/files/ja/web/css/border-bottom-right-radius/index.html +++ b/files/ja/web/css/border-bottom-right-radius/index.html @@ -83,7 +83,7 @@ border-bottom-right-radius: inherit;</pre> <tr> <td style="padding: 1.5em;"> <div style="background-color: lightgreen; border: solid 1px black; border-bottom-right-radius: 40px 40px; width: 100px; height: 100px;"> - <div style="display: none;">.</div> + <div class="hidden">.</div> </div> </td> <td>境界として使用されている円弧 @@ -97,7 +97,7 @@ div { <tr> <td style="padding: 1.5em;"> <div style="background-color: lightgreen; border: solid 1px black; border-bottom-right-radius: 40px 20px; width: 100px; height: 100px;"> - <div style="display: none;">.</div> + <div class="hidden">.</div> </div> </td> <td>境界として使用されている楕円の弧 @@ -111,7 +111,7 @@ div { <tr> <td style="padding: 1.5em;"> <div style="background-color: lightgreen; border: solid 1px black; border-bottom-right-radius: 40%; width: 100px; height: 100px;"> - <div style="display: none;">.</div> + <div class="hidden">.</div> </div> </td> <td>ボックスは正方形。境界として使用されている円弧 @@ -125,7 +125,7 @@ div { <tr> <td style="padding: 1.5em;"> <div style="background-color: lightgreen; border: solid 1px black; border-bottom-right-radius: 40%; width: 100px; height: 200px;"> - <div style="display: none;">.</div> + <div class="hidden">.</div> </div> </td> <td>ボックスは正方形ではない。境界として使用されている楕円の弧 @@ -139,7 +139,7 @@ div { <tr> <td style="padding: 1.5em;"> <div style="border: black 3px double; border-bottom-right-radius: 40%; height: 100px; width: 100px; background-color: rgb(250,20,70); background-clip: content-box;"> - <div style="display: none;">.</div> + <div class="hidden">.</div> </div> </td> <td>背景色は境界で切り取られる diff --git a/files/ja/web/css/border-top-right-radius/index.html b/files/ja/web/css/border-top-right-radius/index.html index e207a4c5cf..c522635fbb 100644 --- a/files/ja/web/css/border-top-right-radius/index.html +++ b/files/ja/web/css/border-top-right-radius/index.html @@ -111,7 +111,7 @@ div { <tr> <td style="padding: 1.5em;"> <div style="background-color: lightgreen; border: solid 1px black; border-top-right-radius: 40%; width: 100px; height: 200px;"> - <div style="display: none;">.</div> + <div class="hidden">.</div> </div> </td> <td>ボックスは正方形ではない。境界として使用されている楕円の弧 diff --git a/files/ja/web/css/common_css_questions/index.html b/files/ja/web/css/common_css_questions/index.html deleted file mode 100644 index 4307266923..0000000000 --- a/files/ja/web/css/common_css_questions/index.html +++ /dev/null @@ -1,231 +0,0 @@ ---- -title: CSS の一般的な質問 -slug: Web/CSS/Common_CSS_Questions -tags: - - CSS - - FAQ - - Web - - questions - - ガイド - - 例 -translation_of: Learn/CSS/Howto/CSS_FAQ ---- -<p><span class="seoSummary">この記事には、 CSS に関するいくつかのよくある質問（FAQ）とその解答が見つかり、ウェブ開発者になるための道で役に立つでしょう。</span></p> - -<h2 id="Why_doesn't_my_CSS_which_is_valid_render_correctly" name="Why_doesn't_my_CSS_which_is_valid_render_correctly">なぜ CSS が妥当なのに正しくレンダリングされないのか？</h2> - -<p>ブラウザーは <code>DOCTYPE</code> 宣言を使用して、文書の表示ににウェブ標準とより互換性があるモードを使用するか、あるいは古いブラウザーのバグに互換性があるモードを使用するかを選択します。正しく新しい <code>DOCTYPE</code> 宣言を HTML の先頭で使用すると、ブラウザーの標準への準拠度が向上します。</p> - -<p>現代のブラウザーは、2つの主要なレンダリングモードを備えています。</p> - -<ul> - <li><em>Quirks Mode</em>: 後方互換モードとも呼ばれます。古いウェブページが制作者の意図したとおりにレンダリングされるようにして、古いブラウザーが用いていた非標準のレンダリング規則に従います。 <code>DOCTYPE</code> 宣言が不完全、不正確、あるいは存在しない、または 2001 年より前に一般的であった既知の <code>DOCTYPE</code> 宣言であるドキュメントは、 Quirks Mode でレンダリングされます。</li> - <li><em>Standards Mode</em>: ブラウザーは W3C 標準へ厳密に従おうとします。新しい HTML ページは標準に準拠したブラウザー向けに設計されていると考えられるため、新しい <code>DOCTYPE</code> 宣言を持つページは Standards Mode でレンダリングされます。</li> -</ul> - -<p>Gecko ベースのブラウザーには、いくつかの小さな調整のみを行う第3のモードであります<em><a href="/ja/docs/Gecko's_"Almost_Standards"_Mode" title="Gecko's_"Almost_Standards"_Mode">Almost Standards Mode</a></em> があります。</p> - -<p>以下は Standards Mode または Almost Standards Mode になる <code>DOCTYPE</code> 宣言で、もっとも一般的に使用されるものの一覧です:</p> - -<pre><!DOCTYPE html> /* これは HTML5 の doctype です。HTML5 パーサーを使用する新しいブラウザーでは、 - この doctype が推奨されます */ - -<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" -"http://www.w3.org/TR/html4/loose.dtd"> - -<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" -"http://www.w3.org/TR/html4/strict.dtd"> - -<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" -"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> - -<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" -"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> -</pre> - -<p>可能な限り、 HTML5 の doctype を使用するべきです。</p> - -<h2 id="My_CSS_is_valid.2C_but_not_correctly_rendered" name="My_CSS_is_valid.2C_but_not_correctly_rendered">なぜ CSS が妥当なのにまったくレンダリングされないのか?</h2> - -<p>以下のような可能性があります。</p> - -<ul> - <li>CSS ファイルへのパスが間違っている。</li> - <li>適用されるためには、 CSS スタイルシートを MIME タイプ <code>text/css</code> で提供しなければなりません。ウェブサーバがこのタイプで提供していない場合、スタイルシートは適用されません。</li> -</ul> - -<h2 id="Difference_between_id_and_class" name="Difference_between_id_and_class"><code>id</code> と <code>class</code> の違いは何か?</h2> - -<p>HTML の要素は、 <code>id</code> 属性と <code>class</code> 属性の片方または両方を持つことができます。 <code>id</code> 属性は要素に適用する名前を割り当てます。妥当なマークアップでは、ある名前を持つ要素はひとつだけです。 <code>class</code> 属性は要素にクラス名を割り当てます。一つのクラス名を、ページ内の多数の要素で使用できます。 CSS は特定の <code>id</code> または <code>class</code> 名に対してスタイルを設定できます。</p> - -<ul> - <li>ページ内のたくさんのブロックや要素にスタイルのルールを適用したい場合や、スタイルを適用したい要素が1つしかないものの、後で追加したい場合は、 class 指定によるスタイルを使用してください。</li> - <li>適用されるスタイルのルールを1つの特定のブロックや要素に限定する必要がある場合は、 id 指定によるスタイルを使用してください。このスタイルは特定の id を持った特定の要素にのみ使用されます。</li> -</ul> - -<p>一般的にはできるだけ class を使用し、 id は特定の用途で絶対的に必要な場合（ラベルとフォーム要素を接続したり、スタイルをつける要素が意味的に独自の場合など）に限り使用することが推奨されます。</p> - -<ul> - <li>class を使用するとスタイルの用途が広げられるようになり、現在は特定のルールセットのスタイルを1つの要素にしか適用しなくても、後から追加したくなる可能性があります</li> - <li>class を使用すると、複数の要素のスタイルを設定できるため、id セレクタを使用する複数のルールで同じスタイル設定情報を書き出す必要がなくなり、より短いスタイルシートを作成できます。より短いスタイルシートはより高性能です</li> - <li>class セレクタは id セレクタよりも特異性が低いため、必要に応じてオーバーライドする方が簡単です</li> -</ul> - -<div class="note"> -<p><strong>注</strong>: 詳しくは <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Selectors">Selectors</a> もご覧ください。</p> -</div> - -<h2 id="Restoring_the_default_property_value" name="Restoring_the_default_property_value">プロパティの既定値に戻すにはどうすればよいのか?</h2> - -<p>当初 CSS には "default" キーワードがなく、プロパティの既定値を戻す唯一の方法は、そのプロパティを明示的に宣言し直すことでした。</p> - -<pre class="brush: css">/* 見出しの既定の色は黒 */ -h1 { color: red; } -h1 { color: black; }</pre> - -<p>これは CSS 2 で変わり、<a href="/ja/docs/CSS/initial" title="initial">initial</a> キーワードが CSS プロパティの正当な値になりました。これはプロパティを既定値にリセットします。この既定値は、当該プロパティの CSS 仕様で定義されています。</p> - -<pre class="brush: css">/* 見出しの既定の色は黒 */ -h1 { color: red; } -h1 { color: initial; }</pre> - -<h2 id="Derived_styles" name="Derived_styles">スタイルを他のスタイルから派生させるにはどうすればよいか?</h2> - -<p>CSS では、あるスタイルが他の表現で定義されることを許可していません (<a href="http://archivist.incutio.com/viewlist/css-discuss/2685">Working Group のスタンスに関する、Eric Meyer 氏のコメント</a>をご覧ください)。ただし、ひとつの要素に複数のクラスを割り当てることで、同様の効果を得られます。また、複数の場所で再利用できるスタイル情報を1ヶ所で定義する方法として、 <a href="/ja/docs/Web/CSS/Using_CSS_variables">CSS 変数</a> が導入されました。</p> - -<h2 id="Assigning_multiple_classes" name="Assigning_multiple_classes">ひとつの要素に複数のクラスを割り当てる方法は?</h2> - -<p>HTML の要素は <code>class</code> 属性に空白区切りでクラスを並べることで、複数のクラスを割り当てることができます。</p> - -<pre><style type="text/css"> -.news { background: black; color: white; } -.today { font-weight: bold; } -</style> - -<div class="news today"> -... content of today's news ... -</div> -</pre> - -<p>同じプロパティが双方の規則内で宣言されている場合は、その競合がまずは詳細度によって、そして CSS 宣言の順序に従って解決されます。<code>class</code> 属性内のクラスの順序は関係がありません。</p> - -<h2 id="Style_rules_that_don.27t_work" name="Style_rules_that_don.27t_work">なぜ私のスタイル規則は正しく動作しないのか?</h2> - -<p>構文が正しいスタイル規則が、ある状況下で適用されないことがあります。この種類の問題をデバッグするために <a href="/ja/docs/DOM_Inspector" title="DOM_Inspector">DOM Inspector</a> の <em>CSS Style Rules</em> ビューを活用できますが、スタイルが無視される事例でもっとも頻発するものは以下のとおりです。</p> - -<h3 id="HTML_elements_hierarchy" name="HTML_elements_hierarchy">HTML 要素の階層</h3> - -<p>CSS スタイルを HTML 要素に適用する方法は、要素の階層にも依存します。CSS 規則の詳細度や優先度にかかわらず、子孫に適用された規則は親のスタイルをオーバーライドすることを覚えておくことが重要です。</p> - -<pre>.news { color: black; } -.corpName { font-weight: bold; color: red; } - -<!-- ニュース項目は黒色ですが、社名は赤色かつ太字です --> -<div class="news"> - (Reuters) <span class="corpName">General Electric</span> (GE.NYS) announced on Thursday... -</div> -</pre> - -<p>複雑な HTML 階層で規則が無視されているように見える場合は、異なるスタイルが設定された別の要素の内部にその要素がないかを確認してください。</p> - -<h3 id="Explicitly_re-defined_style_rule" name="Explicitly_re-defined_style_rule">明示的に再定義されたスタイル規則</h3> - -<p>CSS スタイルシートでは、順序<strong>こそが</strong>重要です。ある規則を定義した後に同じ規則を再定義した場合は、最後の定義が使用されます。</p> - -<pre>#stockTicker { font-weight: bold; } -.stockSymbol { color: red; } -/* 他の規則 */ -/* 他の規則 */ -/* 他の規則 */ -.stockSymbol { font-weight: normal; } - -<!-- ほとんどのテキストは太字ですが、"GE" は赤色で太字ではありません --> -<div id="stockTicker"> - NYS: <span class="stockSymbol">GE</span> +1.0 ... -</div> -</pre> - -<p>このような誤りを避けるには、あるセレクタに対する規則は 1 回だけ定義するようにして、セレクタに所属するすべての規則をグループ化してください。</p> - -<h3 id="Use_of_a_shorthand_property" name="Use_of_a_shorthand_property">ショートハンドプロパティの使用</h3> - -<p>ショートハンドプロパティを使用したスタイル規則の定義は、構文がとてもコンパクトになることからよいことです。一部の属性だけを持つショートハンドプロパティの使用は可能かつ正当ですが、宣言していない属性は自動的に既定値へリセットされることを覚えておくべきです。すなわち、単独の属性に対する以前の規則は暗黙的にオーバーライドされます。</p> - -<pre>#stockTicker { font-size: 12px; font-family: Verdana; font-weight: bold; } -.stockSymbol { font: 14px Arial; color: red; } - -<div id="stockTicker"> - NYS: <span class="stockSymbol">GE</span> +1.0 ... -</div> -</pre> - -<p>前の例では別の要素に属する規則で問題が発生していますが、同一の要素でも問題が起こりえます。これは、規則の順序<strong>こそが</strong>重要であるためです。</p> - -<pre>#stockTicker { - font-weight: bold; - font: 12px Verdana; /* font-weight is now set to normal */ -} -</pre> - -<h3 id="Use_of_the_.2A_selector" name="Use_of_the_.2A_selector"><code>*</code> セレクタの使用</h3> - -<p>ワイルドカードセレクタ <code>*</code> はすべての要素を参照するものであり、特に注意して使用しなければなりません。</p> - -<pre>body * { font-weight: normal; } -#stockTicker { font: 12px Verdana; } -.corpName { font-weight: bold; } -.stockUp { color: red; } - -<div id="section"> - NYS: <span class="corpName"><span class="stockUp">GE</span></span> +1.0 ... -</div> -</pre> - -<p>この例では、<code>body *</code> セレクタで body 要素内の全要素に対して規則を適用しており、それは .stockUp クラスも含むすべての階層レベルです。よって .corpName クラスに適用した <code>font-weight: bold;</code> は、body 内の全要素に適用した <code>font-weight: normal;</code> にオーバーライドされます。</p> - -<p>特にセレクタの最初の要素として使用しない場合に、* セレクタは遅いセレクタであるため使用は最小限にするべきです。このような使い方はできるだけ避けるべきです。</p> - -<h3 id="Specificity_in_CSS" name="Specificity_in_CSS">CSS の詳細度</h3> - -<p>ある要素に複数の規則を適用すると、スタイルの<a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance#Specificity" title="Specificity">詳細さ</a>に従って規則が選ばれます。インラインスタイル（HTML の <code>style</code> 属性）が最上位の詳細さで他のあらゆるセレクタを上書きし、次に ID セレクタ、それからクラスセレクタ、要素名セレクタの順となります。よって、以下の {{htmlelement("div")}} の文字色は赤になります。</p> - -<pre>div { color: black; } -#orange { color: orange; } -.green { color: green; } - -<div id="orange" class="green" style="color: red;">This is red</div> -</pre> - -<p>セレクタが複数の範囲を持つ場合、規則はより複雑になります。セレクタの詳細度がどのように算出されるかについて、詳しくは <a href="http://www.w3.org/TR/CSS21/cascade.html#specificity">CSS 2.1 Specification chapter 6.4.3</a> でご覧いただけます。</p> - -<h2 id="What_do_the_-moz-.2A_properties_do.3F" name="What_do_the_-moz-.2A_properties_do.3F">-moz-*、-ms-*、-webkit-*、-o-*、-khtml-* プロパティは何をするものか?</h2> - -<p>これらのプロパティは<em>接頭辞付きプロパティ</em>と呼ばれ、CSS 標準を拡張したものです。これらは正規の名前空間を乱すことなく実験的で非標準の機能を使用するために用いられ、標準仕様が拡張したときに機能の不整合が発生することを防ぎます。</p> - -<p>本番 Web サイトでこのようなプロパティを使用することはお勧めできません。これらのプロパティは既に Web との互換性に大きな問題を引き起こしています。たとえば、接頭辞のないバージョンがすべてのブラウザでサポートされている場合に、接頭辞のないバージョンがプロパティの <code>-webkit-</code> 接頭辞バージョンのみを使用するということは、Webkit ベースでないブラウザではそのプロパティに依存する機能が完全に不要になるということです。この問題はひどく悪くなったため、Compatibility Living Standard で指定されているように、Webの互換性を向上させるために他のブラウザが <code>-webkit-</code> プレフィックスエイリアスを実装し始めました。</p> - -<p>実際のところ、ほとんどのブラウザは実験的機能を実装するときに CSS プレフィックスを使用せず、代わりに Nightly ブラウザバージョンなどでのみそれらの機能を実装しています。</p> - -<p>作業でプレフィックスを使用する必要がある場合は、最初にプレフィックス付きのバージョンを使用するようにコードを書くことをお勧めします。ただし、サポートされている場合はプレフィックス付きのバージョンを自動的に上書きできます。 例えば：</p> - -<pre class="brush: css line-numbers language-css"><code class="language-css"><span class="property token">-ms-transform</span><span class="punctuation token">:</span> <span class="function token">rotate</span><span class="punctuation token">(</span><span class="number token">90</span>deg<span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="property token">-webkit-transform</span><span class="punctuation token">:</span> <span class="function token">rotate</span><span class="punctuation token">(</span><span class="number token">90</span>deg<span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="property token">transform</span><span class="punctuation token">:</span> <span class="function token">rotate</span><span class="punctuation token">(</span><span class="number token">90</span>deg<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> - -<div class="note"> -<p><strong>メモ</strong>: 接頭辞付きプロパティの処理の詳細については、<a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing">クロスブラウザテスト</a>モジュールの<a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS#Handling_CSS_prefixes">一般的な HTML および CSS の問題の処理 - CSS プレフィックスの処理</a>を参照してください。</p> -</div> - -<div class="note"> -<p><strong>メモ</strong>: Mozilla をプレフィックスとする CSS プロパティの詳細については、<a href="/ja/docs/Web/CSS/Mozilla_Extensions">CSS の Mozilla 拡張</a>ページを参照してください。</p> -</div> - -<h2 id="How_does_z-index_relate_to_positioning.3F" name="How_does_z-index_relate_to_positioning.3F">z-index は位置指定へどのように関係するのか?</h2> - -<p>z-index プロパティは、要素を積み重ねる順序を指定します。</p> - -<p>z-index/stack の順序が高い要素は、常に z-index/stack の順序が低い要素の前に表示されます。z-index は指定された位置 (<code>position:absolute</code>、<code>position:relative</code>、または <code>position:fixed</code>) を持つ要素に対してのみ機能します。</p> - -<div class="note"> -<p><strong>メモ</strong>: 詳細については、<a href="/ja/docs/Learn/CSS/CSS_layout/Positioning">ポジショニング</a>学習の記事、特に <a href="/ja/docs/Learn/CSS/CSS_layout/Positioning#Introducing_z-index">z-index の紹介</a>セクションを参照してください。</p> -</div> diff --git a/files/ja/web/css/css_background_and_borders/border-image_generator/index.html b/files/ja/web/css/css_background_and_borders/border-image_generator/index.html index fa4aa48cdf..8ce5bab6e9 100644 --- a/files/ja/web/css/css_background_and_borders/border-image_generator/index.html +++ b/files/ja/web/css/css_background_and_borders/border-image_generator/index.html @@ -9,7 +9,7 @@ translation_of: Web/CSS/CSS_Background_and_Borders/Border-image_generator --- <p>このツールを使用して、 CSS3 の {{cssxref("border-image")}} の値を作成できます。</p> -<div style="display: none;"> +<div class="hidden"> <h2 id="Border_Image_Generator" name="Border_Image_Generator">Border Image Generator</h2> <h3 id="HTML_Content">HTML Content</h3> diff --git a/files/ja/web/css/css_background_and_borders/border-radius_generator/index.html b/files/ja/web/css/css_background_and_borders/border-radius_generator/index.html index 7ec4cab13e..4ce39890a7 100644 --- a/files/ja/web/css/css_background_and_borders/border-radius_generator/index.html +++ b/files/ja/web/css/css_background_and_borders/border-radius_generator/index.html @@ -10,7 +10,7 @@ translation_of: Web/CSS/CSS_Background_and_Borders/Border-radius_generator --- <p>このツールは CSS3 の {{cssxref("border-radius")}} の効果を生成するために使用することができます。</p> -<div style="display: none;"> +<div class="hidden"> <h2 id="border-radius-generator" name="border-radius-generator">border-radius</h2> <h3 id="HTML_Content" name="HTML_Content">HTML Content</h3> diff --git a/files/ja/web/css/css_background_and_borders/using_css_multiple_backgrounds/index.html b/files/ja/web/css/css_background_and_borders/using_css_multiple_backgrounds/index.html deleted file mode 100644 index 4c7327f6c1..0000000000 --- a/files/ja/web/css/css_background_and_borders/using_css_multiple_backgrounds/index.html +++ /dev/null @@ -1,74 +0,0 @@ ---- -title: CSS での複数の背景の利用方法 -slug: Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds -tags: - - CSS - - CSS Background - - Example - - Guide - - Intermediate -translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds -translation_of_original: Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds ---- -<p id="Summary">{{CSSRef}}</p> - -<p>CSS3 より、要素に複数の背景を適用できるようになりました。複数の背景は、最初に指定した背景が最前面、最後に指定した背景が最も奥のレイヤーになるように、重ねて描画されます。</p> - -<p>複数の背景は、以下の様に各レイヤーをカンマで区切る事だけの簡単な構文で記述可能です。</p> - -<pre class="syntaxbox">.myclass { - background: 背景1, 背景2, ..., 背景N; -}</pre> - -<p>この方法は、ショートハンドプロパティの {{cssxref("background")}} でも、{{cssxref("background-color")}} 以外の個別のプロパティ（※{{ cssxref("background-attachment") }}, {{ cssxref("background-clip") }},<code> </code>{{ cssxref("background-image") }}, {{ cssxref("background-origin") }}, {{ cssxref("background-position") }}, {{ cssxref("background-repeat") }}, {{ cssxref("background-size") }}） のどちらでも利用可能です。</p> - -<h2 id="Example" name="Example">例</h2> - -<p>次の例では、上位レイヤーから</p> - -<ol> - <li>Firefox のロゴ</li> - <li><a href="/ja/CSS/linear-gradient" title="linear-gradient">線形グラデーション</a></li> - <li>花の画像</li> -</ol> - -<p>の順で、3 つの背景が重ねられています。記述量が多くなる場合は、例の様にカンマ毎に改行するとコードが読みやすくなるかもしれません。</p> - -<pre class="brush: css">.multi_bg_example { - background-image: - url("http://demos.hacks.mozilla.org/openweb/resources/images/logos/firefox-48.png"), /* 最前面の背景レイヤーの背景画像 */ - linear-gradient( to right, rgba(255,255,255,0), #fff ), - url("http://demos.hacks.mozilla.org/openweb/resources/images/patterns/flowers-pattern.jpg"); - - background-repeat: - no-repeat, /* 最前面の背景レイヤーに対応 */ - no-repeat, - repeat; - - background-position: - bottom right, /* 最前面の背景レイヤーに対応 */ - left, - right; -}</pre> - -<table class="standard-table"> - <tbody> - <tr> - <td class="header">スクリーンショット</td> - </tr> - <tr> - <td><img alt="css_multibg.png" src="/@api/deki/files/4028/=css_multibg.png"></td> - </tr> - </tbody> -</table> - -<p>スクリーンショットで表示されているとおり、最初に記述した Firefox のアイコン画像が最前面、次にグラデーション、最後に花の画像が重ねて描画されます。 {{cssxref("background-repeat")}} と {{cssxref("background-position")}} に指定した複数の値は、それぞれ <code>background-image</code> で記述した各値に対し、同じ順番で適用されます。つまり、<code>background-image</code> の最初の値として指定した FireFox のアイコンの画像に対し、<br> - {{cssxref("background-repeat")}} は "<code>bottom left</code>"、<br> - {{cssxref("background-position")}} は "<code>no-repeat</code>"<br> - が適用され、その結果、Firefox のアイコンの画像は、最前面のレイヤーの<em>右下に</em>、<em>ひとつだけ</em> 表示されるのです。</p> - -<h2 id="See_also" name="See_also">関連記事</h2> - -<ul> - <li><a href="/ja/docs/CSS/Using_CSS_gradients" title="グラデーションの利用">グラデーションの利用</a></li> -</ul> diff --git a/files/ja/web/css/css_backgrounds_and_borders/scaling_background_images/index.html b/files/ja/web/css/css_backgrounds_and_borders/resizing_background_images/index.html index dde72afbab..cb3f131200 100644 --- a/files/ja/web/css/css_backgrounds_and_borders/scaling_background_images/index.html +++ b/files/ja/web/css/css_backgrounds_and_borders/resizing_background_images/index.html @@ -1,6 +1,6 @@ --- title: 背景画像の拡大縮小 -slug: Web/CSS/CSS_Backgrounds_and_Borders/Scaling_background_images +slug: Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images tags: - CSS - CSS Background @@ -16,6 +16,7 @@ tags: - resize - width translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images +original_slug: Web/CSS/CSS_Backgrounds_and_Borders/Scaling_background_images --- <div>{{cssref}}</div> diff --git a/files/ja/web/css/css_colors/color_picker_tool/index.html b/files/ja/web/css/css_colors/color_picker_tool/index.html index 7375e00046..958178331b 100644 --- a/files/ja/web/css/css_colors/color_picker_tool/index.html +++ b/files/ja/web/css/css_colors/color_picker_tool/index.html @@ -14,7 +14,7 @@ tags: - 色選択 translation_of: Web/CSS/CSS_Colors/Color_picker_tool --- -<div style="display: none;"> +<div class="hidden"> <h2 id="ColorPicker_Tool" name="ColorPicker_Tool">色選択ツール</h2> <h3 id="HTML">HTML</h3> diff --git a/files/ja/web/css/css_flexible_box_layout/mixins/index.html b/files/ja/web/css/css_flexible_box_layout/mixins/index.html deleted file mode 100644 index 42426babe4..0000000000 --- a/files/ja/web/css/css_flexible_box_layout/mixins/index.html +++ /dev/null @@ -1,368 +0,0 @@ ---- -title: クロスブラウザのフレックスボックスのミックスイン -slug: Web/CSS/CSS_Flexible_Box_Layout/Mixins -tags: - - CSS - - CSS フレックスボックス - - ミックスイン - - リファレンス -translation_of: Web/CSS/CSS_Flexible_Box_Layout/Mixins ---- -<div>{{cssref}}</div> - -<p class="summary">この記事では、 flexbox を現在のブラウザーのネイティブ対応を利用して使いこなしたい人のための一連のミックスインを紹介します。</p> - -<p>このセットは次のものを使用します。</p> - -<ul> - <li>2009年時点の 'box' 構文 (Firefox や古い WebKit) を使用したフォールバックと、接頭辞付きの構文 (IE10, flex ラッピングのない WebKit ブラウザー)</li> - <li>最終的な標準の構文 (Firefox, Safari, Chrome, IE11+, Edge, Opera)</li> -</ul> - -<p>原文:</p> - -<ul> - <li><a href="http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/">http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/</a></li> -</ul> - -<p>参考文献:</p> - -<ul> - <li><a href="http://w3.org/tr/css3-flexbox/">http://w3.org/tr/css3-flexbox/</a></li> - <li><s><a href="http://the-echoplex.net/flexyboxes/">http://the-echoplex.net/flexyboxes/</a></s></li> - <li><a href="http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx">http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx</a></li> - <li><a href="http://css-tricks.com/using-flexbox/">http://css-tricks.com/using-flexbox/</a></li> - <li><a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/">A Complete Guide to Flexbox | CSS-Tricks</a></li> - <li><a href="https://demos.scotch.io/visual-guide-to-css3-flexbox-flexbox-playground/demos/">Visual Guide to CSS3 Flexbox: Flexbox Playground |</a></li> -</ul> - -<div class="note"><strong>メモ:</strong> ミックスインは、現在ブラウザーでは対応されていません。下記の大部分を実行するには、代わりに CSS プリプロセッサーを使用する必要があるでしょう。しかし、 CSS プリプロセッサーは単純に妥当な CSS を生成するので、以下で使用されているテクニックは、推奨される場合は純粋な CSS で書くこともできます。</div> - -<h3 id="Flexbox_containers" name="Flexbox_containers">フレックスボックスのコンテナー</h3> - -<p> {{cssxref("display")}} プロパティに <code>flex</code> の値を使用すると、要素がブロックレベルのコンテナーボックスを生成します。 <code>inline-flex</code> の値では、要素がインラインレベルのフレックスコンテナーボックスを生成します。</p> - -<ul> - <li>値: <code>flex</code> | <code>inline-flex</code></li> - <li>Spec: <a href="https://drafts.csswg.org/css-flexbox/#flex-containers">https://drafts.csswg.org/css-flexbox/#flex-containers</a></li> -</ul> - -<pre class="brush: css">@mixin flexbox { - display: -webkit-box; - display: -moz-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; -} - -//Using this mixin -%flexbox { @include flexbox; }</pre> - -<div> -<pre class="brush: css">@mixin inline-flex { - display: -webkit-inline-box; - display: -moz-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; -} - -%inline-flex { @include inline-flex; }</pre> -</div> - -<h3 id="Flexbox_direction" name="Flexbox_direction">フレックスボックスの方向</h3> - -<p>The {{cssxref("flex-direction")}} property specifies how flex items are placed in the flex container, by setting the direction of the flex container's main axis. This determines the direction in which flex items are laid out in.</p> - -<ul> - <li>値: <code>row</code> (default) | <code>row-reverse</code> | <code>column</code> | <code>column-reverse</code></li> - <li>Spec: <a href="https://drafts.csswg.org/css-flexbox/#flex-direction-property">https://drafts.csswg.org/css-flexbox/#flex-direction-property</a></li> -</ul> - -<div> -<pre class="brush: css">@mixin flex-direction($value: row) { - @if $value == row-reverse { - -webkit-box-direction: reverse; - -webkit-box-orient: horizontal; - -moz-box-direction: reverse; - -moz-box-orient: horizontal; - } @else if $value == column { - -webkit-box-direction: normal; - -webkit-box-orient: vertical; - -moz-box-direction: normal; - -moz-box-orient: vertical; - } @else if $value == column-reverse { - -webkit-box-direction: reverse; - -webkit-box-orient: vertical; - -moz-box-direction: reverse; - -moz-box-orient: vertical; - } @else { - -webkit-box-direction: normal; - -webkit-box-orient: horizontal; - -moz-box-direction: normal; - -moz-box-orient: horizontal; - } - -webkit-flex-direction: $value; - -ms-flex-direction: $value; - flex-direction: $value; -} - -// Shorter version: -@mixin flex-dir($args...) { @include flex-direction($args...); }</pre> -</div> - -<h3 id="Flexbox_wrap" name="Flexbox_wrap">フレックスボックスの折り返し</h3> - -<p>The {{cssxref("flex-wrap")}} property controls whether the flex container is single-lined or multi-lined and the direction of the cross-axis, which determines the direction in which the new lines are stacked in.</p> - -<ul> - <li>値: <code>nowrap</code> (default) | <code>wrap</code> | <code>wrap-reverse</code></li> - <li>Spec: <a href="https://drafts.csswg.org/css-flexbox/#flex-wrap-property">https://drafts.csswg.org/css-flexbox/#flex-wrap-property</a></li> -</ul> - -<div> -<pre class="brush: css">@mixin flex-wrap($value: nowrap) { - // No Webkit/FF Box fallback. - -webkit-flex-wrap: $value; - @if $value == nowrap { - -ms-flex-wrap: none; - } @else { - -ms-flex-wrap: $value; - } - flex-wrap: $value; -}</pre> -</div> - -<h3 id="Flexbox_flow_(shorthand)" name="Flexbox_flow_(shorthand)">フレックスボックスのフロー (一括指定)</h3> - -<p>The {{cssxref("flex-flow")}} property is shorthand for setting the <code>flex-direction</code> and <code>flex-wrap</code> properties, which together define the flex container's main and cross axes.</p> - -<ul> - <li>値: <code>row</code> (default) | <code>nowrap</code></li> - <li>Spec: <a href="https://drafts.csswg.org/css-flexbox/#flex-flow-property">https://drafts.csswg.org/css-flexbox/#flex-flow-property</a></li> -</ul> - -<div> -<pre class="brush: css">@mixin flex-flow($values: (row nowrap)) { - // No Webkit/FF Box fallback. - -webkit-flex-flow: $values; - -ms-flex-flow: $values; - flex-flow: $values; -}</pre> -</div> - -<h3 id="Flexbox_order" name="Flexbox_order">フレックスボックスの順序</h3> - -<p>The {{cssxref("order")}} property controls the order in which flex items appear within their flex container, by assigning them to ordinal groups.</p> - -<ul> - <li>Value: any integer (0 is the default)</li> - <li>Spec: <a href="https://drafts.csswg.org/css-flexbox/#order-property">https://drafts.csswg.org/css-flexbox/#order-property</a></li> -</ul> - -<div> -<pre class="brush: css">@mixin order($int: 0) { - -webkit-box-ordinal-group: $int + 1; - -moz-box-ordinal-group: $int + 1; - -webkit-order: $int; - -ms-flex-order: $int; - order: $int; -}</pre> -</div> - -<h3 id="Flexbox_grow" name="Flexbox_grow">フレックスボックスの伸長</h3> - -<p>The {{cssxref("flex-grow")}} property sets the flex grow factor. Negative numbers are invalid.</p> - -<ul> - <li>Value: any integer (0 is the default)</li> - <li>Spec: <a href="https://drafts.csswg.org/css-flexbox/#flex-grow-property">https://drafts.csswg.org/css-flexbox/#flex-grow-property</a></li> -</ul> - -<div> -<pre class="brush: css">@mixin flex-grow($int: 1) { - -webkit-box-flex: $int; - -moz-box-flex: $int; - -webkit-flex-grow: $int; - -ms-flex: $int; - flex-grow: $int; -}</pre> -</div> - -<h3 id="Flexbox_shrink" name="Flexbox_shrink">フレックスボックスの縮小</h3> - -<p>The {{cssxref("flex-shrink")}} property sets the flex shrink factor. Negative numbers are invalid.</p> - -<ul> - <li>Value: any integer (0 is the default)</li> - <li>Spec: <a href="https://drafts.csswg.org/css-flexbox/#flex-shrink-property">https://drafts.csswg.org/css-flexbox/#flex-shrink-property</a></li> -</ul> - -<div> -<pre class="brush: css">@mixin flex-shrink($int: 0) { - -webkit-flex-shrink: $int; - -moz-flex-shrink: $int; - -ms-flex: $int; - flex-shrink: $int; -}</pre> -</div> - -<h3 id="Flexbox_basis" name="Flexbox_basis">フレックスボックスの basis</h3> - -<p>The {{cssxref("flex-basis")}} property sets the flex basis. Negative lengths are invalid.</p> - -<ul> - <li>値: See the {{cssxref("flex-basis")}} reference (the default is<code> auto</code>)</li> - <li>Spec: <a href="https://drafts.csswg.org/css-flexbox/#flex-basis-property">https://drafts.csswg.org/css-flexbox/#flex-basis-property</a></li> -</ul> - -<div> -<pre class="brush: css">@mixin flex-basis($value: auto) { - -webkit-flex-basis: $value; - flex-basis: $value; -}</pre> -</div> - -<h3 id="Flexbox_flex_(shorthand)" name="Flexbox_flex_(shorthand)">フレックスボックスの "flex" (一括指定)</h3> - -<p>The {{cssxref("flex")}} property specifies the components of a flexible length; <code>flex-grow</code> factor, <code>flex-shrink</code> factor, and the <code>flex-basis</code>. When an element is a flex item, <code>flex</code> is consulted instead of the main size property to determine the main size of the element. If an element is not a flex item, <code>flex</code> has no effect.</p> - -<ul> - <li>値: See the {{cssxref("flex")}} reference for values and default</li> - <li>Spec: <a href="https://drafts.csswg.org/css-flexbox/#flex-property">https://drafts.csswg.org/css-flexbox/#flex-property</a></li> -</ul> - -<div> -<pre class="brush: css">@mixin flex($fg: 1, $fs: 0, $fb: auto) { - - // Set a variable to be used by box-flex properties - $fg-boxflex: $fg; - - // Box-Flex only supports a flex-grow value so lets grab the - // first item in the list and just return that. - @if type-of($fg) == 'list' { - $fg-boxflex: nth($fg, 1); - } - - -webkit-box: $fg-boxflex; - -moz-box: $fg-boxflex; - -webkit-flex: $fg $fs $fb; - -ms-flexbox: $fg $fs $fb; - flex: $fg $fs $fb; -}</pre> -</div> - -<h3 id="Flexbox_justify_content" name="Flexbox_justify_content">フレックスボックスのコンテンツの位置揃え</h3> - -<p>The {{cssxref("justify-content")}} property aligns flex items along the main axis of the current line of the flex container. This is done after any flexible lengths and any auto margins have been resolved. Typically, it helps to distribute extra free space leftover when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size. It also exerts some control over the alignment of items when they overflow the line.</p> - -<div class="note"> -<p><strong>Note</strong>: <code>space-*</code> values not supported in older syntaxes.</p> -</div> - -<ul> - <li>値: <code>flex-start</code> (default) | <code>flex-end</code> | <code>center</code> | <code>space-between</code> | <code>space-around</code></li> - <li>Spec: <a href="https://drafts.csswg.org/css-flexbox/#justify-content-property">https://drafts.csswg.org/css-flexbox/#justify-content-property</a></li> -</ul> - -<div> -<pre class="brush: css">@mixin justify-content($value: flex-start) { - @if $value == flex-start { - -webkit-box-pack: start; - -moz-box-pack: start; - -ms-flex-pack: start; - } @else if $value == flex-end { - -webkit-box-pack: end; - -moz-box-pack: end; - -ms-flex-pack: end; - } @else if $value == space-between { - -webkit-box-pack: justify; - -moz-box-pack: justify; - -ms-flex-pack: justify; - } @else if $value == space-around { - -ms-flex-pack: distribute; - } @else { - -webkit-box-pack: $value; - -moz-box-pack: $value; - -ms-flex-pack: $value; - } - -webkit-justify-content: $value; - justify-content: $value; -} - // Shorter version: - @mixin flex-just($args...) { @include justify-content($args...); }</pre> -</div> - -<h3 id="Flexbox_align_items" name="Flexbox_align_items">フレックスボックスの項目の配置</h3> - -<p>Flex items can be aligned in the cross axis of the current line of the flex container, similar to <code>justify-content</code> but in the perpendicular direction. {{cssxref("align-items")}} sets the default alignment for all of the flex container's items, including anonymous flex items. {{cssxref("align-self")}} allows this default alignment to be overridden for individual flex items. (For anonymous flex items, <code>align-self</code> always matches the value of <code>align-items</code> on their associated flex container.)</p> - -<ul> - <li>値: <code>flex-start</code> | <code>flex-end</code> | <code>center</code> | <code>baseline</code> | <code>stretch</code> (default)</li> - <li>Spec: <a href="https://drafts.csswg.org/css-flexbox/#align-items-property">https://drafts.csswg.org/css-flexbox/#align-items-property</a></li> -</ul> - -<div> -<pre class="brush: css">@mixin align-items($value: stretch) { - @if $value == flex-start { - -webkit-box-align: start; - -moz-box-align: start; - -ms-flex-align: start; - } @else if $value == flex-end { - -webkit-box-align: end; - -moz-box-align: end; - -ms-flex-align: end; - } @else { - -webkit-box-align: $value; - -moz-box-align: $value; - -ms-flex-align: $value; - } - -webkit-align-items: $value; - align-items: $value; -}</pre> -</div> - -<h3 id="Flexbox_align_self" name="Flexbox_align_self">フレックスボックスの自己配置</h3> - -<p>Values: <code>auto</code> (default) | <code>flex-start</code> | <code>flex-end</code> | <code>center</code> | <code>baseline</code> | <code>stretch</code></p> - -<p>Spec: <a href="https://drafts.csswg.org/css-flexbox/#align-items-property">https://drafts.csswg.org/css-flexbox/#align-items-property</a></p> - -<div> -<pre class="brush: css">@mixin align-self($value: auto) { - // No Webkit Box Fallback. - -webkit-align-self: $value; - @if $value == flex-start { - -ms-flex-item-align: start; - } @else if $value == flex-end { - -ms-flex-item-align: end; - } @else { - -ms-flex-item-align: $value; - } - align-self: $value; -}</pre> -</div> - -<h3 id="Flexbox_align_content" name="Flexbox_align_content">フレックスボックスのコンテンツの配置</h3> - -<p>The {{cssxref("align-content")}} property aligns a flex container's lines within the flex container when there is extra space in the cross-axis, similar to how <code>justify-content</code> aligns individual items within the main axis. Note that this property has no effect when the flexbox has only a single line.</p> - -<ul> - <li>値: <code>flex-start</code> | <code>flex-end</code> | <code>center</code> | <code>space-between</code> | <code>space-around</code> | <code>stretch</code> (default)</li> - <li>Spec: <a href="https://drafts.csswg.org/css-flexbox/#align-content-property">https://drafts.csswg.org/css-flexbox/#align-content-property</a></li> -</ul> - -<div> -<pre class="brush: css">@mixin align-content($value: stretch) { - // No Webkit Box Fallback. - -webkit-align-content: $value; - @if $value == flex-start { - -ms-flex-line-pack: start; - } @else if $value == flex-end { - -ms-flex-line-pack: end; - } @else { - -ms-flex-line-pack: $value; - } - align-content: $value; -}</pre> -</div> diff --git a/files/ja/web/css/css_flexible_box_layout/using_flexbox_to_lay_out_web_applications/index.html b/files/ja/web/css/css_flexible_box_layout/using_flexbox_to_lay_out_web_applications/index.html deleted file mode 100644 index 4458dddff2..0000000000 --- a/files/ja/web/css/css_flexible_box_layout/using_flexbox_to_lay_out_web_applications/index.html +++ /dev/null @@ -1,191 +0,0 @@ ---- -title: Web アプリケーションのレイアウトに flexbox を使用する -slug: Web/CSS/CSS_Flexible_Box_Layout/Using_flexbox_to_lay_out_web_applications -tags: - - Advanced - - CSS - - CSS Flexible Boxes - - Example - - Guide - - Web -translation_of: Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox -translation_of_original: Web/CSS/CSS_Flexible_Box_Layout/Using_flexbox_to_lay_out_web_applications ---- -<div>{{CSSRef}}</div> - -<p><a href="/ja/docs/Web/Guide/CSS/Flexible_boxes">flexbox</a> は、デスクトップからモバイルまで対応する Web アプリケーションのレイアウト設計で助けになります。浮動状態の {{HTMLElement("div")}} 要素、<a href="/ja/docs/Web/CSS/position#Absolute_positioning">絶対位置指定</a>、JavaScript による細工をなくして、数行の <a href="/ja/docs/Web/CSS">CSS</a> だけで水平方向または垂直方向のフローレイアウトを構築します。基本的な用途例を挙げます:</p> - -<ul> - <li>ページの中央に要素を置きたい場合。</li> - <li>コンテナを垂直方向へ次々に並べて配置したい場合。</li> - <li>スクリーンサイズが小さいときに垂直方向へ並べ替えられる、ボタンや要素の列を作成したい場合。</li> -</ul> - -<p>この記事では、接頭辞がない現行の標準仕様をサポートするブラウザで <em>flexbox</em> を使用する方法を扱います。古いブラウザ向けのベンダー接頭辞については、<a href="/ja/docs/Web/Guide/CSS/Flexible_boxes">CSS flexible box の使用に関する、より一般的なガイド</a>をご覧ください。</p> - -<h2 id="Basics" name="Basics">基本</h2> - -<p>任意の {{HTMLElement("div")}} 要素で {{cssxref("display")}} プロパティに <code>flex</code> を、また {{cssxref("flex-flow")}} に <code>row</code> (要素を水平に並べたい場合) または <code>column</code> (要素を垂直に並べたい場合) を設定すると、内部の要素を flexbox のフローにすることができます。水平方向の flexbox を使用していて内容物を垂直方向に折り返したい場合は、値 <code>wrap</code> も指定します。</p> - -<p>そして、flex フローの一部として組み込みたい要素に {{cssxref("flex")}} プロパティを指定します。通常、以下の 3 種類の値のいずれかを使用するでしょう:</p> - -<ul> - <li>ボタンなど、自身に割り当てられた幅を占有するだけの要素にしたい場合は、<code>flex: none</code> を使用します。この値は <code>0 0 auto</code> に展開されます。</li> - <li>要素のサイズを明示したい場合は、<code>flex: 0 0 <em>size</em></code> を使用します。例: <code>flex 0 0 60px</code></li> - <li>使用可能な領域を埋めるように拡張する要素にしたい、すなわちフロー内に同種の要素が複数ある場合は均等に領域を共有させたい場合は、<code>flex: auto</code> を使用します。この値は <code>1 1 auto</code> に展開されます。</li> -</ul> - -<p>もちろん他にも使用できる値はありますが、それらは基本的な使用方法を超えるものでしょう。これらの値がどのように適用されるかを、いくつかの例で見ていきましょう。</p> - -<h2 id="Centering_an_element_inside_a_page" name="Centering_an_element_inside_a_page">ページ内の中央に要素を配置する</h2> - -<p>このような使い方でもっとも簡単な方法は、2 つの flexible box を入れ子にすることです。それぞれの flexbox 内に要素が 3 つあります。そのうち 2 つが詰め物になって、残る要素が中央に置かれます。</p> - -<h3 id="CSS_Content" name="CSS_Content">CSS コンテンツ</h3> - -<pre class="brush: css;">.vertical-box { - display: flex; - height: 400px; - width: 400px; - flex-flow: column; -} -.horizontal-box { - display: flex; - flex-flow: row; -} -.spacer { - flex: auto; - background-color: black; -} -.centered-element { - flex: none; - background-color: white; -} -</pre> - -<h3 id="HTML_Content" name="HTML_Content">HTML コンテンツ</h3> - -<pre class="brush: html;"><div class="vertical-box"> - <div class="spacer"></div> - <div class="centered-element horizontal-box"> - <div class="spacer"></div> - <div class="centered-element">Centered content</div> - <div class="spacer"></div> - </div> - <div class="spacer"></div> -</div> -</pre> - -<h3 id="Result" name="Result">結果</h3> - -<p>{{EmbedLiveSample('Centering_an_element_inside_a_page', 500, 500)}}</p> - -<h2 id="Flowing_a_set_of_containers_vertically" name="Flowing_a_set_of_containers_vertically">複数のコンテナを垂直方向に並べる</h2> - -<p>ヘッダーセクション、コンテンツセクション、フッターセクションがあるレイアウトのページを思い浮かべてください。ヘッダーとフッターのサイズは固定しますが、コンテンツセクションは使用できる領域に応じてリサイズします。これはコンテンツセクションの {{cssxref("flex")}} プロパティを <code>auto</code> に、またヘッダーおよびフッターの {{cssxref("flex")}} プロパティを <code>none</code> にすることで実現できます。</p> - -<h3 id="CSS_Content_2" name="CSS_Content_2">CSS コンテンツ</h3> - -<pre class="brush: css;highlight:[8,14]">.vertical-box { - display: flex; - height: 400px; - width: 400px; - flex-flow: column; -} -.fixed-size { - flex: none; - height: 30px; - background-color: black; - text-align: center; -} -.flexible-size { - flex: auto; - background-color: white; -} -</pre> - -<h3 id="HTML_Content_2" name="HTML_Content_2">HTML コンテンツ</h3> - -<pre class="brush: html;"><div id="document" class="vertical-box"> - <div class="fixed-size"><button id="increase-size">Increase container size</button></div> - <div id="flexible-content" class="flexible-size"></div> - <div class="fixed-size"><button id="decrease-size">Decrease container size</button></div> -</div> -</pre> - -<h3 id="Javascript_Content" name="Javascript_Content">Javascript コンテンツ</h3> - -<pre class="brush: js;">var height = 400; -document.getElementById('increase-size').onclick=function() { - height += 10; - if (height > 500) height = 500; - document.getElementById('document').style.height = (height + "px"); -} - -document.getElementById('decrease-size').onclick=function() { - height -= 10; - if (height < 300) height = 300; - document.getElementById('document').style.height = (height + "px"); -}</pre> - -<h3 id="Result_2" name="Result_2">結果</h3> - -<p>{{EmbedLiveSample('Flowing_a_set_of_containers_vertically', 500, 500)}}</p> - -<p>この例はヘッダーのボタンをクリックするとサイズが拡大、フッターのボタンをクリックするとサイズが縮小するようになっています。ヘッダーやフッターのサイズを一定にしたままで、どのようにしてコンテンツセクションを自動的に適切なサイズに変えているかを確認してください。</p> - -<h2 id="Creating_a_collapsing_horizontal_container" name="Creating_a_collapsing_horizontal_container">折り返される水平方向のコンテナを作成する</h2> - -<p>スクリーンサイズに余裕があれば水平方向に情報一式を並べますが、そうでない場合は水平方向のレイアウトを崩したい場合があるかもしれません。これは、flexbox を使用すればとても簡単です。{{cssxref("flex-flow")}} プロパティに値 <code>wrap</code> を追加すると実現できます。</p> - -<h3 id="CSS_Content_3" name="CSS_Content_3">CSS コンテンツ</h3> - -<pre class="brush: css;highlight:[4]">.horizontal-container { - display: flex; - width: 300px; - flex-flow: row wrap; -} -.fixed-size { - flex: none; - width: 100px; - background-color: black; - color: white; - text-align: center; -} -</pre> - -<h3 id="HTML_Content_3" name="HTML_Content_3">HTML コンテンツ</h3> - -<pre class="brush: html;"><div id="container" class="horizontal-container"> - <div class="fixed-size">Element 1</div> - <div class="fixed-size">Element 2</div> - <div class="fixed-size">Element 3</div> -</div><button id="increase-size">Increase container size</button><button id="decrease-size">Decrease container size</button> -</pre> - -<h3 id="Javascript_Content_2" name="Javascript_Content_2">Javascript コンテンツ</h3> - -<pre class="brush: js;">var width = 300; - -document.getElementById('increase-size').onclick=function() { - width += 100; - if (width > 300) width = 300; - document.getElementById('container').style.width = (width + "px"); -} - -document.getElementById('decrease-size').onclick=function() { - width -= 100; - if (width < 100) width = 100; - document.getElementById('container').style.width = (width + "px"); -} -</pre> - -<h3 id="Result_3" name="Result_3">結果</h3> - -<p>{{EmbedLiveSample('Creating_a_collapsing_horizontal_container', 500, 200)}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/Web/Guide/CSS/Flexible_boxes">CSS flexible box の利用</a></li> -</ul> diff --git a/files/ja/web/css/css_transitions/using_css_transitions/index.html b/files/ja/web/css/css_transitions/using_css_transitions/index.html index d01fba6005..e1fcbc6e7e 100644 --- a/files/ja/web/css/css_transitions/using_css_transitions/index.html +++ b/files/ja/web/css/css_transitions/using_css_transitions/index.html @@ -44,7 +44,7 @@ translation_of: Web/CSS/CSS_Transitions/Using_CSS_transitions <div id="duration_0_5s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> <p><code>transition-duration: 0.5s</code></p> - <div style="display: none;"> + <div class="hidden"> <pre class="brush:html notranslate"> <div class="parent"> <div class="box">Lorem</div> </div> @@ -109,7 +109,7 @@ var intervalID = window.setInterval(updateTransition, 7000); <div id="duration_1s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> <p><code>transition-duration: 1s</code></p> - <div style="display: none;"> + <div class="hidden"> <pre class="brush:html notranslate"> <div class="parent"> <div class="box">Lorem</div> </div> @@ -174,7 +174,7 @@ var intervalID = window.setInterval(updateTransition, 7000); <div id="duration_2s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> <p><code>transition-duration: 2s</code></p> - <div style="display: none;"> + <div class="hidden"> <pre class="brush:html notranslate"> <div class="parent"> <div class="box">Lorem</div> </div> @@ -239,7 +239,7 @@ var intervalID = window.setInterval(updateTransition, 7000); <div id="duration_4s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> <p><code>transition-duration: 4s</code></p> - <div style="display: none;"> + <div class="hidden"> <pre class="brush:html notranslate"> <div class="parent"> <div class="box">Lorem</div> </div> @@ -308,7 +308,7 @@ var intervalID = window.setInterval(updateTransition, 7000); <div id="ttf_ease" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> <p><code>transition-timing-function: ease</code></p> - <div style="display: none;"> + <div class="hidden"> <pre class="brush:html notranslate"> <div class="parent"> <div class="box">Lorem</div> </div> @@ -371,7 +371,7 @@ var intervalID = window.setInterval(updateTransition, 7000); <div id="ttf_linear" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> <p><code>transition-timing-function: linear</code></p> - <div style="display: none;"> + <div class="hidden"> <pre class="brush:html notranslate"> <div class="parent"> <div class="box">Lorem</div> </div> @@ -434,7 +434,7 @@ var intervalID = window.setInterval(updateTransition, 7000); <div id="ttf_stepend" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> <p><code>transition-timing-function: step-end</code></p> - <div style="display: none;"> + <div class="hidden"> <pre class="brush:html notranslate"> <div class="parent"> <div class="box">Lorem</div> </div> @@ -497,7 +497,7 @@ var intervalID = window.setInterval(updateTransition, 7000); <div id="ttf_step4end" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> <p><code>transition-timing-function: steps(4, end)</code></p> - <div style="display: none;"> + <div class="hidden"> <pre class="brush:html notranslate"> <div class="parent"> <div class="box">Lorem</div> </div> @@ -564,7 +564,7 @@ var intervalID = window.setInterval(updateTransition, 7000); <div id="delay_0_5s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> <p><code>transition-delay: 0.5s</code></p> - <div style="display: none;"> + <div class="hidden"> <pre class="brush:html notranslate"> <div class="parent"> <div class="box">Lorem</div> </div> @@ -636,7 +636,7 @@ var intervalID = window.setInterval(updateTransition, 7000); <div id="delay_1s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> <p><code>transition-delay: 1s</code></p> - <div style="display: none;"> + <div class="hidden"> <pre class="brush:html notranslate"> <div class="parent"> <div class="box">Lorem</div> </div> @@ -708,7 +708,7 @@ var intervalID = window.setInterval(updateTransition, 7000); <div id="delay_2s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> <p><code>transition-delay: 2s</code></p> - <div style="display: none;"> + <div class="hidden"> <pre class="brush:html notranslate"> <div class="parent"> <div class="box">Lorem</div> </div> @@ -780,7 +780,7 @@ var intervalID = window.setInterval(updateTransition, 7000); <div id="delay_4s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> <p><code>transition-delay: 4s</code></p> - <div style="display: none;"> + <div class="hidden"> <pre class="brush:html notranslate"> <div class="parent"> <div class="box">Lorem</div> </div> diff --git a/files/ja/web/css/filter/index.html b/files/ja/web/css/filter/index.html index 5bb245abe5..1ec80548b3 100644 --- a/files/ja/web/css/filter/index.html +++ b/files/ja/web/css/filter/index.html @@ -116,7 +116,7 @@ img { <pre class="brush: css notranslate">filter: blur(5px) </pre> -<div id="blur_example" style="display: none;"> +<div id="blur_example" class="hidden"> <pre class="brush: html notranslate"> <table class="standard-table"> <thead> <tr> @@ -213,7 +213,7 @@ table.standard-table td { </filter> </svg></pre> -<div id="brightness_example" style="display: none;"> +<div id="brightness_example" class="hidden"> <pre class="brush: html notranslate"><table class="standard-table"> <thead> <tr> @@ -308,7 +308,7 @@ table.standard-table td { </svg> </pre> -<div id="contrast_example" style="display: none;"> +<div id="contrast_example" class="hidden"> <pre class="brush: html notranslate"><table class="standard-table"> <thead> <tr> @@ -415,7 +415,7 @@ table.standard-table td { </svg> </pre> -<div id="shadow_example" style="display: none;"> +<div id="shadow_example" class="hidden"> <pre class="brush: html notranslate"><table class="standard-table"> <thead> <tr> @@ -539,7 +539,7 @@ table.standard-table td { <pre class="brush: css notranslate">filter: grayscale(100%)</pre> -<div id="grayscale_example" style="display: none;"> +<div id="grayscale_example" class="hidden"> <pre class="brush: html notranslate"><table class="standard-table"> <thead> <tr> @@ -622,7 +622,7 @@ table.standard-table td { <pre class="brush: css notranslate">filter: hue-rotate(90deg)</pre> -<div id="huerotate_example" style="display: none;"> +<div id="huerotate_example" class="hidden"> <pre class="brush: html notranslate"><table class="standard-table"> <thead> <tr> @@ -708,7 +708,7 @@ table.standard-table td { <pre class="brush: css notranslate">filter: invert(100%)</pre> -<div id="invert_example" style="display: none;"> +<div id="invert_example" class="hidden"> <pre class="brush: html notranslate"><table class="standard-table"> <thead> <tr> @@ -791,7 +791,7 @@ table.standard-table td { <pre class="brush: css notranslate">filter: opacity(50%)</pre> -<div id="opacity_example" style="display: none;"> +<div id="opacity_example" class="hidden"> <pre class="brush: html notranslate"><table class="standard-table"> <thead> <tr> @@ -872,7 +872,7 @@ table.standard-table td { <pre class="brush: css notranslate">filter: saturate(200%)</pre> -<div id="saturate_example" style="display: none;"> +<div id="saturate_example" class="hidden"> <pre class="brush: html notranslate"><table class="standard-table"> <thead> <tr> @@ -952,7 +952,7 @@ table.standard-table td { <pre class="brush: css notranslate">filter: sepia(100%)</pre> -<div id="sepia_example" style="display: none;"> +<div id="sepia_example" class="hidden"> <pre class="brush: html notranslate"><table class="standard-table"> <thead> <tr> @@ -1035,7 +1035,7 @@ table.standard-table td { <pre class="brush: css notranslate">filter: contrast(175%) brightness(103%)</pre> -<div id="combination_example" style="display: none;"> +<div id="combination_example" class="hidden"> <pre class="brush: html notranslate"><table class="standard-table"> <thead> <tr> diff --git a/files/ja/web/css/index.html b/files/ja/web/css/index.html index 6af2d9450c..c6c3c04a15 100644 --- a/files/ja/web/css/index.html +++ b/files/ja/web/css/index.html @@ -17,56 +17,56 @@ translation_of: Web/CSS --- <div>{{CSSRef}}</div> -<p class="summary"><span class="seoSummary"><ruby><strong>カスケーディングスタイルシート</strong><rp> (</rp><rt>Cascading Style Sheets</rt><rp>)</rp></ruby> (<strong>CSS</strong>) は<a href="/ja/docs/Web/API/StyleSheet">スタイルシート</a>言語であり、 <a href="/ja/docs/Web/HTML" title="HyperText Markup Language">HTML</a> や <a href="/ja/docs/XML_introduction">XML</a> (方言である <a href="/ja/docs/Web/SVG">SVG</a>, <a href="/ja/docs/Web/MathML">MathML</a>, {{Glossary("XHTML")}} などを含む) で記述された文書の体裁や見栄えを表現するために用いられます。</span> CSS は、要素が画面上で (あるいは紙や音声といった別のメディア上で) どのように表現されるのかを定義します。</p> +<p class="summary"><span class="seoSummary"><ruby><strong>カスケーディングスタイルシート</strong><rp> (</rp><rt>Cascading Style Sheets</rt><rp>)</rp></ruby> (<strong>CSS</strong>) は<a href="/ja/docs/Web/API/StyleSheet">スタイルシート</a>言語であり、<a href="/ja/docs/Web/HTML" title="HyperText Markup Language">HTML</a> や <a href="/ja/docs/XML_introduction">XML</a> (方言である <a href="/ja/docs/Web/SVG">SVG</a>、<a href="/ja/docs/Web/MathML">MathML</a>、{{Glossary("XHTML")}} などを含む) で記述された文書の体裁や見栄えを表現するために用いられます。</span> CSS は、要素が画面上で (あるいは紙や音声といった別のメディア上で) どのように表現されるのかを定義します。</p> -<p>CSS は<strong>オープンウェブ</strong>の核となる言語に含まれ、 <a class="external" href="http://w3.org/Style/CSS/#specs">W3C 標準仕様</a>によってウェブブラウザー間で標準化されています。以前は CSS 仕様書の様々な部分が同時に開発されており、最新勧告の版数付けができていました。皆さんも CSS1, CSS2.1, CSS3 について聞いたことがあるでしょう。しかし、 CSS4 は公式なバージョンにはなっていません。</p> +<p>CSS は<strong>オープンウェブ</strong>の核となる言語に含まれ、<a class="external" href="http://w3.org/Style/CSS/#specs">W3C 標準仕様</a>によってウェブブラウザー間で標準化されています。以前は CSS 仕様書の様々な部分が同時に開発されており、最新勧告の版数付けができていました。皆さんも CSS1、CSS2.1、CSS3 について聞いたことがあるでしょう。しかし、CSS4 は公式なバージョンにはなっていません。</p> -<p>CSS3 以降、仕様の範囲が大幅に拡大し、 CSS モジュールごとに進捗状況が大きく異なるようになったため、<a href="https://www.w3.org/Style/CSS/current-work">モジュールごとに勧告を開発して公開する</a>ことがより効果的になりました。 W3C では、 CSS 仕様のバージョン管理の代わりに、<a href="https://www.w3.org/TR/css/">最新の CSS 仕様の安定した状態</a>のスナップショットを定期的に取得するようになりました。</p> +<p>CSS3 以降、仕様の範囲が大幅に拡大し、CSS モジュールごとに進捗状況が大きく異なるようになったため、<a href="https://www.w3.org/Style/CSS/current-work">モジュールごとに勧告を開発して公開する</a>ことがより効果的になりました。W3C では、CSS 仕様のバージョン管理の代わりに、<a href="https://www.w3.org/TR/css/">最新の CSS 仕様の安定した状態</a>のスナップショットを定期的に取得するようになりました。</p> <h2 id="Key_resources" name="Key_resources">主なリソース</h2> <dl> - <dt><span>CSS 入門</span></dt> - <dd>ウェブ開発が初めての人は、<a href="/ja/docs/Learn/Getting_started_with_the_web/CSS_basics">CSS の基本</a>の記事を読んで、 CSS とは何か、どのように使用するかを学習しましょう。</dd> - <dt><span>CSS チュートリアル</span></dt> + <dt>CSS 入門</dt> + <dd>ウェブ開発が初めての人は、<a href="/ja/docs/Learn/Getting_started_with_the_web/CSS_basics">CSS の基本</a>の記事を読んで、CSS とは何か、どのように使用するかを学習しましょう。</dd> + <dt>CSS チュートリアル</dt> <dd><a href="/ja/docs/Learn/CSS">CSS 学習エリア</a>は、初心者から中級者になるための、すべての基本事項を網羅した豊富なコンテンツがあります。</dd> - <dt><span>CSS リファレンス</span></dt> + <dt>CSS リファレンス</dt> <dd>CSS のすべてのプロパティや概念について記述された、熟練のウェブ開発者向けの <a href="/ja/docs/Web/CSS/Reference">CSS リファレンス</a>です。</dd> </dl> -<div class="in-page-callout webdev"> -<h3 id="Looking_to_become_a_front-end_web_developer" name="Looking_to_become_a_front-end_web_developer">フロントエンドウェブ開発者になるために</h3> +<div class="callout"> + <h4 id="Looking_to_become_a_front-end_web_developer" name="Looking_to_become_a_front-end_web_developer">フロントエンドウェブ開発者になるために + </h4> -<p>目標に向かって頑張るために必要な基本情報をまとめたコースを用意しました。</p> + <p>目標に向かって頑張るために必要な基本情報をまとめたコースを用意しました。 + </p> -<p><a class="cta primary" href="/docs/Learn/Front-end_web_developer">始めましょう</a></p> + <p><a class="button primary" href="/ja/docs/Learn/Front-end_web_developer">始めましょう</a> + </p> </div> -<div class="row topicpage-table"> -<div class="section"> <h2 class="Documentation" id="Tutorials" name="Tutorials">チュートリアル</h2> <p><a href="/ja/docs/Learn/CSS">CSS 学習エリア</a> は基礎から CSS を教える複数のモジュールにスポットを当てています — 事前の知識は必要ありません。</p> <dl> <dt><a href="/ja/docs/Learn/CSS/First_steps">CSS の第一歩</a></dt> - <dd>CSS (Cascading Style Sheets) はウェブページをスタイリングしたりレイアウトしたりするのに使われます — 例えば、文字、色、大きさを変えたり、コンテンツに余白を設けたり、複数列に分けたり、 あるいはアニメーションを加えたりなど様々な装飾機能があります。このモジュールでは CSS を習得するために、どう働くかの基本とともに、構文のありかたと HTML にスタイリングを加えることを簡単な始め方を提供します。</dd> + <dd>CSS (Cascading Style Sheets) はウェブページをスタイリングしたりレイアウトしたりするのに使われます — 例えば、文字、色、大きさを変えたり、コンテンツに余白を設けたり、複数列に分けたり、あるいはアニメーションを加えたりなど様々な装飾機能があります。このモジュールでは CSS を習得するために、どう働くかの基本とともに、構文のありかたと HTML にスタイリングを加えることを簡単な始め方を提供します。</dd> <dt><a href="/ja/docs/Learn/CSS/Building_blocks">CSS の構成要素</a></dt> <dd> - <p>このモジュールは <a href="/ja/docs/Learn/CSS/First_steps">CSS の第一歩</a>が終わったところを引き継いでいます。言語とその構文に慣れてきて、基本的な使用経験を積んだところで、もう少し深く掘り下げてみましょう。このモジュールでは、カスケードと継承、利用可能なすべてのセレクターのタイプ、単位、寸法の調整、背景や境界のスタイル付け、デバッグなど多くのことを見ていきます。</p> + <p class="summary">このモジュールは <a href="/ja/docs/Learn/CSS/First_steps">CSS の第一歩</a>が終わったところを引き継いでいます。言語とその構文に慣れてきて、基本的な使用経験を積んだところで、もう少し深く掘り下げてみましょう。このモジュールでは、カスケードと継承、利用可能なすべてのセレクターのタイプ、単位、寸法の調整、背景や境界のスタイル付け、デバッグなど多くのことを見ていきます。</p> - <p>ここでの目的は、<a href="/ja/docs/Learn/CSS/Styling_text">テキストの装飾</a>や<a href="/ja/docs/Learn/CSS/CSS_layout">CSS レイアウト</a>などのより具体的な分野に進む前に、適切な CSS を書くための手法を知り、すべての重要な理論を理解できるようになることです。</p> + <p class="summary">ここでの目的は、<a href="/ja/docs/Learn/CSS/Styling_text">テキストの装飾</a>や<a href="/ja/docs/Learn/CSS/CSS_layout">CSS レイアウト</a>などのより具体的な分野に進む前に、適切な CSS を書くための手法を知り、すべての重要な理論を理解できるようになることです。</p> </dd> <dt><a href="/ja/docs/Learn/CSS/Styling_text">テキストの装飾</a></dt> - <dd>CSS 言語の基本を習得したら、次に取り組むべき CSS のトピックはテキストの装飾です — これは、CSS で行う最も一般的なことの一つです。 ここでは、フォント、太字、イタリック体、ラインと文字の間隔、ドロップシャドウやその他のテキスト機能の設定を含む、テキストの装飾の基本を見ていきます。あなたのページにカスタムフォントを適用し、リストとリンクを装飾するところを見ることによって、このモジュールを締めくくります。</dd> + <dd>CSS 言語の基本を習得したら、次に取り組むべき CSS のトピックはテキストの装飾です — これは、CSS で行う最も一般的なことの一つです。ここでは、フォント、太字、イタリック体、ラインと文字の間隔、ドロップシャドウやその他のテキスト機能の設定を含む、テキストの装飾の基本を見ていきます。あなたのページにカスタムフォントを適用し、リストとリンクを装飾するところを見ることによって、このモジュールを締めくくります。</dd> <dt><a href="/ja/docs/Learn/CSS/CSS_layout">CSS レイアウト</a></dt> <dd>現段階で、すでに CSS の基本、テキストの装飾方法、コンテンツを格納するボックスの装飾方法と操作方法を見てきました。今度は、ビューポートからの相対でボックスを適切な場所に配置する方法、および互いの配置方法を検討します。必要な前提知識をカバーしているので、さまざまな表示の設定、フレックスボックス・CSS グリッド・位置指定などの最新のレイアウトツール、そしてまだ知っておきたいと思うかもしれない過去のテクニックのいくつかを見ながら、CSS レイアウトについて深く掘り下げることができます。</dd> <dt><a href="/ja/docs/Learn/CSS/Howto">CSS を使ってよくある問題を解決する</a></dt> <dd>このモジュールは、ウェブページを作成する際の一般的な問題を解決するための CSS の使用方法を説明するコンテンツの節へのリンクを提供しています。</dd> </dl> -</div> -<div class="section"> + <h2 class="Tools" id="Reference" name="Reference">リファレンス</h2> <ul> @@ -74,8 +74,8 @@ translation_of: Web/CSS <li>CSS の主要な概念: <ul> <li><a href="/ja/docs/Web/CSS/Syntax">言語の構文と書式</a></li> - <li><a href="/ja/docs/Web/CSS/Specificity">詳細度</a>と<a href="/ja/docs/Web/CSS/Inheritance">継承</a> と <a href="/ja/docs/Web/CSS/Cascade">カスケード</a></li> - <li><a href="/ja/docs/Web/CSS/CSS_Values_and_Units">CSS 単位と値</a> および <a href="/ja/docs/Web/CSS/CSS_Functions">関数記法</a></li> + <li><a href="/ja/docs/Web/CSS/Specificity">詳細度</a>と<a href="/ja/docs/Web/CSS/Inheritance">継承</a>と<a href="/ja/docs/Web/CSS/Cascade">カスケード</a></li> + <li><a href="/ja/docs/Web/CSS/CSS_Values_and_Units">CSS 単位と値</a>および<a href="/ja/docs/Web/CSS/CSS_Functions">関数記法</a></li> <li><a href="/ja/docs/Web/CSS/box_model">ボックスモデル</a>と<a href="/ja/docs/Web/CSS/margin_collapsing">マージンの相殺</a></li> <li><a href="/ja/docs/Web/CSS/Containing_block">包含ブロック</a></li> <li><a href="/ja/docs/Web/CSS/Understanding_z_index/The_stacking_context">重ね合わせ</a>と<a href="/ja/docs/Web/CSS/block_formatting_context">ブロック整形</a>コンテキスト</li> @@ -84,7 +84,7 @@ translation_of: Web/CSS <li><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout">CSS フレックスボックスレイアウト</a></li> <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout">CSS グリッドレイアウト</a></li> <li><a href="/ja/docs/Web/CSS/CSS_Selectors">CSS セレクター</a></li> - <li><a href="/ja/docs/Web/CSS/Media_Queries">メディアクエリ</a></li> + <li><a href="/ja/docs/Web/CSS/Media_Queries">メディアクエリー</a></li> <li><a href="/ja/docs/Web/CSS/animation">アニメーション</a></li> </ul> </li> @@ -99,7 +99,7 @@ translation_of: Web/CSS <ul> <li><a class="external" href="https://jigsaw.w3.org/css-validator/">W3C CSS Validation Service</a> は CSS が正しく書かれているかを判定するために利用できます。デバッグのために重宝するツールです。</li> <li><a href="/ja/docs/Tools">Firefox Developer Tools</a> は<a href="/ja/docs/Tools/Page_Inspector">インスペクター</a>と<a href="/ja/docs/Tools/Style_Editor">スタイルエディター</a>ツールを通じて、ページの CSS をライブでの閲覧や編集を可能にします。</li> - <li>Firefox の <a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/web-developer/">Web Developer 拡張機能</a>では、表示しているサイトをその場で追跡したり編集したりすることができます。</li> + <li>Firefox の <a class="link-https" href="https://addons.mozilla.org/ja/firefox/addon/web-developer/">Web Developer 拡張機能</a>では、表示しているサイトをその場で追跡したり編集したりすることができます。</li> <li>ウェブコミュニティは、利用できるその他の<a href="/ja/docs/Web/CSS/Tools">様々な CSS のためのツール</a>を開発しています。</li> </ul> @@ -108,15 +108,13 @@ translation_of: Web/CSS <ul> <li>Firefox: {{bug(1323667)}}</li> </ul> -</div> -</div> <h2 id="See_also" name="See_also">関連情報</h2> <ul> <li><a href="/ja/docs/Web/Demos_of_open_web_technologies#CSS">CSS デモ</a>: 最新の CSS テクノロジーの例を探索して想像力をかきたてましょう。</li> - <li>CSS がよく適用されるウェブ言語。 <a href="/ja/docs/Web/HTML">HTML</a>, <a href="/ja/docs/Web/SVG">SVG</a>, <a href="/ja/docs/Web/MathML">MathML</a>, {{Glossary("XHTML", "", 1)}}, <a href="/ja/docs/XML_introduction">XML</a></li> - <li>CSS を広範囲に利用する Mozilla のテクノロジー。<a href="/ja/docs/Mozilla/Tech/XUL">XUL</a>, <a href="/ja/docs/Mozilla/Firefox">Firefox</a>, <a href="/ja/docs/Mozilla/Thunderbird">Thunderbird</a> の <a href="/ja/docs/Mozilla/Add-ons">拡張機能</a> と <a href="/ja/docs/Mozilla/Add-ons/Themes">テーマ</a></li> + <li>CSS がよく適用されるウェブ言語。<a href="/ja/docs/Web/HTML">HTML</a>、<a href="/ja/docs/Web/SVG">SVG</a>、<a href="/ja/docs/Web/MathML">MathML</a>、{{Glossary("XHTML")}}、<a href="/ja/docs/XML_introduction">XML</a></li> + <li>CSS を広範囲に利用する Mozilla のテクノロジー。<a href="/ja/docs/Mozilla/Tech/XUL">XUL</a>、<a href="/ja/docs/Mozilla/Firefox">Firefox</a>、<a href="/ja/docs/Mozilla/Thunderbird">Thunderbird</a> の<a href="/ja/docs/Mozilla/Add-ons">拡張機能</a>と<a href="/ja/docs/Mozilla/Add-ons/Themes">テーマ</a></li> <li><a href="https://lists.mozilla.org/listinfo/dev-tech-layout">Mozilla メーリングリスト</a></li> - <li><a href="Stack Overflow|http://stackoverflow.com/questions/tagged/css">CSS に関する Stack Overflow の質問</a></li> + <li><a href="http://stackoverflow.com/questions/tagged/css">CSS に関する Stack Overflow の質問</a></li> </ul> diff --git a/files/ja/web/css/index/index.html b/files/ja/web/css/index/index.html deleted file mode 100644 index 20ef75d74b..0000000000 --- a/files/ja/web/css/index/index.html +++ /dev/null @@ -1,10 +0,0 @@ ---- -title: CSS 関連ドキュメントの索引 -slug: Web/CSS/Index -tags: - - CSS - - Index - - MDN Meta -translation_of: Web/CSS/Index ---- -<p>{{Index("/ja/docs/Web/CSS")}}</p> diff --git a/files/ja/web/css/max-height/index.html b/files/ja/web/css/max-height/index.html index 4d333dd365..0435b9a45a 100644 --- a/files/ja/web/css/max-height/index.html +++ b/files/ja/web/css/max-height/index.html @@ -54,7 +54,7 @@ max-height: unset; <dt><code>min-content</code></dt> <dd>内容物の最小の <code>max-height</code> です。</dd> <dt><code>fit-content({{cssxref("<length-percentage>")}})</code></dt> - <dd>利用可能な空白をして死された引数で置き換えた <code>fit-content</code> 式を使用します。すなわち、 <code>min(max-content, max(min-content, <var>引数</var>))</code> です。</dd> + <dd>利用可能な空白を指定された引数で置き換えた <code>fit-content</code> 式を使用します。すなわち、 <code>min(max-content, max(min-content, <var>引数</var>))</code> です。</dd> </dl> <h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> diff --git a/files/ja/web/css/media/index.html b/files/ja/web/css/media/index.html deleted file mode 100644 index 5bf2140f1d..0000000000 --- a/files/ja/web/css/media/index.html +++ /dev/null @@ -1,5 +0,0 @@ ---- -title: Media -slug: Web/CSS/Media ---- -{{wiki.localize('System.API.page-generated-for-subpage')}} diff --git a/files/ja/web/css/media/visual/index.html b/files/ja/web/css/media/visual/index.html deleted file mode 100644 index 87ca6f864c..0000000000 --- a/files/ja/web/css/media/visual/index.html +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: Visual -slug: Web/CSS/Media/Visual -tags: - - CSS - - CSS Reference - - MDC Project - - NeedsContent -translation_of: Web/CSS/@media -translation_of_original: Web/CSS/media/visual ---- -<div>{{ CSSRef() }}</div> -<p><a href="/ja/CSS" title="ja/CSS">CSS</a> 標準で定義された<a href="/ja/CSS/@media#Media_groups" title="ja/CSS/@media#Media_groups">メディアグループ</a>。</p> -<h2 id="英語版章題(See_also)_参照">{{ 英語版章題("See also") }}参照</h2> -<p><a class="external" href="http://www.w3.org/TR/CSS2/media.html" title="W3C Media Types Spec">W3C Media Types Spec</a></p> -<p><span class="comment">Interwiki Languages Links</span></p> -<div>{{ languages( { "en": "en/CSS/Media/Visual", "es": "es/CSS/Media/Visual", "fr": "fr/CSS/M\u00e9dia/Visuel", "pl": "pl/CSS/Media/Visual", "zh-cn": "cn/CSS/Media/Visual" } ) }}</div> diff --git a/files/ja/web/css/none/index.html b/files/ja/web/css/none/index.html deleted file mode 100644 index 562347725e..0000000000 --- a/files/ja/web/css/none/index.html +++ /dev/null @@ -1,32 +0,0 @@ ---- -title: none -slug: Web/CSS/none -tags: - - CSS - - CSS Reference -translation_of: Web/CSS/float -translation_of_original: Web/CSS/none ---- -<div> - {{CSSRef()}}</div> -<h2 id="Summary" name="Summary">概要</h2> -<p><strong><code>none</code></strong> キーワードは、多くの CSS プロパティで使用される共通の値です。デフォルト値であることが多いですが、そのプロパティの「標準値」を意味し、多くの場合は初期値となります。よく似た値として {{ Cssxref("normal") }} が有ります。</p> -<h2 id="Used_in" name="Used_in">none 値が使用可能な CSS プロパティ</h2> -<ul> - <li>{{ Cssxref("float") }}<br> - 要素はフロートしません。</li> - <li>{{ Cssxref("text-decoration") }}<br> - 要素の装飾を行いません。</li> - <li>{{ Cssxref("max-height") }} / {{ Cssxref("max-width") }}<br> - 高さ・幅を特定値で制限しません。</li> - <li>{{ Cssxref("background-image") }}</li> - <li>{{ Cssxref("border-style") }}</li> - <li>{{ Cssxref("clear") }}</li> - <li>{{ Cssxref("content") }}</li> - <li>{{ Cssxref("counter-increment") }}</li> - <li>{{ Cssxref("counter-reset") }}</li> - <li>{{ Cssxref("display") }}</li> - <li>{{ Cssxref("list-style-type") }}</li> - <li>{{ Cssxref("quotes") }}</li> - <li>{{ Cssxref("text-transform") }}</li> -</ul> diff --git a/files/ja/web/css/normal/index.html b/files/ja/web/css/normal/index.html deleted file mode 100644 index 4f1a3acf6b..0000000000 --- a/files/ja/web/css/normal/index.html +++ /dev/null @@ -1,37 +0,0 @@ ---- -title: normal -slug: Web/CSS/normal -tags: - - CSS Reference -translation_of: Web/CSS/font-variant -translation_of_original: Web/CSS/normal ---- -<div> - {{CSSRef}}</div> -<h2 id="Summary" name="Summary">概要</h2> -<p><strong><code>normal</code></strong> は幾つかの CSS プロパティで使用される一般的な値です。そのプロパティの「標準値」を意味し、多くの場合は初期値となります。よく似た値として {{Cssxref("none")}} が有ります。</p> -<h2 id="Used_in" name="Used_in">normal が使用可能な CSS プロパティ</h2> -<dl> - <dt> - {{Cssxref("font-weight")}}</dt> - <dd> - <code>normal</code> を指定した場合、font-weight プロパティの基準値（<code>400</code>）と同等となります。太字にも細字にもなりません。</dd> - <dt> - {{Cssxref("font-style")}}</dt> - <dd> - <code>normal</code> を指定した場合、italic や oblique でない、通常のスタイルで文字がレンダリングされます。</dd> - <dt> - {{Cssxref("word-spacing")}}</dt> - <dd> - <code>normal</code> を指定した場合、フォントの標準的な字間で文字がレンダリングされます。</dd> -</dl> -<p>他にも、以下の様なプロパティ等で <code>normal</code> が指定可能です。</p> -<ul> - <li>{{Cssxref("font-variant")}}</li> - <li>{{Cssxref("letter-spacing")}}</li> - <li>{{Cssxref("white-space")}}</li> - <li>{{Cssxref("speak")}}</li> - <li>{{Cssxref("unicode-bidi")}}</li> - <li>{{Cssxref("line-height")}}</li> - <li>{{Cssxref("content")}}</li> -</ul> diff --git a/files/ja/web/css/other_resources/index.html b/files/ja/web/css/other_resources/index.html deleted file mode 100644 index fe471649c2..0000000000 --- a/files/ja/web/css/other_resources/index.html +++ /dev/null @@ -1,28 +0,0 @@ ---- -title: Other Resources -slug: Web/CSS/Other_Resources -tags: - - CSS -translation_of: Web/CSS -translation_of_original: Web/CSS/Other_Resources ---- -<h2 id="W3C_Documents" name="W3C_Documents">W3C の文書</h2> -<ul> - <li><a class="external" href="http://www.w3.org/Style/CSS/">CSS メインページ</a></li> - <li><a class="external" href="http://www.w3.org/TR/REC-CSS2/">CSS2 仕様</a></li> - <li><a class="external" href="http://www.w3.org/TR/CSS21/">CSS 2.1 仕様</a></li> - <li><a class="external" href="http://www.w3.org/Stylesheets/Core/">W3C での基本スタイルシート</a></li> - <li><a class="external" href="http://www.w3.org/Style/CSS/Test/current/">CSS1 テストスイート</a></li> - <li><a class="external" href="http://www.w3.org/Style/CSS/Test/CSS2.1/current/">CSS2.1 テストスイート</a></li> -</ul> - - -<h2 id="Other_Resources" name="Other_Resources">その他の資料</h2> -<ul> - <li><a class="external" href="http://www.w3schools.com/css/">W3 Schools CSS tutorial pages</a></li> - <li><a class="external" href="http://gallery.theopalgroup.com/selectoracle/">SelectORacle</a></li> - <li><a class="external" href="http://www.westciv.com/style_master/house/">House of Style</a></li> - <li><a class="external" href="http://www.mako4css.com/">MaKo4CSS.com</a></li> - <li>css-discuss: <a class="external" href="http://archivist.incutio.com/css-discuss/">archives</a>, <a class="external" href="http://css-discuss.incutio.com/">wiki</a></li> - <li><a class="external" href="http://www.meyerweb.com/eric/css/edge/">css/edge</a></li> -</ul> diff --git a/files/ja/web/css/scaling_background_images/index.html b/files/ja/web/css/scaling_background_images/index.html deleted file mode 100644 index fa7ce58677..0000000000 --- a/files/ja/web/css/scaling_background_images/index.html +++ /dev/null @@ -1,103 +0,0 @@ ---- -title: 背景画像の拡大縮小 -slug: Web/CSS/Scaling_background_images -translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images -translation_of_original: Web/CSS/CSS_Background_and_Borders/Scaling_background_images ---- -<p>CSS の {{cssxref("background-size")}} プロパティによって、フルサイズの画像がタイル状に配置されるという既定の動作の代わりに、背景画像のサイズを調節することができるようになります。画像を望むように拡大または縮小することができます。</p> - -<h2 id="Tiling_a_large_image" name="Tiling_a_large_image">大きな画像をタイル状に配置する</h2> - -<p>1233 × 1233 の大きな Firefox のロゴ画像を考えてみましょう。 300 × 300 四方に、この画像の 4 つのコピーをタイル状に配置したい（ぞっとするほど悪いサイトデザインを含むいくつかの理由で）場合、結果としてこうなります。</p> - -<p><img alt="screenshot1.png" class="default internal" src="/@api/deki/files/4001/=screenshot1.png"></p> - -<p>これは以下の CSS を使うことで達成されます。</p> - -<pre class="brush: css; highlight:[8]">.square { - width: 300px; - height: 300px; - background-image: url(fxlogo.png); - border: solid 2px; - text-shadow: white 0px 0px 2px; - font-size: 16px; - background-size: 150px; -} -</pre> - -<p>もし、とても古いブラウザをターゲットにするのであれば、いくつかの接頭辞を付したバージョンを加えることを考えるかもしれませんが、もう {{cssxref("background-size")}} に接頭辞を付すことは必要ありません。</p> - -<h2 id="Stretching_an_image" name="Stretching_an_image">画像を引き伸ばす</h2> - -<p>以下のように、画像の水平方向と垂直方向の両方のサイズを記述することもできます。</p> - -<pre class="brush:css">background-size: 300px 150px; -</pre> - -<p>その結果はこのようになります。</p> - -<p><img alt="screenshot3.png" class="default internal" src="/@api/deki/files/4003/=screenshot3.png"></p> - -<h2 id="Scaling_an_image_up" name="Scaling_an_image_up">画像を拡大する</h2> - -<p>この範囲のもう 1 つの終端では、画像を背景の中で拡大することができます。 ここで、300 × 300 ピクセルに 16 × 16 ピクセルの favicon を拡大します。</p> - -<p><img alt="screenshot2.png" class="default internal" src="/@api/deki/files/4002/=screenshot2.png"></p> - -<pre class="brush: css; highlight:[5]">.square2 { - width: 300px; - height: 300px; - background-image: url(favicon.png); - background-size: 300px; - border: solid 2px; - text-shadow: white 0px 0px 2px; - font-size: 16px; -} -</pre> - -<p>ご覧のとおり、 CSS は実際には本質的に同一で、画像ファイル名は安全です。</p> - -<h2 id="Special_values.3A_.22contain.22_and_.22cover.22" name="Special_values.3A_.22contain.22_and_.22cover.22">特別な値の「contain」と「cover」</h2> - -<p>CSS の {{cssxref("background-size")}} には、 {{cssxref("<length>")}} の値の他に、 <code>contain</code> と <code>cover</code> の 2 つの特別なサイズの値が提示されています。これらについて見てみましょう。</p> - -<h3 id="contain" name="contain">contain</h3> - -<p>contain は、コンテナとなるボックスのサイズにかかわらず、背景画像は コンテナの対応する辺の長さを超えないように、可能な限り大きくなるようにそれぞれの辺を拡大縮小されるべきことを指定します。下記の実演中の例からこのことを確認するため、 Firefox 3.6 以降のような、背景画像の拡大縮小に対応したブラウザを使って、ウィンドウのサイズを変えてみて下さい。</p> - -<div style="width: 100%; height: 200px; border: solid 2px;"> -<p>このウィンドウのサイズを変えて、何が起こるかを見て下さい。</p> -</div> - -<p>上の例の CSS は以下のようなものです。</p> - -<pre class="brush: css; highlight:[4]">width: 100%; -height: 200px; -background-image: url(https://developer.mozilla.org/files/2917/fxlogo.png); -background-size: contain; -border: solid 2px; -</pre> - -<h3 id="cover" name="cover">cover</h3> - -<p>cover は、背景画像の両方の寸法が、コンテナの対応するサイズより大きくなる、または同じになることを確保しつつ、背景画像を可能な限り小さい大きさになるべきことを指定します。</p> - -<div style="width: 100%; height: 200px; border: solid 2px;"> -<p>このウィンドウのサイズを変えて、何が起こるかを見て下さい。</p> -</div> - -<p>この例では以下の CSS を使用しています。</p> - -<pre class="brush: css; highlight:[4]">width: 100%; -height: 200px; -background-image: url(https://developer.mozilla.org/files/2917/fxlogo.png); -background-size: cover; -border: solid 2px; -</pre> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{cssxref("background-size")}}</li> - <li>{{cssxref("background")}}</li> -</ul> diff --git a/files/ja/web/css/text-decoration-style/index.html b/files/ja/web/css/text-decoration-style/index.html index 5473f5af42..394ad6a371 100644 --- a/files/ja/web/css/text-decoration-style/index.html +++ b/files/ja/web/css/text-decoration-style/index.html @@ -60,7 +60,7 @@ text-decoration-style: unset; <h2 id="Examples" name="Examples">例</h2> -<pre class="brush: css" style="display: none;">.example { +<pre class="brush: css" class="hidden">.example { -moz-text-decoration-line: underline; -moz-text-decoration-style: wavy; -moz-text-decoration-color: red; diff --git a/files/ja/web/css/transition-delay/index.html b/files/ja/web/css/transition-delay/index.html index 9094d98eb4..3e47ffa76a 100644 --- a/files/ja/web/css/transition-delay/index.html +++ b/files/ja/web/css/transition-delay/index.html @@ -56,7 +56,7 @@ transition-delay: unset; <div id="delay_0_5s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> <p><code>transition-delay: 0.5s</code></p> -<div style="display: none;"> +<div class="hidden"> <pre class="brush:html"> <div class="parent"> <div class="box">Lorem</div> </div> @@ -123,7 +123,7 @@ var intervalID = window.setInterval(updateTransition, 7000); <div id="delay_1s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> <p><code>transition-delay: 1s</code></p> -<div style="display: none;"> +<div class="hidden"> <pre class="brush:html"> <div class="parent"> <div class="box">Lorem</div> </div> @@ -190,7 +190,7 @@ var intervalID = window.setInterval(updateTransition, 7000); <div id="delay_2s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> <p><code>transition-delay: 2s</code></p> -<div style="display: none;"> +<div class="hidden"> <pre class="brush:html"> <div class="parent"> <div class="box">Lorem</div> </div> @@ -257,7 +257,7 @@ var intervalID = window.setInterval(updateTransition, 7000); <div id="delay_4s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> <p><code>transition-delay: 4s</code></p> -<div style="display: none;"> +<div class="hidden"> <pre class="brush:html"> <div class="parent"> <div class="box">Lorem</div> </div> diff --git a/files/ja/web/css/transition-duration/index.html b/files/ja/web/css/transition-duration/index.html index c5bb4f0bbf..2aa297c4ee 100644 --- a/files/ja/web/css/transition-duration/index.html +++ b/files/ja/web/css/transition-duration/index.html @@ -54,7 +54,7 @@ transition-duration: unset; <div id="duration_0_5s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> <p><code>transition-duration: 0.5s</code></p> -<div style="display: none;"> +<div class="hidden"> <pre class="brush:html notranslate"> <div class="parent"> <div class="box">Lorem</div> </div> @@ -119,7 +119,7 @@ var intervalID = window.setInterval(updateTransition, 7000); <div id="duration_1s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> <p><code>transition-duration: 1s</code></p> -<div style="display: none;"> +<div class="hidden"> <pre class="brush:html notranslate"> <div class="parent"> <div class="box">Lorem</div> </div> @@ -184,7 +184,7 @@ var intervalID = window.setInterval(updateTransition, 7000); <div id="duration_2s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> <p><code>transition-duration: 2s</code></p> -<div style="display: none;"> +<div class="hidden"> <pre class="brush:html notranslate"> <div class="parent"> <div class="box">Lorem</div> </div> @@ -249,7 +249,7 @@ var intervalID = window.setInterval(updateTransition, 7000); <div id="duration_4s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> <p><code>transition-duration: 4s</code></p> -<div style="display: none;"> +<div class="hidden"> <pre class="brush:html notranslate"> <div class="parent"> <div class="box">Lorem</div> </div> diff --git a/files/ja/web/css/url/index.html b/files/ja/web/css/url/index.html deleted file mode 100644 index 2ca334be5a..0000000000 --- a/files/ja/web/css/url/index.html +++ /dev/null @@ -1,98 +0,0 @@ ---- -title: <url> -slug: Web/CSS/url -tags: - - CSS - - CSS データ型 - - Reference - - URI - - URL - - urn - - レイアウト -translation_of: Web/CSS/url() -translation_of_original: Web/CSS/url ---- -<div>{{CssRef}}</div> - -<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code><url></code></strong> <a href="/en-US/docs/Web/CSS/CSS_Types">データ型</a>は、画像やフォントなどのリソースへのポインターを記述します。 URL は {{Cssxref("background-image")}}, {{Cssxref("cursor")}}, {{cssxref("list-style")}} のような様々な CSS のプロパティで使用することができます。</p> - -<div class="note"> -<p><strong>URI か URL か？</strong> {{Glossary("URI")}} と {{Glossary("URL")}} との間には違いがあります。 URI は単純にリソースを識別します。 URL は URI の一種で、リソースの<em>場所</em>を記述します。 URI はリソースの URL または名前 ({{Glossary("URN")}}) であることがあります。</p> - -<p>CSS Level 1 では、 <code>url()</code> 関数記法は真に URL のみを記述していました。 CSS Level 2 では、 <code>url()</code> の定義はあらゆる URI、 URL または URN のどちらかを記述するように拡張されました。ややこしいことに、これは <code>url()</code> を CSS の <code><uri></code> データ型の生成のために使用することができることを意味していました。この変更は紛らわしいばかりでなく、議論になりやすく、 URN が実際の CSS で使用されることはほぼあり得ないため不必要でした。混乱を軽減するために、 CSS Level 3 ではより狭い初めの定義まで戻りました。現在では、 <code>url()</code> は真に <code><url></code> のみを記述します。</p> -</div> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<p><code><url></code> データ型は <code id="The_url()_functional_notation">url()</code> 関数表記を使用して指定します。引用符なしでも、単一引用符または二重引用符で囲んでも書くことができます。相対 URL も使用することができ、そのスタイルシートの URL からの相対になります (ウェブページの URL ではありません)。</p> - -<pre class="syntaxbox"><a_css_property>: url("http://mysite.example.com/mycursor.png") -<a_css_property>: url('http://mysite.example.com/mycursor.png') -<a_css_property>: url(http://mysite.example.com/mycursor.png) -</pre> - -<div class="note"> -<p><strong>メモ:</strong> Firefox 15以降、 0x7e より大きな制御文字は、引用符で囲まない URL では許可されなくなりました。詳細は {{Bug(752230)}} をご覧ください。</p> -</div> - -<h2 id="Examples" name="Examples">例</h2> - -<pre class="brush: css">.topbanner { - background: url("topbanner.png") #00D no-repeat fixed; -} -</pre> - -<pre class="brush: css">ul { - list-style: square url(http://www.example.com/redball.png); -} -</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 Values', '#urls', '<url>')}}</td> - <td>{{Spec2('CSS4 Values')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('CSS3 Values', '#urls', '<url>')}}</td> - <td>{{Spec2('CSS3 Values')}}</td> - <td>CSS Level 2 (Revision 1) から重要な変更なし</td> - </tr> - <tr> - <td>{{Specname('CSS2.1', 'syndata.html#uri', '<uri>')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td>CSS Level 1 から重要な変更なし</td> - </tr> - <tr> - <td>{{SpecName('CSS1', '#url', '<url>')}}</td> - <td>{{Spec2('CSS1')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> - -<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> - -<div>{{Compat("css.types.url")}}</div> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{cssxref("<gradient>")}}</li> - <li>{{cssxref("element()")}}</li> - <li>{{cssxref("_image","image()")}}</li> - <li>{{cssxref("image-set","image-set()")}}</li> - <li>{{cssxref("cross-fade")}}</li> -</ul> diff --git a/files/ja/web/css/using_css_custom_properties/index.html b/files/ja/web/css/using_css_custom_properties/index.html index 0008b66d3e..6571a2ed14 100644 --- a/files/ja/web/css/using_css_custom_properties/index.html +++ b/files/ja/web/css/using_css_custom_properties/index.html @@ -145,7 +145,7 @@ translation_of: Web/CSS/Using_CSS_custom_properties } </pre> -<div style="display: none;"> +<div class="hidden"> <pre class="brush:html"><div> <div class="one"></div> <div class="two">Text <span class="five">- more text</span></div> |