div などのコード

(2025-09-11)

astroblog + tailwind はとても便利なものですが、マークダウン以外の装飾はイチイチ記録をひっくり返して参照しています。でも、それは面倒なのでサンプルだけを書き留めておくことにしました。

div

<div class="border border-slate-500 rounded px-5 py-3 my-5">
div sample
</div>

ol

<ol class="list-decimal display: inline-block border border-stone-400 my-3 px-8 py-2 bg-slate-50 rounded">
    <li>title</li>
    comment
</ol>

ul

<ul class="list-disc display: inline-block border border-stone-400 px-8 py-2 bg-slate-50 rounded">
    <li>title</li>
    comment
</ul>

span

<span class="text-red-600">主張する</span>

href

<div class="inline-block border border-stone-300 p-1 bg-gray-300 rounded w-[600px]">
    <img src="/public/assets/202512/HIC01.jpg"/>
</div>

img

<div class="display: inline-block border border-stone-300 mt-5 p-1 bg-gray-300 rounded my-5">
    <img src="cnn01.jpg">
</div>

video

<div class="display: inline-block border border-stone-300 mt-5 p-1 bg-gray-300 rounded my-5">
    <video controls>
    <source src="sample.mp4" type="video/mp4">
    Your browser does not support the video tag.
    </video>
</div>

アンダーライン

<span class="underline decoration-4 underline-offset-4 decoration-orange-500">
  text
</span>