revealjsスライド作成紹介
2025年05月16日
Azure blue サマリースライド
summary-container
<div>
要素block-azureblue
<div>
要素::before
)でアクセントheadline
<div>
要素.summary-container
スライド作成の基本
メッセージ設計
ストーリー構築
スライド作成のルール
summary-container
display: flex
flex-direction: column
justify-content: center
.block-azureblue-block
スライド作成の基本
メッセージ設計
ストーリー構築
スライド作成のルール
block-azureblue
display: block
background-color: #428ce6
0.6em
から bottom 0.5em
.headline
要素
font-size: 1em
でbold
処理line-height: 1
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
:::
- ブロック内のタイトル用
- 太字・黒色・行間狭め
- 改行を要するような文字列の入力は想定していない
:::
::::
Regmonkey Presentation. ©Ryo Nakagami. All rights reserved.