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

HTMLのstart属性とは?順序付きリストの開始番号を指定する方法

HTMLのstart属性は、順序付きリスト(<ol>要素)において、最初のリスト項目に付与される番号(開始値)を指定するための属性です。通常、順序付きリストは「1」から自動的に採番されますが、start属性を使うことで、任意の番号からリストを開始させることができます。

構文

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

<ol start="number"></ol>

start属性の値には正の整数を指定します。例えば「5」を指定すれば、リストは「5、6、7…」というように採番されます。

使用例

それでは、HTMLのstart属性を使った具体的な例を見てみましょう。以下のコードでは、科目のリストを「10」から開始するように指定しています。

<!DOCTYPE html>
<html>
<style>
    body {
        color: #000;
        height: 100vh;
        background-color: #8BC6EC;
        background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
    }
</style>
<body>
<h1>HTML start属性 デモ</h1>
<p>科目一覧:</p>
<ol start="10">
<li>物理</li>
<li>化学</li>
<li>数学</li>
<li>生物</li>
<li>経済学</li>
</ol>
</body>
</html>

出力結果

HTMLのstart属性とは?順序付きリストの開始番号を指定する方法

上記のコードを実行すると、リスト項目には「10」から順に番号が振られ、「10、11、12、13、14」と表示されます。

まとめ

start属性は、目次や手順書などで途中の番号からリストを再開したい場合に便利な属性です。なお、逆順にカウントダウン形式で表示したい場合はreversed属性、番号の種類(ローマ数字やアルファベットなど)を変更したい場合はtype属性と組み合わせて使うことで、より柔軟なリスト表現が可能になります。

  1. HTMLのwrap属性とは?textareaのテキスト折り返し設定を解説

    wrap属性とは HTMLのwrap属性は、<textarea>要素内のテキストを、フォーム送信時にどのように折り返すかを定義する属性です。画面上での見た目だけでなく、サーバーへ送信されるデータに改行コードを含めるかどうかを制御できる点が特徴です。 指定できる値 soft:画面上では自動的に折り返して表示されますが、送信されるテキストには改行コードが挿入されません(デフォルト値)。 hard:画面上の折り返し位置に基づいて、フォーム送信時に改行コードが挿入されます。この値を使用する場合はcols属性の指定が必須です。 構文 wrap属性の基本的な書き方は以下のとおりです。

  2. HTMLのdraggable属性とは?使い方とサンプルコードを解説

    HTMLのdraggable属性とはHTML DOMのdraggable属性は、要素がドラッグ可能かどうかを示す真偽値(boolean)を取得・設定するための属性です。この属性を活用することで、ドラッグ&ドロップ操作に対応したインタラクティブなWebページを簡単に実装できます。注意:リンク(<a>タグ)や画像(<img>タグ)は、デフォルトでドラッグ可能に設定されています。draggable属性に指定できる値true … 要素をドラッグ可能にするfalse … 要素をドラッグ不可にするauto … ブラウザのデフォルト動作に従うHTML draggable属性の使用例以