template

Introduction

このページは標準・独自機能の確認用であり、リストには表示されない。
また、安易にフォーマットするとページが壊れる恐れがあるので注意。

frontmatter

---
# この記事のタイトル
title: template
# この記事の説明文
description: ページ作成用テンプレート。
# サイドバーに一覧表示される際の設定
sidebar:
  # ページの順番の優先度
  order: 1
# headにmetaタグを追加する
head:
  # OGP用のイメージ
  - tag: meta
    attrs:
      property: og:image
      # 実際のURLが必要
      # 対象となるイメージは`public/`に保存すること
      # ファイル形式はjpg推奨
      content: https://dunk-assist.pages.dev/favicon.png
# ページ内目次に反映される<h>要素の階層範囲を設定
tableOfContents:
  minHeadingLevel: 2
  maxHeadingLevel: 4
---

Markdown式

特殊な記法

改行

<br/>

コードブロック

ブロック内に```を記述する場合は`の数を増やすこと。

基本のコードブロック

const message = "Hello, World";
console.log(message);

```ts
const message = "Hello, World";
console.log(message);
```

ファイル名付きコードブロック

const message = "Hello, World";
console.log(message);

```ts title="src/template.ts"
const message = "Hello, World";
console.log(message);
```

特定行の強調

const message1 = "Hello, World";
console.log(message1);
const message2 = "Hello, dunk_assist";
console.log(message2);

```ts {1,3-4}
const message1 = "Hello, World";
console.log(message1);
const message2 = "Hello, dunk_assist";
console.log(message2);
```

差分表示

const oldName = 'Before';
const newName = 'After';

```diff
- const oldName = 'Before';
+ const newName = 'After';
```

サイト内リンク

Markdown式ページ内リンク

画像の表示へ移動

