ul・ol・li要素の備忘録

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

list-style-type

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

各種リストマーカーの表示イメージ

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

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

Demo

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>

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

Demo

また、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 ...といったようにカウントダウンのようになります。
実際の表示は以下で確認できます。

Demo

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>

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

Demo

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」のように逆になります。
実際の表示は以下で確認できます。

Demo

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

簡単に番号を逆にすることができるreversed属性ですが、一部のブラウザではサポートされていません。
そこでjQueryを使って未対応ブラウザにも同じように表示されるようにする方法です。
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属性とサポートしていないブラウザでも同じように番号を逆にすることができます。クラス名を変更したい場合などは、ハイライト部分を任意のものに変更などしてください。

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

Demo

Reversed Ordered List with jQuery | Trevor Davis | Front-End Developer @ Viget

ネストされた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;
}

jQuery

$(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>');
      });
    });
  }
});

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

Demo

[jQuery] ネストされたol要素の子リストに親リストの番号を振る – かちびと.net

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;
}

jQuery

$(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となっている部分をそれぞれを任意のものに変更してください。

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

Demo

[jQuery] 1つのul要素を2つに分ける – かちびと.net