見出し

DevSite ページの最上位の見出しは <h1> にする必要があります。非ビジュアル ブラウザが混乱しないように、ページの本文に別の <h1> を含めることはできません。nbgenerate ツールは、DevSite の HTML と Markdown のコンテンツとテンプレートを Colab 互換の Jupyter ノートブックに変換します。

サイズ

見出し 1

見出し 2

見出し 3

見出し 4

見出し 5
見出し 6

HTML

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

マークダウン

# Heading 1
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6

目次

DevSite では、<h2> と <h3> が「このページ」の目次（ToC）に自動的に追加されます。

目次の見出しを非表示にする

見出しが追加されないようにするには（上記のセクションの「Heading 2」や「Heading 3」のように、目次に表示されない見出しを追加しないようにするには）、class="hide-from-toc" を適用します。

見出し 2

見出し 3

HTML

<h2 class="hide-from-toc">Heading 2</h2>
<h3 class="hide-from-toc">Heading 3</h3>

マークダウン

## Heading 2 {:.hide-from-toc}
### Heading 3 {:.hide-from-toc}

目次の見出しテキストをカスタマイズする

目次のテキストを実際の見出しと異なるものにする場合（このセクションなど）、見出しに data-text 属性を設定します。

見出し 2

HTML

<h2 data-text="Custom text for the ToC">Heading 2</h2>

マークダウン

## Heading 2 {: data-text='Custom text for the ToC'}

目次に表内の見出しを含める

テーブル ヘッダー（<th>）内に <h2> または <h3> を配置して、テーブルを強制的に目次に追加することもできます。表のヘッダー内では、<h2> と <h3> は通常のテキストと同じスタイルで表示されるため、区別できません。

ドキュメント ページ（ほとんどのランディング ページのような「全幅」ページではない）では、<h1> 以外の見出しにも、リンクをコピーするためのボタンが表示されます。このボタンは、見出しにカーソルを合わせたときにのみ表示されます。

特定の見出しでこのボタンを無効にするには、その見出しに class="no-link" を適用します。

HTML

<h4 class="no-link">Heading 4</h4>
<h5 class="no-link">Heading 5</h5>

マークダウン

## Heading 4 {:.no-link}
### Heading 5 {:.no-link}

リンクボタンが表示されない見出し（<h1> や全幅ページの見出しなど）にリンクボタンを強制的に表示するには、見出しに class="add-link" を追加します。

見出し 1

HTML

<h1 class="add-link">Heading 1</h1>

マークダウン

# Heading 1 {:.add-link}

番号付き見出し

複雑なコンテンツを含むセクションを複数のステップのプロセス内の個別のステップとして指定するために、<h2> 見出しの前に連続した番号を付けるには、各見出しに番号付きのクラスを追加します。

最初の番号付き見出し

段落、リスト、表、画像、動画、ウィジェットで構成される複雑なコンテンツ。

2 番目の番号付き見出し

段落、リスト、表、画像、動画、ウィジェットで構成される複雑なコンテンツ。

3 番目の番号付き見出し

段落、リスト、表、画像、動画、ウィジェットで構成される複雑なコンテンツ。

HTML

<h2 class="numbered">First numbered heading</h2>

Complex content composed of paragraphs, lists, tables, images, videos, widgets.

<h2 class="numbered">Second numbered heading</h2>

Complex content composed of paragraphs, lists, tables, images, videos, widgets.

<h2 class="numbered">Third numbered heading</h2>

Complex content composed of paragraphs, lists, tables, images, videos, widgets.

マークダウン

## First numbered heading {:.numbered}

Complex content composed of paragraphs, lists, tables, images, videos, widgets.

## Second numbered heading {:.numbered}

Complex content composed of paragraphs, lists, tables, images, videos, widgets.

## Third numbered heading {:.numbered}

Complex content composed of paragraphs, lists, tables, images, videos, widgets.

番号付きの小見出し

<h2> 見出しの後に続く <h3> 見出しに連番を追加するには、各 <h3> 見出しに番号付きのクラスを追加します。

HTML

<h2 class="numbered">Numbered heading</h2>

Complex content composed of paragraphs, lists, tables, images, videos, widgets.

<h3 class="numbered">Numbered subheading</h3>

Complex content composed of paragraphs, lists, tables, images, videos, widgets.

<h3 class="numbered">Numbered subheading</h3>

Complex content composed of paragraphs, lists, tables, images, videos, widgets.

<h3 class="numbered">Numbered subheading</h3>

Complex content composed of paragraphs, lists, tables, images, videos, widgets.

マークダウン

## Numbered heading {:.numbered}

Complex content composed of paragraphs, lists, tables, images, videos, widgets.

### Numbered subheading {:.numbered}

Complex content composed of paragraphs, lists, tables, images, videos, widgets.

### Numbered subheading {:.numbered}

Complex content composed of paragraphs, lists, tables, images, videos, widgets.

### Numbered subheading {:.numbered}

Complex content composed of paragraphs, lists, tables, images, videos, widgets.

番号付き見出し

段落、リスト、表、画像、動画、ウィジェットで構成される複雑なコンテンツ。

番号付きの小見出し

段落、リスト、表、画像、動画、ウィジェットで構成される複雑なコンテンツ。

番号付きの小見出し

段落、リスト、表、画像、動画、ウィジェットで構成される複雑なコンテンツ。

番号付きの小見出し

段落、リスト、表、画像、動画、ウィジェットで構成される複雑なコンテンツ。