リストは、どうだろう使う人いるのかな？番号付きのリストは列挙する際に便利だけど、なろうだとあまり使わない気もする。

リストは二種類あります。

<ul>タグはunordered list

<ol>タグはordered list

順序がある場合は<ol>、単なる箇条書きみたいなのは<ul>を使います。

それぞれの中身は<li>要素でくくります。

例、

<ul>

　<li>小説家になろう</li>

　<li>小説家になるには</li>

　<li>小説家になるか</li>

　<li>小説家にならない</li>

</ul>

<ol>

　<li>小説を読もう</li>

　<li>小説を読む</li>

　<li>感想を書く</li>

　<li>レビューをする</li>

</ol>

こんな感じに、ol, ulの中にliで区切っていく感じ。

list-style-typeでリストの形式を変えることができます。

●や〇など色々なタイプを指定できます。

いくつか紹介します。

・順序なし

list-style-type: disc;

list-style-type: circle;

list-style-type: square;

・順序あり

list-style-type: decimal;

list-style-type: georgian;

list-style-type: upper-alpha;

list-style-type: upper-roman;

※list-styleでも指定できます。

結構種類があるので興味がある人は調べてみてもいいですね。

使い方は、ul, olに適用すればOKです。

<ol style="list-style-type: upper-alpha;">

　<li>小説を読もう</li>

　<li>小説を読む</li>

　<li>感想を書く</li>

　<li>レビューをする</li>

</ol>

こんな風に自動で番号が振られます。(olの場合)

ちなみにですが、一部のliだけにスタイルを適用することもできます。

<ul>

　<li style="list-style-type: square;">小説家になろう</li>

　<li>小説家になるには</li>

　<li>小説家になるか</li>

　<li>小説家にならない</li>

</ul>

ヘッダー用のliと区別したり、区分が変わる時に使ったりしますね。

あとリストスタイルには画像アイコンを使用することもできます。

<ul style="list-style: url(https://22980.mitemin.net/userpageimage/viewimage/icode/i489660/) inside;">

　<li >小説家をやろう</li>

　<li>小説家をやるには</li>

　<li>小説家をやれるか</li>

　<li>小説家をやった</li>

</ul>

ただ、サイズ指定ができないのであらかじめサイズ調整したアイコンを使用する必要があります。

又は、listそれぞれに背景画像を使ってアイコンを付けるというやり方もありますが、ここでは省略します。

- - - ✂切り取り✂ - - -

さて、通常の使い方の説明は終わりましたが、なろうのCSSはどうなっているか見てみましょう。

PC版

ol, ul {

list-style: none;

margin: 0px;

padding: 0px;

}

スマホ版

li {

text-decoration: none;

list-style: none;

}

こんな感じですね。

最悪なことに、スマホ版ではliにlist-style: none;がかかっています。

これがどういう意味を持つかというと。

リストを設定する場合に全部にlist-style-typeを適用する必要があるということです。（白目）

list-style: none;がかかっているため、普通になろうの活動報告でリストを使うと、単なる箇条書きになります。

ulやolにstyleを適用しても、スマホ版では、liにlist-style: none;がかかっているため、全体にリストスタイルを適用しようとすると、一つ一つ設定するしかないのです……

まぁスマホユーザー無視でいいならば、特に考えずに使えるのですが、さすがにメインデバイスを無視するのはね……

両方とも同じように表示するためには、一つ一つ設定するしかないのです……（(´;ω;｀)）

- - - ✂切り取り✂ - - -

なので、小説家になろうのリストはこうなります。

<ul>

　<li style="list-style: square inside;">小説家になろう</li>

　<li style="list-style: square inside;">小説家になるには</li>

　<li style="list-style: square inside;">小説家になるか</li>

　<li style="list-style: square inside;">小説家にならない</li>

</ul>

※insideを付けているのは、デフォルトでは枠外にリストが来てしまうのを防ぐためです。それが嫌な場合はmargin leftで調整しましょう。

こんな風になります。

さてここで、リストの種類を変えたかったらどうしましょうか？

　→　全部のリストスタイルを修正してください。（半ギレ）

……なろうさん、どんだけリスト嫌いなんですか……。

ちなみにlistには画像も指定することができてその場合は、

<ul >

　<li style="list-style: url(https://22980.mitemin.net/userpageimage/viewimage/icode/i489660/) inside;">小説家をやろう</li>

　<li style="list-style: url(https://22980.mitemin.net/userpageimage/viewimage/icode/i489660/) inside;">小説家をやるには</li>

　<li style="list-style: url(https://22980.mitemin.net/userpageimage/viewimage/icode/i489660/) inside;">小説家をやれるか</li>

　<li style="list-style: url(https://22980.mitemin.net/userpageimage/viewimage/icode/i489660/) inside;">小説家をやった</li>

</ul>

こんな風に一つ一つ設定しましょう。

ここで、画像を変えたかったら？

　→　全部のリストスタイルを修正してください。（半ギレ）

ああぁぁ！！！

- - - ✂切り取り✂ - - -

失礼しました。

とりあえず、なろうの活動報告ではあまりリストは使えません。（だいたいスマホのCSSのせい）

ただ、なろうのCSSにいくつかliを使ったものが設定されているので、ハックすることも可能です（黒い笑顔）

ならばリストメニューを利用しても構わないのだろ？　というので作られたのが、あのリンクボタンです(笑)

まぁそれでもPCとスマホの両方で使えるものがほとんどないので、利用もなかなか難しいところです。

片側だけでよければ開閉ボタンを付けられたり、ヘッダメニューぽいものを導入できたり、結構ハックすることができます。

とはいえ、この作品の目的はPC、スマホ両方に対応できるようにと作っているので、ここでは割愛します、

気になる方は、色々と試してみると面白いですよ。

- - - ✂切り取り✂ - - -

ということで、リストでした。list-style：noneがなければもう少し使う気にもなれましたが、今の段階では、あんまり使えない感じですね。

凝ろうとすると文字数いっぱい使うし、他で代替可能なので。