ホームページのつくりかた・１０．リスト

★　１０．ぶんを　みやすく（２）　★

　　　　リストを　つくってみよう　　　　

………………………………………………………………………………………
リストって？
もじや　ぶんを　みやすいように、
すうじや　きごうをつけて　ならべたものです。
………………………………………………………………………………………

１．「さいしょのさいしょ」でつくった「file1.html」に、
したの　ふともじでかいてある　きごう（タグ）をかいてみてね。
（はいいろのところは「file1.html」でつくったものなので、かかなくていいです）

<HTML>
<HEAD>
<TITLE>　はじめてのホームページ　</TITLE>
</HEAD>
<BODY>
こんにちは。
<UL>
<LI>りんご
<LI>みかん
<LI>いちご
<LI>もも
</UL>
</BODY>
</HTML>

　ブラウザでみてみると…？（「みてみよう」ボタンをおしてね）

みてみよう！

「りんご」「みかん」「いちご」「もも」のまえに　それぞれ「・」がついていますね。

●・　せつめい　・●

<UL></UL>
このタグで　はさまれた　もじや　ぶんが、リストになります。
<LI>
リストのなかの　ひとつひとつの　なかみです。「こうもく」といいます。

………………………………………………………………………………………
こうもくの　まえにつく、「・」のかたちや　いろを
かえることが　できます。
………………………………………………………………………………………

みてみよう！

これは、すこしのタグを　かきたすだけで　できます。

さっきかいたつづきに、したのきごう（タグ）をかいてみてね。
（はいいろのところは上でつくったものなので、かかなくていいです）

<HTML>
<HEAD>
<TITLE>　はじめてのホームページ　</TITLE>
</HEAD>
<BODY>
こんにちは。
<UL>
<LI>りんご
<LI TYPE="disk">みかん
<LI TYPE="circle">いちご
<LI TYPE="square">もも
</UL>
</BODY>
</HTML>

●・　せつめい　・●

TYPE="disk"
こうもくの　まえにつく　マークを、くろい　まるにする　めいれいです。
TYPE="circle"
マークを、しろい　まるにする　めいれいです。
TYPE="square"
マークを、しかくにする　めいれいです。
このタグは　<LI と >のあいだに　つかうと、ひとつひとつの　こうもくの　マークを　かえることができて、
<UL と >のあいだに　つかうと、リストぜんたいの　マークを　かえられます。

　 ばんごうつきの　リストを　つくってみよう　

こんどは、こうもくの　まえに、すうじ（ばんごう）が　ついた　リストを　つくってみよう。（「みてみよう」ボタンをおしてね）

みてみよう！

さっきかいたファイルを、したのふともじのところだけ　すこしかえてみてね。

<HTML>
<HEAD>
<TITLE>　はじめてのホームページ　</TITLE>
</HEAD>
<BODY>
こんにちは。
<OL>
<LI>りんご
<LI>みかん
<LI>いちご
<LI>もも
</OL>
</BODY>
</HTML>

●・　せつめい　・●

<OL></OL>
リストの　こうもくの　まえに、ばんごうをつけなさい、という　めいれいです。

………………………………………………………………………………………
この　リストの　ばんごうも、
１からではなく、すきなばんごうに　かえることが　できます。
………………………………………………………………………………………

たとえば、１０ばんから　リストを　はじめたりも　できます。

みてみよう！

さっきかいたつづきに、したのきごう（タグ）をかいてみてね。
（はいいろのところは上でつくったものなので、かかなくていいです）

<HTML>
<HEAD>
<TITLE>　はじめてのホームページ　</TITLE>
</HEAD>
<BODY>
こんにちは。
<OL START="10">
<LI>りんご
<LI>みかん
<LI>いちご
<LI>もも
</OL>
</BODY>
</HTML>

●・　せつめい　・●

START="～"
リストのばんごうを、～からにしなさい、という　めいれいです。

………………………………………………………………………………………
リストの　ばんごうを、「a,b,c…」や、「Ⅰ、Ⅱ、Ⅲ…」などに　することも　できます。
………………………………………………………………………………………

　リストの　ばんごうを　かえるには、「・」のかたちを　かえるめいれいと　おなじTYPE=～ 　をつかいます。
たとえば、さっきのファイルの、<OL>の <OLと>のあいだに、 TYPE="a" と　いれてみると…(<OL TYPE="a" >)

みてみよう！

リストのマークが、「a,b,c…」になりました。
マークを「Ⅰ、Ⅱ、Ⅲ…」にしたいときは、TYPE="Ⅰ" と　かきます。

　　リストで　せつめいしてみよう　

ある、ことばのしたに、そのことばの　せつめいを　かくことが　できます。（「みてみよう」ボタンをおしてね）

みてみよう！

さっきかいたファイルを、したのように　かきかえてね。
<UL>のかわりに<DL>を、
<LI>のかわりに<DT>や <DD>をかいてね。

<HTML>
<HEAD>
<TITLE>　はじめてのホームページ　</TITLE>
</HEAD>
<BODY>
こんにちは。
<DL>
<DT>りんご
<DD>あかくて　まるい　くだもの
<DT>みかん
<DD>オレンジいろで　まるい　くだもの
</DL>
</BODY>
</HTML>

●・　せつめい　・●

DL
このタグで　はさまれた　もじや　ぶんが、せつめいのリスト（ていぎリスト　といいます）に　なります。
DT
せつめいされる　ことばや　ぶんを　あらわします。
DD
せつめいです。

もうすこし　おにいさん、おねえさんのためのまとめです。

　タグのいろいろ(8)
　　ミュージックタグ

<UL></UL>	→リストの作成
<LI>	→項目
TYPE="～"	→項目のまえにつくマークの指定　<UL>および<LI>と共に用いられたとき　　disk＝黒丸　　circle＝白丸　　square＝四角　<OL></OL>と共に用いられたとき　　a＝アルファベット小文字の連番　　A＝アルファベット大文字の連番　　Ⅰ＝ローマ数字の連番　　i＝ローマ数字小文字の連番
<OL></OL>	→番号つきリストの作成
START="～"	→リストの開始番号の指定
<DL></DL>	→定義リストの作成
<LI>	→項目
TYPE="～"	→項目に対する説明

まえへ一つもどるつぎをよむつぎへ