本日のプログラミング学習
HTML & CSS / 1.5hour
Aug / 45.5hour
Total / 70.5hour
通勤で読んでいる書籍
CSSにおける疑似要素と疑似クラスについて
この二つ、「名前が似てて分かりにくい+記述の仕方も非常に似ている」ということで、とにかく分かりにくい。
自分も最初は「何を言ってるのだろう？？」となったので、自分なりの疑似要素と疑似クラスの定義やイメージ、使い方をまとめます。
疑似要素
＜書き方＞
セレクター：：疑似要素{
プロパティ： 値；
＊疑似要素の場合、コロンは二つ「：：」！
（CSS3だとコロンは二つ。CSS2だとコロンは一つ。）
＜定義・イメージ＞
元々ある要素に、HTMLには書いていない別の要素（のようなもの）を作って、それに対してスタイルを適用させる。
そのため、スタイルが反映されるのはその作られた要素内のみなので、適用範囲は限定的。
また、作られるのは「要素」なので他のプロパティを追加して装飾していく事も出来る。
どんな種類があるのかは、こちら。
CSS の 擬似要素 (Pseudo-elements) は、セレクターに付加するキーワードで、選択された要素の特定の部分にスタイル付けできるようにするものです。例えば ::first-line 擬似要素は、段落の最初の行のフォントを変更す[…]
＜具体例＞
：：before →選択した要素の直前に疑似要素を作成する。生成される要素は「インライン要素」。
疑似要素「before」でサンプル2のpタグの前に要素を作り、それに対してスタイルをあてています。
「content」は挿入したい内容を記述します。また、元々疑似要素「before」はインライン要素なので、改行するためにdisplayプロパティで「block」としています。
疑似クラス
＜書き方＞
セレクター：疑似クラス {
プロパティ： 値；
}
＜定義・イメージ＞
元々ある要素に対して、HTMLには書かれていない別のクラス（のようなもの）を作成し、それに対してスタイルを適用させる。
そのため、スタイルが反映されるのはクラス全体なので、適用範囲は要素全体となる。
どんな種類があるのかは、こちら。
CSS の擬似クラス (pseudo-classes) は、セレクターに付加するキーワードであり、選択された要素に対して特定の状態を指定します。例えば :hover 擬似クラスで、ユーザーのポインターが当たったときにボタンの色を変更すること[…]
＜具体例＞
：first-child →指定された兄弟要素の中で、最初の要素のみにスタイルをあてる。
疑似クラス「first-child」は、最初要素にのみスタイルを適用するもの。そのため、最初の「サンプル1」のみにスタイルが当たっています。
疑似要素+疑似クラスはどう書く？
ここまで、それぞれの書き方や定義・イメージを見てきました。
ところで、この二つを同時に使いたい、というときはどのようにCSSを記述するのでしょう。
上記の例でいうと、「p要素の最初にのみスタイルをあてて、かつその前に疑似要素をつくって表示させる」ということを実装したいとします。
＜書き方＞
セレクター：疑似クラス：：疑似要素{
}
イメージとしては、適用させる範囲をどんどん限定していく感じです。
疑似クラスで「最初のp要素に適用して」として、その後に「その前に疑似要素を作って、こんな内容を表示して～」という感じです。
このように疑似要素と疑似クラスを用いることで、より短いコードでCSSが実装出来るので、保守性の高いコードも実現しやすくなると思います。
種類が多く、一度に覚えるのは大変ですが頻出するものについては覚えておこうと思います。
学習は全てウェブカツ！！というプログラミングスクールで学んでいます。
大手スクール生徒や現役エンジニアが多数学び直している「実務レベル」に特化した「稼ぐ」ためのプログラミングスクール[…]