スライドで使う構造図をHTML+CSSで表現

著者

yamahige

版

版名

v1

日付

2025-03-26

ストレート: アイテムがフレーズ

アイテムの数は可変

  1. 夜をこめて
  2. 鳥の空音は はかるとも
  3. よに逢阪の 関はゆるさじ
  1. 色は匂へど散りぬるを
  2. 我が世誰ぞ常ならむ
  3. 有為の奥山今日越えて
  4. 浅き夢見し酔ひもせず

ストレート: アイテムの中に構造あり

  1. 全ての人間は死すべきものである。
    • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    • Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  2. ソクラテスは人間である。
    • 色は匂へど 散りぬるを
    • 我が世誰ぞ 常ならむ
    • 有為の奥山 今日越えて
    • 浅き夢見し 酔ひもせず
  3. ゆえにソクラテスは死すべきものである。
    • Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    • Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

循環

アイテムの数ごとにCSSが必要…かも。この例では4個。

循環 - オーバーラップ

アイテムが左右にオーバーラップする例、個々のアイテムの幅に比べて全体の左右の幅が狭くて済む。アイテムの数は固定、この例では4個。