トップ Web関連 CSS関連 CSSのリストの表示

リスト

3種類のリスト

リストには、通常リスト(ul)、番号付きリスト(ol)、説明付き定義リスト(dl)とがあり、いずれもブロックレベル要素である。

  • 通常リストは項目を列挙する、<ul>、<li>で構成されるこの表の形式のリスト。
  • 番号付きリストは、項目の列挙の際に番号を表示する<ol>、<li>で構成される順番に意味の在る形式のリスト。
  • 説明付き定義リストは<DL>タグでリスト本体を定義し、<DT>タグでリストの項目を定義し、<DD>タグにそのリストの記載する形式のリスト。

通常リスト

  • <ul>~</ul>には<LI>タグ以外禁止。
  • 番号付きリスト、<ol>タグの直下にはインライン要素は置けないので<p>などを使用する。
  • 基本的に<ul>、<ol>は同じもので、項目を順番に列挙して行き、その際に順番に意味を持たせるかどうかの違い。<DL>は項目とともにその説明を記載するものという感じの使い分けです。
  • <ul>は通常のリスト以外に、サイトのメニューとして使われる事が多いようです。(このサイトのメインメニューやフッタのメニューも<ul>を使用しています。
  • リストはブラウザによってマーカと文字列のmargin や paddingの計算基準が違うらしい。
  • 上記に関する詳細は『TAG index』さんの『リスト全体の余白を調整する』を参照してください。

通常リストサンプル

  • リスト項目
  • リスト項目
  • リスト項目
  1. リスト項目
  2. リスト項目
  3. リスト項目

リストのネスティングサンプル

サンプル1-ul-番号なしリスト

  • リスト項目
  • ネスティング1
    • ネスティング1 リスト項目1
    • ネスティング1 リスト項目2
    • ネスティング1 リスト項目3
  • ネスティング2
    • ネスティング2 リスト項目1
    • ネスティング2 リスト項目2
    • ネスティング2 リスト項目3
  • ネスティング3
    • ネスティング3 リスト項目1
    • ネスティング3 リスト項目2

サンプル2-ol-番号つきリスト

  1. リスト項目1
  2. ネスティング1
    1. ネスティング1 リスト項目1
    2. ネスティング1 リスト項目2
    3. ネスティング1 リスト項目3
  3. ネスティング2
    1. ネスティング2 リスト項目1
    2. ネスティング2 リスト項目2
    3. ネスティング2 リスト項目3

サンプル3-マーカーを画像にしてみる

  • リスト項目1
  • リスト項目2
    改行後の文字列
  • リスト項目3
    改行後の文字列あいうえおかきくけこあいうえおかきくけこあいうえおかきくけこあいうえおかきくけこあいうえおかきくけこあいうえおかきくけこ

上のサンプルリストのコード

サンプル1-ul

<ul style="font-size:12px;margin: 0 0 0 2em;padding: 0;"> <li>リスト項目</li> <li>ネスティング1 <ul style="margin: 0 0 0 3em;padding: 0;"> <li>ネスティング1 リスト項目1</li> <li>ネスティング1 リスト項目2</li> <li>ネスティング1 リスト項目3</li> </ul> </li> <li>ネスティング2 <ul style="margin: 0 0 0 4em;padding: 0;"> <li>ネスティング2 リスト項目1</li> <li>ネスティング2 リスト項目2</li> <li>ネスティング2 リスト項目3</li> </ul> </li> <li>ネスティング3 <ul> <li>ネスティング3 リスト項目1</li> <li>ネスティング3 リスト項目2</li> </ul> </li> </ul>

サンプル2-ol

<ol style="font-size:11px; margin: 1.2em 0 0 0em;padding: 0; background: #fee;"> 番号つきリスト <li style="background: #ffd;">リスト項目1</li> <li style="background: #ffe;">ネスティング1 <ol style="margin: 0 0 0 3em;padding: 0;"> <li style="background: #efe;">ネスティング1 リスト項目1</li> <li style="background: #eef3ee;">ネスティング1 リスト項目2</li> <li style="background: #efe;">ネスティング1 リスト項目3</li> </ol> </li> <li style="background: #ffd;">ネスティング2 <ol style="margin: 0 0 0 4em;padding: 0;"> <li style="background: #efe;">ネスティング2 リスト項目1</li> <li style="background: #eef3ee;">ネスティング2 リスト項目2</li> <li style="background: #efe;">ネスティング2 リスト項目3</li> </ol> </li> </ol>

サンプル3-マーカーを画像にしてみる

<p class="cap_sl">サンプル3-マーカーを画像にしてみる</p> <ul style="padding: 0px 0px 0px 30px;list-style-type:square;list-style-image:url('<{$xoops_imageurl}>/images/css_list_sample_img01.png');list-style-position:outside;background: #eed;"> <li>リスト項目1</li> <li>リスト項目2</br>改行後の文字列</li> <li>リスト項目3</br>改行後の文字列あいうえおかきくけこあいうえおかきくけこあいうえおかきくけこあいうえおかきくけこあいうえおかきくけこあいうえおかきくけこ</li> </ul>
  • margin や padding は継承しないようだ。
  • paddingを0にするとリストマーカーがおかしくなる。これはブラウザによって違っているらしい。
  • 上の現象の詳細は『all about』さんの『リスト(ul要素)を装飾した際の表示差を解消』を参照。
  • リストのマーカーを画像にした場合の位置などは細かい指定ができないので、その場合はバックグラウンドの画像などを適応して調整すべき。

リストマーカー形状サンプル (style="list-style-type : XXXX")

  • CSS1 none 非表示
  • CSS1 disc 黒丸
  • CSS1 circle 白丸
  • CSS1 square 四角
  • CSS1 decimal 数字
  • CSS1 upper-alpha 大文字アルファベット
  • CSS1 lower-alpha 小文字アルファベット
  • CSS1 upper-roman 大文字ローマ数字
  • CSS1 lower-roman 小文字ローマ数字
  • CSS2 decimal-leading-zero 2桁の数字
  • CSS2 lower-greek 小文字ギリシャ文字
  • CSS2 upper-latin 大文字ラテン文字
  • CSS2 lower-latin 小文字ラテン文字
  • CSS2 hebrew ヘブライ数字
  • CSS2 armenian アルメニア数字
  • CSS2 georgian グルジア数字
  • CSS2 cjk-ideographic 漢数字
  • CSS2 hiragana ひらがな
  • CSS2 katakana カタカナ
  • CSS2 hiragana-iroha いろは
  • CSS2 katakana-iroha イロハ

ul でも ol でも内部的にはカウントを行っているようなので、基本的にはCSSのセレクタという側面が強いようだ。

横並びにしたリスト(基本型)

メニュー等使用で使用される横並びのリストの基本型

『横並びリスト』表示サンプル

サンプル1

  • 項目1
  • 項目2
  • 項目3

サンプル2

  • 項目1
  • 項目2
  • 項目3

サンプル3

  • 項目1
  • 項目2
  • 項目3

サンプル4

  • 項目1
  • 項目2
  • 項目3

『横並びリストサンプル』コード

サンプル1

<ul style="margin:0px 10px;"> <li style="display:inline;">項目1</li> <li style="display:inline;">項目2</li> <li style="display:inline;">項目3</li> </ul>

サンプル2

<ul style="margin:0px 10px; list-style:none;"> <li style="display:inline;">項目1</li> <li style="display:inline;">項目2</li> <li style="display:inline;">項目3</li> </ul>

サンプル3

<ul style="margin:0px 10px; list-style:none;"> <li style="display:inline;;background:#ddf;">項目1</li> <li style="display:inline;background:#ddf;">項目2</li> <li style="display:inline;background:#ddf;">項目3</li> </ul>

サンプル4

<ul style="margin:0px 10px; list-style:none;"> <li style="display:inline;;background:#ddf;">項目1</li><!-- --><li style="display:inline;background:#ddf;">項目2</li><!-- --><li style="display:inline;background:#ddf;">項目3</li> </ul>

ここまでは基本事項

  • <li>に『float:left;』を適応する事で横並びに出来るが、直後の要素の回り込みを考慮する等面倒。
  • <li>に『display:inline;』を適応する方法も在る。こちらの方がとり回しやすい。(基本的にはこちらで行く事に。
  • サンプル3の<li>と<li>の間の空白は、ソースの改行が入ってしまうため。これを無くすためには</li>と次の<li>の間に何も入れないか、サンプル4のようにコメントアウトしてしまう。
  • その他、メニューとして機能させ、デザインするためにはいろいろとデザインにそってCSSを加える必要があるが、そのあたりは、『』の『』や『』さんの『』を参照されたし。

CSSでリストあれこれサンプル

CSSでリストあれこれサンプル

あれこれサンプル1

  • 項目1
  • 項目2
  • 項目3
    改行あいうえお

あれこれサンプル2

  • 項目1
  • 項目2
  • 項目3
    改行あいうえお

あれこれサンプル3(改行を消してメニューというかボタンっぽく)

  • 項目1
  • 項目2
  • 項目3

『あれこれサンプル』HTMLコード

基本的に<ul class="CSS_List_Sample01">のクラス名以外は一緒

<ul class="CSS_List_Sample01"> <li>項目1</li><!-- --><li>項目2</li><!-- --><li>項目3</br>改行あいうえお</li> </ul>

『あれこれサンプル』CSSコード

class="CSS_List_Sample01"

.CSS_List_Sample01 ul {} .CSS_List_Sample01 li { font-size :15px; list-style :none; padding :10px 15px 7px 15px; margin :10px 5px 10px 5px; border-left :solid 10px #090; border-bottom :dotted 1px #DDD; background :#ee9; }

class="CSS_List_Sample02"

.CSS_List_Sample02 ul {} .CSS_List_Sample02 li { display :inline; /*この行を加えただけ。*/ font-size :15px; list-style :none; padding :10px 15px 7px 15px; margin :10px 5px 10px 5px; border-left :solid 10px #090; border-bottom :dotted 1px #DDD; background :#ee9; }

class="CSS_List_Sample03"

.CSS_List_Sample03 ul {} .CSS_List_Sample03 li { display :inline; font-size :15px; list-style :none; padding :10px 15px 7px 15px; margin :0px; border-top :solid 3px #EEE; border-bottom :solid 3px #BBB; border-right :solid 5px #CCC; border-left :solid 5px #DDD; background :#FFF; }
参考書籍

『XHTML/HTML+CSSスーパーレシピブック』

このリストを使いこなしたりメニューを作ったりは結構めんどうな事がいろいろ。ネット断片的な情報を集めるよりきちんと系統立てて整理された書籍で読むのが一番だと思う。このサイトを読んでるくらいならこの本を買って読んだ方が遥かに効率的かと思います・・・。


『説明付き定義リスト』

<DL>

  • 説明付き定義リストは<DL>タグでリスト本体を定義し、<DT>タグでリストの項目を定義し、<DD>タグにそのリストの内容を記述します。
  • compact属性は、定義語と定義説明のセットの表示を小さく表示するよう指定するもの。
  • compact属性は<dl compact="compact">の様に指定することで、<dt>〜</dt>部分が小さく表示される。
  • compact属性の使い道は・・・判然とせず。

通常の定義リスト

『○○○』表示サンプル

<DT>はリストの項目
<DD>はその内容
<DD>は複数でもOK
<DT>の項目2
項目2の<DD>の項目1
項目2の<DD>の項目2
項目2の<DD>の項目3
<DT>はリストの項目
<DD>はその内容
<DD>は複数でもOK
<DT>の項目2
項目2の<DD>の項目1
項目2の<DD>の項目2
項目2の<DD>の項目3

『○○○』コード


dt と dd を横並びにした定義リスト

color
colour
A sensation which (in humans) derives from the ability of the fine structure of the eye to distinguish three differently filtered analyses of a view.
Last modified time
2004-12-23T23:33Z
Recommended update interval
60s
Authors
Editors
Robert Rothman
Daniel Jackson
2007-05-30
テキストテキスト......
2007-05-15
テキストテキスト......
2007-04-30
テキストテキスト......
2007-04-15
テキストテキスト......
2007-03-30
テキストテキスト......

XHTML
2007-05-30
テキストテキスト......
2007-05-15
テキストテキスト......
2007-04-30
テキストテキスト......
2007-04-15
テキストテキスト......
2007-03-30
テキストテキスト......
CSS dl.list309 dt { clear: left; float: left; margin: 0 0 0.8em; width: 7.5em; border-left: solid 8px #CCC; padding-left: 5px; color: #000; } dl.list309 dd { margin-bottom: 0.8em; margin-left: 7.5em; }
2007-05-30
テキストテキスト......
2007-05-15
テキストテキスト......
2007-04-30
テキストテキスト......
2007-04-15
テキストテキスト......
2007-03-30
テキストテキスト......
解説 dt要素をfloatさせ,dd要素が回り込むようにしています。dd要素にはmargin-leftをとり,内容が長くなってもdt要素の下に回り込まないようにします。 ブラウザで表示フォントサイズが変更されても対応できるようにwidth,marginはemで指定します。 <{$xoops_dirname}>
投票数:23 平均点:10.00
前
CSSの引用・ソースコードなどの表示と特殊文字入力
カテゴリートップ
CSS関連

新しくコメントをつける

題名
ゲスト名
投稿本文
より詳細なコメント入力フォームへ

ライブラリ