リストスタイル

class=”disc”

list-style:discになる。
inwidthがscssで指定されているため幅は94%、margin:0 auto。

  • こんにちわいわいこんにちわ
  • こんにちわいわいこんにちわこんにちわいわいこんにちわこんにちわいわいこんにちわ
  • こんにちわいわいこんにちわ
  • こんにちわいわいこんにちわこんにちわいわいこんにちわこんにちわいわいこんにちわこんにちわいわいこんにちわ
使用例

<ul class="disc">
	<li>こんにちわいわい</li>
	<li>こんにちわ</li>
	<li>こんにちわこんにちわ</li>
</ul>

class=”decimal”

list-style:decimalになる。
inwidthがscssで指定されているため幅は94%、margin:0 auto。

  • こんにちわいわいこんにちわ
  • こんにちわいわいこんにちわこんにちわいわいこんにちわこんにちわいわいこんにちわ
  • こんにちわいわいこんにちわ
  • こんにちわいわいこんにちわこんにちわいわいこんにちわこんにちわいわいこんにちわこんにちわいわいこんにちわ
使用例

<ul class="decimal">
	<li>こんにちわいわい</li>
	<li>こんにちわ</li>
	<li>こんにちわこんにちわ</li>
</ul>

class=”star”

リストアイテムの左にそれぞれ星が付く。
inwidthがscssで指定されているため幅は94%、margin:0 auto。

  • こんにちわいわいこんにちわ
  • こんにちわいわいこんにちわこんにちわいわいこんにちわこんにちわいわいこんにちわ
  • こんにちわいわいこんにちわ
  • こんにちわいわいこんにちわこんにちわいわいこんにちわこんにちわいわいこんにちわこんにちわいわいこんにちわ
使用例

<ul class="star">
	<li>こんにちわいわい</li>
	<li>こんにちわ</li>
	<li>こんにちわこんにちわ</li>
</ul>

class=”circle”

リストアイテムの左にそれぞれ丸が付く。
inwidthがscssで指定されているため幅は94%、margin:0 auto。

  • こんにちわいわいこんにちわ
  • こんにちわいわいこんにちわこんにちわいわいこんにちわこんにちわいわいこんにちわ
  • こんにちわいわいこんにちわ
  • こんにちわいわいこんにちわこんにちわいわいこんにちわこんにちわいわいこんにちわこんにちわいわいこんにちわ
使用例

<ul class="circle">
	<li>こんにちわいわい</li>
	<li>こんにちわ</li>
	<li>こんにちわこんにちわ</li>
</ul>

class=”checklist”

リストアイテムの左にそれぞれチェックボックスが付く。
inwidthがscssで指定されているため幅は94%、margin:0 auto。

  • こんにちわいわいこんにちわ
  • こんにちわいわいこんにちわこんにちわいわいこんにちわこんにちわいわいこんにちわ
  • こんにちわいわいこんにちわ
  • こんにちわいわいこんにちわこんにちわいわいこんにちわこんにちわいわいこんにちわこんにちわいわいこんにちわ
使用例

<ul class="checklist">
	<li>こんにちわいわい</li>
	<li>こんにちわ</li>
	<li>こんにちわこんにちわ</li>
</ul>

dl class=”square”

dlタグで使用。dtの横に四角が表示される。
inwidthがscssで指定されているため幅は94%、margin:0 auto。

こんにちわ

こんにちわいわいこんにちわこんにちわいわいこんにちわこんにちわいわいこんにちわ

こんばんわ

こんにちわいわいこんにちわ

ごきげんよう

こんにちわいわいこんにちわこんにちわいわいこんにちわこんにちわいわいこんにちわこんにちわいわいこんにちわ

使用例

<dl class="square">
	<dt>こんにちわ</dt>
	<dd>
		<p>
			文章はpタグで囲む
		</p>
	</dd>
</dl>

class=”kome”

注釈に使う用の米印リスト。
inwidthがscssで指定されているため幅は94%、margin:0 auto、padding-bottom:32px。 font-size:0.8emで設定。

  • こんにちわいわいこんにちわ
  • こんにちわいわいこんにちわこんにちわいわいこんにちわこんにちわいわいこんにちわ
  • こんにちわいわいこんにちわ
  • こんにちわいわいこんにちわこんにちわいわいこんにちわこんにちわいわいこんにちわこんにちわいわいこんにちわ
使用例

<ul class="kome">
	<li>こんにちわいわい</li>
	<li>こんにちわ</li>
	<li>こんにちわこんにちわ</li>
</ul>

class=”face-smile/face-sad”

喜びアイコンと悲しみアイコンのリスト
inwidthがscssで指定されているため幅は94%、margin:0 auto。

class=”face-smile”
  • こんにちわいわいこんにちわ
  • こんにちわいわいこんにちわこんにちわいわいこんにちわこんにちわいわいこんにちわ
  • こんにちわいわいこんにちわ
  • こんにちわいわいこんにちわこんにちわいわいこんにちわこんにちわいわいこんにちわこんにちわいわいこんにちわ
class=”face-sad”
  • こんにちわいわいこんにちわ
  • こんにちわいわいこんにちわこんにちわいわいこんにちわこんにちわいわいこんにちわ
  • こんにちわいわいこんにちわ
  • こんにちわいわいこんにちわこんにちわいわいこんにちわこんにちわいわいこんにちわこんにちわいわいこんにちわ
使用例

<ul class="face-smile/face-sad">
	<li>こんにちわいわい</li>
	<li>こんにちわ</li>
	<li>こんにちわこんにちわ</li>
</ul>

class=”hanalist”

リストアイテムに花丸のアイコンが付く。
inwidthがscssで指定されているため幅は94%、margin:0 auto。

  • こんにちわいわいこんにちわ
  • こんにちわいわいこんにちわこんにちわいわいこんにちわこんにちわいわいこんにちわ
  • こんにちわいわいこんにちわ
  • こんにちわいわいこんにちわこんにちわいわいこんにちわこんにちわいわいこんにちわこんにちわいわいこんにちわ
使用例

<ul class="hanalist">
	<li>こんにちわいわい</li>
	<li>こんにちわ</li>
	<li>こんにちわこんにちわ</li>
</ul>

class=”list-arrow”

リストアイテムの下にarrow_dが付く。
inwidthがscssで指定されているため幅は94%、margin:0 auto。

  • こんにちわいわいこんにちわ

  • こんにちわいわいこんにちわこんにちわいわいこんにちわこんにちわいわいこんにちわ

  • こんにちわいわいこんにちわ

  • こんにちわいわいこんにちわこんにちわいわいこんにちわこんにちわいわいこんにちわこんにちわいわいこんにちわ

使用例

<ul class="list-arrow">
	<li>
		<p>
			リストの中はpタグで文章を書く
		</p>
	</li>
	<li>
		<p>
			リストの中はpタグで文章を書く
		</p>
	</li>
	<li>
		<p>
			リストの中はpタグで文章を書く
		</p>
	</li>
	<li>
		<p>
			リストの中はpタグで文章を書く
		</p>
	</li>
</ul>
ページトップへ