Skip to content

topotal/topotal-marp-theme

BranchesTags

Repository files navigation

Topotal Marp Theme

TopotalのスライドデザインをベースにしたMarpテーマです。

参考スライド

https://topotal.github.io/topotal-marp-theme/sample-slide.html

特徴

  1. 📝 マークダウンでTopotalのスライドデザインのスライドが作成可能
  2. 🤗 テーブル、コードブロック、引用など、マークダウン要素に対応
  3. 🤖 生成AIに内容, README.md, sample-slide.mdを入力して爆速でスライド作成可能

利用方法

Topotal Marpテーマ セットアップスライドをご覧ください。

https://topotal.github.io/topotal-marp-theme/index.html

GitHub Pages経由でテーマを利用する方法

プロジェクトにテーマファイルをダウンロードせずに、GitHub Pages経由で直接テーマを利用できます。

1. Marp CLIでの利用

marp your-slide.md --theme https://topotal.github.io/topotal-marp-theme/topotal-theme.css --html

2. VS Code Marp拡張機能での利用

.vscode/settings.json に以下を追加：

{
  "markdown.marp.themes": [
    "https://topotal.github.io/topotal-marp-theme/topotal-theme.css"
  ]
}

その後、マークダウンファイルの先頭に以下を記述：

---
marp: true
theme: topotal-theme
---

配信されているアセット

  • テーマCSS: https://topotal.github.io/topotal-marp-theme/topotal-theme.css
  • タイトル背景画像: https://topotal.github.io/topotal-marp-theme/images/slide_title_background.png
  • セクション背景画像: https://topotal.github.io/topotal-marp-theme/images/slide_section_background.png

これらのアセットは自動的にCSSから参照されるため、テーマを読み込むだけで利用可能です。

基本的な使用方法

スライドタイプ

通常スライド

デフォルトのスライドレイアウト。ヘッダー付きの標準的なコンテンツスライドです。

# スライドタイトル

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

タイトルスライド

プレゼンテーションの表紙用スライド。背景画像とグラデーションテキストで表示されます。

<!-- _class: title -->
<!-- _paginate: false -->

# プレゼンテーションタイトル
# 複数行のタイトルも
# 表示できます

20xx/xx/xx イベント名をここに書きます
@アカウント名

セクションスライド

章の区切りや大きなトピックの導入用スライド。幾何学模様の背景で左寄せ配置されます。

<!-- _class: section -->
<!-- _paginate: false -->

## セクションタイトル
サブテキストを追加できます

画像スライド

画像を中央に大きく表示するスライド。

<!-- _class: image -->

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

レイアウトクラス

画像とコンテンツのレイアウト

コンテンツと画像の組み合わせ

画像とテキストを同じスライド内で適切に配置します。

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

# タイトル

テキストコンテンツ

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

右側に画像配置

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

# タイトル

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

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

左側に画像配置

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

# タイトル

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

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

画像とコンテンツの比率調整

画像とコンテンツの表示領域比率を調整できます：

  • content-30: コンテンツ30%、画像70%
  • content-40: コンテンツ40%、画像60%
  • content-60: コンテンツ60%、画像40%
  • content-70: コンテンツ70%、画像30%
  • content-80: コンテンツ80%、画像20%
<!-- _class: content-image-right content-70 -->

# タイトル

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

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

テキスト配置

中央揃え

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

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

全体中央揃え

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

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

見出し別中央揃え

特定の見出しレベルのみ中央揃えにできます：

  • h1-text-center
  • h2-text-center
  • h3-text-center

コンテンツ配置

垂直中央揃え

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

# タイトル

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

コンテンツセンター配置

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

# タイトル

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

カラムレイアウト

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

<div class="column">

## 左カラム

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

## 右カラム

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

カラーオプション

ブルーテキスト

Topotalのブランドブルーでテキストを表示：

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

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

レッドテキスト

Topotalのブランドレッドでテキストを表示：

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

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

全体カラー変更

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

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

- リストも
- ブルーです

見出し別カラー変更

特定の見出しレベルのみ赤色に変更できます：

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

その他のオプション

ヘッダー非表示

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

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

文字を小さくする

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

# 文字を小さくする

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

マークダウン要素のスタイリング

見出し（Headings）

# 見出し1 (64px)
## 見出し2 (48px)
### 見出し3 (36px)

注意: h4以下の見出しレベルは使用しません。h1〜h3のみを使用してください。

テキスト装飾

強調と斜体

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

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

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

小さなテキスト

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

リスト

番号なしリスト

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

番号付きリスト

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

コードとコードブロック

インラインコード

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

コードブロック

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

### 引用

```markdown
> これは引用テキストです。
> 複数行にわたる引用も可能です。
>
> - 引用内でのリストも使用できます
> - 適切にスタイリングされます

テーブル

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

リンク

[Topotal公式サイト](https://topotal.com)

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

画像

基本的な画像挿入

![画像の説明](./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)

デザインシステム

カラーパレット

Topotalブランドカラー

  • Topotalブルー: #008BD1 - メインブランドカラー
  • Topotalブルーライト: #4CC0EF - グラデーション用
  • Topotalミント: #8FF5E9 - アクセントカラー
  • Topotalパープル: #C249FF - アクセントカラー
  • Topotalブルーディープ: #1765C1 - ダークアクセント

アクセントカラー

  • ブルーベリーディープ: #008BD1 - リンクや強調要素
  • レッドディープ: #DF3756 - 警告やエラー

グレースケール

  • 濃グレー: #262626 - メインテキスト
  • 中グレー: #434343 - サブテキスト
  • 薄グレー: #595959 - 補助テキスト
  • より薄グレー: #646464 - 補助テキスト
  • 最薄グレー: #999999 - ページ番号等

背景カラー

  • 標準背景: #FFFFFF - 通常スライド
  • アクセント背景: #F0F8FF - アクセント背景
  • コード背景: #E3F2FD - コードブロック・インラインコード

タイポグラフィ

フォントサイズ体系

  • タイトル（h1）: 64px / 行高80px - メインタイトル用
  • 大見出し（h2）: 48px / 行高56px - セクション見出し用
  • 中見出し（h3）: 36px / 行高48px - サブセクション用
  • 本文: 28px / 行高36px - 標準テキスト
  • キャプション: 20px / 行高28px - 画像説明等
  • 注釈: 16px - 補足情報

注意: h4以下の見出しは使用しません。

要素間隔

  • 要素間のgap: 20px - flexboxのgapで統一的に管理

レイアウト仕様

スライド仕様

  • スライドサイズ: 1280×720px（Marpデフォルト）
  • コンテンツパディング: 上142px、左右42px、下84px
  • 要素間隔: 20px（flexbox gap）
  • ボーダー半径: 8px
  • ボーダー幅: 1.47px
  • フォント: Noto Sans JP

よくある問題

  1. 画像が表示されない

    • 画像パスが正しいか確認
    • 画像ファイルの存在確認

  2. レイアウトが崩れる

    • クラス名のスペルミス確認

  3. スライドが下にはみ出る

    • はみ出ないように内容を調整

クレジット

このテーマは classmethod/classmethod-marp-theme を参考に作成されています。

このテーマはTopotal社の内部使用を目的として作成されています。

About

Topotal の名義で登壇する時に使える便利な marp テーマです

topotal.github.io/topotal-marp-theme/sample-slide.html

Resources

Readme
Activity
Custom properties

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

No packages published

Contributors 2

  •  
  •  

Languages