デザインサンプルで学ぶCSSによるスタイリング～「リスト」編

CSSで作るWeb用パーツ（2）

リストのテキストをボタンのようにスタイリングする

　先ほどは画像を横並びにしましたが、今度は、テキストをボタンのようにスタイリングしてみましょう。

　サンプルのHTMLコードは次のようになります。

［リスト12］サンプル06／HTML（sample06.html）

<ul id="sample06">
<li><a href="#">リスト1</a></li>
<li><a href="#">リスト2</a></li>
<li><a href="#">リスト3</a></li>
<li><a href="#">リスト4</a></li>
<li><a href="#">リスト5</a></li>
</ul>

図11：ブラウザ表示結果

　リスト項目は5個あるので、ul要素を600pxの幅とした場合、5等分するとli要素の幅は120pxになります。width:120pxと指定したうえで、float:leftを指定します。さらにテキストを中央揃えにするためにtext-align: centerを指定します。

［リスト13］サンプル06／CSS（sample06.html）

ul#sample06 {
  width: 600px; /* 幅600px */
  margin: 0 auto 20px auto;
}
ul#sample06 li {
  width: 120px; /* 幅120px */
  float: left; /* 左に配置 */
  text-align: center; /* テキストを中央揃え */
}

図12：float:leftでリストのテキストを横並びに配置（sample06.html）

　図13は、分かりやすくするために、li要素にグレーの背景色を付け、a要素にredのボーダーを指定したものです。120px幅のボタンになるようにスタイリングしたいのですが、グレーの領域にマウスカーソルを持っていっても反応しません。

図13：グレーの領域がクリックできない（sample06.html）

　a要素はインライン要素のため、これをdisplay: blockとしてブロックレベル表示にすることで、クリッカブル領域が親要素（li要素）の幅120pxまで広がります。

［リスト14］サンプル06／CSS（sample06.html）

ul#sample06 li a {
  border: 1px solid red;
  display: block;
}

図14：display:blockでa要素の幅を120pxにする（sample06.html）

　ここまでできたら、a要素をボタンに見えるようにスタイリングします。クリックできる領域であることを表現するには、グラデーションやボーダーで立体的に装飾すると良いでしょう。

　図15のように、ボタンの上と左ボーダーを背景より明るく、右と下ボーダーを背景より暗くすると凸を表現することができます。押したときの表現はその逆で、左と上ボーダーを暗く、右と下ボーダーを明るくします。

［リスト15］サンプル06／CSS（sample06.html）

ul#sample06 li a {
  display: block; /* ブロックレベル表示 */
  padding: 10px 0;
  background-color: #3399cc;
  color: #fff;
  border-top: 1px solid #99ccff;
  border-left: 1px solid #99ccff;
  border-right: 1px solid #006699;
  border-bottom: 1px solid #006699;
  text-decoration: none;
  font-weight: bold;
}
ul#sample06 li a:hover, ul#sample06 li a:active { /* ホバー時,アクティブ時 */
  background-color: #336699;
  border-top: 1px solid #006699;
  border-left: 1px solid #006699;
  border-right: 1px solid #99ccff;
  border-bottom: 1px solid #99ccff;
}

図15：a要素の装飾（sample06.html）

まとめ

　本記事では、リストのスタイリングでよく使われるテクニックを紹介しました。同じリスト要素でもボタン風にしたり、マーカーを付けたりと多様な表現ができることをお分かりいただけたと思います。

　次回は、CSSを使ったテーブルのスタイリング方法をご紹介します。