ul・ol・li要素の備忘録

  • Posted on
  • Category : Tips
ul・ol・li要素の備忘録

かなり今更感がありますけど、ul・ol・li要素関連の備忘録です。対応ブラウザ(特に一部のIEで未対応)とかそもそも使う場面がそんなにないとかの理由で使用頻度がかなり低いと思うのもありますが、低いからこそ使おうと思った時にパッと思い浮かばなそうなので書き残しておきます。

ul・ol・li要素の備忘録 目次

  1. list-style-type
  2. value属性
  3. start属性
  4. reversed属性 ※未対応ブラウザ有
  5. reversed属性 ※各ブラウザに対応
  6. ネストされたol要素にナンバリング
  7. ul要素を自動で2つに分ける

1. list-style-type

リストマーカーの種類を指定するプロパティlist-style-typeのメモです。
使用頻度が高いと思うのはulolにデフォルトで設定されているdiscdecimal辺りかと思いますが、他にもいろいろあるのと一部のブラウザでは未対応などあるので、パッと確認したい時のために一覧にしました。

list-style-type

※画像はWin7 Chromeでの表示をキャプチャしたもの。

ChromeやFirefoxといったブラウザでは上記のように問題なく表示されますが、IEでは一部のマーカーが対応していない場合があります。(IE7では未対応だけどIE8では対応しているといったような、バージョンによっての違いがあります)
list-style-typeを以下にひと通りまとめたので、各ブラウザで確認してみてください。

2013年7月26日 追記
「circle(白丸)」の箇所に※マークを付けてしまっていたので、画像やデモなどを修正しました。

目次へ

2. value属性

inputなどでよく見かける、value属性ですが、親要素がolの場合にliで使用することができます。
HTMLのバージョンによっては非推奨とされていましたが、HTML5では非推奨ではなくなりました。

olを親要素に持つliはデフォルトスタイルだと上から1、2、3…というような連番が振られますが、value属性を使用することで途中から任意の番号に変更することができます。
例えば、通常下記のようなソースの場合はList 6の部分は「6」が振られるはずですが、表示を確認するとvalueで指定している「10」が振られており、List 12の部分も通常は「12」が振られるはずが、valueで指定している「20」に変更されます。

HTML

<ol>
	<li>List 1</li>
	<li>List 2</li>
	<li>List 3</li>
	<li>List 4</li>
	<li>List 5</li>
	<li value="10">List 6</li>
	<li>List 7</li>
	<li>List 8</li>
	<li>List 9</li>
	<li>List 10</li>
	<li>List 11</li>
	<li value="20">List 12</li>
	<li>List 13</li>
	<li>List 14</li>
	<li>List 15</li>
</ol>

実際の表示は以下できます。

また、value属性を利用することで通常はリストが増える度に値が増えていくのを、逆に値を減らしていくカウントダウンのような見栄えにすることができます。
その際は下記ソースのように、value属性を指定していきます。

HTML

<ol>
	<li value="10">List 1</li>
	<li value="9">List 2</li>
	<li value="8">List 3</li>
	<li value="7">List 4</li>
	<li value="6">List 5</li>
	<li value="5">List 6</li>
	<li value="4">List 7</li>
	<li value="3">List 8</li>
	<li value="2">List 9</li>
	<li value="1">List 10</li>
</ol>

上記のように記述することで、通常だと1、2、3…と値が増えていく部分が10、9、8…といったようにカウントダウンのようになります。
実際の表示は以下で確認できます。

目次へ

3. start属性

value属性と似た感じのもので、親要素がolの場合にliで使用することができ、こちらもvalue属性と同じくHTMLのバージョンによっては非推奨とされていましたが、HTML5では非推奨ではなくなりました。

olを親要素に持つliはデフォルトスタイルだと上から1、2、3…というような連番が振られますが、ol要素にstart属性を使用することで任意の番号から開始することができます。
例えば、下記のようなソースの場合は通常「1」から始まるものが、start属性で指定している「10」から始まるようになります。

HTML

<ol start="10">
	<li>List 1</li>
	<li>List 2</li>
	<li>List 3</li>
	<li>List 4</li>
	<li>List 5</li>
	<li>List 6</li>
	<li>List 7</li>
	<li>List 8</li>
	<li>List 9</li>
	<li>List 10</li>
</ol>

実際の表示は以下で確認できます。

目次へ

4. reversed属性 ※未対応ブラウザ有

value属性を使用して番号をカウントダウンのようにする方法を紹介しましたが、このreversed属性を使うことでもっと簡単に実現できます。
下記ソースのようにol要素にreversed属性を指定すれば、リストに降られる番号が逆に表示されるようになります。

HTML

<ol reversed>
	<li>List 1</li>
	<li>List 2</li>
	<li>List 3</li>
	<li>List 4</li>
	<li>List 5</li>
	<li>List 6</li>
	<li>List 7</li>
	<li>List 8</li>
	<li>List 9</li>
	<li>List 10</li>
</ol>

上記のように記述して表示を確認すると、通常「1→10」の順番が「10→1」のように逆になります。
実際の表示は以下で確認できます。

