電子書籍 ダーク

このテーマの特徴

この CSS テーマは、電子書籍用に設計された Marp ダークブック テーマです。以下に主な特徴を説明します。

• ダークで高コントラストのカラーパレット: 背景は黒 (#333)、テキストは白 (#fff) で、読みやすさとコントラストを向上させています。

• 大規模なキャンバス: スライドのサイズは 1600px x 2560px と大きく、コンテンツの表示に十分なスペースを提供します。

• 広々としたマージンとパディング: 各スライドは 60px のパディングで囲まれており、コンテンツを視覚的に区別し、読みやすさを向上させます。

• 見出しとフッター: ヘッダーとフッターは背景色が濃く (#243d44)、見出しが右揃えで表示され、フッターはページ番号とナビゲーションを表示します。

• タイトルスライド: タイトルスライドは中央揃えで、大きなフォントサイズ (H1: 72pt、H2: 48pt) を使用し、コンテンツに視覚的なインパクトを与えます。

このテーマを利用する

CSS

/* @theme dark-book */
@import gaia;

section{
  width: 1600px;
  height: 2560px;
  padding: 60px;
  font-size: 36pt;
  box-sizing: border-box;
  background-color: #333;
  color: #fff;
}

header{
  margin-bottom: 32pt;
  font-size: 24pt;
  text-align: right;
  background-color: #243d44;
  color: #fff;
  padding: 16px;
  text-transform: uppercase;
}

footer{
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100px;
  background-color: #243d44;
  font-size: 18pt;
  padding: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

section.title{
  background-color: #243d44;
  color: #fff;
  text-align: center;
  padding-top: 100px;
  h1{
    font-size: 72pt;
    margin-bottom: 32pt;
  }
  h2{
    font-size: 48pt;
  }
}

.content{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.main{
  flex: 1;
  margin-top: 20px;
}

.sidebar{
  width: 300px;
  background-color: #243d44;
  color: #fff;
  padding: 16px;
  margin-left: 32px;
  border-radius: 10px;
}

.sidebar ul{
  list-style-position: inside;
  list-style-type: none;
  padding: 0;
}

.sidebar li{
  font-size: 24pt;
  margin-bottom: 16px;
  cursor: pointer;
  transition: all .3s ease-in-out;
}

.sidebar li:hover{
  background-color: #345a64;
}

.pagination{
  position: absolute;
  bottom: 16px;
  right: 16px;
  font-size: 24pt;
  color: #fff;
}

.pagination span{
  cursor: pointer;
  margin: 0 12px;
}

.pagination span.active{
  background-color: #243d44;
  padding: 4px;
}

Marpのサンプル

---
marp: true
theme: dark-book
header: " "
footer: " "
---
<!--
_class: title
-->

# タイトル

---
<!--
_class: standard
-->

# 見出し

これは本文です。
- これはリスト
- これもリスト