From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../web/css/_doublecolon_first-letter/index.html | 166 +++++++++++++++++++++ 1 file changed, 166 insertions(+) create mode 100644 files/ja/web/css/_doublecolon_first-letter/index.html (limited to 'files/ja/web/css/_doublecolon_first-letter') 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' +--- +
{{CSSRef}}
+ +

::first-letter は CSS の擬似要素で、ブロックレベル要素の最初の行の最初の文字にスタイルを適用します。ただし、最初の文字より前に他のコンテンツ (画像やインラインテーブルなど) がないときに限ります。

+ +
/* <p> の最初の文字を選択します */
+p::first-letter {
+  font-size: 130%;
+}
+ +

要素の最初の文字は、常に単純に識別できるとは限りません。

+ + + +
+

CSS3 では擬似クラスと擬似要素を見分けやすくするために、 ::first-letter の表記法（二重コロン付き）が導入されました。ブラウザーでは CSS2 で導入された :first-letter も使用できます。

+
+ +

利用可能なプロパティ

+ +

::first-letter 擬似要素では、一部の CSS プロパティのみが利用できます。

+ + + +

構文

+ +
{{csssyntax}}
+ +

例

+ +

単純なドロップキャップ

+ +

この例では、 ::first-letter 疑似要素を使用して、 <h2> の直後の段落の最初の文字にドロップキャップ効果を作成します。

+ +

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>
+ +

CSS

+ +
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;
+}
+ +

結果

+ +

{{ EmbedLiveSample('Simple_drop_cap', '100%', 350) }}

+ +

特殊な区切り文字と非ラテン文字への効果

+ +

この例では、特殊な区切り文字や非ラテン文字に対する ::first-letter の効果を説明しています。

+ +

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>
+ +

CSS

+ +
p::first-letter {
+  color: red;
+  font-size: 150%;
+}
+ +

結果

+ +

{{ EmbedLiveSample('Effect_on_special_punctuation_and_non-Latin_characters', '100%', 350) }}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{ SpecName('CSS4 Pseudo-Elements', '#first-letter-pseudo', '::first-letter')}}{{ Spec2('CSS4 Pseudo-Elements')}}利用できるプロパティを組版、文字装飾、インライン配置、 {{ cssxref("opacity") }}、 {{ cssxref("box-shadow") }} に一般化。
{{ SpecName('CSS3 Text Decoration', '#text-shadow-property', 'text-shadow with ::first-letter')}}{{ Spec2('CSS3 Text Decoration')}}::first-letter で {{cssxref("text-shadow")}} が使用できるようになった。
{{ SpecName('CSS3 Selectors', '#first-letter', '::first-letter') }}{{ Spec2('CSS3 Selectors') }}擬似要素用の二重コロン構文の導入。リスト項目での使用時やや特定言語向け（例えばオランダ語の連字 IJ）など、特殊な場合の挙動の定義。
{{ SpecName('CSS2.1', 'selector.html#first-letter', '::first-letter') }}{{ Spec2('CSS2.1') }}変更なし。
{{ SpecName('CSS1', '#the-first-letter-pseudo-element', '::first-letter') }}{{ Spec2('CSS1') }}初回定義、単一コロン構文を使用。
+ +

ブラウザーの互換性

+ +
+ + +

{{Compat("css.selectors.first-letter")}}

+
+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf