CSS Academy · レッスン

::placeholder、::selection、::marker

Q: 「::placeholder、::selection、::marker」で何を学びますか？

疑似要素を使って、入力プレースホルダー、テキスト選択範囲、リストマーカーの箇条書きをスタイル設定します。 ブラウザで直接実行するハンズオンコードでCSS Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

疑似要素を使って、入力プレースホルダー、テキスト選択範囲、リストマーカーの箇条書きをスタイル設定します。

レッスン 2/413 ステップ

「::placeholder、::selection、::marker」はCoddyKit上の無料CSS Academyレッスンです。これはレッスン2/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはCSS Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 CSS Academyコースには全4レッスンが含まれています。

::placeholder

::placeholderは、フォームのinput要素やtextarea要素内に表示されるプレースホルダーテキストを装飾します。サポートされるCSSプロパティは一部に限られます。

<input type="text" placeholder="Type your name…" />

::placeholderでサポートされるプロパティ

すべてのCSSプロパティが::placeholderで機能するわけではありません。サポートされるプロパティには、color、font-size、font-weight、font-style、letter-spacing、opacityなどがあります。レイアウト関連のプロパティはサポートされません。

プレースホルダーのアクセシビリティ

プレースホルダーテキストはユーザーが入力すると消えるため、<label>要素の代わりに使用してはいけません。フォーム項目には必ず視認できるラベルを用意してください。プレースホルダーのコントラストもWCAGの4.5:1以上の比率を満たす必要があります。

::selection

::selectionは、ユーザーがカーソルで選択したテキストを装飾します。ブランドに合わせた選択色を設定できます。

<p>Select this text with your cursor to see the branded highlight color.</p>

::selectionでサポートされるプロパティ

::selectionで機能するプロパティは、color、background-color、text-shadow、text-decorationなど一部に限られます。それ以外は無視されます。

::marker

::markerは、<ul>や<ol>のリストで項目に付くマーカー、つまり箇条書き記号や番号を装飾します。

<ul>
  <li>First item</li>
  <li>Second item</li>
</ul>
<ol>
  <li>Step one</li>
  <li>Step two</li>
</ol>

::markerでサポートされるプロパティ

::markerでサポートされるプロパティには、color、content、font-size、font-family、font-weight、font-style、unicode-bidiがあります。

::markerによるカスタムリストマーカー

絵文字や特殊文字をリストマーカーとして使用します。

<ul>
  <li>Normal item</li>
  <li class="warning">Warning item</li>
</ul>

::first-line

::first-lineは、ブロック要素で最初に描画される行を装飾します。HTML内の最初の改行までの行ではなく、実際に描画された行が対象です。ドロップキャップ風の段落冒頭のスタイルに役立ちます。

<p>This is the opening line of a paragraph that wraps onto a second line once it runs out of horizontal room in its container, so you can see the effect clearly.</p>

::first-letter

::first-letterは、最初に書式設定された行の先頭文字を対象にします。雑誌風のタイポグラフィでドロップキャップを作るのが典型的な用途です。

<p>Once upon a time, a designer discovered the drop cap and typography was never the same again.</p>

字幕のスタイル設定に使う::cue

::cueは、HTMLの<video>要素内にあるVTT字幕を装飾します。アクセシブルなメディアにおいて、専門的ですが重要な擬似要素です。

<p style="color:#888;">::cue styles VTT subtitle text inside a &lt;video&gt; element (no visible effect without an active video/track, shown here for reference).</p>
<video controls style="max-width:100%;"></video>

確認問題

リスト項目の箇条書き記号や番号を装飾できる擬似要素はどれですか？

対話的なレッスンで答える

まとめ

::placeholderは入力欄のプレースホルダーテキストを装飾します。::selectionは選択されたテキストを装飾します。::markerはリストの箇条書き記号や番号を装飾します。::first-letterと::first-lineを使うと、タイポグラフィを細かく調整できます。いずれもサポートされるCSSプロパティは一部に限られます。

無料で開始

AI チューターと学ぶ CSS — 無料

ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。

コース: 40
レッスン: 159

無料で学習を始めるコース全体を表示

よくある質問

「::placeholder、::selection、::marker」レッスンは無料ですか？

はい。「::placeholder、::selection、::marker」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、CSS Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 CSS Academyコースには全4レッスンが含まれています。

「::placeholder、::selection、::marker」で何を学びますか？

疑似要素を使って、入力プレースホルダー、テキスト選択範囲、リストマーカーの箇条書きをスタイル設定します。ブラウザで直接実行するハンズオンコードでCSS Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

CSS Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのCSS Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン2/4です。

「::placeholder、::selection、::marker」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このCSS Academyレッスンでコードを書いて実行できますか？

はい。すべてのCSS Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← CSS Academyに戻る