トップページ  > ウェブ制作チュートリアル  > リスト要素
第5章 リスト要素でメニューを作る

★リスト要素

ul要素とli要素でメニュー項目を作成する

広告

このチュートリアルで作成していくサンプルサイトは、「ホーム」「製品紹介」「会社概要」「お問合せ」の4ページでひとつのウェブサイトとなる予定です。 いま作成中のindex.htmlは、このうちの「ホーム」ですが、ホームから他のページへ移動するには、他のページへのリンクを張ったメニューが必要となります。

メニュー項目は、HTMLのリスト要素で作成するのが一般的です。 ul要素とli要素でメニュー項目を作成しましょう。 index.htmlに以下の記述を追加してください。

HTMLソース(index.html)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="base.css">
<title>ウェブサンプル株式会社</title>
</head>
<body>
<h1>ウェブサンプル株式会社</h1>

<ul>
<li>ホーム</li>
<li>製品紹介</li>
<li>会社概要</li>
<li>お問合せ</li>
</ul>

<h2>新着情報</h2>
<h3>新商品のご案内</h3>
<p>
あいうえおかきくけこさしすせそ(中略)
</p>
<h3>展示会への出展</h3>
<p>
あいうえおかきくけこさしすせそ(中略)
</p>
<h3>環境への取り組み</h3>
<p>
あいうえおかきくけこさしすせそ(中略)
</p>
<small>Copyright (c) ウェブサンプル株式会社 All Rights Reserved.</small>
</body>
</html>

保存をしたらブラウザで表示してみましょう。 メインメニューの各項目が表示されれば成功です。

まだ、リンクを設定していないので、他のページへはジャンプできません。

ul要素は、順序を問わないリスト

ul要素はUnorderd Listの略で、順序を問わないリストを作成する際に使用します。 li要素はリストの各項目を表します。

一般的なブラウザでは、ul要素は全体的にインデント(字下げ)されて、先頭に黒丸( ● )などのリストマーカーを付けて表示されます。

上記のHTMLソースでは、ul要素とli要素で(<ul>タグと<li>タグを使って)メニュー項目をリストにしました。 これは、「ホーム」「製品紹介」「会社概要」「お問合せ」の4つのメニュー項目がひとつのリストグループであり、それぞれの項目には順序はありません…という意味のマークアップになっています。

まとめ
  1. ウェブサイトのメニューは、HTMLのリスト要素で作成するのが一般的
  2. 順序を問わないリストは、ul要素とli要素で作成する
  3. 一般的なブラウザでは、ul要素は先頭に黒丸( ● )などのリストマーカーを付けて表示される
<前へ 目次へ 次へ>
広告
Sponsors
広告
MuuMuu Domain!
ドメイン取るならお名前.com
現役エンジニアのオンライン家庭教師【CodeCamp】
サイトに広告を掲載してお小遣いが稼げる!【A8.net】
Node.jsコース
はじめてのプログラミングコース
▲ページ先頭へ
HTMLクイックリファレンスについて
© HTMQ