CSSの継続を避ける
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;
}
上記3つのファイルを同じフォルダーに置き、ブラウザでindex.htmlを開くとブラウザにHello Worldボタンが表示されます。
![](http://benjamin.co.jp/wp-content/uploads/2024/01/ximage.png.pagespeed.ic.t0ubrkk_VK.png)
この例では、<button>タグと「component.css」はコンポーネントとしてindex.htmlにインポートされます。index.htmlのスタイルが指定されていないため、ボタンの見た目には影響がありません。
今度は、index.htmlのスタイルファイルを使用してボタンの外観を変更してみます。次に示すように、index.cssファイルを修正します。
index.css
button {
border: solid 10px red;
}
修正後、ブラウザでindex.htmlファイルを開くとボタンの見た目が変化します。
![](http://benjamin.co.jp/wp-content/uploads/2024/01/ximage-1.png.pagespeed.ic.j67JqmR829.png)
これは基本的な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ファイルを開くとボタンの見た目が元に戻ります。
![](http://benjamin.co.jp/wp-content/uploads/2024/01/image-2.png)
この方法は理解しやすいですが、実現が難しいです。スタイルのプロパティが非常に多く、全てを設定することは難しいからです。
方法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;
}
![](http://benjamin.co.jp/wp-content/uploads/2024/01/image-3.png)
これなら外部からボタンスタイルを設定してもコンポーネントの見た目が変わりません。 注意:外部CSSで「!important」を使った場合、外部CSSの優先度がより高いため、「all: unset」が無効になります。
index.css
button {
border: solid 10px red !important;
box-shadow: 5px 5px 5px #444 !important;
margin: 20px !important;
}
![](http://benjamin.co.jp/wp-content/uploads/2024/01/image-4.png)
4.結論
コンポーネントのスタイルを外部CSSの影響から守るため「all: unset」というCSS設定が利用できます。利用シーンがあればぜひ使用してみてください。