iPentec.com  /  Doc  /  CSS

目次

ULタグでツールバーを実装する - CSS

CSSを利用し、ULタグでツールバーを実装する場合のコードを紹介します。

概要

ULタグLIタグを利用してツールバーやメニューなどのUIを実装できます。この記事では実装のためのコードを紹介します。

プログラム1 : Floatを利用した実装

下記のHTML,CSSを作成します。
ul-menubar.css
.ULMenuBarFrame {
  border: solid 1px #a2b3d3;
  background: url('back.png');
  background-repeat: repeat-x;
  background-size: contain
}

.ULMenuBar {
  height: 48px;
  width: 640px;
  margin: 0px auto 0px auto;
  padding: 0px 0px 0px 0px;
}

.MenuItem {
  list-style-type: none;
  float: left;
  text-align: center;
}

.MenuItemButtonLinkText {
  display: block;
  text-decoration: none;
  border-left: solid 1px #a2b3d3;
  border-right: solid 1px #a2b3d3;
  height: 34px;
  width: 140px;
  padding: 14px 0px 0px 0px;
  margin: 0px 0px 0px 0px;
  background-image: url('back.png');
  background-repeat: repeat-x;
  background-size:contain
}

.MenuItemButtonLinkText:active {
  color: #24649a;
  text-decoration: none;
}

.MenuItemButtonLinkText:visited {
  color: #24649a;
  text-decoration: none;
}

.MenuItemButtonLinkText:hover {
  color: #24649a;
  text-decoration: underline;
  background-image: url('back-a.png');
  background-repeat: repeat-x;
  background-size: contain
}

.MenuItemButtonLinkText:active {
  color: #24649a;
  text-decoration: none;
  background-image: url('back-a.png');
  background-repeat: repeat-x;
  background-size: contain
}
ul-menubar.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
  <link rel="stylesheet" href="ul-menubar.css" />
</head>
<body>
  <div>Head</div>

  <div class="ULMenuBarFrame">
    <ul class="ULMenuBar">
      <li class="MenuItem"><a class="MenuItemButtonLinkText" href="page1.html">ボタン１</a></li>
      <li class="MenuItem"><a class="MenuItemButtonLinkText" href="page2.html">ボタン２</a></li>
      <li class="MenuItem"><a class="MenuItemButtonLinkText" href="page3.html">ボタン３</a></li>
      <li class="MenuItem"><a class="MenuItemButtonLinkText" href="page4.html">ボタン４</a></li>
    </ul>
  </div>
  <div style="clear:left;" />

  <div>コンテンツです。</div>

  <div>Foot</div>
</body>
</html>

back.pngは下図の画像を使用します。


back-a.pngは下図の画像を使用します。

解説

LIタグのスタイルでfloat:leftを指定します。この指定により項目が横方向に並びます。LIタグでは list-style-typeをnoneに設定しリストのマークが画面に表示されないようにします。LIタグ内のAタグはdisplay:blockを指定します。ボタンのサイズは、LIタグではなく、Aタグで幅と高さを指定します。この設定により文字以外の場所をクリックした場合でもリンクが動作します。

表示結果

上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。


ボタンの上にマウスポインタを移動するとポインタと背景色が変わります。


ボタンをクリックするとAタグで記述した遷移先にページ遷移します。

プログラム2 : FlexBoxを利用した実装

Floatを利用する以外にFlexBoxを利用した実装もできます。
下記のHTML, CSSを作成します。
ul-menubar-flex.css
.ULMenuBar {
  display:flex;
  text-align:center;
  margin:0;
  padding:0;
}

  .ULMenuBar > li {
    margin:0;
    padding:0;
    flex: 1;
    list-style-type: none;
    border:1px solid #808080;
  }

.MenuBarButton {
  display: block;
  border: 0px none;
  background-color: transparent;
  width: 100%;
  height:100%;
  margin: 0;
  padding: 0;
  border-radius: 0;
  box-shadow: rgba(0,0,0,1) 0 0 inset;
  outline: none;
}
  .MenuBarButton:hover {
    background-color:#E0E0E0;
    cursor:pointer;
  }
ul-menubar-flex.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <link rel="stylesheet" href="ul-menubar-flex.css" />
  <script type="text/javascript">
    function buttonClick(value) {
      switch (value) {
        case 1:
          alert('メニュー１がクリックされました');
          break;
        case 2:
          alert('メニュー２がクリックされました');
          break;
        case 3:
          alert('メニュー３がクリックされました');
          break;
        case 4:
          alert('メニュー４がクリックされました');
          break;
        case 5:
          alert('メニュー５がクリックされました');
          break;
      }
    }
  </script>
</head>
<body>
  <div>Head</div>

  <div class="ULMenuBarFrame">
    <ul class="ULMenuBar">
      <li><button class="MenuBarButton" onclick="buttonClick(1);">メニュー１</button></li>
      <li><button class="MenuBarButton" onclick="buttonClick(2);">メニュー２</button></li>
      <li><button class="MenuBarButton" onclick="buttonClick(3);">メニュー３</button></li>
      <li><button class="MenuBarButton" onclick="buttonClick(4);">メニュー４</button></li>
      <li><button class="MenuBarButton" onclick="buttonClick(5);">メニュー５</button></li>
    </ul>
  </div>
  <div style="clear:left;" />

  <div>コンテンツです。</div>

  <div>Foot</div>
