『自分の仕事は自分でクリエイト』を目指す新米クリエイターたちのアウトプット用Webマガジン。得意を活かした企画に挑戦中!

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(定義説明)の意味。

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

福本 智子

フリーランスWebデザイナー・Webスクール講師。 子育てをしながら、趣味で始めたネットショップからWebを活用したビジネスの楽しさにはまり、Web屋の道を歩む。 Web制作業務に加え【Webデザインを学びながらビジネス力も身につける体験型スクール&コミュニティ】を運営。 フリーランスでWebデザイナーを目指す方々のサポートに注力している。

Pocket
LINEで送る

関連記事

Webデザインの参考書を何冊やっても先に進めない方へ

ログイン

新米クリエイターズ Webメディア部

『自分の仕事は自分でクリエイト』を目指す新米クリエイターたちのアウトプット用Webマガジン。

Web・DTPデザイナー・会社員・アルバイト・ライター・ブロガー・主婦・子育てママ...etc。
現在の肩書きは違えど目指すところは皆「フリーランスのWebデザイナー(クリエイター)」

日々の学びやお役立ち情報をブログで発信・アウトプットをしながらWebの世界でコンテンツを配信する、
Webサイトを運営する、アクセスを集めるってどんなことなのか?を体感していきます。

新米クリエイターならではの気づきや学び、Webデザイナーの腕を磨いていく模様をリアルに感じていただけます!