<ul>タグ<ol>タグ使用時に改行はNG
こんにちは、たけぞーです。
今回はリストタグを使用した時の改行の仕方についての注意点です。
<ul>タグや<ol>タグはリストを表示する際に使用するタグで、<ul>は Unordered Listの略、<ol>はOrdered Listの略となります。リストの各項目は<li>タグで囲まれます。
<ul>タグ使用例：好きな日本昔話
- サラリーマン金太郎
- 桃太郎
- 浦島太郎
<ul>
<li>サラリーマン金太郎</li>
<li>桃太郎</li>
<li>浦島太郎</li>
</ul>
<ol>タグ使用例：好きな日本昔話ランキング
- サラリーマン金太郎
- 桃太郎
- 浦島太郎
<ol>
<li>サラリーマン金太郎</li>
<li>桃太郎</li>
<li>浦島太郎</li>
</ol>
さて、こんな形で使用する<ul>タグと<ol>タグですが、あるルールが存在します。
それは、<ul>タグと<ol>タグの中には<li>タグ以外入れてはならないというルールです。
※矛盾しているようにも思えるかもしれませんが、<li>タグ内は色々なタグが使えます。「入れ子」とかそういった難しい話です。興味のある方は「liタグ」や「ulタグ」で検索してみてください。
リストが三つ並んでいるとついリストとリストの間を１行空けたくなってしまいますよね？
改行設定が<p>タグ改行や<br />タグ改行の状態で１行空けてしまうと・・・
そうです。先程と同じ様に
<ol>
<li>サラリーマン金太郎</li>
<p> </p>
<li>桃太郎</li>
<p> </p>
<li>浦島太郎</li>
</ol>
<ul>
<li>サラリーマン金太郎</li>
<br />
<li>桃太郎</li>
<br />
<li>浦島太郎</li>
</ul>先程も書きましたように、<ul>タグと<ol>タグの中には<li>タグ以外入れてはならないというルールがありますからこれはNGです。更に、<ul>タグと<ol>タグの中ではpタグそのものが使用できない為、前項で使用した
<p style="margin-bottom:1em;"> </p>
というタグも使用できません。
解決策は
CSSでliタグの後は１行空けるように指定することで文法違反なく１行空けが行えます。シリウス記事編集画面から編集→スタイルシート→styles.cssで95行目（レスポンシブデザインテンプレート使用時）にこんな記述があると思います。
ul li {
background-image: url(img/li.png);
background-position: 5px 8px;
background-repeat: no-repeat;
padding: 0 0 0 16px;
}margin-bottom: 1em;
ul li {
background-image: url(img/li.png);
background-position: 5px 8px;
background-repeat: no-repeat;
padding: 0 0 0 16px;
margin-bottom: 1em;
}