TOP ＞　Back ＞ Place ＞ Next

箇条書き（リスト）

◆　リストって？

テキストを項目（リスト）状にまとめて箇条書きにすることで、よく見かけますが左記の様にリンク項目にしていますね。
最近はJavaScript、CGI、等を使用する方が多いようですが・・・
言語の特徴を勉強をしないアマチュアプログラマが作り配布した JavaScriptやＣＧＩを使用するとページやブラウザに悪影響を及ぼしますし、各ブラウザ対策済みではないプログラムの使用は自己満足にしかすぎません。（必ず、製作者が各ブラウザの作動確認・作動保障した物か確かめましょう。）

下記の箇条書きの頭に「・」「数字」「アルファベット」等のマークがそれぞれついています。これがリストの基本形です。

箇条書きリスト（基本）
<UL><LI>黒点です。</LI></UL>
  • 黒点です。
箇条書きリスト（白抜き）
<UL><LI>白抜きの点です。</LI></UL>
  • 白抜きの点です。
箇条書きリスト（四角形）
<UL><LI>四角形です。</LI></UL>
  • 四角形です。
番号付きリスト（基本）
<OL><LI>数字です。</LI></OL>
  1. 数字です。
番号付きリスト（アルファベット）
<OL><LI>英字です。</LI></OL>
  1. 英字です。
定義リスト（説明付きリスト）
<DL><DT>用語です。</DT>
<DD>説明文です。</DD></DL>
用語です。タイトルや短い語句を記述。
説明文は、このようにインデントされます。

基本のリスト

リストを作るには、始めに<UL>要素、<OL>要素、<DL>要素、いずれかの親要素を使います。
初期値は、<UL>「・」、<OL>「１、２、３、」の順送りの数字で、<DL>説明文つきリストが基本的なリストの仲間です。
コピー＆貼り付けは、下の「タグ解説」で用意しました。

それぞれの子要素である<LI>、<DT>、<DD>の項目要素を増やすことで段が増えます。
説明付きリスト（項目）の<DT>、<DD>は、ペアになっていて<DD>の説明文の方がインデントされ斜め右下になります。

基本
リスト		 自由なリスト（項目） 順序の決まった
連番リスト（項目）		 説明付きリスト（項目）
ソース <UL>
<LI>自由なリスト</LI>
<LI>文字でも</LI>
<LI>画像でも</LI>
<LI>いけます</LI>
</UL>		 <OL>
<LI>番号</LI>
<LI>付き</LI>
<LI>リスト</LI>
<LI>画像もＯＫ</LI>
</OL>		 <DL>
<DT>定義リスト</DT>
<DD>説明文</DD>
<DT>PC（パソコン）</DT>
<DD>一般的にパーソナルコンピュータの略</DD>
</DL>
表示結果
  • 自由なリスト
  • 文字でも
  • 画像でも
  • いけます
  1. 番号
  2. 付き
  3. リスト
  4. 画像もＯＫ
定義リスト
説明文
PC（パソコン）
一般的にパーソナルコンピュータの略

階段状のリスト

階段化したリスト（項目）を作るには、<UL><LI>や<OL><LI>の組み合わせで簡単に出来ます、これをリストの階層化と言います。下の親要素と子要素の関係「属性の継承」にも注目してください。（池に石を投げ込んだ波紋のように親要素と子要素が並びます。（あぁ〜複雑・・・でも、めげないで下さいネ！）

正しく階層化されたリストは、階層ごとにインデント（字下げ）されて、Webブラウザは自動的にリストマークを変えたり、数字を新しくします。

階層化
リスト		 自由なリスト 順序の決まった
連番リスト		 順序の決まった
連番リストの応用		 階段状
（３段目からは四角形です。）
「親子関係」も書いてます。
ソース <UL>
<LI>あいうえお
<UL>
<LI>二段目</LI>
<LI>白抜き</LI>
<LI>です</LI>
</UL>
</LI>
<LI>一二三四五</LI>
<LI>という感じ</LI>
</UL>		 <OL>
<LI>あいうえお
<OL>
<LI>二段目</LI>
<LI>新しい</LI>
<LI>数字</LI>
</OL>
</LI>
<LI>始めの</LI>
<LI>続き数字</LI>
</OL>		 <OL>
<LI>一番目
<OL>
<LI>一番の１</LI>
<LI>一番の２</LI>
</OL>
</LI>
<LI>二番目
<OL>
<LI>二番の１</LI>
<LI>二番の２</LI>
</OL>
</LI>
</OL>		 <UL>　始め
<LI>１、マークは初期値　始め
<UL>　２番目
<LI>２、白抜き　２番目
<UL>　３番目
<LI>３、四角形です　３番目
</LI> 　３番目の<LI>閉じタグ
</UL>　３番目の<UL>閉じタグ
</LI> 　２番目の<LI>閉じタグ
</UL>　２番目の<UL>閉じタグ
</LI> 　始めの<LI>閉じタグ
</UL>　始めの<UL>閉じタグ
表示結果
  • あいうえお
    • 二段目
    • 白抜き
    • です
  • 一二三四五
  • という感じ
  1. あいうえお
    1. 二段目
    2. 新しい
    3. 数字
  2. 始めの続き
  3. 続き数字
  1. 一番目
    1. 一番の１
    2. 一番の２
  2. 二番目
    1. 二番の１
    2. 二番の２
  • １、マークは初期値
    • ２、白抜きです
      • ３、四角形です

