無題ドキュメント


●区切り線をつくってみよう　 ●いろいろな区切り線

	日記のページ、もうちょっとはっきり区別できるようにしたいなぁ。
	じゃあ、日にちごとに区切り線を入れてみようか。

<hr>タグで、画面上に水平線を引くことができます。線の前後では必ず改行されます。

普通の水平線 <hr>

（上のタグを表示させると・・・）

普通の水平線

<hr>で線を入れて・・・・。

<html>
<head>
<title>ノリコの日記</title>
</head>
<body bgcolor="#FFCCCC">
 
 
<center>
★日記★
</center>
 
<hr>
 
<img src="ran.gif" align="left">○月○日（月曜日）<img src="hare.gif" width="30" height="30" align="middle"> 
今日はうちの犬、ゴン太のお見合いをした。相手はご近所のランちゃん。 
とってもかわいい犬なので、もし上手く行ったら、きっとかわいい子犬がいっぱい生まれるんだろうな。 
 
 
 
 
 
 
<hr>
 
<img src="manga.gif" align="right">○月○日（火曜日）<img src="ame.gif" width="30" height="30" align="middle"> 
今日は雨が降ってゆううつだったので、乙女ちっくに読書なんかしてみた。 
でもマンガだけどね。一気に3冊読んじゃった。早く続きが読みたいな。 
 
 
 
 
 
 
<hr>
 
<img src="cyusya.gif" align="left">○月○日（水曜日）<img src="kumori.gif" width="30" height="30" align="middle"> 
風邪をひいた。熱が37度8分あった。昨日薄着でマンガ読んでたからかなぁ？ 
病院に行って注射した。痛かった～！でもおかげで今は熱も下がって、ご飯もいっぱい食べれたよ。
</body>
</html>

（上のタグを表示させると・・・↓クリックしてみよう）

	これで見やすくなったかな？
	うん。バッチリだね。

	この線の幅は変えられないの？
	変えられるよ。いろいろ種類もあるんだ。

区切り線にもいろいろあります。影の有無、太さ、幅、色などを指定できます。<hr>タグの中に、「noshade（影無し）」「size（太さ）」「width（幅）」「 align（位置）」「 color（色）」の属性を指定します。

影のないシンプルな水平線 <hr noshade>
太さ8ピクセルの水平線 <hr size=8>
ウィンドウ幅の70％の長さの水平線 <hr width=70%>
200ピクセルの長さの水平線 <hr width=200>
左揃えの水平線 <hr width=50% align="left">
右揃えの水平線 <hr width=50% align="right">
青色の水平線 <hr color="#000FF">

（上のタグを表示させると・・・）

影のないシンプルな水平線

太さ8ピクセルの水平線

ウィンドウ幅の70％の長さの水平線

200ピクセルの長さの水平線

左揃えの水平線

右揃えの水平線

青色の水平線　　

じゃ、色を付けて完成！
　
　

<html>
<head>
<title>ノリコの日記</title>
</head>
<body bgcolor="#FFCCCC">
 
 
<center>
★日記★
</center>
 
<hr color="#FF0000">
 
<img src="ran.gif" align="left">○月○日（月曜日）<img src="hare.gif" width="30" height="30" align="middle"> 
今日はうちの犬、ゴン太のお見合いをした。相手はご近所のランちゃん。 
とってもかわいい犬なので、もし上手く行ったら、きっとかわいい子犬がいっぱい生まれるんだろうな。 
 
 
 
 
 
 
<hr color="#FF0000">
 
<img src="manga.gif" align="right">○月○日（火曜日）<img src="ame.gif" width="30" height="30" align="middle"> 
今日は雨が降ってゆううつだったので、乙女ちっくに読書なんかしてみた。 
でもマンガだけどね。一気に3冊読んじゃった。早く続きが読みたいな。 
 
 
 
 
 
 
<hr color="#FF0000">
 
<img src="cyusya.gif" align="left">○月○日（水曜日）<img src="kumori.gif" width="30" height="30" align="middle"> 
風邪をひいた。熱が37度8分あった。昨日薄着でマンガ読んでたからかなぁ？ 
病院に行って注射した。痛かった～！でもおかげで今は熱も下がって、ご飯もいっぱい食べれたよ。
</body>
</html>

※よくわからない人は「5.いよいよ作ってみよう」の時と同じ要領で、上のノリコの書いたHTMLをコピーして「ワープロソフト」にペーストし、内容を自分に合わせて書き換えてみましょう。わかってきた人は、ノリコの例を参考に、自分でHTMLを打ってみましょう。

（上のタグを表示させると・・・↓クリックしてみよう）