初心者HTML講座：リストのolタグ

本の目次などのように項目をわかりやすいように並べるのが、リストタグだ！　今回説明する『olタグ』は項目の頭に番号がつきます！ 使い方は『ulタグ』と同じです！　

　・番号をつけられるリストタグ
　 <ol><li>テキストや画像</li></li></ol>

では、やってみましょう！こんな風に表示されますよ。

  1. その１
  2. その２
  3. その３

<ol>
<li>その１</li>
<li>その２</li>
<li>その３</li>
</ol>
ソースはこのようになっています。

『１，２，３』の番号のほかにも色々あるので、表にしてまとめて紹介いたします！

　　　 　　　　　
タグ プロパティ 値 表示説明
ol type 1 1,2,3,・・・（初期設定）
a a,b,c,・・・
A A,B,C・・・
i ⅰ,ⅱ,ⅲ,・・・
Ⅰ Ⅰ,Ⅱ,Ⅲ,・・・
start 変更 最初の番号を変える
li type 1 1,2,3,・・・（初期設定）
a a,b,c,・・・
A A,B,C・・・
i ⅰ,ⅱ,ⅲ,・・・
I Ⅰ,Ⅱ,Ⅲ,・・・
value 変更 途中で番号を変える

結構種類豊富ですね。　では、どのように使うかを見ていきましょう。

    　
  1. その１
    2. 　
  2. その２
    3. 　
  3. その３

<ol type="a">
　 <li>その１</li>
　 <li>その２</li>
　 <li>その３</li>
</ol>
『type』を入れると番号がアルファベットに変わりました。今度は『start』を使って、最初の番号を変えてみましょう！

    　
  1. その１
    2. 　
  2. その２
    3. 　
  3. その３
    4. 　
  4. その４
    5. 　
  5. その５

<ol start="4">
　 <li>その１</li>
　 <li>その２</li>
　 <li>その３</li>
　 <li>その４</li>
　 <li>その５</li>
</ol>
意味もなく『4』から始めてみました。このように数字の途中からもリストをつくることが可能です！

では『li』に『type』を使ってみてはどうでしょうか。

    　
  1. その１
    2. 　
  2. その２
    3. 　
  3. その３
    4. 　
  4. その４
    5. 　
  5. その５

<ol>
　 <li type="1">その１</li>
　 <li type="a">その２</li>
　 <li type="A">その３</li>
　 <li type="i">その４</li>
　 <li type="I">その５</li>
</ol>
ソースコードはこのようになります。こんなにめちゃくちゃにやることもないと思いますが……何かに使えそうですね。(何に使えるか全然思い浮かばないけど、使っている人って皆無じゃないかと本音では思う)

HTMLタグのよくある間違い！

HTMLタグは必ず半角英数字で入力してください。

　HTMLタグはコピー・貼り付けでも大丈夫です。しかし、サイズ・カラーコード・アドレスなどの数字や文字を入力する場合に半角英数字以外の文字で入力すると正しく表示されないことやおかしな表示になることがあります(ほぼ表示されないと思います)

HTMLタグを入力する際は半角英数字ですが大文字と小文字の区別は特に気にしなくてもいいようです。

HTMLタグには開始タグと終了タグがあります。
例えば、<Font Size="1～7">～</Font>　最初の<Font Size="1～7">が開始タグといいます。後の/スラッシュが付いた</Font>が終了タグになります。　終了タグを入れ忘れた場合ページのレイアウトが崩れることがあり、さっきまで崩れていなかったのに突然崩れたって言う場合は終了タグが無くなったことを疑いましょう！

他にも、HTMLタグの『<>←カッコ』、『"←ダブル クォーテーション』やHTMLタグ内の記号・文字・数字などを消したり、スペースを空けたり・くっつけたり、改行したりするとブラウザがHTMLタグを正しく認識しないので注意して下さいね。

HTMLタグを複数使う場合。
例えば、
<u><font color="#FF0000">初心者講座</font></u>→初心者講座
これを開始タグ(又は終了タグ)の位置を入れ替えてみると正しく表示されません。試してみましょう。

<font color="#FF0000"><u>初心者講座</font></u>→初心者講座
『uタグ』の開始タグが外側なら、終了タグも外側でなければいけません。どのタグにも当てはまるので、気をつけましょう！(管理人のブラウザでは普通に表示されていますが、あなたはどうですか。表示されても間違いは間違いなので、気をつけてくださいね)

終了タグが抜けてしまってるなどが原因で思うようにブラウザに表示されないということがよくあるので、もう一度よく見直しみましょう！

HTMLタグは最初は見なれない文字や記号が多いので勉強し始めは意味が解らないと思います。でも、続けていくうちに読めるようになります。　あきらめずに少しずつ勉強していきましょうね！