initial commit

1 files changed, 166 insertions, 0 deletions

diff --git a/files/ja/web/css/_doublecolon_first-letter/index.html b/files/ja/web/css/_doublecolon_first-letter/index.html
new file mode 100644
index 0000000000..8d9d2235fe
--- /dev/null
+++ b/files/ja/web/css/_doublecolon_first-letter/index.html
@@ -0,0 +1,166 @@
+---
+title: '::first-letter (:first-letter)'
+slug: 'Web/CSS/::first-letter'
+tags:
+  - CSS
+  - Layout
+  - Pseudo-element
+  - Reference
+  - Selector
+translation_of: 'Web/CSS/::first-letter'
+---
+<div>{{CSSRef}}</div>
+
+<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>
+
+<pre class="brush: css no-line-numbers notranslate">/* &lt;p&gt; の最初の文字を選択します */
+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>
+
+<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>
+
+<h2 id="Allowable_properties" name="Allowable_properties">利用可能なプロパティ</h2>
+
+<p><code>::first-letter</code> 擬似要素では、一部の CSS プロパティのみが利用できます。</p>
+
+<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>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Simple_drop_cap" name="Simple_drop_cap">単純なドロップキャップ</h3>
+
+<p>この例では、 <code>::first-letter</code> 疑似要素を使用して、 <code>&lt;h2&gt;</code> の直後の段落の最初の文字にドロップキャップ効果を作成します。</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;h2&gt;My heading&lt;/h2&gt;
+&lt;p&gt;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.&lt;/p&gt;
+&lt;p&gt;Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.&lt;/p&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">p {
+  width: 500px;
+  line-height: 1.5;
+}
+
+h2 + p::first-letter {
+  color: white;
+  background-color: black;
+  border-radius: 2px;
+  box-shadow: 3px 3px 0 red;
+  font-size: 250%;
+  padding: 6px 3px;
+  margin-right: 6px;
+  float: left;
+}</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{ EmbedLiveSample('Simple_drop_cap', '100%', 350) }}</p>
+
+<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>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;p&gt;Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.&lt;/p&gt;
+&lt;p&gt;-The beginning of a special punctuation mark.&lt;/p&gt;
+&lt;p&gt;_The beginning of a special punctuation mark.&lt;/p&gt;
+&lt;p&gt;"The beginning of a special punctuation mark.&lt;/p&gt;
+&lt;p&gt;'The beginning of a special punctuation mark.&lt;/p&gt;
+&lt;p&gt;*The beginning of a special punctuation mark.&lt;/p&gt;
+&lt;p&gt;#The beginning of a special punctuation mark.&lt;/p&gt;
+&lt;p&gt;「先頭の特殊区切り記号です。&lt;/p&gt;
+&lt;p&gt;《先頭の特殊区切り記号です。&lt;/p&gt;
+&lt;p&gt;“先頭の特殊区切り記号です。&lt;/p&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css notranslate">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>
+<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.selectors.first-letter")}}</p>
+</div>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref("::first-line")}}</li>
+</ul>