「ul,ol,liタグ」の使い方とhtml5,slimでの記述方法

ulタグ

• ブロック要素
• 入れ子にできるのはliタグだけ
• Unordered List(アンオーダードリスト)の略
• 順番がないリストを表示させたい時に使う
• リストの各項目はliタグで記述する
• 表示されたhtmlは先頭に「・」(黒丸)が付く
• type属性をつけることで黒丸以外に白丸、黒い四角にすることができる

<ul>
	<li>こぶた</li>
	<li>たぬき</li>
	<li>キツネ</li>
</ul>
<ul type="disc">
	<li>ネズミ</li>
	<li>みなしごはっち</li>
	<li>チワワ</li>
</ul>
<ul type="circle">
	<li>ワニ</li>
	<li>ニタリクジラ</li>
	<li>ラマ</li>
</ul>
<ul type="squea">
	<li>マントヒヒ</li>
	<li>ヒツジ</li>
	<li>ジャイアントパンダ</li>
</ul>

ul
	li こぶた
	li たぬき
	li キツネ
ul type="a"
	li
		| ネズミ
	li
		| みなしごはっち
	li
		| チワワ
		| ワニ
		br
		| ニタリクジラ

slimでは、

1. liタグのあとに半角スペースを１つ空けて項目を記述する
2. liタグのあとに改行、インデントしてから「|」と半角スペースを一つ空けてから項目を記述する

上記の2つの方法で記述することができるが、２行以上になる場合やliタグ内で改行したい場合は後者の記述方法を使う 編集、修正のときの手間と可読性を考えると後者で記述するほうがおすすめ(＾ω＾)

olタグ

• 入れ子に出来るのはliタグだけ
• ブロック要素
• Ordered List(オーダドリスト)の略
• 順番があるリストを表示させたい時に使う
• リストの各項目はliタグで記述する
• 表示されたhtmlは先頭に「1、2、3...」(算用数字)が付く
• type属性をつけることで算用数字以外にアルファベットの小文字、大文字、ローマ数字の小文字、大文字をつけることができる

<ol>
	<li>お問い合わせ</li>
	<li>プランのご提案</li>
	<li>ご注文の確定</li>
</ol>
<ol type="a">
	<li>お問い合わせ</li>
	<li>プランのご提案</li>
	<li>ご注文の確定</li>
</ol>

<ol type="A">
	<li>お問い合わせ</li>
	<li>プランのご提案</li>
	<li>ご注文の確定</li>
</ol>

<ol type="i">
	<li>お問い合わせ</li>
	<li>プランのご提案</li>
	<li>ご注文の確定</li>
</ol>

<ol type="I">
	<li>お問い合わせ</li>
	<li>プランのご提案</li>
	<li>ご注文の確定</li>
</ol>

ol
	li
		| お問い合わせ
	li
		| プランのご提案
	li
		| ご注文の確定
ol type="a"
	li
		| お問い合わせ
	li
		| プランのご提案
	li
		| ご注文の確定

liタグ

• ブロック要素
• どんな要素も入れ子できる
• List Item(リストアイテム)の略
• リストの項目を記述する時に使う
• ulタグとolタグの中でだけ使える

<ul>
	<li>シーズー</li>
	<li>プードル
		<ul>
			<li>スタンダードプードル</li>
			<li>ジャイアントプードル</li>
			<li>トイプードル</li>
			<li>ティーカッププードル</li>
		</ul>
	</li>
	<li>柴犬</li>
</ul>
<ul>
	<li><a href="http://www.animal-planet.jp/dogguide/directory/dir09500.html">マルチーズ</a></li>
	<li><p>ミニチュアシュナウザー</p></li>
	<li><img src="hogehoge.png"></li>
</ul>

ul
	li
		| シーズー
	li
		| プードル
		ul
			li
				| スタンダードプードル
			li
				| ジャイアントプードル
			li
				| トイプードル
			li
				| ティーカッププードル
	li
		| 柴犬
ul
	li
		a href="http://www.animal-planet.jp/dogguide/directory/dir09500.html" マルチーズ
	li
		p
			| ミニチュアシュナウザー
	li
		img src="hogehoge.png"