スタイルシートの技

Windowsのメニューのような項目をリストを応用して作る

Windowsのメニューのような項目を作ります。 メニューをクリックした時にサブメニューまで出す方法は難しいと思うので、 ここではコンテンツのカテゴリなどをメニュー化させるものとして進める事にします。 当サイトトップページの上部にあるメニューリストのようなものを考えてください。

これを実現するにはul要素をうまく使います。 通常li要素はブロック要素で、次のli要素は改行されて表示される事になります。 言うまでもないと思いますが、例を見てみましょう。

<ul>
   <li>プロフィール</li>
   <li>日記</li>
   <li>リンク集</li>
</ul>
  • プロフィール
  • 日記
  • リンク集

このli要素をまずインライン要素に変えてしまいましょう。 そんな事ができるの？と思うかも知れませんが、できます。 一般にHTMLの要素はブロック要素・インライン要素のいずれかしか存在しえません。 このような表示方法を制御する時には「display」というスタイルシート属性を使います。 属性値としては、「block」（ブロック要素）・「inline」（インライン要素）・「none」（表示しない）が選択できます。 他にも色々とありますが、取りあえず基本はこのような感じで押さえておきましょう。

<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
   <meta http-equiv="content-style-type" content="text/css">
   <title>displayの練習</title>
   <style type="text/css">
      li { display: inline; }
   </style>
</head>
<body>
   <h1>displayの練習</h1>
   <ul>
      <li>プロフィール</li>
      <li>日記</li>
      <li>リンク集</li>
   </ul>
</body>
</html>
  • プロフィール
  • 日記
  • リンク集

このようにインライン表示になりました。しかし、文字群がちょっとキツイですね。 その場合にはマージンを取ってやりましょう。以下のスタイルシートを追加してプレビューしてみます。

li
{
   display: inline;
   margin-right: 3em;
}
  • プロフィール
  • 日記
  • リンク集

少し見栄えが良くなりましたね。では次はこれらを罫線で囲ってみましょう。 罫線で囲む場合にはマージンは無くして、逆にpaddingで文字列外壁に余白を与えてやります。

li
{
   display: inline;
   border: solid 1px #cccccc;
   padding: 0.5em;
}
  • プロフィール
  • 日記
  • リンク集

ちょっと罫線が重なってしまってますね。これは四角のボーダーが隣同士で重なっているためです。 これを回避するためにはブラウザを騙しましょう。 ちょっと凝って、すべてのメニュー幅を同じにして、かつ中央寄せにしてみましょう。

li
{
   display: inline;
   border: solid 1px #cccccc;
   padding: 0.5em;
   text-align: center;
   width: 100px;
   margin-left: -1px;
}
  • プロフィール
  • 日記
  • リンク集

隣り合うのが重なっているので強引に左へ1ピクセル寄せています。 これで綺麗に揃いました。後はみなさんのデザインセンス次第で背景画像を加えたりして下さい。

top