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

Transcript

1. Marp + TailWind CSS でスライドをきれいにする 1
2. Tailwind CSSとは CSSのライブラリのひとつ ユーティリティクラスと呼ばれる基 本クラスの組み合わせで設計を柔軟 に表現できる 右例のように適切な要素を組み 合わせて表現することができる 後述で使いそうなユーティリティク ラスのパターンについて解説する <div class="grid grid-cols-3 place-items-center m-5"> <div class="border-solid p-2 rounded">01</div> <div class="border-dashed p-2 rounded-full">02</div> <div class="border-double p-2 border-orange-500">03</div> </div> 画面を縦に3分割して要素を配置する例 01 02 03 レンダリング結果 2
3. marp での Tailwind CSS の導入方法 1. 以下のようにscriptタグで読み込んでおく i. 2025年1月15日時点で最新版の v3.4.17 を読み込んでおく 2. VS Codeのプレビュー設定で Markdown: Change Preview Security Settings を探し て、無効にしておかないとプレビュー時にレンダリングされない(セキュリティリ スクがあるので注意) --- marp: true theme: beamer --- <script src="https://cdn.tailwindcss.com/3.4.17"></script> 3
4. 縦に分割 grid grid-cols-n 例えば、 grid grid-cols-2 と書くこ とで縦に2分割できる # 縦にn分割 `grid grid-cols-n` <div class="grid grid-cols-2"> <div> * 例えば、`grid grid-cols-2` と書くことで縦に2分割できる </div> <div> </div> </div> 4
5. 横に分割 grid grid-rows-n 例えば、 grid grid-rows-2 と書くことで横に2分割できる # 横にn分割 `grid grid-rows-n` <div class="grid grid-rows-2 h-screen"> 5
6. タイル状に分割 タイル上に分割することもできる grid-rows-subgrid と row-start-n の組み合わせで、グリッドの位置を 相対的に指定できる <div class="grid grid-rows-3 grid-flow-col gap-4"> <div class="border-solid p-10 rounded-xl bg-cyan-200">01</div> <div class="border-solid p-10 rounded-xl bg-cyan-300">02</div> <div class="border-solid p-10 rounded-xl bg-cyan-400">03</div> <div class="border-solid p-10 rounded-xl bg-cyan-500">04</div> <div class="border-solid p-10 rounded-xl bg-cyan-600">05</div> <div class="grid grid-rows-subgrid row-span-2"> <div class="row-start-2 border-solid p-10 rounded-xl bg-rose-400">06</div> </div> <div class="border-solid p-10 rounded-xl bg-cyan-700">07</div> <div class="border-solid p-10 rounded-xl bg-cyan-800">08</div> <div class="border-solid p-10 rounded-xl bg-cyan-900">09</div> </div> 01 02 03 04 05 06 07 08 09 6
7. テキスト修飾 1. テキストに下線を引いたり 2. マーカーを引いたりできる 3. 両方を組み合わせることもできる 4. 四角で囲んだり もできる <div class="grid grid-cols-2 gap-10"> <div class="leading-loose"> 1. テキストに<span class="underline decoration-red-300">下線を引いたり</span> 2. <span class="bg-blue-200">マーカーを引いたり</span>できる 3. <span class="bg-purple-100 underline decoration-yellow-300">両方を組み合わせる</span>こともできる 4. <span class="border-solid border-cyan-800 rounded-xl px-1">四角で囲んだり</span>もできる <div class="border-solid p-5 rounded-xl bg-violet-100"> $$ \int_0^\infty \exp\left(-x^2\right)dx = \frac{\sqrt{\pi}}{2} $$ </div> </div> <div> 7
8. 余談: grid-template-areas について 上側のコンテンツ ここに上側に表示したい内容を記述します。 リスト1 リスト2 下側のコンテンツ ここには下側に表示したい内容を記述します。 リスト3 リスト4 8
9. 以下スライドに使えそうな応用例を少し書く 9
10. Mac風のウィンドウ Macの操作の説明をしたいときなど <div class="bg-white rounded-lg shadow-md border border-gray-200"> <div class="bg-gray-100 py-2 px-4 rounded-t-lg flex items-center space-x-2 border-b border-gray-200"> <div class="w-3 h-3 rounded-full bg-red-500"></div> <div class="w-3 h-3 rounded-full bg-yellow-500"></div> <div class="w-3 h-3 rounded-full bg-green-500"></div> <span class="ml-2 text-gray-800 text-sm font-medium">ウィンドウタイトル</span> </div> <div class="p-4"> <p class="text-gray-700">なんらかのメッセージ</p> <button class="mt-4 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"> ボタン </button> </div> </div> ウィンドウタイトル 重要なメッセージ ボタン 10
11. ターミナル風のボックス コマンドの説明などをリッチに見せたいときなど <div class="bg-gray-900 rounded-md shadow-lg border border-gray-700 overflow-hidden"> <div class="bg-gray-700 py-2 px-4 rounded-t-md flex items-center space-x-2 border-b border-gray-800"> <div class="w-3 h-3 rounded-full bg-red-500"></div> <div class="w-3 h-3 rounded-full bg-yellow-500"></div> <div class="w-3 h-3 rounded-full bg-green-500"></div> <span class="ml-2 text-gray-100 text-sm font-medium">terminal</span> </div> <div class="p-4 text-green-400 font-mono text-sm"> ユーザー名@ホスト名 ~ % <span class="text-white">git clone https://github.com/example/repo.git</span> <br> Cloning into 'repo'... <br> remote: Enumerating objects: 100, done. <br> remote: Counting objects: 100% (100/100), done. <br> remote: Compressing objects: 100% (50/50), done. <br> remote: Total 100 (delta 30), reused 80 (delta 20), pack-reused 0 <br> Receiving objects: 100% (100/100), 10.24 KiB | 2.05 MiB/s, done. <br> Resolving deltas: 100% (30/30), done. </div> </div> 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