タグとカテゴリー

タグやカテゴリーを表示するために使用し、テキストをバッジやボタン状に見せるモジュール

テキストをバッジやボタイン状に見せる

記事に付いているタグやカテゴリーを表示する場合、テキストに背景色を付けたり、四角く囲んだり、CSSで装飾を施したりする

タグやカテゴリーのテキストは <span> タグなどで囲む

タグやカテゴリーには、同じタグやカテゴリーの記事を集めて一覧できるページにリンクを設定することが多い

<span> だけでなく <a> タグでも囲まれる

HTML タグのテキストの HTML

<span> <a href ="#"> 歩く <a> </span>

CSS では背景色、テキスト色を設定する

背景色で塗りつぶす領域を調整するのにパディングを、隣り合う別のタグとのスペースを作るために右マージンを設定する

沢山タグが付いて 2行以上に跨がる可能性があるときは、タグ同士が重ならないように上下にもスペースを空けないとならない

タグのテキストを <span> で囲んでいる場合、上下にマージンを設定することができない

<span> はインラインボックスで表示されるためで、その代わりに親要素に line-height プロパティを使って行間を設定する

ボックスの角を丸くする border-radius プロパティ

border-radius プロパティを使うと、ボックスの角を丸くすることができる

書式は何通りかあるが、値をひとつだけ指定するのが簡単

書式: border-radius プロパティ

border-radius: 角丸の半径 px

ボックスの両端を半円にするには

ボックスの左右を半円形にするときには、わざわざボックスのサイズを測って正確な数を調べる必要はない

border-radius に十分大きな値を指定する

border-radius にどのような値を指定しても、角丸四角形の四隅の半径は実際のボックスの高さの 1/2 より大きくならない

テンプレートファイル

base.html
style.css