[画像の表示へ移動](#画像の表示)

Markdown式別ページへのリンク

このページに再アクセス

[このページに再アクセス](/hidden/template)

Markdown式別ページの要素へのリンク

このページに再アクセスして画像の表示へ移動

[このページに再アクセスして画像の表示へ移動](/hidden/template#画像の表示)

HTML式ページ内リンク

画像の表示へ移動

[画像の表示へ移動](#link)

HTML式別ページの要素へのリンク

このページに再アクセスして画像の表示へ移動

<a href="/hidden/template#link">このページに再アクセスして画像の表示へ移動</a>

画像の表示

学習用画像

#### 画像の表示<a id="link"></a>
![学習用画像](../../../assets/houston.webp)

標準コンポーネント

Import

import { Icon, LinkCard, CardGrid, FileTree, LinkButton, Steps, Tabs, TabItem } from '@astrojs/starlight/components';

アイコン

利用可能なアイコンの一覧はこちら

import { Icon } from '@astrojs/starlight/components';

<Icon name="star" />
<Icon name="rocket" color="blue" size="2rem" />

カード系

リンクカード

このページに再アクセス

このページに再アクセスここに説明文を記述します。

import { LinkCard } from '@astrojs/starlight/components';

<LinkCard title="このページに再アクセス" href="/hidden/template" />

<LinkCard
  title="このページに再アクセス"
  href="/hidden/template"
  description="ここに説明文を記述します。"
/>

カードグリッド

このページに再アクセス

このページに再アクセスここに説明文を記述します。

import { LinkCard, CardGrid } from '@astrojs/starlight/components';

<CardGrid>
  <LinkCard title="このページに再アクセス" href="/hidden/template" />
  <LinkCard
    title="このページに再アクセス"
    href="/hidden/template"
    description="ここに説明文を記述します。"
  />
</CardGrid>

リンクボタン

始めましょう

ボタン色変更

外部サイト

import { LinkButton } from '@astrojs/starlight/components';

<LinkButton href="/hidden/template">始めましょう</LinkButton>

<LinkButton href="/hidden/template" variant="secondary">
  ボタン色変更
</LinkButton>

<LinkButton
  href="https://example.com/"
  variant="secondary"
  icon="external"
  target="_blank"
  rel="noopener noreferrer"
>
  外部サイト
</LinkButton>

ステップ

コンポーネントをMDXファイルにインポートします:
```
console.log("ボックス内の要素は2段下げる。")
```
ボックス内に詳細を記述する場合は<p>などで囲みます。
ボックス内の要素は2段下げる。

import { Steps } from '@astrojs/starlight/components';

<Steps>
  1. コンポーネントをMDXファイルにインポートします:
      ```ts
      console.log("ボックス内の要素は2段下げる。")
      ```
  2. ボックス内に詳細を記述する場合は`<p>`などで囲みます。
      <p>ボックス内の要素は2段下げる。</p>
</Steps>

タブ

シリウス、ベガ、ベテルギウス

import { Tabs, TabItem } from '@astrojs/starlight/components';

<Tabs>
  <TabItem label="星">シリウス、ベガ、ベテルギウス</TabItem>
  <TabItem label="衛星">イオ、エウロパ、ガニメデ</TabItem>
</Tabs>

タブにアイコンを追加

星
衛星

シリウス、ベガ、ベテルギウス

import { Tabs, TabItem } from '@astrojs/starlight/components';

<Tabs>
  <TabItem label="星" icon="star">
    シリウス、ベガ、ベテルギウス
  </TabItem>
  <TabItem label="衛星" icon="moon">
    イオ、エウロパ、ガニメデ
  </TabItem>
</Tabs>

ファイルツリー

標準

astro.config.mjs
package.json
ディレクトリsrc
- ディレクトリcomponents
  - Header.astro
  - Title.astro
  - …
- ディレクトリpages/
  - …

import { FileTree } from '@astrojs/starlight/components';

<FileTree>
  - astro.config.mjs
  - package.json
  - src
    - components
      - Header.astro
      - Title.astro
      - …
    - pages/
</FileTree>

エントリを強調表示

ディレクトリsrc
- ディレクトリcomponents
  - Header.astro
  - Title.astro

import { FileTree } from '@astrojs/starlight/components';

<FileTree>
  - src
    - components
      - **Header.astro**
      - Title.astro
</FileTree>

コメントを追加

ディレクトリsrc
- ディレクトリcomponents
  - Header.astro 重要なファイル
  - Title.astro

import { FileTree } from '@astrojs/starlight/components';

<FileTree>
  - src
    - components
      - Header.astro **重要な**ファイル
      - Title.astro
</FileTree>

特殊文字をエスケープ

__init__.py
Hello world.txt
READ ME FIRST.md

import { FileTree } from '@astrojs/starlight/components';

<FileTree>
  - `__init__.py`
  - `Hello world.txt`
  - **`READ ME FIRST.md`**
</FileTree>

独自コンポーネント

Import

import { UiBulletList, UiDetails, UiGuideLink, UiImage, UiInfoBox, UiMarker, UiRelatedGrid, UiRelatedLink, UiSteps, UiTable, UiNewsItem, UiNewsList } from "../../../components";

強調

下線マーカー

文中に下線マーカーを引く

下線に警告の固定色を指定する

下線に任意のRGBA色を指定する

import { UiMarker } from "../../../components";

文中に<UiMarker>下線マーカー</UiMarker>を引く

下線に<UiMarker tone="danger">警告の固定色</UiMarker>を指定する

下線に<UiMarker rgba={[255, 180, 80, 0.7]}>任意のRGBA色</UiMarker>を指定する

画像

import { UiImage } from "../../../components";

import imageA from "../../../assets/image/houston.webp";
import imageB from "../../../assets/houston.webp";

<UiImage
  images={[
    {
      src: imageA,
      alt: "1枚目の画像",
    },
    {
      src: imageB,
      alt: "2枚目の画像で最大サイズを調整する場合",
      maxHeight: "20rem",
    },
  ]}
/>

import { UiBulletList } from "../../../components";

<UiBulletList>
  <li>通常の箇条書き項目です。</li>
  <li>
    <UiMarker>下線マーカー</UiMarker>を含む箇条書き項目です。
  </li>
</UiBulletList>

<UiBulletList adjust>
  <li>`adjust`を設定すると左に揃えます。</li>
</UiBulletList>

数字付きリスト

最初の手順を書きます。
tonesで番号と色を指定すると数値の背景が変わります。
ボックス内に詳細を記述する場合は<p>などで囲みます。
ボックス内の要素は4スペース分字下げする必要があります。

Markdown式も可能です。

import { Steps } from "@astrojs/starlight/components";

番号の下の線は、行の間に1つでも改行を挿むと作成されます。
ボックス内の要素にclass="li-top"を設定すると要素の上に線が引かれます。
ただし5の改行とは相性が悪いので注意
<span>を設定すると、その番号では下の線は作られません。

import { UiSteps } from "../../../components";

<UiSteps tones={[[1,"orange"], [2,"pink"], [3,"blue"], [4,"red"], [5,"green"]]}>
  1. 最初の手順を書きます。
      <p class="li-top">borderを引きます。</p>
  2. <span>次の手順を書きます。</span>
</UiSteps>

<UiSteps tones={[[1,"orange"], [2,"pink"], [3,"blue"], [4,"red"], [5,"green"]]}>
  1. 最初の手順を書きます。
  2. `tones`で番号と色を指定すると数値の背景が変わります。
  3. ボックス内に詳細を記述する場合は`<p>`などで囲みます。
      <p>ボックス内の要素は4スペース分字下げする必要があります。</p>
  4. `Markdown式`も可能です。
      ```js
      import { Steps } from "@astrojs/starlight/components";
      ```
  5. 番号の下の線は、行の間に1つでも改行を挿むと作成されます。

  6. ボックス内の要素に`class="li-top"`を設定すると要素の上に線が引かれます。
      <p class="li-top">ただし5の改行とは相性が悪いので注意</p>
  7. <span>`<span>`を設定すると、その番号では下の線は作られません。</span>
</UiSteps>

表

項目	説明
通常項目	`noWrapLeft`を指定することで、項目が改行しなくなります。
マーカー	表のセル内でも重要な語句を強調できます。
箇条書き	セル内に箇条書きを入れられます。説明が複数ある場合に使えます。

import { UiTable } from "../../../components";

<UiTable noWrapLeft>
  <thead>
    <tr>
      <th>項目</th>
      <th>説明</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>通常項目1</td>
      <td>
        説明1
      </td>
    </tr>
    <tr>
      <td>通常項目2</td>
      <td>
        説明2
      </td>
    </tr>
  </tbody>
</UiTable>

情報ボックス

これは通常の補足情報です。背景色は本文側には付けず、左側のアイコン帯だけで種類を示します。

これは注意情報です。操作前に確認してほしい内容を書くときに使います。

これは重要な警告です。データ破損や取り返しのつかない操作に関する説明に使います。

import { UiInfoBox } from "../../../components";

<UiInfoBox>
  これは通常の補足情報です。背景色は本文側には付けず、左側のアイコン帯だけで種類を示します。
</UiInfoBox>

<UiInfoBox tone="warning">
  これは注意情報です。操作前に確認してほしい内容を書くときに使います。
</UiInfoBox>

<UiInfoBox tone="danger">
  これは重要な警告です。データ破損や取り返しのつかない操作に関する説明に使います。
</UiInfoBox>

details

詳しい説明を見る

ここに折りたたみ内の本文を書きます。

箇条書き
code
通常の文章

import { UiDetails } from "../../../components";

<UiDetails>
  <details>
    <summary>詳しい説明を見る</summary>

    ここに折りたたみ内の本文を書きます。
    - 箇条書き
    - `code`
    - 通常の文章
  </details>
</UiDetails>

リンクカード

guide-list

サムネイル画像がある内部リンク

NO IMAGE

サムネイル画像がない内部リンク

外部リンク

外部サイトへのリンク

import { UiGuideLink } from "../../../components";

<UiGuideLink
  href="/hidden/template"
  title="サムネイル画像がある内部リンク"
  image={imageA}
/>

<UiGuideLink
  href="/hidden/template"
  title="サムネイル画像がない内部リンク"
/>

<UiGuideLink
  href="https://example.com/"
  title="外部サイトへのリンク"
  image={imageA}
  external
/>

お知らせ / 更新情報

2026.06.01ツール更新dunk_assist v1.2.0 を公開しました
2026.05.28記事更新テンプレートを更新しました
2026.05.20動画解説動画を公開しました
2026.05.10お知らせDaVinci Resolve 20での動作確認を追加しました
2026.05.10任意ラベルラベルは全角で5文字以内にすること

import { UiNewsItem, UiNewsList } from "../../../components";

<UiNewsList>
  <UiNewsItem
    date="2026-06-01"
    type="tool"
    title="dunk_assist v1.2.0 を公開しました"
    href="https://shihabuki.fanbox.cc/posts/8364157"
    external
  />

  <UiNewsItem
    date="2026-05-28"
    type="article"
    title="テンプレートを更新しました"
    href="/hidden/template"
  />

  <UiNewsItem
    date="2026-05-20"
    type="video"
    title="解説動画を公開しました"
    href="https://youtube.com/playlist?list=PLth9cfLQrdQV-VEFtWzgVlm-JaMJwfJrr&si=pJCbcDuE3hHQVikX"
    external
  />

  <UiNewsItem
    date="2026-05-10"
    type="notice"
    title="DaVinci Resolve 20での動作確認を追加しました"
  />

  <UiNewsItem
    date="2026-05-10"
    label="任意ラベル"
    title="ラベルは全角で5文字以内にすること"
  />
</UiNewsList>

template

Introduction

frontmatter

Markdown式

特殊な記法

改行

コードブロック

基本のコードブロック

ファイル名付きコードブロック

特定行の強調

差分表示

サイト内リンク

Markdown式ページ内リンク

Markdown式別ページへのリンク

Markdown式別ページの要素へのリンク

HTML式ページ内リンク

HTML式別ページの要素へのリンク

画像の表示

標準コンポーネント

Import

アイコン

カード系

リンクカード

カードグリッド

リンクボタン

ステップ

タブ

標準のタブ

タブにアイコンを追加

ファイルツリー

標準

エントリを強調表示

コメントを追加

特殊文字をエスケープ

独自コンポーネント

Import

強調

下線マーカー

画像

リスト

箇条書きリスト

数字付きリスト

表

情報ボックス

details

リンクカード

guide-list

サムネイル画像がある内部リンク

サムネイル画像がない内部リンク

外部サイトへのリンク

関連ページ用リンクカード

お知らせ / 更新情報