diff options
Diffstat (limited to 'files/ja/web/css')
| -rw-r--r-- | files/ja/web/css/caret-color/index.html | 97 | ||||
| -rw-r--r-- | files/ja/web/css/column-rule/index.html | 76 |
2 files changed, 79 insertions, 94 deletions
diff --git a/files/ja/web/css/caret-color/index.html b/files/ja/web/css/caret-color/index.html index 531e02d875..13be6a4506 100644 --- a/files/ja/web/css/caret-color/index.html +++ b/files/ja/web/css/caret-color/index.html @@ -3,68 +3,81 @@ title: caret-color slug: Web/CSS/caret-color tags: - CSS - - CSS プロパティ - - CSS 基本ユーザーインターフェイス - - HTML 整形 - - HTML 色 + - CSS Property + - CSS User Interface + - Editing + - HTML Colors + - Input - Reference + - Styling HTML + - Text Editing + - caret + - caret-color - contenteditable - - テキスト編集 - - 入力 - - 編集 + - 'recipe:css-property' +browser-compat: css.properties.caret-color translation_of: Web/CSS/caret-color --- <div>{{CSSRef}}</div> -<p><span class="seoSummary">CSS の <strong><code>caret-color</code></strong> プロパティは、 {{HTMLElement("input")}} または {{htmlattrxref("contenteditable")}} 属性のついた要素などの中ので、次に入力された文字が挿入される位置を示す視覚的なマーカーである入力キャレットの色を設定します。</span>キャレットは {{HTMLElement("input")}} 要素や {{htmlattrxref("contenteditable")}} 属性が付いた要素に現れます。ふつうキャレットは細い垂直線で、気づきやすくなるように点滅します。既定では黒ですが、このプロパティで色を変更することができます。</p> +<p><strong><code>caret-color</code></strong> は CSS のプロパティで、次に入力された文字が挿入される位置を示す可視マーカーである<strong>入力キャレット</strong>の色を設定します。これは<strong>テキスト入力カーソル</strong>と呼ばれることもあります。キャレットは {{HTMLElement("input")}} または {{htmlattrxref("contenteditable")}} 属性のついた要素などの中に現れます。ふつうキャレットは細い垂直線で、気づきやすくなるように点滅します。既定では黒ですが、このプロパティで色を変更することができます。</p> <div>{{EmbedInteractiveExample("pages/css/caret-color.html")}}</div> -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> - <p>なお、入力キャレットはキャレットのうちの一種類にすぎません。例えば、多くのブラウザーには「ナビゲーションキャレット」があり、入力キャレットと同様に動きますが、編集できないテキストの中を移動できるものがあります。一方、マウスカーソルが、 {{cssxref("cursor")}} プロパティが <code>auto</code> のときにテキスト上に移動した場合や、 <code>cursor</code> プロパティが <code>text</code> または <code>vertical-text</code> の場合に、キャレットのように見えることがありますが、キャレットではありません (カーソルです)。</p> -<h2 id="Syntax" name="Syntax">構文</h2> +<h2 id="Syntax">構文</h2> <pre class="brush: css no-line-numbers">/* キーワード値 */ caret-color: auto; caret-color: transparent; -caret-color: currentColor; +caret-color: currentcolor; /* <color> 値 */ caret-color: red; caret-color: #5729e9; caret-color: rgb(0, 200, 0); caret-color: hsla(228, 4%, 24%, 0.8); -</pre> -<h3 id="Values" name="Values">値</h3> +/* グローバル値 */ +caret-color: inherit; +caret-color: initial; +caret-color: revert; +caret-color: unset;</pre> + +<h3 id="Values">値</h3> <dl> <dt><code>auto</code></dt> - <dd>ユーザーエージェントはキャレットの適切な色を選択します。これは一般的に {{cssxref("<color>","currentcolor","#currentcolor_keyword")}} ですが、ユーザーエージェントは視認性や周囲のコンテンツとのコントラストを高めるために、 <code>currentcolor</code>、背景色、影の色、その他の要因を考慮して、別な色を選択することがあります。 + <dd>ユーザーエージェントはキャレットの適切な色を選択します。これは一般的に {{cssxref("<color>","currentcolor","#currentcolor_keyword")}} ですが、視認性や周囲のコンテンツとのコントラストを高めるために、ユーザーエージェントが <code>currentcolor</code>、背景色、影の色、その他の要因を考慮して、別な色を選択することがあります。 <div class="note"> - <p><strong>メモ:</strong> ユーザーエージェントは <code>auto</code> の値に <code>currentcolor</code> (通常はアニメーション可能) を使用することがありますが、 <code>auto</code> はトランジションやアニメーションで補完されません。</p> + <p><strong>メモ:</strong> ユーザーエージェントは <code>auto</code> の値に <code>currentcolor</code> (通常はアニメーション可能) を使用することがありますが、 <code>auto</code> はトランジションやアニメーションでは補完されません。</p> </div> </dd> <dt>{{cssxref("<color>")}}</dt> <dd>キャレットの色です。</dd> </dl> -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> +<h2 id="Formal_definition">公式定義</h2> + +<p>{{cssinfo}}</p> + +<h2 id="Formal_syntax">形式文法</h2> {{csssyntax}} -<h2 id="Example" name="Example">例</h2> +<h2 id="Example">例</h2> -<h3 id="HTML">HTML</h3> +<h3 id="Setting_a_custom_caret_color">独自のキャレット色の設定</h3> -<pre class="brush: html"><input value="この入力欄は既定のキャレットを使用します。" size="64"/> -<input class="custom" value="キャレットが独自の色です！" size="64"/> +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><input value="このフィールドは既定のキャレットを使用します。" size="64"/> +<input class="custom" value="キャレットが独自の色になります！" size="64"/> <p contenteditable class="custom">この段落は編集可能であり、 同様にキャレットが独自の色です！</p></pre> -<h3 id="CSS">CSS</h3> +<h4 id="CSS">CSS</h4> <pre class="brush: css">input { caret-color: auto; @@ -76,47 +89,29 @@ input.custom { caret-color: red; } - p.custom { caret-color: green; }</pre> -<h3 id="結果">結果</h3> - -<p>{{EmbedLiveSample('Example', 500, 200)}}</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS3 UI", "#propdef-caret-color", "caret-color")}}</td> - <td>{{Spec2("CSS3 UI")}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> +<h4 id="Result">結果</h4> -<p>{{cssinfo}}</p> +<p>{{EmbedLiveSample('Setting_a_custom_caret_color', 500, 200)}}</p> + +<h2 id="Specifications">仕様書</h2> + +{{Specifications}} -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> +<h2 id="Browser_compatibility">ブラウザーの互換性</h2> -<p>{{Compat("css.properties.caret-color")}}</p> +<p>{{Compat}}</p> -<h2 id="See_also" name="See_also">関連情報</h2> +<h2 id="See_also">関連情報</h2> <ul> <li>{{HTMLElement("input")}} 要素</li> <li>要素のテキストを編集可能にする HTML の {{htmlattrxref("contenteditable")}} 属性</li> - <li><a href="/ja/docs/Web/Guide/HTML/Editable_content">Making content editable</a></li> - <li><a href="/ja/docs/Web/HTML/Applying_color">Applying color to HTML elements using CSS</a></li> + <li><a href="/ja/docs/Web/Guide/HTML/Editable_content">内容を編集可能にする</a></li> + <li><a href="/ja/docs/Web/HTML/Applying_color">CSS を使用した HTML 要素への色の適用</a></li> <li>{{cssxref("<color>")}} データ型</li> <li>その他の色に関するプロパティ: {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}}, {{cssxref("column-rule-color")}}</li> </ul> diff --git a/files/ja/web/css/column-rule/index.html b/files/ja/web/css/column-rule/index.html index cc1879d559..768c36a8d8 100644 --- a/files/ja/web/css/column-rule/index.html +++ b/files/ja/web/css/column-rule/index.html @@ -3,16 +3,11 @@ title: column-rule slug: Web/CSS/column-rule tags: - CSS + - CSS Multi-column Layout - CSS Property - - CSS プロパティ - - CSS 段組みレイアウト - - column-rule - - column-rule-color - - column-rule-style - - column-rule-width - - リファレンス - - 一括指定プロパティ - - 段組み + - Reference + - 'recipe:css-property' +browser-compat: css.properties.column-rule translation_of: Web/CSS/column-rule --- <div>{{CSSRef}}</div> @@ -21,15 +16,13 @@ translation_of: Web/CSS/column-rule <div>{{EmbedInteractiveExample("pages/css/column-rule.html")}}</div> -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> - <p>これは<a href="/ja/docs/Web/CSS/Shorthand_properties">一括指定プロパティ</a>であり、一回の便利な宣言で個別の <code>column-rule-*</code> プロパティ ({{Cssxref("column-rule-width")}}, {{Cssxref("column-rule-style")}}, {{Cssxref("column-rule-color")}}) を設定できます。</p> <div class="note"> <p><strong>メモ:</strong> 他の一括指定プロパティと同様に、指定されなかった個別の値は初期値が設定されます (以前に個別指定プロパティを使用して設定された値を上書きする可能性があります)。</p> </div> -<h2 id="Syntax" name="Syntax">構文</h2> +<h2 id="Syntax">構文</h2> <pre class="brush:css no-line-numbers">column-rule: dotted; column-rule: solid 8px; @@ -39,43 +32,48 @@ column-rule: thick inset blue; /* グローバル値 */ column-rule: inherit; column-rule: initial; +column-rule: revert; column-rule: unset; </pre> -<p><code>column-rule</code> プロパティは、以下に挙げる値のうち1から3つを任意の順序で指定します。</p> +<p><code>column-rule</code> プロパティは、以下に挙げる値のうち 1 ～ 3 個を任意の順序で指定します。</p> -<h3 id="Values" name="Values">値</h3> +<h3 id="Values">値</h3> <dl> <dt><code><'column-rule-width'></code></dt> - <dd>{{cssxref("<length>")}} または3つのキーワード、 <code>thin</code>, <code>medium</code>, <code>thick</code> のうちの1つです。詳しくは {{cssxref("border-width")}} を参照してください。</dd> + <dd>{{cssxref("<length>")}} または 3 つのキーワード、 <code>thin</code>、<code>medium</code>、<code>thick</code> のうちの 1 つです。詳しくは {{cssxref("border-width")}} を参照してください。</dd> <dt><code><'column-rule-style'></code></dt> <dd>有効な値と詳細は {{cssxref("border-style")}} を参照してください。</dd> <dt><code><'column-rule-color'></code></dt> <dd>{{cssxref("<color>")}} 値です。</dd> </dl> -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> +<h2 id="Formal_definition">公式定義</h2> + +<p>{{cssinfo}}</p> + +<h2 id="Formal_syntax">形式文法</h2> {{csssyntax}} -<h2 id="Examples" name="Examples">例</h2> +<h2 id="Examples">例</h2> -<h3 id="Example_1" name="Example_1">例1</h3> +<h3 id="Example_1">例 1</h3> -<pre class="brush: css">/* "medium dotted currentColor" と同じ */ +<pre class="brush: css">/* "medium dotted currentcolor" と同じ */ p.foo { column-rule: dotted; } /* "medium solid blue" と同じ */ p.bar { column-rule: solid blue; } -/* "8px solid currentColor" と同じ */ +/* "8px solid currentcolor" と同じ */ p.baz { column-rule: solid 8px; } p.abc { column-rule: thick inset blue; } </pre> -<h3 id="Example_2" name="Example_2">例2</h3> +<h3 id="Example_2">例 2</h3> <h4 id="HTML">HTML</h4> @@ -97,31 +95,23 @@ p.abc { column-rule: thick inset blue; } } </pre> -<h4 id="Result" name="Result">結果</h4> +<h4 id="Result">結果</h4> <p>{{EmbedLiveSample('Example_2')}}</p> -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Multicol', '#column-rule', 'column-rule')}}</td> - <td>{{Spec2('CSS3 Multicol')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> +<h2 id="Specifications">仕様書</h2> -<p>{{cssinfo}}</p> +{{Specifications}} + +<h2 id="Browser_compatibility">ブラウザーの互換性</h2> + +<p>{{Compat}}</p> -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> +<h2 id="See_also">関連情報</h2> -<p>{{Compat("css.properties.column-rule")}}</p> +<ul> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">段組みレイアウト</a></li> + <li>{{CSSXref("column-rule-style")}}</li> + <li>{{CSSXref("column-rule-width")}}</li> + <li>{{CSSXref("column-rule-color")}}</li> +</ul> |