CSSの指示構成について

では、具体的にHTMLタグに対してレイアウト構成をする場合、どのような構成でCSS上に支持をすればいいのか。

【例】
例えばHTMLにて以下のような内容が記されていたとする。

<ul>
<li >
<a class=”forum-title” href=”〇〇〇〇/〇〇〇〇〇〇”>
好きな食べ物</a>
</li>
<li >
<a class=”forum-title” href=”〇〇〇〇/〇〇〇〇〇〇”>
好きな俳優</a>
</li>
<li >
<a class=”forum-title” href=”〇〇〇〇/〇〇〇〇〇〇”>
好きな芸人</a>
</li>
</ul>

実際の開発現場でもよく使われるliタグですが、「li」はList Itemの略です。意味のとおり、リスト形式の中のアイテム、即ち箇条書きの中身を表現できます。
単にこの文言をブラウザで表示した場合、以下のように表示されます。

・好きな食べ物
・好きな俳優
・好きな芸人

例ですのでリンクは形だけですが、これにCSSを用いて更にスタイリッシュに決めようと思います。

先ずはリンクテキストの色を変えましょう。

<a>～</a>タグは、一般的にはハイパーリンクとして扱うことができるタグです。
classは属性

【CSS】
a.bbp-forum-title {
color: #696969;
}

するとリンクは以下のように表示されます。

・好きな食べ物
・好きな俳優
・好きな芸人