6日でできる 新HTML入門｜リストとメニューの作り方
箇条書きも手順もメニューも、リストタグで分かりやすく整理できる。ul、ol、liを使って、読みやすく使いやすいWebページを作ろう。
Webページでは、複数の項目を分かりやすく並べたい場面がたくさんあります。たとえば、今日の作業予定、商品の特徴、アプリの操作手順、サービス一覧、サイトのナビゲーションメニューなどです。このような情報を文章だけで続けて書くと、どこからどこまでが1つの項目なのか分かりにくくなることがあります。
そこで使うのが、HTMLのリストタグです。リストタグを使うと、項目を箇条書きにしたり、番号付きの手順として並べたりできます。順番が関係ない項目にはulタグ、手順やランキングのように順番が大切な項目にはolタグを使います。そして、それぞれの項目はliタグで表します。
リストは、単なる箇条書きだけでなく、Webサイトのメニュー作成にもよく使われます。たとえば、ホーム、サービス、会社情報、お問い合わせといったナビゲーションは、ulタグとliタグで構造を作り、aタグでリンクを設定し、CSSで横並びのメニューに整えます。
さらにCSSを使うと、リストマーカーの種類を変えたり、番号の形式をローマ数字やアルファベットにしたり、画像をマーカーとして使ったりできます。ここでは、リストの基本から、階層化、マーカーのカスタマイズ、ナビゲーションメニューへの応用まで、サンプルHTMLを使いながら順番に学習していきます。
素材のダウンロード
以下のリンクから画像素材をダウンロードできます。
※ウイルス対策ソフト ESET でチェックしておりますが、ダウンロードは自己責任でお願いします。
| coffee-marker.png |
|---|
 |
