Classmethod Marp Theme

クラスメソッドのスライドデザインを参考に作成したMarpテーマです。

参考スライド

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

特徴

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

利用方法

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

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

基本的な使用方法

スライドタイプ

通常スライド

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

# スライドタイトル

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

タイトルスライド

プレゼンテーションの表紙用スライド。グレー背景で中央配置されます。

<!-- _class: title -->

# プレゼンテーションタイトル

発表者名  
日付

セクションスライド

章の区切りや大きなトピックの導入用スライド。グレー背景で中央配置されます。

<!-- _class: section -->

# セクションタイトル

画像スライド

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

<!-- _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
h4-text-center
h5-text-center
h6-text-center

コンテンツ配置

垂直中央揃え

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

# タイトル

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

コンテンツセンター配置

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

# タイトル

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

カラムレイアウト

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

<div class="column">

## 左カラム

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

## 右カラム

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

カラーオプション

ブルーテキスト

クラスメソッドのブランドブルーでテキストを表示：

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

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

レッドテキスト

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

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

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

全体カラー変更

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

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

- リストも
- ブルーです

見出し別カラー変更

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

h1-text-red
h2-text-red
h3-text-red
h4-text-red
h5-text-red
h6-text-red

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

その他のオプション

ヘッダー非表示

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

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

文字を小さくする

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

# 文字を小さくする

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

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

見出し（Headings）

# 見出し1 (40px)
## 見出し2 (36px)
### 見出し3 (32px)
#### 見出し4 (26px)
##### 見出し5 (22px)
###### 見出し6 (20px)

テキスト装飾

強調と斜体

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

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

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

小さなテキスト

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

コードとコードブロック

インラインコード

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

コードブロック

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


### 引用

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

テーブル

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

リンク

[クラスメソッド公式サイト](https://classmethod.jp)

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

画像

基本的な画像挿入

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

デザインシステム

カラーパレット

プライマリーカラー

ブランドブルー: #2C67E5 - リンクや強調要素
ブランドレッド: #DF3756 - アクセント要素

グレースケール

濃グレー: #262626 - 段落テキスト
中グレー: #434343 - デフォルトテキスト、見出し
薄グレー: #595959 - 補助テキスト
より薄グレー: #646464 - ボーダー等
最薄グレー: #999999 - ページ番号等

背景カラー

標準背景: #FFFFFF - 通常スライド
アクセント背景: #F3F3F3 - タイトル・セクションスライド
コード背景: #e1e1e1 - コードブロック・インラインコード

タイポグラフィ

フォントサイズ体系

タイトル（h1）: 40px - メインタイトル用
大見出し（h2）: 36px - セクション見出し用
中見出し（h3）: 32px - サブセクション用
小見出し（h4）: 26px - 段落見出し用
極小見出し（h5）: 22px - 詳細見出し用
最小見出し（h6）: 20px - キャプション見出し用
本文: 26px - 標準テキスト
小テキスト: 22px - サブテキスト
キャプション: 20px - 画像説明等
注釈: 16px - 補足情報
テーブル: 18px - 表のセル内容

行間設定

狭い行間: 1.15 - 見出し用
標準行間: 1.21 - 見出し用
広い行間: 1.5 - 本文用

レイアウト仕様

スライド仕様

スライドサイズ: 1920×1080px
コンテンツパディング: 92px
ヘッダー高: 80px
ボーダー半径: 8px
ボーダー幅: 1.47px

よくある問題

画像が表示されない
- 画像パスが正しいか確認
- 画像ファイルの存在確認
レイアウトが崩れる
- クラス名のスペルミス確認
スライドが下にはみ出る
- はみ出ないように内容を調整

このテーマはクラスメソッド社の内部使用を目的として作成されています。

GeezerVison

Latest commit

History

Folders and files

Repository files navigation