CSSでスタイルの重複をチェックする方法を紹介!

CSSでスタイルの重複をチェックする方法を紹介します。CSS Lintを使うことでCSSのスタイルの重複を簡単に調べる事が出来ます。不要なCSSの記述はなるべく削除しましょう。

コンテンツ [表示]

  1. 1CSSでスタイルの重複をチェックしたい
  2. 2CSSでスタイルの重複をチェックする方法

CSSでスタイルの重複をチェックしたい

CSSでは記述が長くなると、一度設定しているのに重複して同じスタイルを適用する場合などがあります。

CSSでスタイルの記述が重複している例

.header {
  font-size: 1rem;
  margin: 2rem;
  padding: 0;
  border-bottom: 1px solid #999;
  font-size: 1rem; /* スタイルが重複 */
  color: black;
}
.body {
  font-size: 2rem;
  color: black;
}

もちろん重複しても問題無い場合もありますが、CSSのファイル容量としては大きくなるのでWEBページが表示されるまでの時間が長くなる場合があります。スタイルの重複は不要なので、出来れば重複を削除しましょう。

今回はCSSでスタイルの重複をチェックして、重複した記述を削除する方法をご紹介します。

CSSでスタイルの重複をチェックする方法

CSSでスタイルの重複をチェックするにはツールを用いる方法が一番簡単です。ここではすぐに利用できるCSS Lintを紹介します。

下記のサービスにアクセスしましょう。

CSS Lint
CSS Lintの使い方
CSS Lintにアクセスすると、テキストエリアが表示されますので、そこに今回重複を調べたいCSSを貼り付けします。

その後「LINT!」のボタンをクリックしましょう。
CSS Lintで重複を検出した結果
するとCSS Lintの結果画面が表示され、このように重複が検出されます。

あとはこの結果にもとづいてCSS側でスタイルをまとめて、重複を削除しましょう。

このようにCSS Lintを使うと手軽にCSSのスタイルの重複を検出することが出来ます。ぜひお試し下さい。

Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを5月31日までの期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい!

関連記事

【期間限定】全カリキュラム無料で提供中!

Qumeru[クメル]ではプログラミング学習の全カリキュラムを5月31日まで期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひお試し下さい!

目次