HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLの
    要素のstart属性の使い方を解説！リストの開始番号を自由に設定する方法

HTMLの<ol>要素におけるstart属性は、順序付きリストの最初の項目の開始番号を設定するために使用されます。通常、順序付きリストは「1」から番号が振られますが、start属性を指定することで、任意の番号からリストを開始させることができます。ランキングの途中から表示したい場合や、前のリストの続きとして番号を付けたい場合などに非常に便利です。

start属性の基本構文は以下のとおりです。

<ol start="num">

上記の構文で、numには最初のリスト項目に設定したい開始番号を指定します。それでは、<ol>要素のstart属性を実装した具体的な例を見てみましょう。

実装例

<!DOCTYPE html>
<html>
<body>
<h1>Last Semester MCA Result</h1>
<h2>Rank from 1-5</h2>
<ol>
   <li>Steve</li>
   <li>David</li>
   <li>Kane</li>
   <li>William</li>
   <li>John</li>
</ol>
<h2>Rank from 5-10</h2>
<ol start="5">
   <li>Tom</li>
   <li>Jack</li>
   <li>Will</li>
   <li>Harry</li>
   <li>Tim</li>
</ol>
</body>
</html>

出力結果

HTMLの ol 要素のstart属性の使い方を解説！リストの開始番号を自由に設定する方法

コードの解説

上記の例では、順位を表示する2つの順序付きリスト（<ol>）を使用しています。

<h2>Rank from 1-5</h2>
<ol>
   <li>Steve</li>
   <li>David</li>
   <li>Kane</li>
   <li>William</li>
   <li>John</li>
</ol>
<h2>Rank from 5-10</h2>
<ol start="5">
   <li>Tom</li>
   <li>Jack</li>
   <li>Will</li>
   <li>Harry</li>
   <li>Tim</li>
</ol>

最初のリストはstart属性を指定していないため、デフォルトの「1」から番号が振られます。一方、2つ目のリストではstart属性を指定することで、デフォルトの「1」ではなく「5」から番号が開始されます。

<ol start="5">
   <li>Tom</li>
   <li>Jack</li>
   <li>Will</li>
   <li>Harry</li>
   <li>Tim</li>
</ol>

このように、start属性を活用することで、複数のリストにまたがる連続した番号付けや、特定の番号から始まるリストを簡単に実現できます。なお、start属性の値には負の数を指定することも可能です。

  1. HTML DOMのnextSiblingプロパティとは？使い方とサンプルコードを解説

    HTML DOMのnextSiblingプロパティは、指定した要素ノードの直後に隣接するノードを返します。戻り値はNodeオブジェクトで、該当するノードが存在しない場合はnullが返されます。nextSiblingプロパティの注意点このプロパティは、テキストノードやコメントノードを無視しません。HTMLソース内で要素と要素の間に改行やスペースがあると、それらはテキストノードとして扱われるため、nextSiblingが要素ノードではなくテキストノードを返すことがあります。要素ノードだけを確実に取得したい場合は、要素ノードのみを対象とするnextElementSiblingプロパティを使用するのが

  2. HTML DOMのnextElementSiblingプロパティとは？使い方とサンプルコードを解説

    nextElementSiblingプロパティとは HTML DOMのnextElementSiblingプロパティは、指定した要素ノードの直後に隣接している要素ノード（次の兄弟要素）を返します。 注意：このプロパティは、テキストノードやコメントノードを無視し、要素ノードのみを対象とします。HTMLソース内の空白や改行によるテキストノードの影響を受けずに、確実に次の要素を取得できるのが特徴です。なお、次の兄弟要素が存在しない場合は null が返されます。 構文 nextElementSiblingノードを取得するための構文は以下の通りです。 nodeList.nextElementSibl