• HTML&CSS超基礎講座

HTML06 リストタグを覚えよう!(5秒57秒)

リストタグを覚えよう!

HTMLのリストタグについて解説しています。

Webページのテキストを読みやすくするために、マークや数字が行頭にあるリスト(箇条書き)があります。

Webページでは、ナビゲーションメニューなどによく使われ、このリストタグ内のリンク(アンカーテキスト)は、検索エンジンに対しても有効なものですので、ぜひ、覚えてみましょう!

マーク付き、番号付き、見出し付きといったバリエーションがあります。

概要

  • リストタグ
  • 順序(番号)付きリストタグ
  • 定義リストタグ

補足・ポイント

リストタグ

マーク付きのリストを作成するのに使用するのは以下のタグです。

<ul>
<li>トップページ</li>
<li>グランドメニュー</li>
<li>ランチメニュー</li>
</ul>

<ul>タグでリスト全体を定義し、<li>タグでリストに表示する項目を定義します。

<ul>~<ul>の間に<li>~</li>を記述します。

ブラウザの表示は、リストの先頭に「・」が付き、リスト全体がインデント(字下げ)されます。

この「・」のことをマーカーと呼びます。

順序(番号)付きリストタグを理解する

番号付きのリストを作成するのに使用するのは以下のタグです。

<ol>
<li>トップページ</li>
<li>グランドメニュー</li>
<li>ランチメニュー</li>
</ol>

<ol>タグ・・・ordered list(順序付き)の意味。

<ol>タグでリスト全体を定義し、<li>タグでリストに表示する項目を定義します。

定義リストタグ

定義リストは「見出し」と「その内容」が一つのセット(リスト)になったものです。

<dl>
<dt>ランチメニュー</dt>
<dd>内容が入ります。内容が入ります。内容が入ります。内容が入ります。</dd>
<dt>スイーツタイム</dt>
<dd>内容が入ります。内容が入ります。内容が入ります。内容が入ります。</dd>
</dl>

定義リストを作成するには、<dl>タグで定義リストの範囲を決め、<dt>タグで見出しを、<dd>タグでその内容を指定します。

ブラウザの表示では、<dd>がインデントされます。

  • <dl>タグ・・・definition list(定義リスト)の意味。
  • <dt>タグ・・・definition team(定義項目)の意味。
  • <dd>タグ・・・definition discription(定義説明)の意味。

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

TwitterでWebcreatorsTipsをフォローしよう!

この記事をシェアする



まずは無料のWebデザインメルマガ講座から体験してみよう!

登録作業はわずか10秒!
パソコン・スマートフォン・タブレットでWebデザインのスキルがアップするメルマガを無料で受信できます!

【メールマガジン登録フォーム】
お名前(姓)*
お名前(名)*
メールアドレス*
  • Webデザイン講座
  • レスポンシブWebデザイン作り方講座
  • Webデザインまとめサイト

PAGE TOP