未分類

HTML5 - メニューを作成する

概要

HTML5 でメニューを作成する方法です。基本的には以前の HTML と変わりはないと思います。

サンプル

次の HTML を準備します。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="test1.css" type="text/css">
  </head>
  <body>
    <nav>
      <ul>
        <li><a href="http://www.asahi.com">朝日新聞</a></li>
        <li><a href="http://www.yomiuri.co.jp">読売新聞</a></li>
        <li><a href="http://mainichi.jp/">毎日新聞</a></li>
        <li><a href="http://www.nikkei.com/">日本経済新聞</a></li>
        <li><a href="http://www.sankeibiz.jp/">SankeiBiz</a></li>
      </ul>
    </nav>
  </body>
</html>

次の CSS を準備します。

nav ul {
  background-color: red;
}

nav li {
  width: 100px;
  height:20px;
  float:left;
  list-style: none;
  text-align: center;
  background-color: red;
}

nav li a {
  display:block;
  text-decoration: none;
}

nav li a:hover {
  height:100%;
  display:block;
  background-color:yellow;
}

結果

まとめ

メニューの作成はリストを作る方法を転用したものです。HTML 側は一見すると、リストにしか見ません。これを CSS 側で表示調整していきます。ポイントのみ説明します。

nav li の float で、リストを横に並べます。

nav li の list-style で、ビュレットを非表示にします。

nav li a の text-decoration で、リンクの下線を非表示にします。

nav li a:hover は、マウスをメニューにあてた際のデザインを変更します。

-未分類