AstroコンポーネントのスタイルとCSSの便利なスコープ化
次に、Astroコンポーネントにおけるスタイリング、およびCSSの影響範囲についてご紹介します。
Astroコンポーネントに記述したマークアップを装飾したい場合は、同ファイル内で<style>タグを追加して、直接CSSを記述することができます。
<header class="header">
<a href="/"><img src="/favicon.svg" alt="Astro" width="40" height="40"></a>
<nav>
<ul class="menu">
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
</ul>
</nav>
</header>
<style>
.header {
display: flex;
gap: 1rem;
align-items: center;
}
.menu {
display: flex;
gap: 1rem;
margin: 0;
padding: 0;
list-style-type: none;
}
</style>
上記のように、ヘッダー用のコンポーネントであるHeader.astroを一部修正し、classの付与と<style>タグ内にレイアウトを調整するCSSを記述しました。
開発サーバーで、ヘッダーに対してスタイルが適用されていることが確認できます。
このように、Astroコンポーネントは、HTMLとCSSをひとまとめにしたUIパーツとして、見通しの良いコーディングを行うことができます。
ここで先ほどHeader.astro内で記述した<style>の内容を振り返ってみましょう。
<style>
.header {
display: flex;
gap: 1rem;
align-items: center;
}
.menu {
display: flex;
gap: 1rem;
margin: 0;
padding: 0;
list-style-type: none;
}
</style>
.headerや.menuなど、いかにも汎用的で、どこかでバッティングしそうなclass名が使われていることが気になるのではないでしょうか？
CSSを記述するうえでの注意点の一つ、「同名のclass指定により、スタイルが上書きされる」を気にしなければならないところですが、Astroコンポーネント内の<style>で記述されたCSSは、同コンポーネント内に記述されたマークアップにのみ適用されるように、自動的に影響範囲が限定されるようになっています。
ブラウザの開発ツールを用いてHTML上のヘッダー要素を確認してみましょう。
<header class="header" data-astro-cid-3ef6ksr2>
<a href="/" data-astro-cid-3ef6ksr2><img src="/favicon.svg" alt="Astro" width="40" height="40" data-astro-cid-3ef6ksr2></a>
<nav data-astro-cid-3ef6ksr2>
<ul class="menu" data-astro-cid-3ef6ksr2>
<li data-astro-cid-3ef6ksr2><a href="/" data-astro-cid-3ef6ksr2>Home</a></li>
<li data-astro-cid-3ef6ksr2><a href="/about" data-astro-cid-3ef6ksr2>About</a></li>
</ul>
</nav>
</header>
<header class="header" data-astro-cid-3ef6ksr2>のように、ユニークなdata属性（data-***）が自動的に付与されていることがわかります。
そして、適用されているCSSを見ると、
.header[data-astro-cid-3ef6ksr2] {
display: flex;
gap: 1rem;
align-items: center;
}
HTMLに付与されたdata属性（data-***）を使って、そのコンポーネント内の要素に範囲を限定してスタイルが適用されるようになっています。
仮に別のAstroコンポーネント内で同名の.headerが使われたとしても、そのコンポーネント内の要素に限定されたCSSとして機能するため、意図しないスタイルの上書きを防ぐことができます。
注意点として、グローバルに読み込まれたCSSファイル内に同名のclassがあれば、上書きや追加の対象となります。
AstroによるCSSのスコープ化は非常に便利ですが、それを過信し過ぎず、適度な命名規則を心がけるようにしましょう。
外部スタイルの利用
Astroでは、コンポーネント内でスコープされたCSSの他に、外部のグローバルなスタイルシートを読み込んで使用することもできます。
準備として、src/cssフォルダーを作成し、中にglobal.cssファイルを作成します。
global.cssにすべてのページに適用されるCSSを記述します。
:root {
--color-primary: #1e40af;
}
body {
margin: 0;
padding: 2rem;
background-color: #eff6ff;
}
そして、index.astroで、global.cssを読み込む記述を追加します。
---
import "../css/global.css";
import Header from '../components/Header.astro';
---
<!DOCTYPE html>
<html lang="ja">
<head>...(略)...</head>
<body>
...(略)...
<main class="main">
<article class="article">
<h1 class="title">Astro</h1>
<p>Homeページです。</p>
</article>
</main>
</body>
</html>
修正箇所は以下のとおりです。
-
コンポーネントスクリプト内で、
global.cssをimportする（読み込むページから見た相対パスで記述）import "../css/global.css";
開発サーバーで、Homeページにglobal.cssで記述したスタイルが適用されていることが確認できます。
このように、いわゆるリセットCSSや、CSSカスタムプロパティ、ベースとなるマークアップのスタイルなどを、外部のCSSファイルとして管理・運用することができます。
