シンプル 緑

image0 image1

このテーマの特徴

このCSSで作成されたmarpテーマは、医療関連のプレゼンテーションに適した、洗練された印象的な外観を備えています。その主な特徴は以下の通りです。

全体的なスタイリング: * ヘルベチカフォントを使用し、読みやすく現代的なスタイルです。 * 全体的に落ち着いた色調のグリーン(#009999)とグレー(#006666)を使用しています。

タイトルセクション: * プレゼンテーションのタイトルは大きく、中央揃えで表示され、視覚的なインパクトを与えます。 * ダークグリーンの背景が、タイトルを強調し、注目を集めます。

見出し: * H1、H2、H3などの見出しは太字で、プレゼンテーションの構造を明確にします。 * それぞれ異なるフォントサイズを使用することで、見出しの階層がはっきりと示されます。

リストとリンク: * リストは箇条書きではなく、スペースで区切られています。 * リンクはグリーン(#009999)で強調表示され、プレゼンテーション内の他のリソースへのシームレスなアクセスを提供します。

全体として、このテーマは医療関連のプレゼンテーションに専門的で洗練された外観を提供し、聴衆に強い印象を与えるのに役立ちます。

このテーマを利用する

CSS

/* @theme healthcare_presentation */
@import default;

section{
  font-family: 'Helvetica', 'Arial', sans-serif;
  font-size: 24pt;
  padding: 20px;
}

header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background-color: #009999;
  color: white;
  font-size: 36pt;
  font-weight: bold;
}

footer{
  width: 100%;
  position: fixed;
  bottom: 0px;
  left: 0;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(to right, #006666, #009999);
  color: #ffffff;
}

section.title{
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  padding: 50px;
  background: linear-gradient(to right, #009999, #006666);
  color: #ffffff;
  font-size: 48pt;
  font-weight: bold;
  gap: 20px;
}

h1{
  font-size: 36pt;
  font-weight: bold;
}

h2{
  font-size: 28pt;
  font-weight: bold;
}

h3{
  font-size: 24pt;
  font-weight: bold;
}

ul{
  list-style-type: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

li{
  font-size: 20pt;
}

a{
  color: #009999;
  text-decoration: none;
}

a:hover{
  text-decoration: underline;
}

.icon{
  width: 30px;
  height: 30px;
  margin-right: 10px;
}

Marpのサンプル

---
marp: true
theme: healthcare_presentation
header: "保健とウェルネス"
footer: " "
---
<!--
_class: title
-->

# ヘルスケア プレゼンテーション

---
## 見出し

### サブ見出し

#### サブサブ見出し

- これはリスト
  - ネストされたリスト
- これもリスト

---
### 医療データに関するグラフ

#### グラフのタイトル

[グラフまたはチャートをここに挿入]

---
### その他のリソース

[リンク 1](https://example.com)
[リンク 2](https://example.com)