このテーマの特徴

モダン・ポートフォリオのテーマの特徴

このCSSで作成されたmarpテーマ「モダン・ポートフォリオ」は、洗練されたプロフェッショナルな印象を与えるテーマです。主な特徴を以下に説明します。

全体的なデザイン:

セクションのレイアウト: セクションは垂直方向に配置され、内容を階層的に構成。
フォント: エレガントなセリフ書体「IBM Plex Serif」を使用し、文字を明瞭に表示。
フォントサイズ: 24ptの大きなフォントサイズで、読みやすさとインパクトを確保。

タイトルセクション:

背景: #009891の背景色。
高さ: 画面高の約83%を占める大きな高さ。
配置: タイトルとサブタイトルを中央に配置。
フォントサイズ: 48ptの非常に大きなフォントサイズ。
テキストシャドウ: テキストに影を付けて立体感と視認性を確保。

このテーマは、プロフェッショナルなプレゼンテーション、ポートフォリオのショーケース、または洗練されたデザインが必要なあらゆるニーズに適しています。鮮やかな色使い、明瞭なフォント、モダンなレイアウトが特徴で、あなたのコンテンツを際立たせ、聴衆に印象を残します。

このテーマを利用する

CSS

/* @theme modern_portfolio */
@import default;

section{
  display: flex;
  flex-direction: column;
  font-family: 'IBM Plex Serif', serif;
  font-size: 24pt;
}

header{
  width: 100%;
  background: linear-gradient(to right, #009891, #002A3B);
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  box-shadow: 0 2px 5px #00000029;
}

footer{
  width: 100%;
  position: fixed;
  bottom: 0px;
  height: 50px;
  background: linear-gradient(to right, #FF9800, #FF5722);
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  text-shadow: 1px 1px 2px #000000;
  box-shadow: 0 -2px 5px #00000029;
}

section.title{
  background-color: #009891;
  height: calc(100vh - 120px);
  padding: 50px;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  text-align: center;
  font-size: 48pt;
  text-shadow: 2px 2px 4px #000000;
}

Marpのサンプル

---
marp: true
theme: modern_portfolio
header: " "
footer: " "
---

<!--
_class: title
-->

# タイトル

---
## 見出し
- これはリスト
- これもリスト

<!--
_class: slide
-->

---
### 小見出し
- さらにリスト
- もっとリスト

<!--
_class: slide
-->

---
- 箇条書き
- 箇条書き
- 最後の箇条書き

<!--
_class: slide
-->

---
## 見出し
- さらにリスト
- もっとリスト

<!--
_class: slide
-->

---
### 小見出し
- さらにリスト
- もっとリスト

<!--
_class: slide
-->

---
- 箇条書き
- 箇条書き
- 最後の箇条書き