UL要素を使ってメニューを作成

スタイルシートを使えばウェブデザインは思いのまま！ページ管理も楽になり、大幅なデザイン変更も楽になっちゃうよ！スタイルシートを使いこなして脱入門者になろう！サイト作りの基礎を学びたい方は >> 本館ウェブマイスタｰ	さくらインターネットたった１２５円という破格の値段で高機能なレンタルサーバー。業界最大手で安心して使えるよ。３ヶ月無料キャンペーン実施中!!　レンタルサーバーのSpeever 一番高いプランも今なら無料だよ

サイトのメニューリスト作成に便利な要素としてul要素がある。
この要素は以下の書式を基本とする。

<ul>
  <li> メニュー１ </li>
  <li> メニュー２ </li>
  <li> メニュー３ </li>
</ul>

これを表示すると以下になる。

ここまでが、普通の従来のリスト表示である。
しかし、メニューリストに使いたい場合はもっとかっこよくしたいと思うであろう。
そこで登場するのがCSSだ。

html本体で、ul要素にclassを指定する。

<ul class="menu">
  <li> メニュー１ </li>
  <li> メニュー２ </li>
  <li> メニュー３ </li>
</ul>

そして次が、CSSの内容である。

ul.menu {
  list-style-image: url("icon_menu.gif");
}

以下は、その表示結果

この方法を元にして、他のスタイルと組み合わせてメニューデザインをしよう。

ウェブデザインをスタイルシートでおこなおう！