(cache) リストタグ<li>を横並びに表示させる方法

１．CSSで何も設定していない状態のリスト表示

トップページ
HTML
CSS
Javascript
PHP

HTMLソースコード

<ul>
   <li>トップページ</li>
   <li>HTML</li>
   <li>CSS</li>
   <li>Javascript</li>
   <li>PHP</li>
</ul>

２．CSSを設定する前に[id]や[class]の属性を付与

HTMLソースコード

<ul id="navi-list">
   <li class="navi-list-item">トップページ</li>
   <li class="navi-list-item">HTML</li>
   <li class="navi-list-item">CSS</li>
   <li class="navi-list-item">Javascript</li>
   <li class="navi-list-item">PHP</li>
</ul>

３．ナビゲーションを横並びにする為のCSSを設定

リスト全体を横580pxで設定。各項目を横116pxで設定し、[float]を使って左寄せにする。
リストのマーカーも邪魔なので[list-style]を[none]と設定して削除。
余白などを全て0pxに設定してリセット。
ほか、[text-align]や[font-size]などを使って見栄え調整。

トップページ
HTML
CSS
Javascript
PHP

CSS設定

#navi-list {
    width: 580px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.navi-list-item {
    width: 116px;
    float: left;
    margin: 0;
    padding: 0;
    font-size: 80%;
    color: #333;
    text-align: center;
    background: #eee;
}

４．HTMLにリンクを設定

HTMLソースコード

<ul id="navi-list">
   <li class="navi-list-item"><a href="#">トップページ</a></li>
   <li class="navi-list-item"><a href="#">HTML</a></li>
   <li class="navi-list-item"><a href="#">CSS</a></li>
   <li class="navi-list-item"><a href="#">Javascript</a></li>
   <li class="navi-list-item"><a href="#">PHP</a></li>
</ul>

このままだと見栄え的にかなりショボいので、[a]タグにもclass属性を追加し、CSSを設定。
[display: block]でインライン要素からブロック要素に変更し、テキスト以外のエリアもリンクエリアにする。

HTMLソースコード

<ul id="navi-list">
   <li class="navi-list-item">
   <a href="#" class="navi-list-link">トップページ</a></li>
   <li class="navi-list-item">
   <a href="#" class="navi-list-link">HTML</a></li>
   <li class="navi-list-item">
   <a href="#" class="navi-list-link">CSS</a></li>
   <li class="navi-list-item">
   <a href="#" class="navi-list-link">Javascript</a></li>
   <li class="navi-list-item">
   <a href="#" class="navi-list-link">PHP</a></li>
</ul>

CSS設定

.navi-list-link {
    text-decoration: none;
    color: #3333cc;
    display: block;
    width: 100%;
    padding: 5px 0;
}

４．マウスオーバーした際に背景色などを変更

[a]タグの[hover]擬似要素を使ってマウスオーバーした際分かりやすくするため、CSSの設定を追加する。

CSS設定

.navi-list-link:hover {
    background: #3333cc;
    color: #eee;
}

« 前のページに戻る