リストの装飾

マーカーの非表示

• リストが入ります。
• リストが入ります。

<ul class="none">
<li>リストが入ります。</li>
<li>リストが入ります。</li>
</ul>

リストの横並び

• リストが入ります。
• リストが入ります。

<ul class="inline">
<li>リストが入ります。</li>
<li>リストが入ります。</li>
</ul>

記述リストデザイン①

記述リストのデザインその1

要素が横に並びます。モバイルなどでは、横並びが解除されます。また 左よりも右の行数の方が少なくなるとデザインが崩れます。

記述リストのデザインその1

要素が横に並びます。

<dl class="dl-style01">
<dt>記述リストのデザインその1</dt>
<dd>要素が横に並びます。モバイルなどでは、横並びが解除されます。また
左よりも右の行数の方が少なくなるとデザインが崩れます。</dd>
<dt>記述リストのデザインその1</dt>
<dd>要素が横に並びます。</dd>
</dl>

記述リストデザイン②

記述リストのデザインその2

要素が縦に並びます。

<dl class="dl-style02">
<dt>記述リストのデザインその2</dt>
<dd>要素が縦に並びます。</dd>
</dl>