建築を手助けしたい!!

ようこそ ゲスト さん 登録・確認

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

リスト

３種類のリスト

リストには、通常リスト（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. リスト項目

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

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

  • リスト項目
  • ネスティング１
    • ネスティング１ リスト項目１
    • ネスティング１ リスト項目２
    • ネスティング１ リスト項目３
  • ネスティング２
    • ネスティング２ リスト項目１
    • ネスティング２ リスト項目２
    • ネスティング２ リスト項目３
  • ネスティング３
    • ネスティング３ リスト項目１
    • ネスティング３ リスト項目２

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

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

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

  • リスト項目１
  • リスト項目２
    改行後の文字列
  • リスト項目３
    改行後の文字列あいうえおかきくけこあいうえおかきくけこあいうえおかきくけこあいうえおかきくけこあいうえおかきくけこあいうえおかきくけこ

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

サンプル１-ul

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

  <ol style="font-size:11px; margin: 1.2em 0 0 0em;padding: 0; background: #fee;">
    番号つきリスト
    <li style="background: #ffd;">リスト項目１</li>
    <li style="background: #ffe;">ネスティング１
      <ol style="margin: 0 0 0 3em;padding: 0;">
        <li style="background: #efe;">ネスティング１ リスト項目１</li>
        <li style="background: #eef3ee;">ネスティング１ リスト項目２</li>
        <li style="background: #efe;">ネスティング１ リスト項目３</li>
      </ol>
    </li>
    <li style="background: #ffd;">ネスティング２
      <ol style="margin: 0 0 0 4em;padding: 0;">
        <li style="background: #efe;">ネスティング２ リスト項目１</li>
        <li style="background: #eef3ee;">ネスティング２ リスト項目２</li>
        <li style="background: #efe;">ネスティング２ リスト項目３</li>
      </ol>
    </li>
  </ol>
  
サンプル３-マーカーを画像にしてみる

  <p class="cap_sl">サンプル３-マーカーを画像にしてみる</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>リスト項目１</li>
    <li>リスト項目２</br>改行後の文字列</li>
    <li>リスト項目３</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のセレクタという側面が強いようだ。

横並びにしたリスト（基本型）

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

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

サンプル１

  • 項目１
  • 項目２
  • 項目３

サンプル２

  • 項目１
  • 項目２
  • 項目３

サンプル３

  • 項目１
  • 項目２
  • 項目３

サンプル４

  • 項目１
  • 項目２
  • 項目３

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

サンプル１

  <ul style="margin:0px 10px;">
    <li style="display:inline;">項目１</li>
    <li style="display:inline;">項目２</li>
    <li style="display:inline;">項目３</li>
  </ul>
  
サンプル２

  <ul style="margin:0px 10px; list-style:none;">
    <li style="display:inline;">項目１</li>
    <li style="display:inline;">項目２</li>
    <li style="display:inline;">項目３</li>
  </ul>
  
サンプル３

  <ul style="margin:0px 10px; list-style:none;">
    <li style="display:inline;;background:#ddf;">項目１</li>
    <li style="display:inline;background:#ddf;">項目２</li>
    <li style="display:inline;background:#ddf;">項目３</li>
  </ul>
  
サンプル４

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

ここまでは基本事項

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

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

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

あれこれサンプル１

  • 項目１
  • 項目２
  • 項目３
    改行あいうえお

あれこれサンプル２

  • 項目１
  • 項目２
  • 項目３
    改行あいうえお

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

  • 項目１
  • 項目２
  • 項目３

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

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

  <ul class="CSS_List_Sample01">
    <li>項目１</li><!--
    --><li>項目２</li><!--
    --><li>項目３</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>は複数でもＯＫ
<DT>の項目２
項目２の<DD>の項目１
項目２の<DD>の項目２
項目２の<DD>の項目３
<DT>はリストの項目
<DD>はその内容
<DD>は複数でもＯＫ
<DT>の項目２
項目２の<DD>の項目１
項目２の<DD>の項目２
項目２の<DD>の項目３

『○○○』コード

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
この記事の1行目に飛ぶ
前
CSSの引用・ソースコードなどの表示と特殊文字入力 		カテゴリートップ
CSS関連

新しくコメントをつける

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

ライブラリ

ライブラリ
CAD関連
Vectorworks
AutoCAD
JW CAD
開発関連
AppleScript
AppleScriptObjC
Objective-C
VectorScript
VectorScript速習
VectorScriptのTips
Vecorworks Python
Web関連
サイトの構築
HTML関連
CSS関連
XOOPS関連
Mac関連
Mac OS X
Mac OS X Server
ハードウェア
ソフトウェア
Win関連
その他
Copyright©2011 ArcAid All Rights Reserved.Copyright©2013 ArcAid All Rights Reserved.