ドキュメント : CSS
-
【CSS】::before(擬似要素) - 最初の子要素
CSSの擬似要素の1つ、beforeについてご紹介します。before擬似要素beforeは最初の子要素です。基本構文::before { プロパティ名: プロパティ値;}サンプル次のコードは擬似要素beforeでp要素の最初に子要素を定義します。<style>p::before { content: "CSSの正式名称";}</style><p>C
-
【CSS】::after(擬似要素) - 最後の子要素
CSSの擬似要素の1つ、afterについてご紹介します。after擬似要素afterは最後の子要素です。基本構文::after { content: 値; プロパティ名: プロパティ値;}contentプロパティを合わせて使用します。値に文字や画像などを指定し、コンテンツを追加することができます。サンプル次のコードは擬似要素beforeでp要素の最後に子要素を定義します。<sty
-
【CSS】::first-letter(擬似要素) - 最初の文字
CSSの擬似要素の1つ、first-letterについてご紹介します。first-letter擬似要素first-letterは最初の1文字です基本構文::first-letter { プロパティ名: プロパティ値;}サンプル次のコードは擬似要素first-letterでp要素の最初の1文字を大きくします。<style>p::first-letter { font-size
-
-
【CSS】::first-line(擬似要素) - 最初の行
CSSの擬似要素の1つ、first-lineについてご紹介します。first-line擬似要素first-lineは1行目です基本構文::first-line { プロパティ名: プロパティ値;}サンプル次のコードは擬似要素first-lineでp要素の1行目を目立たせます。<style>p::first-line { color: red; font-size: 3
-
【CSS】::marker(擬似要素) - リストのマーカー
CSSの擬似要素の1つ、markerについてご紹介します。marker擬似要素markerはリストの箇条記号です。基本構文::marker { プロパティ名: プロパティ値;}サンプル次のコードは擬似要素first-letterでp要素の最初の1文字を目立たせます。<style>li::marker { content: ">";}</style><
-
-
-
【CSS】::placeholder(擬似要素) - プレイスホルダー
CSSの擬似要素の1つ、placeholderについてご紹介します。placeholder擬似要素placeholderはプレイスホルダーの文字列です。通常、input要素やtextarea要素のプレイスホルダーのセレクターに使用します。基本構文::placeholder { プロパティ名: プロパティ値;}サンプル次のコードは擬似要素first-letterでp要素の最初の1文字を目立たせ
-
【CSS】::selection(擬似要素) - 選択範囲
CSSの擬似要素の1つ、selectionについてご紹介します。selection擬似要素selectionは選択したテキストです。基本構文::selection { プロパティ名: プロパティ値;}サンプル次のコードは擬似要素first-letterでp要素の最初の1文字を目立たせます。<style>p::selection { color: red; backgr
-
【CSS】擬似要素 - 要素部分のセレクター
CSSの擬似要素についてご紹介します。擬似要素擬似要素はセレクターにおいて、要素の部分を示すキーワードです。基本構文::擬似要素 { プロパティ名: プロパティ値;}例最初の文字を表わすfirst-letterを使用します。<style>p::first-letter { color: red; font-size: 36px;}</style><p
-
-
【CSS】スタイルの継承
CSSのスタイルの継承についてご紹介します。スタイルの継承一部のプロパティはセレクターで指定する要素の子孫要素にも継承して適用されます。次の例をご覧ください。<style>section { color: red;}</style><section> <h1>CSSとは</h1> <div> &
-
【CSS】スタイルの優先度
CSSのスタイルの優先度についてご紹介します。スタイルの優先度同一の要素に同じプロパティが複数設定される場合があります。その場合、どのプロパティ値を優先するかは『セレクターの優先度』と『読み込みの順序』によって決まります。セレクターの優先度同じ要素に対して複数のセレクターで同じプロパティを設定した場合、より詳細度の高いセレクターが優先されます。次の例をご覧ください。<style>#ti