HTML と CSS でピリオドのない順序付きリストを作成する方法

HTML および CSS でピリオドのない順序付きリストを作成する

HTML の順序付きリストは数値の後にピリオドが必要であるという一般的な前提にもかかわらず、次のように作成することは可能です。

CSS ソリューション

非セマンティックなリスト スタイル画像アプローチに頼る代わりに、CSS を使用してピリオドを削除できます。

<code class="css">ol.custom {
  list-style-type: none;
  margin-left: 0;
}

ol.custom > li {
  counter-increment: customlistcounter;
}

ol.custom > li:before {
  content: counter(customlistcounter) " ";
  font-weight: bold;
  float: left;
  width: 3em;
}

ol.custom:first-child {
  counter-reset: customlistcounter;
}</code>

注

このソリューションでは :before 擬似セレクターが使用されており、IE6 や IE7 などの古いブラウザーではサポートされていない可能性があります。これらのブラウザの場合、通常のリスト スタイルを表示するブラウザのみを対象とする追加ルールを追加できます:

<code class="css">ol.custom {
  *list-style-type: decimal; /* targets IE6 and IE7 only */
}</code>

以上がHTML と CSS でピリオドのない順序付きリストを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。