タグやカテゴリーを表示するために使用し、テキストをバッジやボタン状に見せるモジュール
記事に付いているタグやカテゴリーを表示する場合、テキストに背景色を付けたり、四角く囲んだり、CSSで装飾を施したりする
タグやカテゴリーのテキストは <span> タグなどで囲む
タグやカテゴリーには、同じタグやカテゴリーの記事を集めて一覧できるページにリンクを設定することが多い
<span> だけでなく <a> タグでも囲まれる
<span> <a href ="#"> 歩く <a> </span>
CSS では背景色、テキスト色を設定する
背景色で塗りつぶす領域を調整するのにパディングを、隣り合う別のタグとのスペースを作るために右マージンを設定する
沢山タグが付いて 2行以上に跨がる可能性があるときは、タグ同士が重ならないように上下にもスペースを空けないとならない
タグのテキストを <span> で囲んでいる場合、上下にマージンを設定することができない
<span> はインラインボックスで表示されるためで、その代わりに親要素に line-height プロパティを使って行間を設定する
border-radius プロパティを使うと、ボックスの角を丸くすることができる
書式は何通りかあるが、値をひとつだけ指定するのが簡単
border-radius: 角丸の半径 px
ボックスの左右を半円形にするときには、わざわざボックスのサイズを測って正確な数を調べる必要はない
border-radius に十分大きな値を指定する
border-radius にどのような値を指定しても、角丸四角形の四隅の半径は実際のボックスの高さの 1/2 より大きくならない