HTML個人講座5日目
タイトル
こんにちはcairnです。
なんとか順調に続いている『HTML個人講座』
5日目の今日は『リスト』を作成していきます。
リストとは目次のことになります。
では早速・・・
まずは『サイドバー』の部分に組み込んでいきたいと思います。
昨日までに作成した物の
<div id="saidebaar"><nav>○○</nav><div>
の○○の部分に挟んでいきます。
使用するタグは
<ul></ul>
です。
<ul>
Diary
gallery01
gallery02
gallery03
</ul>
と入力すると
ウェブページには
Diary
gallery01
gallery02
gallery03
このように表示されます。
ここからは応用編？になります。
例えば行頭に『・』を付けたい場合は
<li></li>
を使用します。
<ul>
Diary
<li>gallery01</li>
<li>gallery02</li>
<li>gallery03</li>
</ul>
すると
ウェブページには
Diary
・gallery01
・gallery02
・gallery03
このように表示されます。
続いて箇条書きの階層を増やしたい場合は
<ul>
Diary
<li>gallery01</li>
<ul>
<li>frower</li>
<li>dog</li>
</ul>
<li>gallery02</li>
<li>gallery03</li>
</ul>
すると
ウェブページには
Diary
・gallery01
・frower
・dog
・gallery02
・gallery03
このように表示されます。
<ul></ul>の間に<ul></ul>を入れることによって階層が増える仕組みですね。
あとは箇条書きの『・』を数字にする方法です。
使用するタグは
<ol></ol>です。
<ol>
Diary
<li>gallery01</li>
<ul>
<li>frower</li>
<li>dog</li>
</ul>
<li>gallery02</li>
<li>gallery03</li>
</ol>
すると
ウェブページには
Diary
1gallery01
1frower
2dog
2gallery02
3gallery03
このように表示されます。
<ul></ul>を<ol></ol>に置き換えるだけです。
これはどの部分でも同じように使用できるので下の階層の
<ul>
<li>frower</li>
<li>dog</li>
</ul>
を
<ol>
<li>frower</li>
<li>dog</li>
</ol>
このようにすれば『・』が数字に変わります。
今日はここまでです( ´∀｀ )
