クルーデザイン

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 ボタンの基本装飾

最近は他の方が公開されているボタンのCSSやCSSフレームワークで用意されているボタンがありますので楽ですよね。 ただ、仕事で制作するサイトはデザイナーさんはサイト専用のボタンをデザインされる事が多い …

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

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

CSS テキストボックスのフォーカス時の青枠を無効にする

もしかするとChromeだけかもしれませんが、テキストボックスや画像にフォーカスされた時に青い枠が出てしまいます。 ↓こんなのです。 違和感がありますので、解除する方法を調べました。 CSSの設定のみ …

CSS 未加工の画像から丸いアイコンを作る(普通の画像だけでOK)

アイコンのような画像を表示させたいときがあります。 きれいな正円の中に画像が配置されているやつですね。   いちいち元画像から上記のような画像に加工するのは面倒ですよね。 画像データが増える …

CSS テキストエリアのサイズ変更機能を無効にするには?サンプル付き

たいていのブラウザで、テキストエリアのサイズはユーザーが自由に変更できるようになっています。 ユーザーにとっては便利な機能ですが、テキストエリアのサイズを自由に変更されすぎるとレイアウトが崩れる原因に …


comment

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