リスト表示のスタート位置を決めたい

スタート位置を任意で決めたい時があるますよね？

例えば、リストを上下や左右2段（複数段）に分けた時、続き番号のはずなのに、すべて１から始まってしまっては都合が悪いことになります。

そんな時のためにスタート属性というものが用意されています。
これを知っているだけでリストの活用範囲がぐんと広がります。

編集する前の準備

はじめに、リストを作りたい文章を作成し、数字リスト<ol>をチェックし並べ替えます。
その後で『HTMLを編集』ボタンをクリックして下の作業を行ってください。

※スタート属性を使用する時は必ず数字リストの方を利用してください。

上下に分けたリストを続き番号で表示させる例

逆順に並べ替えた例（左が標準、右が逆順）

■コードの貼り付け方の説明

左のコードをコピーする
設定ボタン（歯車のマーク）を押す
ヘッダー部分を編集を選択する

■ここまで出来たら終わったも同然です！

コピーしたコードを貼り付ける
保存ボタンを押す
ページの再読み込みをする

なぜスタート位置を決めるのか？

左側の例では、上のリストは通常の１からはじまるリストですが、途中に文章が入るため、下の（４．５．６）のリストとは分けなくてはなりません。

この場合、下のリストにスタート属性を４に設定することでカウントのスタート位置が４から始めることが出来るようになりました。

これは便利な機能ですので、是非覚えておいてください。

修正方法｜start属性の使い方

文章のHTMLを開き<ol>タグを以下のように修正して保存します。

<ol start="5"> ※この例では５から数字が始まります。

漢数字、カタカナ、ローマ字、アルファベットなどにも使用可能

使用する場合は、以下のように編集します。

まず、標準以外の表示設定を完了させる
次に文章の『HTMLの編集』をクリックしてコードを表示させる
<ol style="list-style-type:XXXXXXXXXX">に　start属性を追加する
<ol style="list-style-type:XXXXXXXXXX" start="5">このようになる
保存して確認（終了）

頭に０をつけた数字|start="5"

左のコードをコピーする
設定ボタン（歯車のマーク）を押す
ヘッダー部分を編集を選択する
コピーしたコードを貼り付ける
保存ボタンを押す
ページの再読み込みをする

漢数字|start="5"

左のコードをコピーする
設定ボタン（歯車のマーク）を押す
ヘッダー部分を編集を選択する
コピーしたコードを貼り付ける
保存ボタンを押す
ページの再読み込みをする

イロハ並び|start="5"

左のコードをコピーする
設定ボタン（歯車のマーク）を押す
ヘッダー部分を編集を選択する
コピーしたコードを貼り付ける
保存ボタンを押す
ページの再読み込みをする

ローマ数字|start="5"

左のコードをコピーする
設定ボタン（歯車のマーク）を押す
ヘッダー部分を編集を選択する
コピーしたコードを貼り付ける
保存ボタンを押す
ページの再読み込みをする

アルファベット|start="5"

左のコードをコピーする
設定ボタン（歯車のマーク）を押す
ヘッダー部分を編集を選択する
コピーしたコードを貼り付ける
保存ボタンを押す
ページの再読み込みをする

アイウエオ順|start="5"

左のコードをコピーする
設定ボタン（歯車のマーク）を押す
ヘッダー部分を編集を選択する
コピーしたコードを貼り付ける
保存ボタンを押す
ページの再読み込みをする

ここで逆順リストでも利用できるのか？という疑問が生まれます。

こっそり教えますが出来ちゃいます！！

逆順リストを一緒に使うためには、以下のようにします。
<ol style="list-style-type:XXXXXXXXXX" reversed="reversed" start="5">

下の例はいろは（ひらがな）の逆順で『は』から始めた例です | start="3"

左のコードをコピーする
設定ボタン（歯車のマーク）を押す
ヘッダー部分を編集を選択する
コピーしたコードを貼り付ける
保存ボタンを押す
ページの再読み込みをする

使用したコード

<li>左のコードをコピーする</li>

<li>設定ボタン（歯車のマーク）を押す</li>

<li>ヘッダー部分を編集を選択する</li>

<li>コピーしたコードを貼り付ける</li>

<li>保存ボタンを押す</li>

<li>ページの再読み込みをする</li>

</ol>

『おやっなんか表示が変だな』って思いませんでしたか？

『は』から始めるためには、『い』＝１、『ろ』＝２、『は』＝３なので、３から始めるのですが、逆順なので、は、ろ、いと並んぶと先頭に戻って終わってしまいます。
続きがないので、０、－1、－２と数値で表示されてしまっているのです。
決して、『す』『せ』『も』とは戻ってくれないのです。
利用するときには、そのことを念頭において使用してください！

それでは同じ疑問を持った方もいらっしゃると思いますが普通に並べ場合はどうなるのでしょう？
私もわからなかったので、実験してみました。

『いろは』は全部で47文字ですよね。
普通の並び方にして45からスタートさせてみました。

終わっても数字になりませんが、結果は下の通りになりました。47進法？（笑）
ですから、あまり長いリストには、使用しないようにしましょうね！

左のコードをコピーする
設定ボタン（歯車のマーク）を押す
ヘッダー部分を編集を選択する
コピーしたコードを貼り付ける
保存ボタンを押す
ページの再読み込みをする

47進法で計算した場合1億とかどうなるんでしょうねぇ。
すごく小さい数字に思えるかも。

やってみた結果は『ねむちたお』でした（笑）

この記事がいいなと思ったらメールマガジンに登録していただけると嬉しいです。

Jimdo Tipsに戻る