slidev-layouts

Slidev のレイアウト

このスキルでは、Slidev に組み込まれているすべてのレイアウトを取り上げ、さまざまな種類のコンテンツに効果的に活用する方法を説明します。カスタムレイアウトの作成方法も学べます。

このスキルを使う場面

• コンテンツに適したレイアウトを選ぶ
• 視覚的に構成されたスライドを作成する
• 複数列のレイアウトを使う
• 背景画像を追加する
• カスタムレイアウトを作成する

レイアウトの使用

スライドのフロントマターでレイアウトを指定します。

---
layout: center
---

# Centered Content

組み込みレイアウト

default

一般的なコンテンツに使う基本レイアウトです。

---
layout: default
---

# Default Layout

Any content works here:
- Lists
- Code blocks
- Images
- Tables

center

コンテンツを水平方向と垂直方向の両方で中央に配置します。

---
layout: center
---

# Big Statement

Perfect for impactful single messages

最適な用途：引用、重要なポイント、セクションタイトル

cover

タイトルを目立たせて表示するオープニングスライドです。

---
layout: cover
background: /images/cover.jpg
---

# Presentation Title

Subtitle or author name

オプション：

• background：画像の URL または色

最適な用途：最初のスライド、セクションの開始

intro

著者や発表者の情報を含む紹介スライドです。

---
layout: intro
---

# My Presentation

## A Journey Through Code

<div class="absolute bottom-10">
  <span class="font-700">
    John Doe
  </span>
  <br>
  <span class="text-sm opacity-50">
    Senior Developer @ TechCorp
  </span>
</div>

section

新しいセクションの開始を示します。

---
layout: section
---

# Part 1

Getting Started

最適な用途：プレゼンテーションを論理的なセクションに分ける

statement

単一の主張や引用を強調します。

---
layout: statement
---

# Code is poetry

最適な用途：印象的な引用、重要なメッセージ

quote

引用とその出典を表示します。

---
layout: quote
---

# "Any fool can write code that a computer can understand. Good programmers write code that humans can understand."

Martin Fowler

fact

重要な事実や統計を強調します。

---
layout: fact
---

# 100%

of developers love Slidev*

<small>*citation needed</small>

最適な用途：統計、数値、重要な事実

two-cols

左右にコンテンツを配置する2列レイアウトです。

---
layout: two-cols
---

# Left Column

- Point 1
- Point 2
- Point 3

::right::

# Right Column

```js
const code = 'here'

**Slot**: `::right::` separates columns

### two-cols-header

Two columns with a spanning header.

```markdown
---
layout: two-cols-header
---

# Comparison

::left::

## Option A

- Feature 1
- Feature 2

::right::

## Option B

- Feature X
- Feature Y

スロット：::left:: と ::right::

image

スライド全体に背景画像を表示します。

---
layout: image
image: /images/photo.jpg
backgroundSize: cover
---

オプション：

• image：画像のパス
• backgroundSize：CSS の background-size（cover、contain など）

image-left

左側に画像、右側にコンテンツを配置します。

---
layout: image-left
image: /images/diagram.png
backgroundSize: contain
---

# Explanation

The diagram shows:
- Component A
- Component B
- Their relationship

image-right

右側に画像、左側にコンテンツを配置します。

---
layout: image-right
image: /images/screenshot.png
---

# Feature Overview

Our new feature includes:
- Fast performance
- Easy to use
- Beautiful design

iframe

ウェブページを埋め込みます。

---
layout: iframe
url: https://sli.dev
---

オプション：

• url：埋め込む URL

iframe-left / iframe-right

反対側にコンテンツを配置した iframe です。

---
layout: iframe-right
url: https://example.com
---

# Live Demo

Check out the live example on the right

full

余白を設けず、画面全体を使用します。

---
layout: full
---

<div class="w-full h-full bg-gradient-to-r from-blue-500 to-purple-600">
  <h1 class="text-white text-center pt-40">Full Screen</h1>
</div>

none

スタイルを適用せず、完全な白紙状態にします。

---
layout: none
---

<div class="custom-everything">
  Completely custom content
