クルーデザイン

Webの勉強をしよう!Web制作の技術やサービス情報を発信します。

CSS

CSS 正規表現でクラスを複数指定する

投稿日:2017年11月22日 更新日:

CSSで作成するクラスはなるべく少ない方が良いですよね。
でも実際は仕方なく同じようなクラスを作らざるを得ない状況もあります。
その同じようなクラスにも1つずつ同じ属性を設定していくなんて事も多々あります。
かといって属性ごとにクラスを作って指定していくと困難なコードになります。
※特にCSSフレームワークを利用している時はクラス名だらけになります。

同じような属性を1つずつ設定していくのは面倒なので「正規表現」を利用して楽をしていきましょう!

「正規表現」を上手に利用するためには「クラス名に法則性を持たせる」事が重要です。
例えば、下線の装飾をするクラス名には「under」という名前を付けておくと「正規表現」で指定しやすいです。

正規表現を使ってCSSのクラスを指定する方法

代表的な「正規表現」は以下の3つです。

  • 行頭にマッチ(例:underで始まるクラスを指定)
  • 行末にマッチ(例:boldで終わるクラスを指定)
  • 部分一致(例:クラス名のどこかにthroughがある)

行頭にマッチ

例えばクラス名が「under」で始まる全てのクラスに対して属性を設定したい場合は「[class^=”クラス名”]」を指定すればOKです。
上記の例だとPタグに指定されている「under」で始まる全てのクラスに下線を付けるという意味になります。

ちなみに「^」というのが「〜で始まる」という正規表現になります。

行末にマッチ

今度は逆にクラス名が「bold」で終わる全てのクラスに対して属性を設定したい場合は「[class$=”bold”]」と指定します。
行頭にマッチの「^」が「$」になっただけです。
上記の例だとPタグに指定されている「bold」で終わる全てのクラスを太字にするという意味になります。
簡単ですよね。

部分一致

これも簡単です。
上記の例だとクラス名のどこかに「through」が含まれている全てのクラスに取り消し線を付けるという意味になります。

サンプルも作ったので見て下さいね。

上記3つが最も簡単なCSSの正規表現になります。
指定したルールにマッチクラスを複数指定できるので非常に協力ではないでしょうか。
その他にも便利な正規表現は色々とありますので、また紹介したいと思います。

-CSS

執筆者:

関連記事

CSS Animate.css の基本サンプル(通常・クリックされた・マウスオーバー)

テキストだけのサイトだと「さびしい」「少しだけ動きが欲しい」という場合には「Animate.css」が便利です。 Animate.cssは、あらかじめ定義されているクラスを追加するだけで要素にアニメー …

CSS 丸、正円の中に数字・文字を書く!(サンプル付き)

良くあるデザインで丸の中に数字や文字が入っているものがありますよね。 画像にしてしまうのも良いですが、汎用性も考えて出来ればCSSでやってしまいたいですね。 中の文字や大きさも自由に変更できるので、後 …

CSS Google Fonts 日本語(試験的)

Google Fonts + 日本語 早期アクセス というサイトが出来ていますね! Google Fonts の日本語(試験的)のようです。 まだ試験中なので、本番の Google Fontsサイト  …

CSS 画像の上に文字を重ねて表示させる(サンプル付き)

今回は画像の上に文字やタイトルを重ねて表示してみましょう! 少しオシャレで良い感じですよね。   こんな仕組みのものを作ります 画像をきっちりと囲む領域を作り「position:relati …

CSS ブロック要素(div)の内側に枠線を引く(box-sizing)

きっちりとブロック要素の幅をしていしていたのに、枠線を引いたとたんレイアウトが崩れることがあります。 レイアウト崩れが起こる原因 これは、枠線はブロック要素の外側に引かれるためです。 例えば、横幅「1 …


comment

メールアドレスが公開されることはありません。