スタイルシートテクニックの基本

リスト

マークアップ

Apples
Spaghetti
Green Beans
Milk

<ul>
    <li>Apples</li>
    <li>Spaghetti</li>
    <li>Green Beans</li>
    <li>Milk</li>
</ul>

スタイルシート

リストマーカーをオフにする

Apples
Spaghetti
Green Beans
Milk

ul {
	list-style: none;
	}

▲このページのトップへ

リストマーカーとインデントをオフにする

Apples
Spaghetti
Green Beans
Milk

ul {
	list-style: none;
	padding-left: 0;
	}

▲このページのトップへ

リストマーカーに独自の画像を使用する(1)

Apples
Spaghetti
Green Beans
Milk

ul {
	list-style-image: url(fancybullet.gif);
	}

▲このページのトップへ

リストマーカーに独自の画像を使用する(2)

Apples
Spaghetti
Green Beans
Milk

ul {
	list-style: none;
	}
li {
	background-image: url(fancybullet.gif) no-repeat 0 50%;　　…①
	padding-left: 17px;　　…②
	}

★さまざまなブラウザで一貫した結果を得るには、(2)の方法が望ましい。
　(1)の方法は、ブラウザによって画像の垂直位置に関して多少の違いが生じる。
　(2)の、①0 50%　は、background-imageを左端から0ピクセル、上端から50%下に配置して、画像を基本的に垂直方向で中央揃えするようにブラウザに伝える。同様に、左端と上端からのピクセル位置を使用することもできる。たとえば、0 6pxは、リストマーカーを左端から0ピクセル、上端から6ピクセルに配置する。②リスト項目の左に17ピクセルのパディングを追加して、15ピクセル幅×17ピクセル高の画像が若干の空白を置いてテキストと重ならないで完全に表示されるようにする。この値は使用するマーカーの画像の幅に応じて調整する。

▲このページのトップへ

マークアップ

リストにid属性を追加する

<ul id="minitabs">
    <li><a href="/apples/">Apples</a></li>
    <li><a href="/spaghetti/" class="active">Spaghetti</a></li>
    <li><a href="/greenbeans/">Green Beans</a></li>
    <li><a href="/milk/">Milk</a></li>
</ul>

スタイルシート

リストによるナビゲーション

#minitabs {
	margin: 0;
	padding: 0 0 20px 10px;
	border-bottom: 1px solid #696;
	}
#minitabs li {
	margin: 0;
	padding: 0;
	display: inline;
	list-style-type: none;
	}
#minitabs a {
	float: left;
	line-height: 14px;
	font-weight: bold;
	margin: 0 10px 4px 10px;
	text-decoration: none;
	color: #9c9;
	}
#minitabs a.active, #minitabs a:hover {
	border-bottom: 4px solid #696;
	padding-bottom: 2px;
	color: #363;
	}
#minitabs a:hover {
	color: #696;
	}

リストマーカーとデフォルトのインデントをオフにする。
項目を垂直ではなく水平方向に並べる最初のステップとしてdisplayプロパティの値をinlineにする。
リンクのグループを明確にするため下部ボーダーを追加する。
リンクを左にフロートさせる。
ハイパーリンクを少しデザインして、パディングとマージンを多少調整する。
リンクの下に、ホバーまたは選択するとアクティブ化するタブのようなボーダーを作成する。
強調表示するタブについて、選択したhref属性にclass="active"を追加することで「明るくしたまま」にできる。

▲このページのトップへ

ミニタブの形状

同じ番号なしリストから類似のCSSを作成する。

#minitabs {
	margin: 0;
	padding: 0 0 20px 10px;
	border-bottom: 1px solid #9fb1bc;
	}
#minitabs li {
	margin: 0;
	padding: 0;
	display: inline;
	list-style-type: none;
	}
#minitabs a {
	float: left;
	line-height: 14px;
	lont-weight: bold;
	padding: 0 12px 6px 12px;
	text-decoration: none;
	color: #708491;
	}
#minitabs a.active, #minitabs a:hover {
	color: #000;
	background: url(tab_pyra.gif) no-repeat bottom center;
	}

・前掲サンプルとの違いは、4ピクセル高のタブを作成するborder-bottomがなく、すべてのホバーおよび選択状態の下部中央に位置する背景画像が追加されたことである。

▲このページのトップへ