PR
TIPS

Bootstrapと属性セレクタの注意点

Bootstrapのグリッドシステムを用いてレイアウトを作成する際、[class^=col]という属性セレクタを使用すると、意図しない要素にもスタイルが適用される可能性があります。

なぜなら、[class^=col]は「col」から始まるクラス名を持つ要素全てを対象にし、Bootstrapにはcol-*を含むクラスだけでなく、collapseのような他のクラスにも「col」が含まれているためです。

この問題を避けるために、Bootstrapではcol-sm-6、col-sm-7など、具体的なクラス名を直接指定しています。これにより意図した要素だけにスタイルを適用できます。

この記事を書いた人
Naokazu Yokoo

エンジニア歴20年以上。現在はWeb / AI領域で活動中。
開発環境・サーバー環境ともに速度と効率性を追求しています。

Follow Naokazu Yokoo
Follow Naokazu Yokoo

Comment

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