🖼️

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

2022/12/16に公開約5,400字

Slidevのデフォルトテーマの各レイアウトを紹介します。私自身Slidevに使われている技術(Vue, Windi CSS, etc.)に詳しくはないので、誤りなどがあるかもしれません。もし誤りなどありましたら、コメント頂けますと嬉しいです!

cover


slides.md
---
layout: cover
---

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

cover

intro


slides.md
---
layout: intro
---

プレゼンテーションの始まりに使用するようなレイアウトです。
上下は中央、左右は左揃えに配置されます。

intro

section


slides.md
---
layout: section
---

新たなセクションの開始を示すために使用するレイアウトです。後述するfactと似ていますが、factの方がタイトルやサブタイトルが大きめです。
テキストは中央揃えです。箇条書きに関しては、点は左揃えで表示され、その内容(テキスト)は中央揃えされます。画像は左揃えです。

section

default


slides.md
---
layout: default
---

デフォルトのレイアウトです。左上揃えに配置されるレイアウトです。

default

center


slides.md
---
layout: center
---

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

center

two-cols


slides.md
---
layout: two-cols
---

# left

::right::

# right

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

two-cols

two-cols-header


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

# main contents

::left::

# left

::right::

# right

左右にコンテンツを表示できるレイアウトです。two-colsとは異なり、途中から左右にコンテンツを分けることができます。
全体のヘッダーと左右それぞれのヘッダーを設定することができます。それぞれのコンテンツのレイアウトはdefaultと一緒です。

two-cols-header

image-left


slides.md
---
layout: image-left
image: 画像のファイルパス
---

左側にimageで設定した画像、右側にスライドのコンテンツを配置したレイアウトです。右側のコンテンツのレイアウトはdefaultと一緒です。

image-left

image-right


slides.md
---
layout: image-right
image: 画像のファイルパス
---

左側にスライドのコンテンツ、右側にimageで設定した画像を配置したレイアウトです。左側のコンテンツのレイアウトはdefaultと一緒です。

image-right

image


slides.md
---
layout: image
image: 画像のファイルパス
---

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

image

iframe-left


slides.md
---
layout: iframe-left
url: WebページのURL
---

左側にWebページ、右側にスライドのコンテンツを配置したレイアウトです。右側のコンテンツのレイアウトはdefaultと一緒です。

iframe-left

iframe-right


slides.md
---
layout: iframe-right
url: WebページのURL
---

左側にスライドのコンテンツ、右側にWebページを配置したレイアウトです。左側のコンテンツのレイアウトはdefaultと一緒です。

iframe-right

iframe


slides.md
---
layout: iframe
url: WebページのURL
---

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

iframe

full


slides.md
---
layout: full
---

画面の全スペースを使ってコンテンツが表示されるレイアウトです。
コンテンツは左上揃えに配置されます。

full

fact


slides.md
---
layout: fact
---

事実やデータを画面上で大きく目立たせて表示するために使用するレイアウトです。
タイトルとサブタイトルには固有のフォント(色、サイズなど)が設定されています。テキストは中央揃えです。箇条書きに関しては、点は左揃えで表示され、その内容(テキスト)は中央揃えで表示されます。画像は左揃えです。

fact

statement


slides.md
---
layout: statement
---

断言/宣言をメインページのコンテンツとして表示するようなレイアウトです。sectionと似ていますが、sectionよりもタイトルが大きめです。(factよりは小さいです。)
テキストは中央揃えです。箇条書きに関しては、点は左揃えで表示され、その内容(テキスト)は中央揃えです。画像は左揃えです。

statement

quote


slides.md
---
layout: quote
---

引用文が目立つように表示されるレイアウトです。
が、そこまで目立っているのかな…?という感じはします。defaultなど、その他のレイアウトともそこまで変わらない印象です。
テキストや画像などのレイアウトはdefaultと同じです。

quote

none


slides.md
---
layout: none
---

スタイルなしのレイアウトです。
HTMLは反映されますが、markdownは反映されず、テキストのみが装飾なしに表示されます。

none

end


slides.md
---
layout: end
---

ENDページを自分で挿入することも可能です。スライド中に記述したコンテンツは何も表示されず、ENDページが挿入されます。
一度プレゼンの終了を表すためにENDページを入れ、その後に参考資料などを入れたい場合などに使えると思います。

end

所感


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

参考サイト


  • Slidev | レイアウト

https://ja.sli.dev/builtin/layouts.html

  • SlidevのデフォルトレイアウトのGitHub

https://github.com/slidevjs/slidev/tree/main/packages/client/layouts

Discussion

ログインするとコメントできます