CSSの継続を避ける

technologies

1.概要

ウェブサイト開発において、モジュール化は非常に重要です。一度綺麗に工夫されたコンポーネントは、どこでも何回でも同じように使えます。便利な機能ですが、適切なCSSスタイルが設定されていないと、別の場所でインポートする際に、目的地のCSSスタイルがコンポーネントのCSSに影響を与え、コンポーネントの見た目が変わる可能性があります。 今回、コンポーネントのCSSに影響を受けずに利用する方法について紹介します。

2.シミュレーション

サンプルソースコードを元に説明します。

index.html

<html>
  <head>
    <link rel="stylesheet" href="index.css">
    <link rel="stylesheet" href="component.css">
  </head>
  <body>
    <button class="button_hello_world">
      Hello World
    </button>
  </body>
</html>

index.css

/* nothing yet */

component.css

.button_hello_world {
  background-color: green;
  color: white;
  border-radius: 4px;
  padding: 8px;
  font-family: Arial, Helvetica, sans-serif;
}

上記３つのファイルを同じフォルダーに置き、ブラウザでindex.htmlを開くとブラウザにHello Worldボタンが表示されます。

結果

この例では、<button>タグと「component.css」はコンポーネントとしてindex.htmlにインポートされます。index.htmlのスタイルが指定されていないため、ボタンの見た目には影響がありません。

今度は、index.htmlのスタイルファイルを使用してボタンの外観を変更してみます。次に示すように、index.cssファイルを修正します。

index.css

button {
  border: solid 10px red;
}

修正後、ブラウザでindex.htmlファイルを開くとボタンの見た目が変化します。

結果

これは基本的なCSSの動作ですが、不便な点も存在します。ボタンの端などにスタイルを設定するつもりがなくても、目的地のCSSが意図しないところに影響を与えることがあります。

3.解決方法

方法1：一番直感的な対策はコンポーネントスタイルを全て設定することです。 上記のcomponent.cssファイルでborderスタイルを設定し、

button_hello_world {
  background-color: green;
  color: white;
  border-radius: 4px;
  padding: 8px;
  font-family: Arial, Helvetica, sans-serif;
  border: outset 2px rgb(118, 118, 118);
}

修正後、ブラウザでindex.htmlファイルを開くとボタンの見た目が元に戻ります。

結果

この方法は理解しやすいですが、実現が難しいです。スタイルのプロパティが非常に多く、全てを設定することは難しいからです。

方法2： 外部CSSがコンポーネントのスタイルに影響しないように最初にコンポーネントのスタイルをリセットします。「all」というプロパティに「unset」値を割り当てます。そして、外部CSSはどれだけのプロパティを設定しても、内部CSSに影響を与えずに通常通りのスタイルを設定することができ、コンポーネントは正常に表示されます。

index.css

button {
  border: solid 10px red;
  box-shadow: 5px 5px 5px #444;
  margin: 20px;
}

component.css

.button_hello_world {
  all: unset;
  background-color: green;
  color: white;
  border-radius: 4px;
  padding: 8px;
  font-family: Arial, Helvetica, sans-serif;
}
結果

これなら外部からボタンスタイルを設定してもコンポーネントの見た目が変わりません。 注意：外部CSSで「!important」を使った場合、外部CSSの優先度がより高いため、「all: unset」が無効になります。

index.css

button {
  border: solid 10px red !important;
  box-shadow: 5px 5px 5px #444 !important;
  margin: 20px !important;
}
結果

4.結論

コンポーネントのスタイルを外部CSSの影響から守るため「all: unset」というCSS設定が利用できます。利用シーンがあればぜひ使用してみてください。

関連記事一覧