</body>
</html>

解説

ULタグにdisplay:flexを設定します。この設定により、LIタグが横方向に並びます。
LIタグはmargin,paddingともに0を設定します。またlist-style-typeをnoneに設定しリストのマークが画面に表示されないようにします。
LIタグ内はbuttonタグを記述しています。buttonタグはdisplay:block を指定し、ボタンの幅と高さを100%に設定します。この設定によりLIの枠のサイズいっぱいに表示されます。
今回はButtonタグで記述していますので、ボタンのクリックでbuttonClick()関数を呼び出す動作にしています。

表示結果

上記のHTMLをWebブラウザで表示します。下図のページが表示されます。


マウスポインタをボタンの上に移動するとポインタの形状が変わりボタンの背景色が変わります。


ボタンをクリックするとbuttonClick()関数が呼び出され、アラートダイアログが表示されます。

プログラム3 : FlexBoxを利用した実装 テキストの長さに応じたサイズ(インライン)での表示

先の例と同様にFlexBoxを利用して実装しますが、メニューの文字列の長さに合わせた枠の大きさで表示する実装例です。

コード

下記のHTML, CSSファイルを作成します。
ul-menubar-flex-inline.css
:root {
  --menu-font-size: 12px;
}

.ULMenuBar {
  display: flex;
  text-align: center;
  margin: 0;
  padding: 0;
  font-size: var(--menu-font-size);
}

  .ULMenuBar > li {
    margin: 0;
    padding: 0;
    list-style-type: none;
    border: 1px solid #808080;
  }

.MenuBarButton {
  flex: none;
  border: none;
  background-color: transparent;
  margin: 0;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  font-size: var(--menu-font-size);
  outline: none;
}
  .MenuBarButton:hover {
    background-color: #E0E0E0;
    cursor: pointer;
  }
ul-menubar-flex-inline.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <link rel="stylesheet" href="ul-menubar-flex-inline.css" />
  <script type="text/javascript">
    function buttonClick(value) {
      switch (value) {
        case 1:
          alert('メニュー１がクリックされました');
          break;
        case 2:
          alert('メニュー２がクリックされました');
          break;
        case 3:
          alert('メニュー３がクリックされました');
          break;
        case 4:
          alert('メニュー４がクリックされました');
          break;
        case 5:
          alert('メニュー５がクリックされました');
          break;
      }
    }
  </script>
</head>
<body>
  <div>Head</div>

  <div class="ULMenuBarFrame">
    <ul class="ULMenuBar">
      <li><button class="MenuBarButton" onclick="buttonClick(1);">メニュー１</button></li>
      <li><button class="MenuBarButton" onclick="buttonClick(2);">メニュー２</button></li>
      <li><button class="MenuBarButton" onclick="buttonClick(3);">メニュー３ (長いです)</button></li>
      <li><button class="MenuBarButton" onclick="buttonClick(4);">メニュー４ (とっても長いです)</button></li>
      <li><button class="MenuBarButton" onclick="buttonClick(5);">メ５</button></li>
    </ul>
  </div>
  <div style="clear:left;" />

  <div>コンテンツです。</div>

  <div>Foot</div>
</body>
</html>

解説

基本的なコードは先のflexを利用したコードとほぼ同じです。
先の例では、幅がページ幅に対して決まっているため、flexの値を設定しましたが、幅が決まっていない場合はflexの値を指定しない、もしくはflex: none; を指定します。
また、インライン要素の場合はheightプロパティを指定できないため、インライン要素と外側の枠のフォントサイズを一致させて両方の枠の高さをそろえる必要があります。 枠の高さをそろえない場合、マウスホバー時に背景色を変更した場合に、インライン要素と外側の枠の間に隙間ができてしまい、枠の背景色が変更されていないように見えてしまいます。


同じ値を設定するためにCSS変数を利用しています。

実行結果

上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。


マウスポインタがメニューの項目に重なるとメニューの背景色が灰色に変わります。


メニューをクリックすると、アラートダイアログが表示され、クリックによりJavaScriptが実行できていることが確認できます。

参考

上記の例では、外側の枠と内部のコンテンツを同じフォントサイズにして高さをそろえましたが、別の方法として、マウスポインタのホバー時のスタイルを外の枠のスタイルとして記述する方法もあります。
下記のCSSに置き換えることで、外の枠にマウスポインタが重なった場合に外の枠の背景色を変更してマウスのホバーを表現します。
.ULMenuBar {
  display: flex;
  text-align: center;
  margin: 0;
  padding: 0;
  font-size: 12px;
}

  .ULMenuBar > li {
    margin: 0;
    padding: 0;
    list-style-type: none;
    border: 1px solid #808080;
  }
    .ULMenuBar > li:hover {
      background-color: #E0E0E0;
      cursor: pointer;
    }

.MenuBarButton {
  flex: none;
  border: none;
  background-color: transparent;
  margin: 0;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  outline: none;
}
著者
Penta
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用

関連するページ

最終更新日: 2024-01-06
作成日: 2009-10-05
ドキュメント
新着記事一覧
タグ一覧
ドキュメント トップ
コンテンツ
YouTube
iPentec
プライバシー
iPentecについて
iPentec all rights reserverd.