diff options
| -rw-r--r-- | files/ja/web/css/_doublecolon_first-letter/index.md | 198 |
1 files changed, 83 insertions, 115 deletions
diff --git a/files/ja/web/css/_doublecolon_first-letter/index.md b/files/ja/web/css/_doublecolon_first-letter/index.md index f08af09373..0a5b5e46d8 100644 --- a/files/ja/web/css/_doublecolon_first-letter/index.md +++ b/files/ja/web/css/_doublecolon_first-letter/index.md @@ -1,70 +1,72 @@ --- title: '::first-letter (:first-letter)' -slug: 'Web/CSS/::first-letter' +slug: Web/CSS/::first-letter tags: - CSS - - Layout - - Pseudo-element - - Reference - - Selector -translation_of: 'Web/CSS/::first-letter' + - レイアウト + - 擬似要素 + - リファレンス + - セレクター +browser-compat: css.selectors.first-letter +translation_of: Web/CSS/::first-letter --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><strong><code>::first-letter</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/Pseudo-elements">擬似要素</a>で、<a href="/ja/docs/Web/CSS/Visual_formatting_model#Block-level_elements_and_block_boxes">ブロックレベル要素</a>の最初の行の最初の文字にスタイルを適用します。ただし、最初の文字より前に他のコンテンツ (画像やインラインテーブルなど) がないときに限ります。</p> +**`::first-letter`** は [CSS](/ja/docs/Web/CSS) の[擬似要素](/ja/docs/Web/CSS/Pseudo-elements)で、[ブロックレベル要素](/ja/docs/Web/CSS/Visual_formatting_model#block-level_elements_and_block_boxes)の最初の行の最初の文字にスタイルを適用します。ただし、最初の文字より前に他のコンテンツ (画像やインラインテーブルなど) がないときに限ります。 -<pre class="brush: css no-line-numbers notranslate">/* <p> の最初の文字を選択します */ +```css +/* <p> の最初の文字を選択します */ p::first-letter { font-size: 130%; -}</pre> +} +``` -<p>要素の最初の文字は、常に単純に識別できるとは限りません。</p> +要素の最初の文字は、常に単純に識別できるとは限りません。 -<ul> - <li>最初の文字のすぐ前後にある区切り文字 (punctuation) も範囲に含まれます。区切り文字とは、 Unicode の <em>open</em> (Ps)、<em>close</em> (Pe)、<em>initial quote</em> (Pi)、 <em>final quote</em> (Pf)<em>、 other punctuation</em> (Po) の各クラスで定義されているすべての文字です。</li> - <li>言語によっては常に一緒に大文字化される連字があります。例えばオランダ語の <code>IJ</code> などです。この場合、連字の両方の文字が <code>::first-letter</code> 擬似要素で選択されます (これについてのブラウザーの互換性はあまりありません。<a href="/ja/docs/Web/CSS/::first-letter#Browser_compatibility">ブラウザーの互換性</a>をご覧ください)。</li> - <li>{{ cssxref("::before") }} 擬似要素及び {{ cssxref("content") }} プロパティの組み合わせにより、要素の先頭にテキストが挿入されることがあります。この場合、 <code>::first-letter</code> は生成されたこのコンテンツの最初の文字に一致します。</li> -</ul> +- 最初の文字のすぐ前後にある記号 (punctuation) も範囲に含まれます。記号とは、 Unicode の _open_ (Ps), _close_ (Pe), _initial quote_ (Pi), _final quote_ (Pf), and _other punctuation_ (Po) の各クラスで定義されているすべての文字です。 +- 言語によっては常に一緒に大文字化される連字があります。例えばオランダ語の `IJ` などです。この場合、連字の両方の文字が `::first-letter` 擬似要素で選択されます。 +- {{ cssxref("::before") }} 擬似要素と {{ cssxref("content") }} プロパティの組み合わせにより、要素の先頭にテキストが挿入されることがあります。この場合、 `::first-letter` は生成されたこのコンテンツの最初の文字に一致します。 -<div class="note"> -<p>CSS3 では<a href="/ja/docs/Web/CSS/Pseudo-classes">擬似クラス</a>と<a href="/ja/docs/Web/CSS/Pseudo-elements">擬似要素</a>を見分けやすくするために、 <code>::first-letter</code> の表記法（二重コロン付き）が導入されました。ブラウザーでは CSS2 で導入された <code>:first-letter</code> も使用できます。</p> -</div> +> **Note:** CSS3 では[擬似クラス](/ja/docs/Web/CSS/Pseudo-classes)と[擬似要素](/ja/docs/Web/CSS/Pseudo-elements)を見分けやすくするために、 `::first-letter` の表記法（二重コロン付き）が導入されました。ブラウザーでは CSS2 で導入された `:first-letter` も使用できます。 +> +> オランダ語の `IJ` のような連字に対するブラウザーの対応は貧弱です。下記の互換性一覧表で、現在の対応状況を確認してください。 -<h2 id="Allowable_properties" name="Allowable_properties">利用可能なプロパティ</h2> +## 利用可能なプロパティ -<p><code>::first-letter</code> 擬似要素では、一部の CSS プロパティのみが利用できます。</p> +`::first-letter` 擬似要素では、一部の CSS プロパティのみが利用できます。 -<ul> - <li>フォントの全プロパティ : {{ Cssxref("font") }}, {{ Cssxref("font-style") }}, {{cssxref("font-feature-settings")}}, {{cssxref("font-kerning")}}, {{cssxref("font-language-override")}}, {{cssxref("font-stretch")}}, {{cssxref("font-synthesis")}}, {{ Cssxref("font-variant") }}, {{cssxref("font-variant-alternates")}}, {{cssxref("font-variant-caps")}}, {{cssxref("font-variant-east-asian")}}, {{cssxref("font-variant-ligatures")}}, {{cssxref("font-variant-numeric")}}, {{cssxref("font-variant-position")}}, {{ Cssxref("font-weight") }}, {{ Cssxref("font-size") }}, {{cssxref("font-size-adjust")}}, {{ Cssxref("line-height") }} and {{ Cssxref("font-family") }}</li> - <li>背景の全プロパティ : {{ Cssxref("background") }}, {{ Cssxref("background-color") }}, {{ Cssxref("background-image") }}, {{cssxref("background-clip")}}, {{cssxref("background-origin")}}, {{ Cssxref("background-position") }}, {{ Cssxref("background-repeat") }}, {{ cssxref("background-size") }}, {{ Cssxref("background-attachment") }}, and {{cssxref("background-blend-mode")}}</li> - <li>マージンの全プロパティ: {{ Cssxref("margin") }}, {{ Cssxref("margin-top") }}, {{ Cssxref("margin-right") }}, {{ Cssxref("margin-bottom") }}, {{ Cssxref("margin-left") }}</li> - <li>パディングの全プロパティ: {{ Cssxref("padding") }}, {{ Cssxref("padding-top") }}, {{ Cssxref("padding-right") }}, {{ Cssxref("padding-bottom") }}, {{ Cssxref("padding-left") }}</li> - <li>境界線の全プロパティ: 一括指定プロパティである {{ Cssxref("border") }}, {{ Cssxref("border-style") }}, {{ Cssxref("border-color") }}, {{ cssxref("border-width") }}, {{ cssxref("border-radius") }}, {{cssxref("border-image")}}, および個別指定プロパティ</li> - <li>{{ cssxref("color") }} プロパティ</li> - <li>The {{ cssxref("text-decoration") }}, {{cssxref("text-shadow")}}, {{ cssxref("text-transform") }}, {{ cssxref("letter-spacing") }}, {{ cssxref("word-spacing") }} (when appropriate), {{ cssxref("line-height") }}, {{cssxref("text-decoration-color")}}, {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-style")}}, {{cssxref("box-shadow")}}, {{ cssxref("float") }}, {{ cssxref("vertical-align") }} （<code>float</code> が <code>none</code> の場合のみ） の CSS プロパティ</li> -</ul> +- フォントの全プロパティ: {{ Cssxref("font") }}, {{ Cssxref("font-style") }}, {{cssxref("font-feature-settings")}}, {{cssxref("font-kerning")}}, {{cssxref("font-language-override")}}, {{cssxref("font-stretch")}}, {{cssxref("font-synthesis")}}, {{ Cssxref("font-variant") }}, {{cssxref("font-variant-alternates")}}, {{cssxref("font-variant-caps")}}, {{cssxref("font-variant-east-asian")}}, {{cssxref("font-variant-ligatures")}}, {{cssxref("font-variant-numeric")}}, {{cssxref("font-variant-position")}}, {{ Cssxref("font-weight") }}, {{ Cssxref("font-size") }}, {{cssxref("font-size-adjust")}}, {{ Cssxref("line-height") }} and {{ Cssxref("font-family") }} +- 背景の全プロパティ: {{ Cssxref("background") }}, {{ Cssxref("background-color") }}, {{ Cssxref("background-image") }}, {{cssxref("background-clip")}}, {{cssxref("background-origin")}}, {{ Cssxref("background-position") }}, {{ Cssxref("background-repeat") }}, {{ cssxref("background-size") }}, {{ Cssxref("background-attachment") }}, and {{cssxref("background-blend-mode")}} +- マージンの全プロパティ: {{ Cssxref("margin") }}, {{ Cssxref("margin-top") }}, {{ Cssxref("margin-right") }}, {{ Cssxref("margin-bottom") }}, {{ Cssxref("margin-left") }} +- パディングの全プロパティ: {{ Cssxref("padding") }}, {{ Cssxref("padding-top") }}, {{ Cssxref("padding-right") }}, {{ Cssxref("padding-bottom") }}, {{ Cssxref("padding-left") }} +- 境界の全プロパティ: 一括指定プロパティである {{ Cssxref("border") }}, {{ Cssxref("border-style") }}, {{ Cssxref("border-color") }}, {{ cssxref("border-width") }}, {{ cssxref("border-radius") }}, {{cssxref("border-image")}}, および個別指定プロパティ +- {{ cssxref("color") }} プロパティ +- {{ cssxref("text-decoration") }}, {{cssxref("text-shadow")}}, {{ cssxref("text-transform") }}, {{ cssxref("letter-spacing") }}, {{ cssxref("word-spacing") }} (when appropriate), {{ cssxref("line-height") }}, {{cssxref("text-decoration-color")}}, {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-style")}}, {{cssxref("box-shadow")}}, {{ cssxref("float") }}, {{ cssxref("vertical-align") }} （`float` が `none` の場合のみ） の CSS プロパティ -<h2 id="Syntax" name="Syntax">構文</h2> +## 構文 {{csssyntax}} -<h2 id="Examples" name="Examples">例</h2> +## 例 -<h3 id="Simple_drop_cap" name="Simple_drop_cap">単純なドロップキャップ</h3> +### 単純なドロップキャップ -<p>この例では、 <code>::first-letter</code> 疑似要素を使用して、 <code><h2></code> の直後の段落の最初の文字にドロップキャップ効果を作成します。</p> +この例では、 `::first-letter` 擬似要素を使用して、 `<h2>` の直後の段落の最初の文字にドロップキャップ効果を作成します。 -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html notranslate"><h2>My heading</h2> -<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt +```html +<h2>My heading</h2> +<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo - dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.</p> -<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.</p></pre> + dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.</p> +<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.</p> +``` -<h4 id="CSS">CSS</h4> +#### CSS -<pre class="brush: css notranslate">p { +```css +p { width: 500px; line-height: 1.5; } @@ -78,87 +80,53 @@ h2 + p::first-letter { padding: 6px 3px; margin-right: 6px; float: left; -}</pre> +} +``` -<h4 id="Result" name="Result">結果</h4> +#### 結果 -<p>{{ EmbedLiveSample('Simple_drop_cap', '100%', 350) }}</p> +{{ EmbedLiveSample('Simple_drop_cap', '100%', 350) }} -<h3 id="Effect_on_special_punctuation_and_non-Latin_characters" name="Effect_on_special_punctuation_and_non-Latin_characters">特殊な区切り文字と非ラテン文字への効果</h3> +### 特殊な記号と非ラテン文字への効果 -<p>この例では、特殊な区切り文字や非ラテン文字に対する <code>::first-letter</code> の効果を説明しています。</p> +この例では、特殊な記号や非ラテン文字に対する `::first-letter` の効果を説明しています。 -<h4 id="HTML_2">HTML</h4> +#### HTML -<pre class="brush: html notranslate"><p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.</p> -<p>-The beginning of a special punctuation mark.</p> -<p>_The beginning of a special punctuation mark.</p> -<p>"The beginning of a special punctuation mark.</p> -<p>'The beginning of a special punctuation mark.</p> -<p>*The beginning of a special punctuation mark.</p> -<p>#The beginning of a special punctuation mark.</p> -<p>「先頭の特殊区切り記号です。</p> -<p>《先頭の特殊区切り記号です。</p> -<p>“先頭の特殊区切り記号です。</p></pre> +```html +<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.</p> +<p>-The beginning of a special punctuation mark.</p> +<p>_The beginning of a special punctuation mark.</p> +<p>"The beginning of a special punctuation mark.</p> +<p>'The beginning of a special punctuation mark.</p> +<p>*The beginning of a special punctuation mark.</p> +<p>#The beginning of a special punctuation mark.</p> +<p>「先頭が特殊区切り記号です。</p> +<p>《先頭が特殊区切り記号です。</p> +<p>“先頭が特殊区切り記号です。</p> +``` -<h4 id="CSS_2">CSS</h4> +#### CSS -<pre class="brush: css notranslate">p::first-letter { +```css +p::first-letter { color: red; font-size: 150%; -}</pre> - -<h4 id="Result_2" name="Result_2">結果</h4> - -<p>{{ EmbedLiveSample('Effect_on_special_punctuation_and_non-Latin_characters', '100%', 350) }}</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{ SpecName('CSS4 Pseudo-Elements', '#first-letter-pseudo', '::first-letter')}}</td> - <td>{{ Spec2('CSS4 Pseudo-Elements')}}</td> - <td>利用できるプロパティを組版、文字装飾、インライン配置、 {{ cssxref("opacity") }}、 {{ cssxref("box-shadow") }} に一般化。</td> - </tr> - <tr> - <td>{{ SpecName('CSS3 Text Decoration', '#text-shadow-property', 'text-shadow with ::first-letter')}}</td> - <td>{{ Spec2('CSS3 Text Decoration')}}</td> - <td><code>::first-letter</code> で {{cssxref("text-shadow")}} が使用できるようになった。</td> - </tr> - <tr> - <td>{{ SpecName('CSS3 Selectors', '#first-letter', '::first-letter') }}</td> - <td>{{ Spec2('CSS3 Selectors') }}</td> - <td>擬似要素用の二重コロン構文の導入。リスト項目での使用時やや特定言語向け（例えばオランダ語の連字 <code>IJ</code>）など、特殊な場合の挙動の定義。</td> - </tr> - <tr> - <td>{{ SpecName('CSS2.1', 'selector.html#first-letter', '::first-letter') }}</td> - <td>{{ Spec2('CSS2.1') }}</td> - <td>変更なし。</td> - </tr> - <tr> - <td>{{ SpecName('CSS1', '#the-first-letter-pseudo-element', '::first-letter') }}</td> - <td>{{ Spec2('CSS1') }}</td> - <td>初回定義、単一コロン構文を使用。</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<div> -<p>{{Compat("css.selectors.first-letter")}}</p> -</div> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{cssxref("::first-line")}}</li> -</ul> +} +``` + +#### 結果 + +{{ EmbedLiveSample('Effect_on_special_punctuation_and_non-Latin_characters', '100%', 350) }} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("::first-line")}} |