FujiMan Production - ウェブマスター -
ホームページ制作講座 for Windows
リスト
トップページウェブマスターホームページ制作講座>リスト

戻る 次へ
■改行


 まずは、右の「sample11.html」を試してみて下さい。(私の手がけるサイトばかりで恐縮ですが・・・^^;)

sample11.html
<HTML>
<BODY BACKGROUND="lightpnk.gif">
<FONT COLOR=CHOCOLATE SIZE=6>
<B><I>FujiMan Production</I>のホームページ</B>
</FONT>
<B>お気に入りサイト・ベスト3</B>
俳優・阿南健治ホームページ
FujiMan Production
中国労災病院
</BODY>
</HTML>
 これは「sample10.html」に赤字の部分を書き加えたものですが、意図した結果になりませんでしたね。(^^)

 そうです。HTML文書上で行を変えて(改行して)書いても、ブラウザ上では繋がった文字列になってしまうんです。

 HTML文書は「ブラウザに対しての指示書」と説明しましたが、行を変える・・・つまり、「改行する」という指示が記述されなかったために、 このような結果になったんです。

sample12.html
<HTML>
<BODY BACKGROUND="lightpnk.gif">
<FONT COLOR=CHOCOLATE SIZE=6>
<B><I>FujiMan Production</I>のホームページ</B><BR><BR>
</FONT>
<B>お気に入りサイト・ベスト3</B><BR><BR>
俳優・阿南健治ホームページ<BR>
FujiMan Production<BR>
中国労災病院
<BR>
</BODY>
</HTML>
 改行するためには、<BR>タグを使います。このタグには終了タグがなく単独で使います。
 「sample12.html」のように<BR>タグを書き加えてみましょう。

 ちょっと面倒なようですが、結構多用するタグですので慣れれば問題なく使えるでしょう。

■リスト


 サンプルのような箇条書きのものならリストタグが利用できます。

sample13.html
<HTML>
<BODY BACKGROUND="lightpnk.gif">
<FONT COLOR=CHOCOLATE SIZE=6>
<B><I>FujiMan Production</I>のホームページ</B><BR><BR>
</FONT>
<B>お気に入りサイト・ベスト3</B><BR><BR>
<UL>
<LI>俳優・阿南健治ホームページ
<LI>FujiMan Production
<LI>中国労災病院

</UL>
</BODY>
</HTML>
 箇条書き・・・リストにしたい部分を赤字のように<UL>〜</UL>で囲みます。

 それぞれの項目の頭に<LI>を付ければOKです。こうすれば、改行タグ(<BR>)は要りません。

 どうでしょう?・・・らしくなりませんか。(^^;

 <UL>〜</UL>を<OL>〜</OL>に変えると 「番号つきリスト」になります。試してみて下さい。

■定義型リスト


 「お気に入りサイト」の紹介ということで、折角ですからホームページ・アドレス(URL)を載せましょう。 こういう場合は「定義型リスト」を利用すると便利です。

sample14.html
<HTML>
<BODY BACKGROUND="lightpnk.gif">
<FONT COLOR=CHOCOLATE SIZE=6>
<B><I>FujiMan Production</I>のホームページ</B><BR><BR>
</FONT>
<B>お気に入りサイト・ベスト3</B><BR><BR>
<DL>
<DT>俳優・阿南健治ホームページ
<DD>https://homepage1.nifty.com/anannoken/
<DT>FujiMan Production
<DD>https://FujiMan.net
<DT>中国労災病院
<DD>https://www.chugokuh.rofuku.go.jp/
</DL>
</BODY>
</HTML>
 定義型リストにする場合は、<DL>〜</DL>を使います。

 よく見てくださいね。それぞれの項目が「定義文(<DT>)」と「その解釈文(<DD>)」のふたつの部分から成っていますね。

これが「定義型リスト」です。

 「定義文」を太字(<B>〜</B>)にするとか、文字の色を変えるとか、いままで説明したタグを使ってメリハリを付けると、もっと見やすい感じになると思います。

 語句の説明とか、自己紹介(プロフィール)とか、書籍や音楽の紹介、などなどと、いろいろに利用できそうですね。


戻る 次へ

<-RETURN Copyright(c) 2001 FujiMan Production All Rights Reserved