電子書籍　グレー

電子書籍

image3 image1

このテーマの特徴

特徴:

ページレイアウト:

  • 大きなサイズ (1600px x 2560px) で電子書籍のようなレイアウトを作成します。
  • セクションは境界線があり、余白が設定されています。

背景パターン:

  • 抽象的なパターンが背景に表示され、視覚的な興味を加えています。

見出し:

  • タイトルセクションの見出しは大きく、中央に配置されています。
  • 通常セクションの見出しは右揃えで、見やすい控えめな色を使用しています。

コンテンツ:

  • メインコンテンツエリアは広く、文章や画像を収容できます。
  • 段落のフォントサイズは大きく、読みやすいです。

全体的なスタイル:

  • カラーパレットは白、グレー、黒がベースで、洗練された落ち着いた雰囲気になっています。
  • レイアウトは明確で、読者がページを簡単にナビゲートできます。
  • テーマは、技術ドキュメント、教科書、または長い形式のコンテンツの電子書籍に適しています。

このテーマを利用する

CSS

/* @theme book */
@import gaia;

section{
  width: 1600px;
  height: 2560px;
  padding: 80px 120px;
  font-size: 36pt;
  box-sizing: border-box;
}

header{
  margin-bottom: 32pt;
  font-size: 24pt;
  text-align: right;
  color: #666;
}

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

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

.pattern{
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url('pattern.png');
  -webkit-mask-image: url('mask.png');
  mask-image: url('mask.png');
  background-position: center;
  background-size: cover;
  z-index: -1;
}

.main{
  margin-top: 80px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.sidebar{
  width: 400px;
  background-color: #f5f5f5;
  padding: 32px;
  box-sizing: border-box;
  margin-left: 32px;
}

.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: #e0e0e0;
}

.content{
  flex: 1;
}

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

.pagination span{
  margin: 0 12px;
}

.pagination span.active{
  font-weight: bold;
}

Marpのサンプル

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

# リラックスした時間

> 心地よくくつろいでね

---
# 見出し

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

---
<!--
_class: title
-->

# ページ2

> 心地よくくつろいでね

---
# 見出し2

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