🖼️

[Slidev]デフォルトテーマのレイアウト一覧

2022/12/16に公開

Slidevのデフォルトテーマの各レイアウトを紹介します。私自身Slidevに使われている技術(Vue, Windi CSS, etc.)に詳しくはないので、誤りなどがあるかもしれません。もし誤りなどありましたら、コメント頂けますと嬉しいです！
!2022/12/16現在、SlidevはBeta版です。本記事の内容は、今後変更となる可能性があります。

 coverslides.md
---
layout: cover
---
プレゼンテーションの表紙用のレイアウトです。上下は中央、左右は左揃えに配置されます。

 introslides.md
---
layout: intro
---
プレゼンテーションの始まりに使用するようなレイアウトです。

上下は中央、左右は左揃えに配置されます。

 sectionslides.md
---
layout: section
---
新たなセクションの開始を示すために使用するレイアウトです。後述するfactと似ていますが、factの方がタイトルやサブタイトルが大きめです。

テキストは中央揃えです。箇条書きに関しては、点は左揃えで表示され、その内容（テキスト）は中央揃えされます。画像は左揃えです。

 defaultslides.md
---
layout: default
---
デフォルトのレイアウトです。左上揃えに配置されるレイアウトです。

 centerslides.md
---
layout: center
---
スライドのコンテンツ(テキスト、画像など)が1つの箱の中に入れられ、その箱が上下左右中央に配置されるレイアウトです。箱の中身は左揃えになります。

 two-colsslides.md
---
layout: two-cols
---

# left

::right::

# right
左右にコンテンツを表示できるレイアウトです。全体を左右に分割します。途中から分割することはできないので、途中から分割したい場合は、後述するtwo-cols-headerを使用します。

それぞれのコンテンツのレイアウトはdefaultと一緒です。

 two-cols-headerslides.md
---
layout: two-cols-header
---

# main contents

::left::

# left

::right::

# right
左右にコンテンツを表示できるレイアウトです。two-colsとは異なり、途中から左右にコンテンツを分けることができます。

全体のヘッダーと左右それぞれのヘッダーを設定することができます。それぞれのコンテンツのレイアウトはdefaultと一緒です。

 image-leftslides.md
---
layout: image-left
image: 画像のファイルパス
---
左側にimageで設定した画像、右側にスライドのコンテンツを配置したレイアウトです。右側のコンテンツのレイアウトはdefaultと一緒です。

 image-rightslides.md
---
layout: image-right
image: 画像のファイルパス
---
左側にスライドのコンテンツ、右側にimageで設定した画像を配置したレイアウトです。左側のコンテンツのレイアウトはdefaultと一緒です。

 imageslides.md
---
layout: image
image: 画像のファイルパス
---
画像をメインのコンテンツとしたレイアウトです。

テキストやその他の画像はimageに設定した画像の上に表示されます。したがって、バックグラウンド(背景)に画像を設定したい場合に用いることができます。

 iframe-leftslides.md
---
layout: iframe-left
url: WebページのURL
---
左側にWebページ、右側にスライドのコンテンツを配置したレイアウトです。右側のコンテンツのレイアウトはdefaultと一緒です。

 iframe-rightslides.md
---
layout: iframe-right
url: WebページのURL
---
左側にスライドのコンテンツ、右側にWebページを配置したレイアウトです。左側のコンテンツのレイアウトはdefaultと一緒です。

 iframeslides.md
---
layout: iframe
url: WebページのURL
---
Webページをメインのコンテンツとしたレイアウトです。テキストや画像は一切表示されません。（global-bottom.vueなどで設定したページ番号などは表示されます。）

 fullslides.md
---
layout: full
---
画面の全スペースを使ってコンテンツが表示されるレイアウトです。

コンテンツは左上揃えに配置されます。

 factslides.md
---
layout: fact
---
事実やデータを画面上で大きく目立たせて表示するために使用するレイアウトです。

タイトルとサブタイトルには固有のフォント（色、サイズなど）が設定されています。テキストは中央揃えです。箇条書きに関しては、点は左揃えで表示され、その内容（テキスト）は中央揃えで表示されます。画像は左揃えです。

 statementslides.md
---
layout: statement
---
断言/宣言をメインページのコンテンツとして表示するようなレイアウトです。sectionと似ていますが、sectionよりもタイトルが大きめです。(factよりは小さいです。)

テキストは中央揃えです。箇条書きに関しては、点は左揃えで表示され、その内容（テキスト）は中央揃えです。画像は左揃えです。

 quoteslides.md
---
layout: quote
---
引用文が目立つように表示されるレイアウトです。

が、そこまで目立っているのかな…?という感じはします。defaultなど、その他のレイアウトともそこまで変わらない印象です。

テキストや画像などのレイアウトはdefaultと同じです。

 noneslides.md
---
layout: none
---
スタイルなしのレイアウトです。

HTMLは反映されますが、markdownは反映されず、テキストのみが装飾なしに表示されます。

 endslides.md
---
layout: end
---
ENDページを自分で挿入することも可能です。スライド中に記述したコンテンツは何も表示されず、ENDページが挿入されます。

一度プレゼンの終了を表すためにENDページを入れ、その後に参考資料などを入れたい場合などに使えると思います。

 所感似ているようなレイアウトもありますが、その場合にはスライドの内容と一致するようなレイアウトを使用するのが良いかなと思います。なぜならば、デフォルトのテーマに限らず、提供されているテーマは変更される可能性があり、今後より内容に沿ったレイアウトにアップデートされる可能性があるためです。とは言え、スライドのレイアウトは主観も入ってくるものなので、細かく気にするようなものでもないかなと思います。

 参考サイトSlidev | レイアウト
https://ja.sli.dev/builtin/layouts.html
SlidevのデフォルトレイアウトのGitHub
https://github.com/slidevjs/slidev/tree/main/packages/client/layouts