歴史の航海: クラシックで落ち着きのあるMarpテーマ

スライド

image0 image1

このテーマの特徴

テーマ「歴史の航海」の特徴

このテーマは、以下のような特徴があります。

背景: * 全体的に柔らかく落ち着いたベージュ (#f2f2f2) の背景を使用しています。

ヘッダー: * 上部に60pxのフルサイズのヘッダーがあり、背景色はダークグリーン (#6d6875) です。 * 中央揃えで、大きな太字の白い文字でタイトルが表示されます。 * ヘッダーの下には、20pxの余白があります。

フッター: * 下部に固定されたフッターがあり、背景色はヘッダーと同じダークグリーン (#6d6875) です。 * 白い太字の文字で、センター揃えで説明文が表示されます。 * フッターの上部には、8pxの太いオレンジ色の境界線があります。

タイトルセクション: * セクションタイトルには、オレンジ色の背景 (#f5af19) と白い文字を使用しています。 * セクションタイトルは、縦に中央揃えで、40pxの余白があります。 * タイトルは48ptの太字、説明文は24ptの通常フォントで表示されます。 * 背景には、波のような模様のグラデーションがあります。

その他の強調表示: * ボタンは、赤 (#f12711) の背景色と白い文字を使用し、ホバー時にオレンジ色 (#f5af19) に変化します。 * テキストを選択すると、オレンジ色の背景と黒い文字の強調表示が適用されます。

このテーマを利用する

CSS

/* @theme historical_voyage */
@import default;

section{
  background-color: #f2f2f2;
  font-size: 24pt;
  padding: 20px;
}

header{
  width: 100%;
  height: 60px;
  background-color: #6d6875;
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  font-size: 28pt;
  font-weight: bold;
  text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
}

footer{
  width: 100%;
  position: fixed;
  padding: 10px;
  background-color: #6d6875;
  color: #ffffff;
  bottom: 0px;
  text-align: center;
  font-size: 14pt;
  font-weight: bold;
  border-top: 8px solid #f5af19;
}

section.title{
  background-color: #f5af19;
  color: #ffffff;
  padding: 60px 40px;
  text-align: center;
  font-size: 36pt;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 40px;
  text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
  background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 100 100' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23f5af19' d='M-2 -2L35 20L35 101L-2 101L-2 -2Z'/%3E%3Cpath fill='%23e69d32' d='M-2 -2L70 10L70 72L-2 101L-2 -2Z'/%3E%3Cpath fill='%23d78c4c' d='M-2 -2L97 18L97 62L-2 101L-2 -2Z'/%3E%3Cpath fill='%23c87b66' d='M43 1L97 51L97 93L43 104L43 1Z'/%3E%3C/svg%3E");
}

section.title h1{
  font-size: 48pt;
  font-weight: bold;
}

section.title p{
  font-size: 24pt;
  font-weight: normal;
}

.button{
  background-color: #f12711;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  font-size: 16pt;
  font-weight: bold;
  text-decoration: none;
}

.button:hover{
  background-color: #f5af19;
  color: white;
}

::selection {
  background-color: #f5af19;
  color: #212121;
}

::-moz-selection {
  background-color: #f5af19;
  color: #212121;
}

Marpのサンプル

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

# slide of title

---
# slide of content
- This is a list
- This is also a list