疑似要素の基本|書き方、使い方とサンプル

HTML&CSS

疑似要素とは

疑似要素は指定したセレクタの一部分にスタイルを適用する要素です。

疑似要素には以下のような物があります。

  • ::after
  • ::before
  • ::first-letter
  • ::first-line
  • ::selection

上記の5つの疑似要素は利用する機会の多い疑似要素です。

それぞれの使い方を見ていきます。

::after

疑似要素(::after)は、要素の直後にスタイルを適用します。

以下、画像は例です。

以下は画像のソースコードです。

.sample::after {
     content: 'after';
     color: red;
}

::before

疑似要素(::before)は、要素の直前にスタイルを適用します。

以下、画像は例です

以下は画像のソースコードです。

.sample::before {
     content: 'before';
     color: blue;
}

::first-letter

疑似要素(::first-letter)は、始めの文字にスタイルを適用します。

以下、画像は例です

以下は画像のソースコードです。

.sample::first-letter {
     color: red;
}

::first-line

疑似要素(::first-line)は、最初の行にスタイルを適用します。

各行は<br>で改行しています。

以下、画像は例です

以下は画像のソースコードです。

.sample::first-line {
     color: red;
}

::selection

疑似要素(::selection)は、指定の要素にマウス操作した際にスタイルを適用します。

マウスで文字をドラッグしています。

以下、画像は例です

以下は画像のソースコードです。

.sample::selection {
	background-color: red;
}

疑似要素と疑似クラスの違い

疑似要素は要素の一部分にプロパティと値(スタイル)を与えることができます。

疑似要素の使い方としては、

p::before {
    content: "「";
    color: black;
}

反対に、疑似クラスは指定したセレクタの全体にスタイルを反映させることができます。

疑似クラスの使い方としては、

.sample:hover {
    color: blue;
}

このように、疑似要素はコロン「::」一つ。疑似クラスはコロン「:」で表します。

疑似要素のクイズ!

疑似要素の使い方を覚えよう!

以下の画像(赤文字)に該当する疑似要素は何か?

以下の画像に該当する疑似要素は何か?

以下の画像(赤文字)に該当する疑似要素は何か?

以下の画像に該当する疑似要素は何か?

以下の画像に該当する疑似要素は何か?

Your score is

疑似要素を使ってみよう!

疑似要素は「::」コロン2つをセレクタの後に付けることで機能します。

疑似要素を使うことで新たな文字を追加したり、要素の一部分に限定してスタイルを反映させることができます。これらは、より繊細なカスタマイズに向いています。

もしも、疑似要素を利用される場合は、簡単な疑似要素から利用してみてはいかがでしょうか。

HTML&CSS
国内シェアNo.1「エックスサーバー
Word Press初心者向けのサーバーでホームページ・ブログが初めての方でも簡単に始めることができます。また、毎日、自動でバックアップをサーバーに保存してくれる他、昔からあるサーバーなので情報量が多く、トラブルになっても検索して自分で解決することができます。

1. WordPress簡単インストール
2. 毎日、自動バックアップ
3. 手動バックアップ可
4. 無料で復旧可能(14日)
5. 複数のドメイン運用可
6. 基本プランでも大容量
7. 手厚いサポート

迷ったらエックスサーバーにすれば大丈夫。
低コストから成長「カラフルボックス
低コストからホームページ・ブログを始められるサーバーです。サイトの成長に合わせてプランを変更することで高性能なサーバーへ徐々に切り替えることもできます。ホームページとサーバーが一緒に成長でき、低コストながら初心者の方向けの機能も豊富です。かんたん操作のコンパネによって初めての方でも簡単に始めることができます。

1. 低コストから始められる
2. かんたん操作のコンパネ
3. 自動バックアップ(14日)
4. マルウェア・改ざんを防止
5. サーバーは超高速
6. 充実したサポート

お試し運用ならカラフルボックス。
ぜろぶろぐ

コメント

タイトルとURLをコピーしました