リストタグ関連のHTMLタグ一覧

【リストタグの種類】

@『ul要素順不同リスト(ブロックレベル要素)

<ul>で始まり</ul>で終わります。

※中身には<li>リストの内容</li>のみ記述できます。

li要素

li要素にはブロックレベル要素やインライン要素を記述出来ます。



順不同リストの使用例

<ul>
<li>1つ目の項目</li>
<li>2つ目の項目</li>
<li>3つ目の項目</li>
</ul>

ブラウザ表示するとこんな感じです。
  • 1つ目の項目
  • 2つ目の項目
  • 3つ目の項目


※li要素の終了タグ</li>は省略する事も可能です。
【リストタグの種類】

A『ol要素番号付きリスト(ブロックレベル要素)

<ol>で始まり</ol>で終わります。

※中身には<li>リストの内容</li>のみ記述できます。

li要素

li要素にはブロックレベル要素やインライン要素を記述出来ます。


番号付きリストの使用例
<ol>
<li>1つ目の項目</li>
<li>2つ目の項目</li>
<li>3つ目の項目</li>
</ol>

ブラウザ表示するとこんな感じです。
  1. 1つ目の項目
  2. 2つ目の項目
  3. 3つ目の項目




【リストタグの種類】

B『dl要素定義リスト(ブロックレベル要素)

<dl>で始まり</dl>で終わります。

※中身にはdt要素とdd要素のみ記述できます。

dt要素

dt要素には項目名や用語などを記述します。(インライン要素が使えます)


dd要素

dd要素には項目や用語の説明を記述します。(ブロックレベル要素も記述出来ます)


定義リストの使用例

<dl>
<dt>項目1</dt>
<dd>項目1の説明文</dd>
<dt>項目2</dt>
<dd>項目2の説明文</dd>
<dt>項目3</dt>
<dd>項目3の説明文</dd>
</dl>

ブラウザ表示するとこんな感じです。

項目1
項目1の説明文
項目2
項目2の説明文
項目3
項目3の説明文



リストタグは使う用途に合わせて使っていきましょう。
用語を箇条書きにするときは順不同リストを、順番に説明したいときには番号付きリストを、用語などを並べて説明もするときには定義リストが便利です。




リストのマークを変える時にはスタイルシートを使用します。
HTMLではリストの構造のみを設定しておきます。


以下の属性はW3C非推奨の属性や要素です。使わないようにしましょう。

【非推奨の要素と属性】

type属性
start属性
value属性
dir要素
menu要素


リストタグの詳細設定をする時はCSSを使うようにしましょう。






カテゴリ | HTML | このブログの読者になる | 更新情報をチェックする

About Site(サイト案内) 概要

アクセスアップ方法・アクセスアップツールを中心に紹介しています。出来るだけ易しいサイト作りを目指したいと思います。まだまだコンテンツが少ないですが確実なアクセスアップ方法を紹介しますのでどうぞ宜しくお願いします。アクセスアップ記事以外にもWeb製作のことやiPhoneのこと。ニュースなども取り上げていきます。


◆リンク
http://secretaccess.seesaa.net/
タイトルは『Digital Life -デジタルライフ-
(テキストリンクのみです)
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。