Marp + TailWind CSS でスライドをきれいにする 1

Tailwind CSSとは CSSのライブラリのひとつ ユーティリティクラスと呼ばれる基 本クラスの組み合わせで設計を柔軟 に表現できる 右例のように適切な要素を組み 合わせて表現することができる 後述で使いそうなユーティリティク ラスのパターンについて解説する 画面を縦に3分割して要素を配置する例 01 02 03 レンダリング結果 2

marp での Tailwind CSS の導入方法 1. 以下のようにscriptタグで読み込んでおく i. 2025年1月15日時点で最新版の v3.4.17 を読み込んでおく 2. VS Codeのプレビュー設定で Markdown: Change Preview Security Settings を探し て、無効にしておかないとプレビュー時にレンダリングされない(セキュリティリ スクがあるので注意) --- marp: true theme: beamer --- 3

縦に分割 grid grid-cols-n 例えば、 grid grid-cols-2 と書くこ とで縦に2分割できる # 縦にn分割 `grid grid-cols-n` 4

横に分割 grid grid-rows-n 例えば、 grid grid-rows-2 と書くことで横に2分割できる # 横にn分割 `grid grid-rows-n`

タイル状に分割 タイル上に分割することもできる grid-rows-subgrid と row-start-n の組み合わせで、グリッドの位置を 相対的に指定できる 01 02 03 04 05 06 07 08 09 6

テキスト修飾 1. テキストに下線を引いたり 2. マーカーを引いたりできる 3. 両方を組み合わせることもできる 4. 四角で囲んだり もできる

余談: grid-template-areas について 上側のコンテンツ ここに上側に表示したい内容を記述します。 リスト1 リスト2 下側のコンテンツ ここには下側に表示したい内容を記述します。 リスト3 リスト4 8

以下スライドに使えそうな応用例を少し書く 9

Mac風のウィンドウ Macの操作の説明をしたいときなど ウィンドウタイトル 重要なメッセージ ボタン 10

ターミナル風のボックス コマンドの説明などをリッチに見せたいときなど terminal ユーザー名@ホスト名 ~ % git clone https://github.com/example/repo.git Cloning into 'repo'... remote: Enumerating objects: 100, done. remote: Counting objects: 100% (100/100), done. remote: Compressing objects: 100% (50/50), done. remote: Total 100 (delta 30), reused 80 (delta 20), pack-reused 0 Receiving objects: 100% (100/100), 10.24 KiB | 2.05 MiB/s, done. Resolving deltas: 100% (30/30), done. 11

12