かなり今さら感はありますけど、ul
・ol
・li
要素関連の備忘録です。
対応ブラウザ(特に一部のIEで未対応)とかそもそも使う場面がそんなにないとかの理由で使用頻度がかなり低いと思うのもありますが、低いからこそ使おうと思ったときにパッと思い浮かばなそうなので書き残しておきます。
list-style-type
リストマーカーの種類を指定するプロパティlist-style-type
のメモです。
使用頻度が高いと思うのはul
やol
にデフォルトで設定されているdisc
やdecimal
辺りかと思いますが、他にもいろいろあるのと一部のブラウザでは未対応などあるので、パッと確認したいときのために一覧にしました。
画像はWin7 Chromeでの表示をキャプチャしたもの。
ChromeやFirefoxといったブラウザでは上記のように問題なく表示されますが、IEでは一部のマーカーが対応していない場合があります。(IE7では未対応だけどIE8では対応しているといったような、バージョンによっての違いがあります)
各list-style-type
を以下にひと通りまとめたので、各ブラウザで確認してみてください。
value属性
input
などでよく見かけるvalue
属性ですが、親要素がol
の場合にli
で使用することができます。
HTMLのバージョンによっては非推奨とされていましたが、HTML5では非推奨ではなくなりました。
ol
を親要素に持つli
はデフォルトスタイルだと上から1, 2, 3 ...というような連番が振られますが、value
属性を使用することで途中から任意の番号に変更することができます。
例えば、通常下記のような場合はList 6の部分は「6」が振られるはずですが、表示を確認するとvalue
で指定している「10」が振られており、List 12の部分も通常は「12」が振られるはずが、value
で指定している「20」に変更されます。
<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
属性を指定していきます。
<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 ...といったようにカウントダウンのようになります。
実際の表示は以下で確認できます。
start属性
value
属性と似た感じのもので、親要素がol
の場合にli
で使用することができ、こちらもvalue
属性と同じくHTMLのバージョンによっては非推奨とされていましたが、HTML5では非推奨ではなくなりました。
ol
を親要素に持つli
はデフォルトスタイルだと上から1, 2, 3 ...というような連番が振られますが、ol
要素にstart
属性を使用することで任意の番号から開始することができます。
例えば、下記の場合は通常「1」から始まるものが、start
属性で指定している「10」から始まるようになります。
<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>
実際の表示は以下で確認できます。
reversed属性 ※未対応ブラウザ有
value
属性を使用して番号をカウントダウンのようにする方法を紹介しましたが、このreversed
属性を使うことでもっと簡単に実現できます。
下記のようにol
要素にreversed
属性を指定すれば、リストに降られる番号が逆に表示されるようになります。
<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」のように逆になります。
実際の表示は以下で確認できます。
reversed属性 ※各ブラウザに対応
簡単に番号を逆にすることができるreversed
属性ですが、一部のブラウザではサポートされていません。
そこでjQueryを使って未対応ブラウザにも同じように表示されるようにする方法です。
jQueryが必要なのであらかじめ読み込んで下記を記述します。
$(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属性とサポートしていないブラウザでも同じように番号を逆にすることができます。 クラス名を変更したい場合などは、ハイライト部分を任意のものに変更などしてください。
実際の表示は以下で確認できます。
ネストされたol要素にナンバリング
ol
要素の中に更にol
要素があるとき、そのリストの番号に親リストの番号を振るというものです。
以前同じようなことをしたくて、そのときは微妙だと思いながら結局HTMLに直接記述して対処したんですが、CSSとjQueryを使って簡単にできることを知ったので備忘録。
HTML、CSS、jQueryそれぞれ.nested
を使用しているので、class名の変更などしたい場合はそれぞれ任意のものに変更してください。
また、それぞれのナンバリングを繋ぐ記号などは、CSSのcontent
をそれぞれ変更することで任意のものへ変更できます。
ちなみにIE6、7は未対応です。
<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>
.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;
}
$(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>');
});
});
}
});
実際の表示は以下で確認できます。
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でもちゃんと表示されます。
<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>
.twoline {
display: block;
float: left;
margin-left: 15px;
}
$(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からの部分がわかれて右側に表示されるようになります。 クラスを変更したい場合などは、上記ソースでtwolineやrightとなっている部分をそれぞれを任意のものに変更してください。
実際の表示は以下で確認できます。