リスト作成で使う主なタグ
HTMLでリストを作るときは、ul、ol、liを使います。ulとolはリスト全体を囲むタグで、liは各項目を表すタグです。
リストタグの基本
| タグ | 役割 | 向いている内容 |
|---|---|---|
| ul | 順序なしリストを作る | 箇条書き、特徴一覧、メニュー項目 |
| ol | 順序付きリストを作る | 手順、ランキング、優先順位 |
| li | リスト内の各項目を作る | 1つひとつの項目 |
ulは、順番に意味がない項目を並べるときに使います。たとえば、買い物リストや特徴一覧などです。olは、順番に意味がある項目を並べるときに使います。たとえば、作業手順やランキングなどです。
liは、ulやolの中に入れて使います。liだけを単独で使うのではなく、必ずリスト全体を表すulまたはolの中に入れます。
図1：ul、ol、liでリストを作る
この図から分かること
ulタグは順番を付けない箇条書き、olタグは番号付きのリストを作るために使います。どちらのリストでも、各項目はliタグで作ります。情報の性質に合わせてulとolを使い分けることで、内容が整理されて読みやすくなります。
ulタグで順序なしリストを作る
ulタグは、順番を付けずに項目を並べたいときに使います。買い物リスト、作業項目、特徴一覧、メニュー項目など、順番に強い意味がないものに向いています。
基本の形は、ulタグの中にliタグを並べます。
<ul>
<li>項目A</li>
<li>項目B</li>
<li>項目C</li>
</ul>ブラウザでは、初期状態で各項目の前に黒丸のマーカーが表示されます。この黒丸はCSSで変更できますが、まずはulとliの基本形を理解しましょう。
ファイル名： Lesson25-1.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>箇条書きリスト</title>
</head>
<body>
<h1>今日の作業メモ</h1>
<ul>
<li>メールを確認する</li>
<li>資料を整理する</li>
<li>ミーティングに参加する</li>
<li>作業内容を記録する</li>
</ul>
</body>
</html>ブラウザの表示例
このHTMLでは、今日の作業内容をulタグで箇条書きにしています。ulタグがリスト全体を囲み、その中のliタグが1つひとつの作業項目を表しています。
順序なしリストでは、どの項目から読んでも意味が大きく変わらない情報を並べるのに向いています。今回のような作業メモでは、項目を見やすく並べることが目的なので、ulタグが適しています。
olタグで順序付きリストを作る
olタグは、番号付きのリストを作るために使います。操作手順、ランキング、優先順位、学習ステップなど、順番に意味がある内容に向いています。
基本の形は、olタグの中にliタグを並べます。
<ol>
<li>ステップ1</li>
<li>ステップ2</li>
<li>ステップ3</li>
</ol>ブラウザでは、初期状態で1、2、3のような番号が自動的に付きます。番号はHTMLに直接書かなくても、liタグの順番に合わせて自動で表示されます。
ファイル名： Lesson25-2.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>手順リスト</title>
</head>
<body>
<h1>学習環境の準備手順</h1>
<ol>
<li>エディターをインストールする</li>
<li>作業用フォルダーを作成する</li>
<li>HTMLファイルを保存する</li>
<li>ブラウザで表示を確認する</li>
</ol>
</body>
</html>ブラウザの表示例
このHTMLでは、学習環境を準備する手順をolタグで表しています。手順は順番通りに進める必要があるため、番号付きのolタグが適しています。
olタグを使うと、あとから項目を追加したり削除したりしても、番号が自動的に調整されます。手順を手作業で1、2、3と書くよりも、HTMLとして管理しやすくなります。
ulとolの使い分け
ulとolは似ていますが、使う場面が違います。ポイントは、順番に意味があるかどうかです。
ulとolの比較
| タグ | 表示の特徴 | 使いやすい場面 |
|---|---|---|
| ul | 黒丸などのマーカー付き | 箇条書き、特徴一覧、メニュー |
| ol | 番号付き | 手順、ランキング、優先順位 |
たとえば、サービスの特徴を並べるならulが自然です。一方、アカウント登録の手順を説明するならolが向いています。
リストを作るときは、見た目だけで選ぶのではなく、内容の意味に合わせて選ぶことが大切です。順番が必要ならol、順番がなくてもよいならulと考えると分かりやすくなります。
リストを入れ子にして階層化する
リストの中に、さらに別のリストを入れることもできます。これを入れ子のリスト、または階層化リストと呼びます。
入れ子にする場合は、liタグの中にulタグやolタグを入れます。
<ol>
<li>準備
<ul>
<li>資料を集める</li>
<li>作業環境を整える</li>
</ul>
</li>
<li>実行</li>
<li>確認</li>
</ol>このようにすると、大きな項目の中に小さな項目を入れられます。プロジェクトの流れ、学習カリキュラム、サイトマップなど、階層構造を表したいときに便利です。
ファイル名： Lesson25-3.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>階層化リスト</title>
</head>
<body>
<h1>Webサイト制作の流れ</h1>
<ol>
<li>設計
<ul>
<li>目的を整理する</li>
<li>ページ構成を考える</li>
</ul>
</li>
<li>制作
<ul>
<li>HTMLを書く</li>
<li>CSSで見た目を整える</li>
</ul>
</li>
<li>確認</li>
<li>公開</li>
</ol>
</body>
</html>ブラウザの表示例
このHTMLでは、olタグでWebサイト制作の大きな流れを表しています。設計と制作の項目の中に、さらにulタグを入れて細かい作業を並べています。
入れ子にするときは、内側のリストをliタグの中に入れることが大切です。liの外に別のulやolを置いてしまうと、構造として分かりにくくなります。
図2：リストの入れ子で階層構造を作る
この図から分かること
liタグの中にulタグやolタグを入れると、階層構造のリストを作れます。大きな手順をolで示し、その中の細かい作業をulで示すと、情報のまとまりが分かりやすくなります。リストの入れ子は、作業手順、学習計画、サイト構成などに向いています。
list-style-typeでマーカーを変更する
リストの先頭に表示される黒丸や番号は、CSSのlist-style-typeで変更できます。ulでは黒丸、olでは数字が初期状態で表示されますが、CSSを使えば白丸、四角、ローマ数字、アルファベットなどに変えられます。
list-style-typeの主な値
| 値 | 表示の例 | 向いているリスト |
|---|---|---|
| none | マーカーなし | ナビゲーションメニュー |
| disc | 黒丸 | 通常の箇条書き |
| circle | 白丸 | 控えめな箇条書き |
| square | 四角 | 少し目立つ箇条書き |
| decimal | 1、2、3 | 通常の番号付きリスト |
| decimal-leading-zero | 01、02、03 | 手順番号をそろえたい場合 |
| lower-roman | i、ii、iii | 補足的な番号 |
| upper-roman | I、II、III | 章立て風の番号 |
| lower-alpha | a、b、c | 小項目 |
| upper-alpha | A、B、C | 分類や選択肢 |
| lower-greek | α、β、γ | 特殊な分類 |
リストマーカーを変更すると、内容の印象も変わります。通常の箇条書きならdiscやcircle、手順ならdecimal、少し形式ばった項目ならupper-romanなど、内容に合わせて選ぶとよいでしょう。
ファイル名： Lesson25-4.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>マーカーの変更</title>
<style>
ul.check-list {
list-style-type: square;
}
ol.step-list {
list-style-type: upper-roman;
}
</style>
</head>
<body>
<h1>リストマーカーの変更例</h1>
<h2>確認項目</h2>
<ul class="check-list">
<li>HTMLの構造を確認する</li>
<li>CSSの指定を確認する</li>
<li>画像ファイル名を確認する</li>
</ul>
<h2>作業段階</h2>
<ol class="step-list">
<li>設計</li>
<li>制作</li>
<li>確認</li>
<li>公開</li>
</ol>
</body>
</html>ブラウザの表示例
このHTMLでは、ulにcheck-list、olにstep-listというclassを付けています。CSSでは、ul.check-listにlist-style-type: square;を指定し、箇条書きのマーカーを四角にしています。
また、ol.step-listにはlist-style-type: upper-roman;を指定しています。これにより、番号がI、II、IIIのようなローマ数字で表示されます。
classを使うことで、すべてのulやolを変更するのではなく、特定のリストだけマーカーを変えられます。ページ内に複数のリストがある場合に便利です。
list-style-imageで画像マーカーを使う
リストのマーカーには、画像を使うこともできます。CSSのlist-style-imageを使うと、黒丸や数字の代わりに、指定した画像をリストマーカーとして表示できます。
ul.icon-list {
list-style-image: url("coffee-marker.png");
}画像マーカーを使うと、メニューや商品一覧に雰囲気を出せます。ただし、画像が大きすぎると行の高さが崩れたり、文字との位置が合いにくくなったりします。マーカーに使う画像は、小さく分かりやすいものにすると扱いやすくなります。
ファイル名： Lesson25-5.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>画像マーカーのリスト</title>
<style>
body {
font-family: sans-serif;
line-height: 1.8;
}
ul.cafe-menu {
list-style-image: url("coffee-marker.png");
}
</style>
</head>
<body>
<h1>カフェメニュー</h1>
<ul class="cafe-menu">
<li>ホットコーヒー</li>
<li>アイスコーヒー</li>
<li>カフェラテ</li>
<li>エスプレッソ</li>
</ul>
</body>
</html>ブラウザの表示例
このHTMLでは、ulにcafe-menuというclassを付けています。CSSでは、ul.cafe-menuにlist-style-imageを指定し、coffee-marker.pngをマーカー画像として使っています。
通常の黒丸よりも、カフェらしい雰囲気を出しやすくなります。ただし、マーカー画像は文字の前に表示されるため、画像サイズや余白のバランスに注意が必要です。
画像マーカーがうまく表示されない場合は、画像ファイル名、保存場所、拡張子を確認しましょう。HTMLファイルと同じフォルダーに画像を置く場合は、url("coffee-marker.png")のように指定できます。
リストをナビゲーションメニューに使う
Webサイトのメニューは、リストタグで作ることがよくあります。メニューは複数のリンク項目を並べたものなので、ulタグとliタグで構造を作り、その中にaタグを入れると自然です。
基本の形は次のようになります。
<ul class="nav">
<li><a href="Lesson25-7.html">ホーム</a></li>
<li><a href="Lesson25-8.html">当社について</a></li>
<li><a href="Lesson25-9.html">サービス</a></li>
<li><a href="Lesson25-10.html">お問い合わせ</a></li>
</ul>このままだと縦の箇条書きとして表示されます。横並びのメニューにしたい場合は、CSSでliにdisplay: inline-block;を指定します。また、メニューでは通常の黒丸マーカーは不要なので、ulにlist-style: none;を指定します。
ナビゲーションメニューでよく使うCSS
| CSS | 役割 |
|---|---|
| list-style: none; | リストマーカーを消す |
| padding: 0; | ulの内側余白を消す |
| display: inline-block; | liを横並びにする |
| text-decoration: none; | リンクの下線を消す |
| a:hover | マウスを重ねたときの見た目を変える |
リストタグでメニューを作ると、HTMLの構造としても「リンク項目の集まり」であることが分かりやすくなります。CSSで見た目を整えれば、シンプルな横並びメニューを作れます。
図3：ulとliでナビゲーションメニューを作る
この図から分かること
ナビゲーションメニューは、ul、li、aを組み合わせて作れます。ulでメニュー全体を作り、liで各メニュー項目を表し、aでリンク先を指定します。CSSでマーカーを消し、liを横並びにし、hover時の色を変えることで、使いやすいメニューになります。
横並びナビゲーションメニューを作る
次の例では、サイトメニューをulタグで作り、CSSで横並びにしています。各liの中にaタグを入れ、別ページへ移動できるリンクにしています。
ファイル名： Lesson25-6.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ナビゲーションメニュー</title>
<style>
body {
font-family: sans-serif;
margin: 20px;
}
ul.nav {
list-style: none;
padding: 0;
margin: 0;
background-color: #F0F0F0;
}
ul.nav li {
display: inline-block;
margin-right: 12px;
}
ul.nav a {
display: inline-block;
padding: 8px 12px;
text-decoration: none;
color: #0066CC;
font-weight: bold;
}
ul.nav a:hover {
background-color: #0066CC;
color: #FFFFFF;
}
</style>
</head>
<body>
<h1>サイトメニュー</h1>
<ul class="nav">
<li><a href="Lesson25-7.html">ホーム</a></li>
<li><a href="Lesson25-8.html">当社について</a></li>
<li><a href="Lesson25-9.html">サービス</a></li>
<li><a href="Lesson25-10.html">お問い合わせ</a></li>
</ul>
</body>
</html>ブラウザの表示例
このHTMLでは、ulにnavというclassを付けています。CSSではul.navにlist-style: none;を指定し、リストマーカーを消しています。padding: 0;とmargin: 0;を指定して、ブラウザが初期状態で付ける余白も調整しています。
ul.nav liにはdisplay: inline-block;を指定しています。これにより、liが縦に並ぶのではなく、横に並びます。
ul.nav aにはdisplay: inline-block;とpaddingを指定しています。aタグをインラインブロックにすることで、リンク部分に余白を持たせ、クリックしやすいメニューにできます。
a:hoverでは、マウスを重ねたときに背景色と文字色を変えています。リンクに反応があると、ユーザーはどのメニューを選ぼうとしているのか分かりやすくなります。
ホームページを作る
次に、ナビゲーションメニューから移動するページを作ります。まずはホームページです。メニュー部分は各ページで共通にし、本文だけを変える形にします。
ファイル名： Lesson25-7.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ホーム</title>
<style>
body {
font-family: sans-serif;
margin: 20px;
line-height: 1.7;
}
ul.nav {
list-style: none;
padding: 0;
margin-bottom: 20px;
background-color: #F0F0F0;
}
ul.nav li {
display: inline-block;
margin-right: 12px;
}
ul.nav a {
display: inline-block;
padding: 8px 12px;
text-decoration: none;
color: #0066CC;
font-weight: bold;
}
ul.nav a:hover {
background-color: #0066CC;
color: #FFFFFF;
}
</style>
</head>
<body>
<h1>ホーム</h1>
<ul class="nav">
<li><a href="Lesson25-7.html">ホーム</a></li>
<li><a href="Lesson25-8.html">当社について</a></li>
<li><a href="Lesson25-9.html">サービス</a></li>
<li><a href="Lesson25-10.html">お問い合わせ</a></li>
</ul>
<p>
ようこそサンプルサイトへ。こちらはトップページです。
最新のお知らせやおすすめコンテンツを分かりやすく紹介します。
</p>
</body>
</html>ブラウザの表示例
このページでは、h1にホームと表示し、その下に共通のナビゲーションメニューを配置しています。リンク先はLesson25-7.htmlからLesson25-10.htmlまでの4ページです。
Webサイトでは、複数ページに同じメニューを配置すると、どのページからでも主要なページへ移動しやすくなります。リストタグを使うことで、メニュー項目のまとまりがHTML上でも分かりやすくなります。
当社についてページを作る
次は、会社や団体の紹介ページを作ります。ナビゲーションメニューはホームページと同じ構造にします。
ファイル名： Lesson25-8.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>当社について</title>
<style>
body {
font-family: sans-serif;
margin: 20px;
line-height: 1.7;
}
ul.nav {
list-style: none;
padding: 0;
margin-bottom: 20px;
background-color: #F0F0F0;
}
ul.nav li {
display: inline-block;
margin-right: 12px;
}
ul.nav a {
display: inline-block;
padding: 8px 12px;
text-decoration: none;
color: #0066CC;
font-weight: bold;
}
ul.nav a:hover {
background-color: #0066CC;
color: #FFFFFF;
}
</style>
</head>
<body>
<h1>当社について</h1>
<ul class="nav">
<li><a href="Lesson25-7.html">ホーム</a></li>
<li><a href="Lesson25-8.html">当社について</a></li>
<li><a href="Lesson25-9.html">サービス</a></li>
<li><a href="Lesson25-10.html">お問い合わせ</a></li>
</ul>
<p>
当社は、Webサイト制作とシステム開発を行うITサービス会社です。
お客様の目的に合わせて、企画から制作、公開後の運用まで丁寧にサポートします。
</p>
</body>
</html>ブラウザの表示例
このページでも、同じul.navを使っています。ページごとにメニューのHTMLとCSSを同じにしておくと、サイト全体に統一感が出ます。
実際の制作では、共通メニューをテンプレート化したり、外部CSSファイルにまとめたりすると管理しやすくなります。ここでは学習しやすいように、各HTMLファイル内にCSSを書いています。
サービスページを作る
サービスページでは、提供サービスをリストで表示します。ナビゲーションメニューだけでなく、本文中のサービス一覧にもulタグを使っています。
ファイル名： Lesson25-9.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サービス</title>
<style>
body {
font-family: sans-serif;
margin: 20px;
line-height: 1.7;
}
ul.nav {
list-style: none;
padding: 0;
margin-bottom: 20px;
background-color: #F0F0F0;
}
ul.nav li {
display: inline-block;
margin-right: 12px;
}
ul.nav a {
display: inline-block;
padding: 8px 12px;
text-decoration: none;
color: #0066CC;
font-weight: bold;
}
ul.nav a:hover {
background-color: #0066CC;
color: #FFFFFF;
}
ul.service-list {
line-height: 1.8;
list-style-type: square;
}
</style>
</head>
<body>
<h1>サービス</h1>
<ul class="nav">
<li><a href="Lesson25-7.html">ホーム</a></li>
<li><a href="Lesson25-8.html">当社について</a></li>
<li><a href="Lesson25-9.html">サービス</a></li>
<li><a href="Lesson25-10.html">お問い合わせ</a></li>
</ul>
<h2>提供サービス一覧</h2>
<ul class="service-list">
<li>Webサイト制作</li>
<li>HTMLとCSSのコーディング</li>
<li>スマートフォン対応デザイン</li>
<li>公開後の更新サポート</li>
</ul>
</body>
</html>ブラウザの表示例
このページでは、ul.navとul.service-listの2種類のリストを使っています。ul.navはメニュー用のリストで、list-style: none;を使ってマーカーを消しています。一方、ul.service-listは本文の箇条書きなので、list-style-type: square;を使って四角いマーカーを表示しています。
同じulタグでも、classを分けることで用途に応じた見た目にできます。メニューとして使うリストと、本文の箇条書きとして使うリストでは、CSSの考え方が変わります。
お問い合わせページを作る
最後に、お問い合わせページを作ります。ナビゲーションメニューに加えて、簡単なフォームを配置しています。
ファイル名： Lesson25-10.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>お問い合わせ</title>
<style>
body {
font-family: sans-serif;
margin: 20px;
line-height: 1.7;
}
ul.nav {
list-style: none;
padding: 0;
margin-bottom: 20px;
background-color: #F0F0F0;
}
ul.nav li {
display: inline-block;
margin-right: 12px;
}
ul.nav a {
display: inline-block;
padding: 8px 12px;
text-decoration: none;
color: #0066CC;
font-weight: bold;
}
ul.nav a:hover {
background-color: #0066CC;
color: #FFFFFF;
}
form {
max-width: 420px;
margin-top: 10px;
}
label {
display: block;
margin-top: 12px;
font-weight: bold;
}
input,
textarea {
width: 100%;
padding: 8px;
box-sizing: border-box;
}
button {
margin-top: 12px;
padding: 8px 18px;
}
</style>
</head>
<body>
<h1>お問い合わせ</h1>
<ul class="nav">
<li><a href="Lesson25-7.html">ホーム</a></li>
<li><a href="Lesson25-8.html">当社について</a></li>
<li><a href="Lesson25-9.html">サービス</a></li>
<li><a href="Lesson25-10.html">お問い合わせ</a></li>
</ul>
<form action="#" method="post">
<label for="name">お名前</label>
<input type="text" id="name" name="name" placeholder="山田 太郎">
<label for="email">メールアドレス</label>
<input type="email" id="email" name="email" placeholder="taro@example.com">
<label for="message">お問い合わせ内容</label>
<textarea id="message" name="message" rows="5"></textarea>
<button type="submit">送信する</button>
</form>
</body>
</html>ブラウザの表示例
このページでも、同じナビゲーションメニューを使っています。4つのHTMLファイルを作って同じフォルダーに保存すると、メニューのリンクをクリックしてページ間を移動できます。
ナビゲーションメニューは、サイト内のページをつなぐ重要な部品です。ul、li、aで構造を作り、CSSでマーカーを消して横並びにすると、シンプルで使いやすいメニューになります。
リストを使ったメニュー作成で意識したいこと
リストをメニューとして使う場合、HTMLではメニュー項目のまとまりをulで表し、各項目をliで表します。そして、liの中にaタグを入れてリンクを作ります。
CSSでは、通常の箇条書きとしての見た目を消し、メニューとして見えるように整えます。具体的には、list-style: none;でマーカーを消し、paddingやmarginを調整し、liをdisplay: inline-block;で横並びにします。
通常リストとメニューリストの違い
| 種類 | 目的 | CSSの特徴 |
|---|---|---|
| 通常のリスト | 項目を読みやすく並べる | マーカーを表示することが多い |
| メニュー用リスト | リンク項目を並べる | マーカーを消して横並びにすることが多い |
同じリストタグでも、目的によって見た目は大きく変わります。HTMLの構造はリストとして保ち、CSSでデザインを変えるという考え方が大切です。
リスト作成で使うCSSの整理
ここまでに登場した主なCSSを整理しておきます。
| CSS | 用途 |
|---|---|
| list-style-type | リストマーカーの種類を指定する |
| list-style-image | 画像をマーカーとして指定する |
| list-style | マーカー関連の指定をまとめて行う |
| padding | リスト内側の余白を調整する |
| margin | リスト外側の余白を調整する |
| display | liやaの表示方法を変更する |
| text-decoration | リンクの下線を調整する |
| color | リンクや文字の色を指定する |
| background-color | メニューの背景色を指定する |
| a:hover | マウスを重ねたときのリンクの見た目を変える |
list-style-typeは、箇条書きの記号や番号の種類を変えるときに使います。list-style-imageは、画像をマーカーとして使うときに使います。list-style: none;は、メニューのようにマーカーを消したいときによく使われます。
display: inline-block;は、liを横並びにしたいときに便利です。また、aタグにもdisplay: inline-block;を指定すると、paddingが効きやすくなり、クリックしやすいメニューになります。
使用タグ一覧と解説
この学習で登場した主なHTMLタグを整理します。
| タグ | 用途 |
|---|---|
| html | HTML文書全体を表す |
| head | 文字コードやタイトルなどの情報を書く |
| meta | 文字コードを指定する |
| title | ブラウザのタブに表示されるタイトルを指定する |
| style | HTML内にCSSを書く |
| body | ブラウザに表示される内容を書く |
| h1 | ページの大きな見出しを表す |
| h2 | セクションの見出しを表す |
| ul | 順序なしリストを作る |
| ol | 順序付きリストを作る |
| li | リストの各項目を作る |
| a | リンクを作る |
| p | 段落を表す |
| form | 入力フォーム全体を作る |
| label | 入力項目のラベルを作る |
| input | 1行入力欄を作る |
| textarea | 複数行入力欄を作る |
| button | ボタンを作る |
ulは、箇条書きやメニュー項目のまとまりに使います。olは、手順やランキングのように順番が大切な項目に使います。liは、ulやolの中に入れて、各項目を表します。
aタグは、リンクを作るためのタグです。リストの中にaタグを入れると、ナビゲーションメニューを作れます。CSSを組み合わせることで、縦の箇条書きから横並びのメニューへ見た目を変えられます。
リストとメニューを作るときに意識したいこと
リストは、情報を整理して見せるための基本的なHTML要素です。順番が関係ない項目にはul、順番が大切な項目にはolを使います。そして、各項目はliで作ります。
階層構造を作りたい場合は、liの中にさらにulやolを入れます。大きな項目と細かい項目の関係が分かりやすくなり、プロジェクトの流れや学習ステップなどを整理しやすくなります。
CSSを使えば、リストマーカーの種類を変えたり、画像マーカーを使ったりできます。本文中のリストでは、マーカーを活かして読みやすくすることが大切です。一方、ナビゲーションメニューでは、list-style: none;でマーカーを消し、display: inline-block;で横並びにすると、メニューらしい見た目になります。
リストは、箇条書きにも、手順にも、サイトメニューにも使える便利なタグです。HTMLで意味のある構造を作り、CSSで目的に合った見た目へ整えることで、分かりやすく使いやすいWebページを作れるようになります。