プレゼンのスライドに挿入するような、論理構造や手順を示すグラフィクスをHTML+CSSで表現してみました。
ストレートな展開の例
See the Pen logic straight by Taku Yamaguchi (@yamahige) on CodePen.
循環する展開の例
See the Pen logic cycle by Taku Yamaguchi (@yamahige) on CodePen.
循環する展開でコンパクトな例
循環する展開で、上下のアイテムが左右のアイテムにオーバーラップする、左右方向にコンパクト例
See the Pen logic cycle compact by Taku Yamaguchi (@yamahige) on CodePen.
Webページに埋め込んだ例
これらサンプルをWebページに埋め込んだ例はこちら:
スライドに埋め込んだ例をVivliostyleで見る
Vivliostyleで作ったスライドなら、各スライドのヘッダーにスライドのタイトルを表示したり、「スライド番号 / 総スライド数」といった表示ができます。
VivliostyleではMarkdown (VFM, Vivliostyle Flavored Markdown)をソースにできます。
そこで「ストレートな展開の例」のソースは次の通りです:
<figure class="--logic-flex-inline">
1. 夜をこめて
1. 鳥の空音は はかるとも
1. よに逢阪の 関はゆるさじ
</figure>
「循環する展開の例」のソースは次の通りです:
<figure class="--logic-cycle-4">
- 吾輩はAである
- なぜA?
- 吾輩はBである
- なぜB?
</figure>
せっかくMarkdownなのでソースをシンプルにしておきたいとすると、styleなどの属性を使わずにCSSだけで頑張るのが工夫のしどころでしょうか。
色違い、矢印のバラエティ、配置のバラエティなどから選んでスライドに使えると楽しそうです。そういったスニペット集があるといいかも。
HTMLでスライドを作ってプレゼンするのは昔からやられてます。そこで、こういった図の中身もHTML+CSSでやってみました。