こんにちは朱夏です。
今回は、CSSの疑似要素、疑似クラスについて調べてみました。
マウスホバーの時とかに使われる奴というのはわかる。
けど疑似要素と疑似クラスって違うものなの？
私はこの辺ふわっとしていたので、詳しく調べてみました。
疑似要素、疑似クラスの違いと、それぞれどんなものがあるのかを紹介したいと思います。
それではいってみましょう。
疑似要素と疑似クラスの違い
疑似要素の紹介
疑似クラスの紹介
あとがき
疑似要素と疑似クラスの違い
CSSの表記方法は似ていますが、別々のものでした。
疑似要素は、要素内の特定の部分に対してスタイルを適用する場合に使われます。
例えば、対象の要素の1文字目にだけスタイルを適用したり、対象の要素の直前にテキストを入れたりする事が出来ます。
疑似クラスは、対象の要素の特定の状態に対してスタイルを適用する場合に使われます。
例えば、マウスホバー時にスタイルを適用するものは良く使われる疑似クラスです。
疑似要素の紹介
疑似要素には、主に以下の様なものがあります。
::before
指定した要素の直前にテキストや画像などのコンテンツを追加します。
スタイルは追加されたコンテンツに適用されます。
::after
::beforeの逆で、指定した要素の直後にテキストや画像などのコンテンツを追加します。
同じく、追加されたコンテンツにスタイルを適用します。
::first-letter
指定した要素の1文字目だけにスタイルを適用する疑似要素です。
段落の1文字目だけ色を変えたり、フォントを大きくしたりする使い方ができます。
::first-line
指定した要素の1行目だけにスタイルを適用する疑似要素です。
疑似クラスの紹介
疑似クラスには主に以下の様なものがあります。
:hover
指定した要素にマウスカーソルが乗った時のスタイルを指定できます。
これを上手く使うことで、マウスホバー時のアニメーションを作成したりしています。
:active
これは、指定した要素をアクティブ状態にしたときのスタイルを指定できます。
アクティブ状態とは要素を左クリックした状態からクリックを離すまでの間です。
あとがき
というわけで疑似要素、疑似クラスについて調べてみました。
まとめはこちら。
- 疑似要素は指定の要素の一部分にスタイルを指定
- 疑似スタイルは、指定の要素が特定の状態の時のスタイルを指定
- 良く使う:hoverは疑似スタイル
中には疑似要素の::before、::afterを使用して色々なアイコンを作っている上級者の人もいるようです。
モバイルなどのハンバーガーメニューと呼ばれるメニューボタンもこれを活用して作られている様です。
上手く活用すれば、いろんな事が出来そうですね。
今回はここまでです。
次回もよろしくお願いします。
