2024.07.19
ChatGPTにクラス名を付けてもらってみた
- コーディング
WEB制作のあれこれがわかる！
WEB制作のあれこれがわかる！
CSSを書いていて、別窓で開く場合はアイコンを付けたい、pdfの画像を出す場合は文字色を変えたいなどの指定を書く時、毎回idやclassを付けるのは少し手間だと思います。
そんな時に属性セレクタを使うととても便利です！
CSSのセレクタについては過去の記事で紹介していますので、今回は属性とは何かという部分からご紹介していきます。
目次
属性セレクタのご紹介の前に、属性とは何かということをご紹介します。
属性とはaタグでリンク先を指定するための「href」や、リンクの開き方を指定するための「target」といったHTMLでの指定のことを指します。
「href」や「target」の属性に続く属性の値である「index.html」や「_blank」のことを属性値と呼びます。
よく使われているclassやidも属性の一つなのです。
要素の中に指定した属性がある場合にスタイルが適用されます。
例えば下記のように書くと、aタグの「target」属性があった場合にスタイルが適用されます。
See the Pen MWbjmbq by spiqa design (@spiqa_design) on CodePen.
要素の中に指定した属性の属性値があった場合に適用されます。
要素名[属性名=”属性値”]で書く場合は、属性値が完全に一致した場合のみ適用されます。
下記のように「target」属性を指定する場合、「blank」では適用されず、「_blank」と正しく書いた場合に適用されます。
See the Pen RwoGVKR by spiqa design (@spiqa_design) on CodePen.
指定した値が属性値に含まれていた場合に適用されます。
どのような場合かというと、下記のように「test」というclassが含まれている場合を指しています。
先ほどご紹介をした記述と異なり、「*」を付けることで完全に同じでなく、属性値に含まれている場合に適用させることができます。
See the Pen qBqamrB by spiqa design (@spiqa_design) on CodePen.
指定した属性値で始まる場合に適用されます。
下記のように「test」というclassで始まる場合にのみ適用されるため、「fv_test」や「sec_test」といった「test」という属性値は含まれているものの、「test」から始まらない場合にはスタイルが適用されません。
See the Pen RwoGVRa by spiqa design (@spiqa_design) on CodePen.
先ほどご紹介したセレクタの反対で、指定した属性値で終わる場合に適用させたい場合は「$」を使用します。
先ほどと同じ例で書くと、先ほどとは逆で今度の指定方法では「fv_test」や「sec_test」といった「test」で終わる場合にスタイルが適用されます。
See the Pen oNYzWWX by spiqa design (@spiqa_design) on CodePen.
属性セレクタで指定をするとclassで指定をする手間や、付け忘れでのミスを減らすことができます。
ぜひご活用ください！
株式会社スピカデザイン
渋谷のWEB制作会社「スピカデザイン」の現役コーダー達が、WEB制作のヒントになるような情報をお届けします。
© 2020 spiqa design
https://spiqa.design/