【HTML】リスト『ol』の順番を途中から始める方法(順番を逆にもできる)
- 2022.8.26
- HTML


リストなんですが、3番目から始めるとかってできますか?

できますよー。start属性を使うのが一番簡単ですねー
start属性を使ってみる
これが一番簡単ですね、
『ol』にstart属性をつけて数字を指定するだけです。
See the Pen
【HTML】コメントアウトしたいけど、すでにコメントアウトが中にあるときのコメントアウト方法(頑張ってコメントアウトするなら) by 125naroom (@125naroom)
on CodePen.
コードはこちら
HTML
<ol start="3"> <li>テキスト</li> <li>テキスト</li> <li>テキスト</li> <li>テキスト</li> <li>テキスト</li> </ol>
value属性を使ってみる
value属性は、『li』に使うことができます。
See the Pen
【HTML】リスト『ol』の順番を途中から始める方法(start属性を使ってみる) by 125naroom (@125naroom)
on CodePen.
コードはこちら
HTML
<ol> <li value="3">テキスト</li> <li>テキスト</li> <li>テキスト</li> <li>テキスト</li> <li>テキスト</li> </ol> <ol> <li>テキスト</li> <li>テキスト</li> <li value="7">テキスト</li> <li>テキスト</li> <li>テキスト</li> </ol> <ol> <li value="3">テキスト</li> <li value="7">テキスト</li> <li value="9">テキスト</li> <li>テキスト</li> <li>テキスト</li> </ol>
reversed属性で順番を逆に並べる
『ol』にreversed属性を使うと順番を逆にすることができます。
See the Pen
【HTML】リスト『ol』の順番を途中から始める方法(reversed属性で順番を逆に並べる) by 125naroom (@125naroom)
on CodePen.
コードはこちら
HTML
<ol reversed> <li>テキスト</li> <li>テキスト</li> <li>テキスト</li> <li>テキスト</li> <li>テキスト</li> </ol> <ol reversed start="9"> <li>テキスト</li> <li>テキスト</li> <li>テキスト</li> <li>テキスト</li> <li>テキスト</li> </ol> <ol reversed> <li value="3">テキスト</li> <li value="5">テキスト</li> <li value="7">テキスト</li> <li>テキスト</li> <li>テキスト</li> </ol>
CSSでもできたりする
うーん、CSSを使うといろいろ手間ですねー。olのcounter-reset: itemに1を引いた値を入れます。3番から始めたい時は2を入れます。で、liはブロック要素にしてインデントの調整。いやー、大変ですがCSSでコントロールすることはできますねー。どんな時に使うのでしょうか。。まだ使ったことはないのですが備忘録ということで。
See the Pen
【HTML】リスト『ol』の順番を途中から始める方法(CSSでもできたりする) by 125naroom (@125naroom)
on CodePen.
コードはこちら
HTML
<ol class="totyuu"> <li>テキスト</li> <li>テキスト</li> <li>テキスト</li> <li>テキスト</li> <li>うーん、CSSを使うといろいろ手間ですねー。olのcounter-reset: itemに1を引いた値を入れます。3番から始めたい時は2を入れます。で、liはブロック要素にしてインデントの調整。いやー、大変ですがCSSでコントロールすることはできますねー。どんな時に使うのでしょうか。。まだ使ったことはないのですが備忘録ということで。</li> <li>テキスト</li> </ol>
CSS
ol.totyuu { counter-reset: item 2; padding-left: 0; } ol.totyuu li { display: block; text-indent: -1.2em; padding-left: 1.2em; } ol.totyuu li:before { content: counter(item) ". "; counter-increment: item; }
さいごに

おー、すごーい!

さ、ドーナツ食べましょー
関連記事
おすすめ
かんれん
- web / 2019.6.13
- 【CSS】吹き出しをつくる、三角の部分をちょっと曲げて素敵にする
- web / 2020.1.1
- 【CSS】スマホでリンクをタップした時に色を変える方法
- web / 2019.9.26
- 【CSS】input、textareaのCSSを初期化する(iOS対策)
- web / 2019.5.30
- 【CSS】ホバー(マウスオーバー)実装サンプル集(画像の明度を上げる編)
Googleさんのおすすめ
人気記事
- web / 2019.4.16
- 【CSS】ハンバーガーメニュー実装サンプル集(クリック時のエフェクトも集めました)
- web / 2022.2.1
- 【jQuery】アコーディオン実装サンプル10選
- web / 2019.9.27
- 【jQuery】スライダープラグイン「slick」実装サンプル集
- web / 2021.9.17
- 【jQuery】ページ内リンクでスムーズスクロール(スクロール位置の調整も簡単にできる)
Googleさんのおすすめ
デザインの記事
- 2023.01.25New
- good eighty%
- 国内、海外のウェブデザイン、パソコン・タブレット・スマートフォンでも見やすいレスポンシブ対応の「あ、いいな」と思うウェブデザインを集めています。
- デザインのこと – Web design gallery
- 2023.01.25New
- good eighty%
- 国内、海外のウェブデザイン、パソコン・タブレット・スマートフォンでも見やすいレスポンシブ対応の「あ、いいな」と思うウェブデザインを集めています。
- デザインのこと – Web design gallery
- 2022.06.15
- ちょっと思い出しただけ
- (C)2022『ちょっと思い出しただけ』製作委員会 もくじ 『ちょっと思い出しただけ』 あ…
- いつかのこと – 無印良品の家と暮らす
- 2022.06.04
- 『点』、登場人物は3人だけ
- (C)2017 WARNER MUSIC JAPAN INC. もくじ 『点』 登場人物は3人だけ なんとも心地よい …
- いつかのこと – 無印良品の家と暮らす