# スライドタイトル

- ポイント1
- ポイント2
- ポイント3

<!-- _class: title -->

# プレゼンテーションタイトル

発表者名  
日付

<!-- _class: section -->

# セクションタイトル

<!-- _class: image -->

![画像の説明](./path/to/image.png)

<!-- _class: content-image -->

# タイトル

テキストコンテンツ

![画像](./image.png)

<!-- _class: content-image-right -->

# タイトル

左側にテキストコンテンツ

![右側に表示される画像](./image.png)

<!-- _class: content-image-left -->

# タイトル

右側にテキストコンテンツ

![左側に表示される画像](./image.png)

<!-- _class: content-image-right content-70 -->

# タイトル

コンテンツが70%の幅を占める

![画像が30%の幅を占める](./image.png)

<!-- _class: text-center -->

このテキストは中央揃えになります

<!-- _class: all-text-center -->

# 見出しも
## 小見出しも
すべてのテキストが中央揃えになります

<!-- _class: align-center -->

# タイトル

このコンテンツはスライドの垂直中央に配置されます

<!-- _class: content-center -->

# タイトル

コンテンツがスライド中央に配置されます

<!-- _class: column-layout -->

<div class="column">

## 左カラム

左側のコンテンツ
</div>
<div class="column">

## 右カラム

右側のコンテンツ
</div>

<!-- _class: text-blue -->

このテキストはブルーで表示されます

<!-- _class: text-red -->

このテキストはレッドで表示されます

<!-- _class: all-text-blue -->

# すべてのテキスト
## がブルーになります

- リストも
- ブルーです

# 見出しの色変更（**ここだけ青色にできます**）
全ての見出しで**で囲んだ部分が青色になります。

<!-- _class: no-header -->

ヘッダーが表示されないスライド

<!-- _class: small-text -->

# 文字を小さくする

スライド全体のフォントサイズが20%程度縮小されます。
情報量が多いスライドや、通常のサイズでは収まりきらない内容を表示する際に便利です。

# 見出し1 (40px)
## 見出し2 (36px)
### 見出し3 (32px)
#### 見出し4 (26px)
##### 見出し5 (22px)
###### 見出し6 (20px)

**太字テキスト** - より濃いグレーで表示

*斜体テキスト* - 標準グレーの斜体で表示

***太字斜体テキスト*** - 組み合わせ

<small>小さなテキスト（注釈用）</small>

- アイテム1
- アイテム2
  - サブアイテム1
  - サブアイテム2
- アイテム3

1. 最初のステップ
2. 次のステップ
   1. サブステップA
   2. サブステップB
3. 最後のステップ

ここに `インラインコード` が含まれます。

```python
def hello_world():
    print("Hello, World!")
    return "success"

| ヘッダー1 | ヘッダー2 | ヘッダー3 |
| --------- | --------- | --------- |
| データ1   | データ2   | データ3   |
| データ4   | データ5   | データ6   |
| データ7   | データ8   | データ9   |

[クラスメソッド公式サイト](https://classmethod.jp)

[内部リンク](#セクション名)

![画像の説明](./path/to/image.png)

![画像の説明 w:400](./path/to/image.png)
<!-- w:400 幅400pxで表示 -->

![画像の説明 w:50%](./path/to/image.png)
<!-- w:50% 親要素の50%幅で表示 -->

![画像の説明 w:800 h:600](./path/to/image.png)
<!-- w:800 h:600 幅800px、高さ600pxで表示 -->

<!-- _class: content-image-right content-70 h1-text-blue text-center -->

# ブルーの中央揃えタイトル

中央揃えのテキストコンテンツ

![右側の画像](./image.png)