W3.CSS バッジとタグ

❮ 前章へ 次章へ ❯

バッジの表示

w3-badge class creates a circular badge.

Updates 9

News  6

Comments 8

例

<p>Updates <span class="w3-badge">9</span></p>
<p>News <span class="w3-badge w3-green">6</span></p>
<p>Comments <span class="w3-badge w3-red">8</span></p>
Try It Yourself ❯

タグの表示

w3-tag class creates a tag/label.

Status Done

例 New!

Comments More Later!

例

<p>Comments <span class="w3-tag">Done</span></p>
<p>Example <span class="w3-tag w3-blue">New!</span></p>
<p>Comments <span class="w3-tag w3-teal">More Later!</span></p>
Try It Yourself ❯

バッジ付きリスト

例

<ul class="w3-ul w3-border">
  <li>Jill <span class="w3-badge w3-green w3-right">5</span></li>
  <li>Eve <span class="w3-badge w3-green w3-right">3</span></li>
  <li>Adam <span class="w3-badge w3-green w3-right">8</span></li>
</ul>
Try It Yourself ❯

大きなタブの表示

66

例

<span class="w3-tag w3-jumbo w3-padding-large w3-blue">66</span>
Try It Yourself ❯

大きなバッジの表示

66

例

<p><span class="w3-badge w3-jumbo w3-padding-large w3-red">66</span></p>
Try It Yourself ❯

タグのような文字の表示

A U G U S T

例

<span class="w3-tag w3-black">J</span>
<span class="w3-tag w3-black">A</span>
<span class="w3-tag w3-black">N</span>
<span class="w3-tag w3-black">U</span>
<span class="w3-tag w3-black">A</span>
<span class="w3-tag w3-black">R</span>
<span class="w3-tag w3-black">Y</span>
Try It Yourself ❯

❮ 前章へ 次章へ ❯