</div>

end

プレゼンテーションの最後のスライドです。

---
layout: end
---

# Thank You!

Questions?

レイアウト早見表

レイアウト	用途
default	一般的なコンテンツ
center	ひとつのメッセージに焦点を当てる
cover	オープニングスライド
intro	著者の紹介
section	セクションの区切り
statement	大胆な主張
quote	引用
fact	統計／数値
two-cols	左右に並べたコンテンツ
two-cols-header	見出し付きの比較
image	全画面の背景画像
image-left	画像＋テキスト
image-right	テキスト＋画像
iframe	埋め込みウェブページ
full	画面いっぱいのコンテンツ
end	クロージングスライド

カスタムレイアウトの作成

基本的なカスタムレイアウト

layouts/my-layout.vue を作成します。

<template>
  <div class="slidev-layout my-layout">
    <slot />
  </div>
</template>

<style scoped>
.my-layout {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
</style>

名前付きスロットを使うレイアウト

<template>
  <div class="slidev-layout split-header">
    <header class="header">
      <slot name="header" />
    </header>
    <main class="content">
      <div class="left">
        <slot name="left" />
      </div>
      <div class="right">
        <slot name="right" />
      </div>
    </main>
  </div>
</template>

<style scoped>
.split-header {
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100%;
}
.header {
  padding: 1rem 2rem;
  border-bottom: 1px solid #e5e7eb;
}
.content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  padding: 2rem;
}
</style>

使用方法：

---
layout: split-header
---

::header::
# Comparison Overview

::left::
## Before

Old approach details

::right::
## After

New approach details

Props を使うレイアウト

<script setup>
defineProps({
  logo: {
    type: String,
    default: '/logo.png'
  },
  color: {
    type: String,
    default: '#3b82f6'
  }
})
</script>

<template>
  <div class="slidev-layout branded">
    <img :src="logo" class="logo" />
    <div class="content" :style="{ borderColor: color }">
      <slot />
    </div>
  </div>
</template>

使用方法：

---
layout: branded
logo: /company-logo.png
color: '#ef4444'
---

# Branded Content

テーマのレイアウト

テーマには追加のレイアウトが用意されていることがよくあります。たとえば、seriph テーマには次のようなバリエーションがあります。

• 洗練されたタイポグラフィを使った default
• エレガントなスタイルの cover
• テーマ固有のカスタムレイアウト

利用できるレイアウトについては、テーマのドキュメントを確認してください。

ベストプラクティス

1. コンテンツに合ったレイアウトを選ぶ：強調するには center、比較には two-cols を使います
2. セクションの区切りを統一する：section レイアウトを一貫して使います
3. 画像の品質：cover と image レイアウトには高解像度の画像を使います
4. レスポンシブ表示を確認する：さまざまなサイズでのレイアウトの見え方を確認します
5. 詰め込みすぎない：レイアウトは、焦点を絞ったコンテンツに最も適しています

よく使われるレイアウトパターン

プレゼンテーションの構成

---
layout: cover
---
# Title

---
layout: intro
---
# About Me

---
layout: section
---
# Part 1

---
layout: default
---
# Content...

---
layout: section
---
# Part 2

---
layout: end
---
# Thank You

機能の比較

---
layout: two-cols-header
---

# React vs Vue

::left::
## React
- JSX syntax
- Large ecosystem
- Facebook backing

::right::
## Vue
- Template syntax
- Gentle learning curve
- Community driven

出力形式

レイアウトを提案するときは、次の内容を提示します。

SLIDE STRUCTURE:
1. [layout: cover] - Opening with title
2. [layout: intro] - Speaker introduction
3. [layout: section] - Topic 1 header
4. [layout: default/two-cols] - Content slides
5. [layout: section] - Topic 2 header
6. [layout: image-right] - Demo/screenshot
7. [layout: fact] - Key statistic
8. [layout: end] - Closing

LAYOUT RECOMMENDATION:
- For this content type, use [layout]
- Reason: [explanation]

EXAMPLE:
---
layout: [recommended]
[additional options if needed]
---

[Content structure]