リストのマークを変える

リストのマークや数字には、いくつかのバリエーションがあり選択できます。
また、スタイルシートにすれば、マークや数字の代わりに「お好きなリスト画像」も使えます。

自由な
リスト		 自由なリスト（項目を統一したマークスタイル） 自由なリスト（項目ごとに変化させるマークスタイル）
ソース
マーク値
  • "list-style-type:DISC"
  • "list-style-type:CIRCLE"
  • "list-style-type:SQUARE"
  • "list-style-type:DISC"
  • "list-style-type:CIRCLE"
  • "list-style-type:SQUARE"

マークを画像に変える

リストマークを画像にする事が出来ます。
「IMAGE：URL（’画像ファイル名’）”」が、特徴です。

リストの数字を変える


順序の決まった連番リストの数字を変える値：
スタイルシート用の連番値：ＩＥ、ＮＮ共通のものだけです。（ＮＮは、プラス８種類あります。）

連番値 解　　　説   その他
none マーク表示なし
decimal-leading-zero
01, 02, 03, ..., 98, 99など最初に0がつく10進数。
hebrew
伝統的なヘブライ数字。
cjk-ideographic
漢数字オーバー
hiragana
平仮名(あ, い, う, え, お, か, き...)
katakana
片仮名(ア, イ, ウ, エ, オ, カ, キ, ...)
hiragana-iroha
平仮名のいろは(い, ろ, は, に, ほ, へ, と, ...)
katakana-iroha
片仮名のイロハ(イ, ロ, ハ, ニ, ホ, ヘ, ト, ...)
decimal アラビア数字
1から始まる10進数
lower-alpha アルファベット小文字
upper-alpha アルファベット大文字
lower-roman ローマ数字の小文字
upper-roman ローマ数字の大文字
armenian アルメニア数字
georgian グルジア数字

始めの番号や途中の番号

リストの途中で番号を変える（番号をとばす）：W3Cでは非推奨です。
リストの「<OL><UL><LI>」を、それぞれ「VALUE="変えたい値"」にすれば任意変更できます。
例えば：<OLVALUE=" V ">や<LI VALUE=" SQUARE ">

<OL>連番リストの開始を途中の数字やアルファベットから始める：W3Cでは非推奨です。
リストの始まりの数字を「１」「Ａ」「Ｉ」ではなく「２以上」「Ｂ以上」「ＩＩ以上」にするには、
「<LI START=" 変えたい値 ">」にすれば任意変更できます。
例えば：<LI START=" IV ">

その他の指定

リストマークのポジション（対応ブラウザは少ないようです。）

list-style-position: inside
  • INSIDE
    内側にセットされます。
list-style-position: outside
  • OUTSIDE
    通常の位置と代わりません。

タグ解説

UL,LI

<UL>は、ブロックレベル要素で箇条書きリストに使います。（リストの先頭には黒点などの印がつけられます）
<LI>要素はリスト項目を表します。単独で使われることはありません、必ず OL要素 や UL要素の各項目として用いられます。

リストを形成し全体を囲むタグで初期値は、「・」
</LI>は、省略できますが将来のこともあるので記述しましょう。

OL,LI

　<OL>は、ブロックレベル要素、<LI>が項目

リストを形成し全体を囲むタグで番号付きリスト初期値は、「１」で番号順は自動的に順振りされます。
<LI>要素はリスト項目を表します。単独で使われることはありません、必ず OL要素 や UL要素の各項目として用いられます。
</LI>は、省略できますが将来のこともあるので記述しましょう。

DL,DT,DD

<DL>は、ブロックレベル要素、<DT>が項目、<DD>が説明文

　<DT>と<DD>は、ペアで使います。
見出し用語とそれについての説明文が付けられます。
</DT>と</DD>は、共に省略できますが将来のこともあるので記述しましょう。
　【←BACK ┃NEXT→】
Copyright (c) Producer by System KS. 2001 All rights reserved.