目次へ

5. reversed属性 ※各ブラウザに対応

簡単に番号を逆にすることができるreversed属性ですが、一部のブラウザではサポートされていません。
そこでjQueryを使って未対応ブラウザにも同じように表示されるようにする方法です。
jQueryが必要なので予め読み込み、下記を記述します。

jQuery

$(document).ready(function() {
	$('.reversed').each(function() {
		var $children = $(this).children('li');
		var totalChildren = $children.length;
		var start = 0;
		$children.each(function() {
			$(this).val(totalChildren - start);
			start++;
		});
	});
});

上記を記述後、対応させたいol要素にclass="reversed"を記述すれば、reversed属性とサポートしていないブラウザでも同じように番号を逆にすることができます。
クラス名を変更したい場合などは、赤文字部分を任意のものに変更などしてください。

実際の表示は以下で確認できます。

目次へ

6. ネストされたol要素にナンバリング

ol要素の中に更にol要素がある時、そのリストの番号に親リストの番号を振るというものです。
以前同じようなことをしたくて、その時は微妙だと思いながら結局HTMLに直接記述して対処したんですが、CSSとjQueryを使って簡単にできることを知ったので備忘録。

HTML、CSS、jQueryそれぞれclass="nested"を使用しているので、クラス名の変更などしたい場合はそれぞれ任意のものに変更してください。
また、それぞれのナンバリングを繋ぐ記号などは、CSSのcontentをそれぞれ変更することで任意のものへ変更できます。
ちなみにIE6、7は未対応です。

HTML

<ol class="nested">
	<li>List</li>
	<li>
		List
		<ol>
			<li>List</li>
			<li>List</li>
			<li>
				List
				<ol>
					<li>List</li>
					<li>List</li>
					<li>List</li>
				</ol>
			</li>
		</ol>
	</li>
	<li>List</li>
	<li>List</li>
	<li>List</li>
</ol>

CSS

.nested, .nested ol {
	margin: 15px;
}
html>/**/body .nested { /* Won't be interpreted by IE6/7. */
	list-style-type: none;
	counter-reset: level1;
}
.nested li:before {
	content: counter(level1) ". ";
	counter-increment: level1;
}
.nested li ol {
	counter-reset: level2;
}
.nested li ol li ol {
	counter-reset: level3;
}
.nested li ol li:before {
	content: counter(level1) "." counter(level2) " ";
	counter-increment: level2;
}
.nested li ol li ol li:before {
	content: counter(level1) "." counter(level2) "-" counter(level3) " ";
	counter-increment: level3;
}
.nested li span { /* For IE6/7. */
	margin: 0 5px 0 -25px;
}

jQuery

$(document).ready(function() {
	if ($('.nested').css('list-style-type') != 'none') { /* For IE6/7 only. */
		$('.nested ol').each(function(i, ol) {
			ol = $(ol);
			var level1 = ol.closest('li').index() + 1;
			ol.children('li').each(function(i, li) {
				li = $(li);
				var level2 = level1 + '.' + (li.index() + 1);
				li.prepend('<span>' + level2 + '</span>');
			});
		});
	}
});

実際の表示は以下で確認できます。

目次へ

7. ul要素を自動で2つに分ける

ul要素じゃなくてもいいんですが、通常だとずらっと並ぶだけのul要素内のli要素を、例えば全部で10個のli要素の時は左に1~5までの5個・右に6~10までの5個、全部で16個の時は左に1~8までの8個・右に9~16までの8個といったように自動的に2つに分ける方法です。
具体的には半分の部分にulを入れて、2つのul要素を作るという感じです。
ちなみにこちらはIEでもちゃんと表示されます。

HTML

<ul class="twoline">
	<li>List 1</li>
	<li>List 2</li>
	<li>List 3</li>
	<li>List 4</li>
	<li>List 5</li>
	<li>List 6</li>
	<li>List 7</li>
	<li>List 8</li>
	<li>List 9</li>
	<li>List 10</li>
	<li>List 11</li>
	<li>List 12</li>
	<li>List 13</li>
	<li>List 14</li>
	<li>List 15</li>
</ul>

CSS

.twoline {
	display: block;
	float: left;
	margin-left: 15px;
}

jQuery

$(document).ready(function() {
	$('.twoline').each(function(i){
		var colsize = Math.round($(this).find('li').size() / 2);
		$(this).find('li').each(function(i){
			if (i>=colsize){
				$(this).addClass('right');}
		});
		$(this).find('.right').insertAfter(this).wrapAll('<ul class="left"></ul>');
	});
});

上記を記述後確認すると、List 9からの部分がわかれて右側に表示されるようになります。
クラスを変更したい場合などは、上記ソースでtwolinerightとなっている部分をそれぞれを任意のものに変更してください。

実際の表示は以下で確認できます。

目次へ

Back to Top

NxWorld

Sorry... doesn't support your browser

To get the best possible experience using our site we recommend that you upgrade to a modern web browser.NxWorldではご利用中のブラウザサポートはしていません。
Internet Explorerのアップグレード行う、もしくはその他のブラウザを使用しての閲覧をお願いします。