CSS Podcast - 014: 疑似要素
コンテンツ記事があり 最初の文字を もう少し大きくしたい場合や
CSS では、::first-letter
疑似要素を使用して、このようなデザインの詳細を実現できます。
p::first-letter {
color: blue;
float: left;
font-size: 2.6em;
font-weight: bold;
line-height: 1;
margin-inline-end: 0.2rem;
}
疑似要素とは、HTML を追加せずに別の要素を追加したり、ターゲットを設定したりするようなものです。
::first-letter
を使用したこの例の解決策は、多くの疑似要素の 1 つです。各要素にはさまざまな役割があります。このレッスンでは、使用できる擬似要素とその使用方法について説明します。
::before
、::after
::before
疑似要素と ::after
疑似要素はどちらも、content
プロパティを定義している場合にのみ要素内に子要素を作成します。
.my-element::before {
content: "";
}
.my-element::after {
content: "";
}
content
には任意の文字列(空の文字列も可)を指定できますが、空の文字列以外はスクリーン リーダーによって読み上げられる可能性が高いことにご注意ください。画像 url
を追加すると、画像が元のサイズで挿入されるため、サイズ変更はできません。counter
を挿入することもできます。
::before
要素または ::after
要素を作成した後、制限なしで自由にスタイルを設定できます。::before
要素や ::after
要素は、子要素(ドキュメント ツリーを持つ要素)を受け入れる要素にのみ挿入できるため、<img />
、<video>
、<input>
などの要素は機能しません。
::first-letter
この擬似要素は、レッスンの最初に紹介しました。なお、::first-letter
をターゲットに設定する際に、すべての CSS プロパティを使用できるわけではないことにご注意ください。使用可能なプロパティは次のとおりです。
color
background
プロパティ(background-image
など)border
プロパティ(border-color
など)float
font
プロパティ(font-size
、font-weight
など)- テキスト プロパティ(
text-decoration
、word-spacing
など)
p::first-letter {
color: goldenrod;
font-weight: bold;
}
::first-line
::first-line
疑似要素では、::first-line
が適用された要素の display
値が block
、inline-block
、list-item
、table-caption
、table-cell
の場合にのみ、テキストの最初の行のスタイルを設定できます。
p::first-line {
color: goldenrod;
font-weight: bold;
}
::first-letter
疑似要素と同様に、使用できる CSS プロパティは限られています。
color
background
件の宿泊施設font
件の宿泊施設text
件の宿泊施設
::backdrop
<dialog>
や <video>
などの全画面モードで表示される要素がある場合、::backdrop
疑似要素を使用して、背景(要素とページの残りの部分の間のスペース)のスタイルを設定できます。
video::backdrop {
background-color: goldenrod;
}
::marker
::marker
疑似要素を使用すると、リストアイテムの箇条書きまたは番号、または <summary>
要素の矢印のスタイルを設定できます。
::marker {
color: hotpink;
}
ul ::marker {
font-size: 1.5em;
}
ol ::marker {
font-size: 1.1em;
}
summary::marker {
content: '\002B'' '; /* Plus symbol with space */
}
details[open] summary::marker {
content: '\2212'' '; /* Minus symbol with space */
}
::marker
では、少数の CSS プロパティのみがサポートされます。
color
content
white-space
font
件の宿泊施設animation
プロパティとtransition
プロパティ
マーカーの記号を変更するには、content
プロパティを使用します。これを使用して、たとえば、<summary>
要素の閉じた状態と空の状態を表すプラス記号とマイナス記号を設定できます。
::selection
::selection
疑似要素を使用すると、選択したテキストの外観のスタイルを設定できます。
::selection {
background: green;
color: white;
}
この擬似要素を使用すると、上のデモのように、選択したすべてのテキストのスタイルを設定できます。 他のセレクタと組み合わせて使用することで、より具体的な選択スタイルにすることもできます。
p:nth-of-type(2)::selection {
background: darkblue;
color: yellow;
}
他の疑似要素と同様に、一部の CSS プロパティのみを使用できます。
color
background-color
(background-image
以外)text
件の宿泊施設
::placeholder
placeholder
属性を持つ <input>
などのフォーム要素にヘルパーヒントを追加できます。::placeholder
疑似要素を使用すると、そのテキストのスタイルを設定できます。
input::placeholder {
color: darkcyan;
}
::placeholder
は、以下の CSS ルールのサブセットのみをサポートしています。
color
background
件の宿泊施設font
件の宿泊施設text
件の宿泊施設
::cue
この擬似要素ツアーの最後は、::cue
擬似要素です。これにより、<video>
要素の字幕である WebVTT のキューのスタイルを設定できます。
また、セレクタを ::cue
に渡して、字幕内の特定の要素のスタイルを設定することもできます。
video::cue {
color: yellow;
}
video::cue(b) {
color: red;
}
video::cue(i) {
color: lightpink;
}
理解度をチェックする
擬似要素に関する知識をテストする
疑似要素でないものは次のうちどれですか。
::before
content: '';
を忘れずに追加してください。::first-paragraph
::after
content: '';
を忘れずに追加してください。::marker
::pencil
:active
擬似要素は HTML ファイルにあります。