スクリーンショット

Screenshot コンポーネントは、ユーザーがサイトテーマを切り替えた際にライトバリアントとダークバリアントを自動的に切り替える、テーマ対応の画像をレンダリングします。読者の現在のカラースキームに合わせた UI スクリーンショットを表示する必要がある場合に使用してください。

プロパティリファレンス

プロパティ	型	必須	説明
light	string	いいえ	ライトモード画像へのパス
dark	string	いいえ	ダークモード画像へのパス
alt	string	はい	アクセシビリティ用の代替テキスト
width	number	いいえ	ピクセル単位の画像の幅
height	number	いいえ	ピクセル単位の画像の高さ

ノート

light または dark のいずれか一方は必ず指定してください。 両方を指定した場合、コンポーネントはアクティブなテーマに基づいてそれらを切り替えます。

デュアルモード（ライト + ダーク）

light と dark の両方のプロパティを指定することで、各テーマに対応した正しいバリアントを表示できます。 右上のテーマセレクターでテーマを切り替えると、画像が切り替わる様子を確認できます。

import Screenshot from '@f5-sales-demo/docs-theme/components/Screenshot.astro';

<Screenshot
  light="/images/screenshot-example-light.png"
  dark="/images/screenshot-example-dark.png"
  alt="Docs theme homepage"
/>

ヒント

UI をドキュメント化する際は、必ずライトとダーク両方のスクリーンショットをキャプチャしてください。 これにより、読者のテーマ設定に関わらず正確な表示を提供できます。

シングル画像

バリアントが一つしか利用できない場合は、light または dark のいずれかのみを指定します。 画像は切り替えなしに両方のテーマでレンダリングされます。

<Screenshot
  dark="/images/screenshot-example-dark.png"
  alt="Docs theme homepage (dark only)"
/>

サイズ指定あり

width と height を使用して、レンダリングサイズを制御し、レイアウトシフトを防止します。

<Screenshot
  light="/images/screenshot-example-light.png"
  dark="/images/screenshot-example-dark.png"
  alt="Docs theme homepage at fixed width"
  width={600}
  height={338}
/>

動作の仕組み

このコンポーネントは、.screenshot-pair ラッパー内に 1 つまたは 2 つの <img> 要素をレンダリングします。CSS ルールによってアクティブなテーマに基づいて表示が切り替わります。

• ダークモード（デフォルト）— .screenshot-light 画像は :root:not([data-theme="light"]) .screenshot-light \{ display: none \} によって非表示になります。
• ライトモード — .screenshot-dark 画像は :root[data-theme="light"] .screenshot-dark \{ display: none \} によって非表示になります。

追加のセレクターは、:has() を使用して starlight-image-zoom ラッパーを処理し、ズーム機能が両方のバリアントで正しく動作するようにしています。

すべてのスクリーンショット画像には一貫したスタイルが適用されます：微妙なボーダー、角の丸み、そしてホバー時に強調されるドロップシャドウです。

Markdown 画像との比較

機能	Screenshot コンポーネント	Markdown 
テーマ対応の切り替え	あり	なし
スタイル付きボーダーとシャドウ	自動	なし
ホバーシャドウ効果	あり	なし
ズームサポート	画像ズームプラグインと連携	画像ズームプラグインと連携
代替テキスト	alt プロパティ	![alt text]()

テーマ固有の画像バリアントがある場合や、スタイル付きスクリーンショットの外観を使用したい場合は Screenshot コンポーネントを使用してください。インライングラフィック、図、または両方のテーマで同じ見た目の画像には標準の Markdown 画像を使用してください。