コンテンツにスキップ
Starlight

CSSとスタイリング

カスタムCSSファイルやStarlightのTailwindプラグインを使用して、Starlightサイトをスタイリングできます。

カスタムCSSスタイル

Starlightサイトに適用されるスタイルをカスタマイズするには、追加のCSSファイルを作成し、Starlightのデフォルトスタイルを変更または拡張します。

  1. src/ディレクトリにCSSファイルを追加します。たとえば、以下ではデフォルトのカラム幅を広げ、ページタイトルのテキストサイズを大きくしています。

    src/styles/custom.css
    :root {
      --sl-content-width: 50rem;
      --sl-text-5xl: 3.5rem;
    }

  2. astro.config.mjsで、StarlightのcustomCss配列にCSSファイルへのパスを追加します。

    astro.config.mjs
    import { defineConfig } from 'astro/config';
    import starlight from '@astrojs/starlight';
    

    export default defineConfig({
      integrations: [
        starlight({
          title: 'カスタムCSSを設定したドキュメント',
          customCss: [
            // カスタムCSSファイルへの相対パス
            './src/styles/custom.css',
          ],
        }),
      ],
    });

GitHub上のprops.cssファイルで、サイトをカスタマイズするために設定可能な、Starlightが使用しているすべてのカスタムCSSプロパティを確認できます。

Tailwind CSS

AstroプロジェクトでのTailwind CSSのサポートは、AstroのTailwindインテグレーションによって提供されています。また、Starlightは、Starlightのスタイルとの互換性を保ちつつTailwindを設定するのに役立つ、補完的なTailwindプラグインを提供しています。

StarlightのTailwindプラグインは、以下の設定を適用します。

  • Tailwindのdark:バリアントをStarlightのダークモードと連携するように設定します。
  • UStarlightのUIでTailwindのテーマカラーとフォントを使用します。
  • TailwindのPreflightリセットスタイルを無効化した上で、Tailwindのボーダーユーティリティクラスに必要なPreflightの必須部分のみ有効化します。

Tailwindを使用して新しいプロジェクトを作成する

create astroを使用して、Tailwind CSSが組み込まれた新しいStarlightプロジェクトを開始します。

Terminal window
npm create astro@latest -- --template starlight/tailwind

Tailwindを既存のプロジェクトに追加する

既存のStarlightサイトにTailwind CSSを追加する場合は、以下の手順に従ってください。

  1. AstroのTailwindインテグレーションを追加します。

    Terminal window
    npx astro add tailwind

  2. StarlightのTailwindプラグインをインストールします。

    Terminal window
    npm install @astrojs/starlight-tailwind

  3. Tailwindのベーススタイル用のCSSファイルを、src/tailwind.cssなどの場所に作成します。

    src/tailwind.css
    @tailwind base;
    @tailwind components;
    @tailwind utilities;

  4. 上で作成したTailwindのベーススタイルを使用し、またデフォルトのベーススタイルを無効とするように、Astroの設定ファイルを更新します。

    astro.config.mjs
    import { defineConfig } from 'astro/config';
    import starlight from '@astrojs/starlight';
    import tailwind from '@astrojs/tailwind';
    

    export default defineConfig({
      integrations: [
        starlight({
          title: 'Tailwindを使ったドキュメント',
          customCss: [
            // Tailwindのベーススタイルへのパス
            './src/tailwind.css',
          ],
        }),
        tailwind({
          // デフォルトのベーススタイルを無効にする
          applyBaseStyles: false,
        }),
      ],
    });

  5. StarlightのTailwindプラグインをtailwind.config.mjsに追加します。

    tailwind.config.mjs
    import starlightPlugin from '@astrojs/starlight-tailwind';
    

    /** @type {import('tailwindcss').Config} */
    export default {
      content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
      plugins: [starlightPlugin()],
    };

StarlightをTailwindでスタイリングする

Starlightは、Tailwindのテーマの設定値をUIで使用します。

以下のオプションが設定されている場合、Starlightのデフォルトスタイルが上書きされます。

  • colors.accent — リンクと現在のアイテムのハイライトに使用されます
  • colors.gray — バックグラウンドカラーとボーダーに使用されます
  • fontFamily.sans — UIとコンテンツのテキストに使用されます
  • fontFamily.mono — コード例に使用されます
tailwind.config.mjs
import starlightPlugin from '@astrojs/starlight-tailwind';
import colors from 'tailwindcss/colors';


/** @type {import('tailwindcss').Config} */
export default {
  content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
  theme: {
    extend: {
      colors: {
        // 好みのアクセントカラー。インディゴはStarlightのデフォルトに最も近い色です。
        accent: colors.indigo,
        // 好みのグレースケール。ZincはStarlightのデフォルトに最も近い色です。
        gray: colors.zinc,
      },
      fontFamily: {
        // 好みのテキストフォント。Starlightはデフォルトでシステムフォントスタックを使用します。
        sans: ['"Atkinson Hyperlegible"'],
        // 好みのコードフォント。Starlightはデフォルトでシステムの等幅フォントを使用します。
        mono: ['"IBM Plex Mono"'],
      },
    },
  },
  plugins: [starlightPlugin()],
};

テーマの設定

Starlightのカラーテーマは、デフォルトのカスタムプロパティを上書きしてコントロールできます。これらの変数はUI全体で使用されます。テキストと背景色にはグレーシェードが使用され、リンクとナビゲーションの現在のアイテムをハイライトするためにはアクセントカラーが使用されます。

テーマカラーエディタ

以下のスライダーを使用して、Starlightのアクセントカラーとグレーカラーのパレットを変更してみましょう。ダークとライトのプレビューエリアには、結果となる色の組み合わせが表示されます。また、このページ自体も合わせて更新されるため、変更内容をプレビューできます。

コントラストレベルオプションで、WCAGによる色のコントラスト基準から満たしたいものを指定します。

変更内容に満足できたら、以下のCSSまたはTailwindコードをコピーしてプロジェクトで使用します。

プリセット
コントラストレベル
アクセント
グレー

ダークモード

本文は背景とのコントラストが高いグレーシェードで表示されます。 リンクは色付けされます。 目次などの一部のテキストは、コントラストが低くなります。 インラインコードは独自の背景色をもちます。

ライトモード

本文は背景とのコントラストが高いグレーシェードで表示されます。 リンクは色付けされます。 目次などの一部のテキストは、コントラストが低くなります。 インラインコードは独自の背景色をもちます。

以下のCSSをカスタムCSSファイルに追加して、このテーマをサイトに適用します。