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

HTMLのli要素におけるvalue属性の使い方を解説

<li>要素のvalue属性は、リスト項目に任意の番号（値）を設定するために使用されます。value属性で設定できるのは数値のみであるため、対象となるのはHTMLの<ol>要素（順序付きリスト）だけです。通常、順序付きリストは「1」から自動的に採番されますが、value属性を使えば途中から任意の番号で開始させることができます。

value属性の基本構文

構文は以下のとおりです。

<li value="num">

ここで「num」には、順序付きリスト内のその項目に割り当てたい番号を指定します。

実装例

それでは、<li>要素のvalue属性を実際に使った例を見てみましょう。

<!DOCTYPE html>
<html>
<body>
<h1>科目一覧</h1>
<p>以下が主な科目です −</p>
<ol>
    <li>数学</li>
    <li>理科</li>
    <li>英語</li>
    <li>フランス語</li>
</ol>
<p>残りの科目 −</p>
<ol>
    <li value="5">経済学</li>
    <li>会計学</li>
    <li>プログラミング</li>
    <li>ネットワーク</li>
</ol>
</body>
</html>

出力結果

HTMLのli要素におけるvalue属性の使い方を解説

コードの解説

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

<p>以下が主な科目です −</p>
<ol>
    <li>数学</li>
    <li>理科</li>
    <li>英語</li>
    <li>フランス語</li>
</ol>
<p>残りの科目 −</p>

<ol>
    <li value="5">経済学</li>
    <li>会計学</li>
    <li>プログラミング</li>
    <li>ネットワーク</li>
</ol>

1つ目のリストはデフォルトの「1」から採番されていますが、2つ目のリストはvalue属性によって異なる番号から開始するように設定しています。

<ol>
    <li value="5">経済学</li>
    <li>会計学</li>
    <li>プログラミング</li>
    <li>ネットワーク</li>
</ol>

このように、最初の項目にvalue="5"を指定することで、リスト全体が「5、6、7、8」という番号で表示されます。後続の項目は、指定した値から自動的に連番が振られる点に注目してください。

補足：value属性の注意点

  • value属性は<ul>（順序なしリスト）では効果がなく、<ol>内でのみ機能します。
  • 負の数や0も指定可能ですが、表示方法はブラウザの種類によって異なる場合があります。
  • 1つの項目にvalue属性を設定すると、それ以降の項目すべての番号に影響します。
  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