【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 / 2021.2.12
- 【CSS】background-colorを透過する時の備忘録(IE11対策)
- web / 2023.2.23
- 【CSS】『shape-outside』でテキストの回り込みを円形にしてみる
- web / 2019.7.19
- 【CSS】olのリストで①、②、③(丸数字)を表示させる
Googleさんのおすすめ
人気記事
- web / 2019.4.16
- 【CSS】ハンバーガーメニュー実装サンプル集(クリック時のエフェクトも集めました)
- web / 2022.2.1
- 【jQuery】アコーディオン実装サンプル10選
- web / 2019.9.27
- 【jQuery】スライダープラグイン「slick」実装サンプル集
Googleさんのおすすめ
デザインの記事
- 2023.06.05New
- NEWTOWN/グラフィック・Webデザイン
- 国内、海外のウェブデザイン、パソコン・タブレット・スマートフォンでも見やすいレスポンシブ対応の「あ、いいな」と思うウェブデザインを集めています。
- デザインのこと – Web design gallery
- 2022.06.15
- ちょっと思い出しただけ
- (C)2022『ちょっと思い出しただけ』製作委員会 もくじ 『ちょっと思い出しただけ』 あ…
- いつかのこと – 無印良品の家と暮らす
- 2023.04.25
- 【CSS】見出しデザインをまとめてみる(左右に線を引くとか)
- 見出しのデザインをまとめてくださーい わ、わかりましたー もくじ 左右に線を引く 左…
- 125naroom / デザインするところ(会社)です。