LESSON 07 · 約30分

CSS・画像・ブラウザーの処理を整える

部品の見た目を閉じ込め、小さな操作をJavaScriptで加えます。

コードを試す前に

02で作成する基本プロジェクトが前提です。各コード例は独立した学習用の例です。

各コードは独立した学習用の例で、すべてを順に一つのプロジェクトへ上書きする形式ではありません。同じレッスン内の対応ファイルは組み合わせます。依存関係・入力ファイル・実行条件は各noteに記載します。

開発環境の準備を確認する →

このレッスンでわかること

scoped CSSとグローバルCSSを使い分けられる
frontmatterとscriptの実行場所を説明できる
画像の置き場所を用途で選べる

styleは部品の見た目を担当する

Astroの通常の<style>は、そのコンポーネントの要素を対象にするscoped CSSです。サイト全体のリセットや共通トークンは、レイアウトで共通CSSをimportする方法などにまとめます。全体へ効かせるis:globalは便利ですが、意図せず他の部品へ影響しないか確認します。

画像の場所と処理

srcに置いた画像をimportし、astro:assetsのImageを使うと、対応する画像処理や寸法情報を利用できます。publicのファイルはURLで参照して原則そのまま配信します。画像には内容に合ったaltを付け、装飾だけなら空のaltを使います。大きな画像をCSSで小さく見せるだけでは転送量は減りません。

クリックはscriptで受け取る

テンプレート内の<script>はブラウザーへ送るJavaScriptです。addEventListenerでクリックを受け取り、DOMの表示を変えます。documentやwindowはここで使います。frontmatterの変数へ直接アクセスはできないので、必要な公開値だけdata属性などで渡します。秘密の値はHTMLやscriptへ埋め込みません。

部品を複数置いた場合も考える

属性のない通常のscriptはAstroが処理し、同じ部品を繰り返してもページ内で重複排除されます。ボタンを一つだけ取得するコードだと他のボタンに処理が付きません。querySelectorAllで全要素を扱うか、custom elementで部品ごとに初期化します。is:inlineは最適化の合図ではなく、Astroのscript処理を省く指定です。

各ボタンに独立した読了表示を付ける

src/components/ReadButton.astro

<button type="button" data-read-button aria-pressed="false">未読</button>
<script>
  document.querySelectorAll('[data-read-button]').forEach((button) => {
    button.addEventListener('click', () => {
      const done = button.getAttribute('aria-pressed') === 'true';
      button.setAttribute('aria-pressed', String(!done));
      button.textContent = done ? '未読' : '読了';
    });
  });
</script>
<style>
  button { padding: 0.7rem 1rem; border: 1px solid currentColor; }
  button[aria-pressed="true"] { background: #204b42; color: white; }
  button:focus-visible { outline: 3px solid #b45309; outline-offset: 3px; }
</style>

この部品をページにimportして2個置きます。状態はそのページ滞在中だけで、再読み込み時に初期化されます。ClientRouterは導入していない前提です。

ローカル画像を表示する

src/components/TravelPhoto.astro

---
import { Image } from 'astro:assets';
import harbor from '../assets/harbor.jpg';
---
<Image src={harbor} alt="朝の港に並ぶ小さな船" width={800} />

実際の画像src/assets/harbor.jpgが必要です。権利を持つ画像を用意します。画像処理の対応は形式と配置先も確認します。

TRY IT YOURSELF

見た目と操作を別々に確認する

ReadButtonを2個置き、それぞれ押す
TabとEnterまたはSpaceで操作する
再読み込みで状態が戻る理由を説明する
画像を細い画面で表示し、横にはみ出さないCSSを加える

できたらOK：操作部分だけにブラウザーの処理が必要だと説明できる

QUICK CHECK

理解を確かめよう

公式資料でもう少し詳しく

ここまで読めたら、ひとつ前進。