---
# You can also start simply with 'default'
#theme: default
theme: seriph
# random image from a curated Unsplash collection by Anthony
# like them? see https://unsplash.com/collections/94734566/slidev
background: https://cover.sli.dev
# some information about your slides (markdown enabled)
title: Welcome to Slidev
info: |
  ## Slidev Starter Template
  Presentation slides for developers.

  Learn more at [Sli.dev](https://sli.dev)
# apply unocss classes to the current slide
class: text-center
# https://sli.dev/features/drawing
drawings:
  persist: false
# slide transition: https://sli.dev/guide/animations.html#slide-transitions
transition: slide-left
# enable MDC Syntax: https://sli.dev/features/mdc
mdc: true
# open graph
seoMeta:
  # By default, Slidev will use ./og-image.png if it exists,
  # or generate one from the first slide if not found.
  ogImage: auto
  # ogImage: https://cover.sli.dev
---

<!-- タイトル -->
# Slidevの使い方

penguin

---
transition: fade
#transition: fade-out
#transition: slide-left
#transition: slide-right
#transition: slide-up
---

# スライドの遷移

```yaml
---
transition: fade
---
```

- fade - Crossfade in/out
- fade-out - Fade out and then fade in
- slide-left - Slides to the left (slide to right when going backward)
- slide-right - Slides to the right (slide to left when going backward)
- slide-up - Slides to the top (slide to bottom when going backward)

---
layout: two-cols
layoutClass: gap-16
---

# 目次

```html
<Toc minDepth="1" maxDepth="1" />
```

::right::

<Toc text-sm minDepth="1" maxDepth="1" />

---
layout: two-cols
layoutClass: gap-16
---

# レイアウト

2つにわける。

```markdown
---
layout: two-cols
layoutClass: gap-16
---

# レイアウト

2つにわける。

::right::

右側
```

::right::

右側

---
layout: image-right
image: https://cover.sli.dev
level: 2
---

# レイアウト

右に図を表示する。

```markdown
---
layout: image-right
image: https://cover.sli.dev
---

# レイアウト

右に図を表示する。
```

---
layout: image-left
image: https://cover.sli.dev
level: 2
---

# レイアウト

左に図を表示する。

```markdown
---
layout: image-left
image: https://cover.sli.dev
---

# レイアウト

左に図を表示する。
```

---
layout: image
image: https://cover.sli.dev
backgroundSize: 90% 90%
level: 2
---

# レイアウト

図を表示する。

```markdown
---
layout: image
image: https://cover.sli.dev
backgroundSize: 90% 90%
---

# レイアウト

図を表示する。
```

---
layout: center
#class: text-center
level: 2
---

# 中央に表示

さらに`text-center`で何もかも真ん中に表示

```yaml
---
layout: center
#class: text-center
---
```

---
layout: quote
level: 2
---

# 引用を表示

```markdown
---
layout: quote
---
```

---
layout: section
level: 2
---

# セクション

---

# アニメーション

アニメーションします。

<div v-click>
```html
<div v-click>スライドを進めると出てくる</div>
```
</div>

<div v-click>スライドを進めると出てくる</div>

<div v-click>
```html
<div v-click>これのあとに</div>
<div v-after>これも出てくる</div>
```
</div>

<div v-click>これのあとに</div>
<div v-after>これも出てくる</div>

<div v-click>
```html
<div v-click.hide>スライドを進めると消えちゃう</div>
```
</div>

<div v-click.hide>スライドを進めると消えちゃう</div>

---
level: 2
---

# アニメーション

アニメーションします。

<div v-click>
```html
<v-clicks depth=2>

- item 1
  - item 1.1
- item 2

</v-clicks>
```
v-clickの設定をまとめてやってくれる。depthはどこまで個別にやるかの指定。
</div>

<v-clicks depth=2>

- item 1
  - item 1.1
- item 2

</v-clicks>

---
level: 2
---

# アニメーション

```html
<span v-mark.underline.red>ここを強調する</span>
```

<span v-mark.underline.red>ここを強調する</span>

```html
<span v-mark.circle.orange>ここを強調する</span>
```

<span v-mark.circle.orange>ここを強調する</span>

---

# 数式

インラインの数式は$E = mc^2$というように書く。

$$
\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}
$$

---

# 図

Mermaidで図が描ける。

<div grid="~ cols-3 gap-2" m="t-2">

```mermaid {scale: 0.5}
flowchart TD
    A[にゃんこが起きる] --> B{お腹が空いているか?}
    B -->|はい| C[ごはんを食べる]
    B -->|いいえ| D[遊ぶ]
    C --> E[お腹が満たされる]
    D --> F[おもちゃで遊ぶ]
    E --> G[お昼寝する]
    F --> G
```

```mermaid {scale: 0.5}
sequenceDiagram
    participant にゃんこ
    participant 飼い主

    にゃんこ->>飼い主: 朝に鳴く
    飼い主->>にゃんこ: ごはんをあげる
    にゃんこ->>にゃんこ: ごはんを食べる
    にゃんこ->>飼い主: お腹が満たされる
    にゃんこ->>にゃんこ: お昼寝する
    にゃんこ->>飼い主: 夕方に遊ぶ
    にゃんこ->>にゃんこ: 夜に寝る
```

```mermaid {scale: 0.5}
classDiagram
    class にゃんこ {
        +名前: string
        +好きな場所: string[]
        +遊ぶ(): void
    }

    class 箱 {
        +大きさ: string
        +中身: string
    }

    class ソファ {
        +柔らかさ: string
    }

    にゃんこ --> 箱: 好きな場所
    にゃんこ --> ソファ: 好きな場所
```

</div>

---

# テーマ

<div grid="~ cols-2 gap-2" m="t-2">

```yaml
---
theme: default
---
```

```yaml
---
theme: seriph
---
```

<img border="rounded" src="https://github.com/slidevjs/themes/blob/main/screenshots/theme-default/01.png?raw=true" alt="">

<img border="rounded" src="https://github.com/slidevjs/themes/blob/main/screenshots/theme-seriph/01.png?raw=true" alt="">

</div>

---
layout: end
---