CSS

[CSS] 擬似クラス、擬似要素、属性セレクターのメリットと使いどころ

2018年7月4日

こんにちは!土門大貴(daikidomon)です。

CSSの勉強をしていると必ず本や動画で必須スキルのように紹介される

  • 擬似クラス
  • 擬似要素
  • 属性セレクター

ですが、勉強を始めた時にはこれって何に使うの?って思う人も多いと思います。

これって本当に使うの?と感じているであろう、「擬似クラス」、「擬似要素」、「属性セレクター」の使い方を紹介したいと思います。

これらを使うことでコーディングの量を少なくしたり

管理や修正が簡素になったり、といいことづくめなので必ず使いどころを覚えましょう。

コーディングの量が減らせる

コーディングの量が圧倒的に減らすことが出来ます。

コーディング量を減らすことで生産性を向上させるだけでなく、

ユーザーが読み込むCSSファイルサイズを小さくすることができるのでレスポンス速度向上します。

左が「属性セレクター」を使用してコーディングの量を減らす例になります。

※ スマホでは上が属性セレクターを使用した例です。

table .row-1 [class*="column-"] {
background: skyblue;
font-weight: bold;
color: white;
}
table .row-1 .column-1,
table .row-1 .column-2,
table .row-1 .column-3,
table .row-1 .column-4,
table .row-1 .column-5 {
background: skyblue;
font-weight: bold;
color: white;
}

上記の例はtableタグの特定行の全カラムのスタイルを変更させるスタイルです。

属性セレクターを使用しない例では、カラムの数分カンマ区切りでスタイルを追加する必要があるのでコード量も多くなりますが、

属性セレクターを使用することでシンプルにコーディングすることができます。

コードの管理が簡単になり読みやすくなる

よりコードをシンプルに書くことができるので、コード管理が簡単になりコードが読みやすくなります。

コードを修正する時の修正箇所が大幅に減るので保守性は格段に向上します。

下は「擬似クラス」を使用してコード管理が簡単になった例です。

※ スマホでは上が属性セレクターを使用した例です。

section:nth-child(even){
background: gray;
}
section-2 {
background: gray;
}

section-4 {
background: gray;
}

section-6 {
background: gray;
}

上記例は各sectionの偶数番目をグレーにするスタイルです。

nth-child」を使用することでシンプルにコーディングできます。

また「section」が増えたとしても追加でコーディングする必要がありません。

複雑なレイアウトがCSSだけでコーディングできる

複雑なレイアウトがCSSだけでコーディング出来るのもメリットです。

最も一般的な例は「吹き出し」がCSSだけで簡単に作成できます。

下が「擬似要素」を使用した吹き出しのサンプルになります。
.arrow_box {
position: relative;
background: #37d571;
border: 2px solid #47f592;
}
.arrow_box:after, .arrow_box:before {
bottom: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}

.arrow_box:after {
border-color: rgba(55, 213, 113, 0);
border-bottom-color: #37d571;
border-width: 30px;
margin-left: -30px;
}
.arrow_box:before {
border-color: rgba(71, 245, 146, 0);
border-bottom-color: #47f592;
border-width: 33px;
margin-left: -33px;
}
擬似要素の「before」、「after」、「hover」、「active」などはよく使うので必ず覚えましょう。

下が自動で吹き出しを作成してくれるWebサイトになりますので、参考にしてみてください。

参考cssarrowplease

関連記事

-CSS

Copyright© スタートアップIT企業社長のブログ , 2020 All Rights Reserved.