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>

span

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

href

<span class="text-blue-800">
  <a href="https://www." target="_blank">
    site
  </a>
</span>

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>