Summaryスライド

revealjsスライド作成紹介

Ryo Nakagami

2025年05月16日

Azure blue サマリースライド

  • Azure blue サマリースライド

Azure blue サマリースライドの構成要素

summary-container

  • <div> 要素
  • Flexbox使用し、全体を縦に並べるレイアウト
  • 中身を縦方向に中央揃え

block-azureblue

  • <div> 要素
  • 個々の情報ブロック
  • 左に青いライン(擬似要素 ::before)でアクセント

headline

  • <div> 要素
  • ブロック内のタイトル用
  • 太字・黒色・行間狭め
  • 改行を要するような文字列の入力は想定していない

.summary-container

スライド作成の基本

  • プロセス: スライド作成は「メッセージ設計」→「構成検討」→「スライド作成」の順で進める

メッセージ設計

  • 3W: 誰に(Who)、何を(What)、なぜ(Why)伝えるのかを明確化する
  • RAPフレームワーク: Research Question, Answer, Positioning Statement

ストーリー構築

  • 論理的対話: 読み手の疑問を予測し、先回りして答える構成としてスライドパッケージを設計する

スライド作成のルール

  • 1スライド1メッセージ: 主張を絞り、MMUF (Main Message UpFront) を徹底する
  • オッカムの剃刀: 必要最小限の情報に絞り、冗長性を排除する
  • メッセージと整合的な縦横軸: メッセージとスライド軸を合わせ、秩序ある情報の列挙にする

summary-container

  • display: flex
    • コンテナの子要素(flex item)の並び方や配置を指定可能にする
  • flex-direction: column
    • flex itemsを縦方向に並べる
  • justify-content: center
    • flex item全体を縦方向中央に揃える

.block-azureblue-block

スライド作成の基本

  • プロセス: スライド作成は「メッセージ設計」→「構成検討」→「スライド作成」の順で進める

メッセージ設計

  • 3W: 誰に(Who)、何を(What)、なぜ(Why)伝えるのかを明確化する
  • RAPフレームワーク: Research Question, Answer, Positioning Statement

ストーリー構築

  • 論理的対話: 読み手の疑問を予測し、先回りして答える構成としてスライドパッケージを設計する

スライド作成のルール

  • 1スライド1メッセージ: 主張を絞り、MMUF (Main Message UpFront) を徹底する
  • オッカムの剃刀: 必要最小限の情報に絞り、冗長性を排除する
  • メッセージと整合的な縦横軸: メッセージとスライド軸を合わせ、秩序ある情報の列挙にする

block-azureblue

  • display: block
    • 要素を「ブロック要素」として表示
    • 幅は親要素いっぱいに広がる
  • background-color: #428ce6
    • DodgerBlueをblockのtop 0.6em から bottom 0.5em
  • .headline要素
    • font-size: 1embold処理
    • line-height: 1

CSS設定と実装例

CSS設定

.summary-container {
  line-height: 1.1;
  width: 100%;
  height: 75%;
  padding-top: 0.5em;
  margin-bottom: 0.5em;
  margin-left: 1em;
  display: flex;
  flex-direction: column; /* ブロックを縦に並べる */
  justify-content: center; /* 全体を縦方向中央に揃える(親の高さ次第) */
}

.summary-container .block-azureblue {
  margin-top: 0.5em;
  margin-bottom: 0.6em;
  display: block !important;
  padding-left: 1em;
  position: relative; /* 疑似要素設定に必要 */
}

.summary-container .block-azureblue::before {
  content: "";
  position: absolute;
  top: 0.6em;
  left: 0;
  width: 0.5em; /* vertical barのwidth指定 */
  bottom: 0.5em;
  background-color: #428ce6;
}

.summary-container .block-azureblue .headline {
  font-size: 1em;
  font-weight: bold;
  color: #1a1a1a;
  line-height: 1;
  margin-top: 0;
  padding-bottom: 0em;
}

summaryスライド実装例

::::{.summary-container style="font-size:1em;"}

:::{.block-azureblue }
:::{.headline}
summary-container
:::


- Flexbox使用し、全体を縦に並べるレイアウト
- 中身を縦方向に中央揃え

:::

:::{.block-azureblue}
:::{.headline}
block-azureblue
:::

- 個々の情報ブロック
- 左に青いライン(擬似要素 `::before`)でアクセント

:::

:::{.block-azureblue}
:::{.headline}
headline
:::

- ブロック内のタイトル用
- 太字・黒色・行間狭め
- 改行を要するような文字列の入力は想定していない

:::

::::