diff --git a/files/ja/web/css/_doublecolon_first-letter/index.md b/files/ja/web/css/_doublecolon_first-letter/index.md index 0b892864bf346c..8300708162c54f 100644 --- a/files/ja/web/css/_doublecolon_first-letter/index.md +++ b/files/ja/web/css/_doublecolon_first-letter/index.md @@ -1,18 +1,15 @@ --- -title: "::first-letter (:first-letter)" +title: "::first-letter" slug: Web/CSS/::first-letter +l10n: + sourceCommit: 5fea7c9593f5e4b4ef13ec65064acf1eabf01e4e --- {{CSSRef}} -**`::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)の最初の行の最初の文字にスタイルを適用します。ただし、最初の文字より前に他のコンテンツ (画像やインラインテーブルなど) がないときに限ります。 +**`::first-letter`** は [CSS](/ja/docs/Web/CSS) の[擬似要素](/ja/docs/Web/CSS/Pseudo-elements)で、[ブロックコンテナー](/ja/docs/Web/CSS/Visual_formatting_model#ブロックコンテナー)の最初の行の最初の文字にスタイルを適用します。ただし、最初の文字より前に他のコンテンツ(画像やインラインテーブルなど)がないときに限ります。 -```css -/*

の最初の文字を選択します */ -p::first-letter { - font-size: 130%; -} -``` +{{EmbedInteractiveExample("pages/tabbed/pseudo-element-first-letter.html", "tabbed-shorter")}} 要素の最初の文字は、常に単純に識別できるとは限りません。 @@ -20,7 +17,7 @@ p::first-letter { - 言語によっては常に一緒に大文字化される連字があります。例えばオランダ語の `IJ` などです。この場合、連字の両方の文字が `::first-letter` 擬似要素で選択されます。 - {{ cssxref("::before") }} 擬似要素と {{ cssxref("content") }} プロパティの組み合わせにより、要素の先頭にテキストが挿入されることがあります。この場合、 `::first-letter` は生成されたこのコンテンツの最初の文字に一致します。 -> **メモ:** CSS3 では[擬似クラス](/ja/docs/Web/CSS/Pseudo-classes)と[擬似要素](/ja/docs/Web/CSS/Pseudo-elements)を見分けやすくするために、 `::first-letter` の表記法(二重コロン付き)が導入されました。ブラウザーでは CSS2 で導入された `:first-letter` も使用できます。 +> **メモ:** CSS では[擬似クラス](/ja/docs/Web/CSS/Pseudo-classes)と[擬似要素](/ja/docs/Web/CSS/Pseudo-elements)を見分けやすくするために、 `::first-letter` の表記法(二重コロン付き)が導入されました。後方互換性のため、ブラウザーは以前に導入された `:first-letter` も受け付けます。 > > オランダ語の `IJ` のような連字に対するブラウザーの対応は貧弱です。下記の互換性一覧表で、現在の対応状況を確認してください。 @@ -38,7 +35,11 @@ p::first-letter { ## 構文 -{{csssyntax}} +```css +::first-letter { + /* ... */ +} +``` ## 例 @@ -92,7 +93,7 @@ h2 + p::first-letter { #### HTML -```html +```html-nolint

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.