Lesson3〜タグ(画面)〜


タグ(画面)
 ここでは、画面に関するタグについて説明していきます。下のタグを参考にいろいろとホームページの画面をアレンジしてみてください。

1.背景に色をつける
2.基本となる文字の色を決める
3.部分的に文字に色をつける
4.背景画像を指定する
5.横線を引く
6.マージンを指定する


1.背景に色をつける
 <body bgcolor="*">〜</body>

 <body>タグに bgcolor="*"を追加すると背景に色をつけることができます。
 *には16進数による色指定をするか、直接色指定をします。くわしくは、こちらを参照。

<html>
<head>
</head>
<body bgcolor="#ff0000">

</body>
</html>
  ⇒サンプル


2.基本となる文字の色を決める
 <body text="*">〜</body>:一般的な文字の色の指定
 <body link="*">〜</body>:リンクを指定する文字の色の指定
 <body alink="*">〜</body>:リンクをクリックした時の色の指定
 <body vlink="*">〜</body>:一度クリックしたことのあるリンクの色の指定

 <body>タグに上記のタグをを追加すると基本となる文字の色を決めることができます。
 *には16進数による色指定をするか、直接色指定をします。くわしくは、こちらを参照。

<html>
<head>
</head>
<body text="#ff0000" link="#00ff00" alink=
"#0000ff" vlink="#00fffff"> 一般の文字は赤で表示されます。<br> <a href="hp3-2a.html"> リンクは、緑で表示です。(クリックして)</a><br> ↑をクリックすると、リンクが青になります。<br> また、このページに戻ってくると、↑は、水色で表示さ れます。<br> </body> </html>
  ⇒サンプル
※<br>タグは、改行をするというタグです。Lesson5を参照。
※<a>タグは、リンクするというタグです。Lesson6を参照。


3.部分的に文字に色をつける
 <font color="*">〜</font>

 前項では、基本となる文字の色を指定するタグを紹介しましたが、
 <font>タグを使うことによって、部分的に文字の色を指定することができます。
 *には16進数による色指定をするか、直接色指定をします。くわしくは、こちらを参照。

<html>
<head>
</head>
<body>

<font color="#ff0000">赤</font>
<font color="#00ff00">緑</font>
<font color="#0000ff">青</font>
<font color=black>
など、様々な色が指定できます。</font>

</body>
</html>
  ⇒サンプル


4.背景画像を指定する
 <body background="*">〜</body>

 上記のタグを使うことによって、背景に画像を指定することができます。
 画像は、敷き詰められるように表示されます。
 *には画像のファイル名(URL)を指定します。

 また、<body>タグにbgproperties=fixedと指定することで、背景を固定することができます。
 背景を固定した場合、画面をスクロールさせても背景が動かず、立体感?が生まれます。
 ただし、ネットスケープではつかえません。

<html>
<head>
</head>
<body background="hp3-4.gif">

</body>
</html>
  ↓を背景にします。
 

 ⇒サンプル


5.横線を引く
 <hr>:基本の横線
 <hr size="*">:線の太さを指定
 <hr width="*">:線の長さを指定
 <hr align="◇">:線の位置を指定
 <hr noshade>:影の無い横線
 <hr color="◆">:色のついた横線

 上記のタグを使うことによって、さまざまな横線を引くことができます。
 *にはピクセル数を指定。
 ◇にはleft,center,rightのいづれか。
 ◆には16進数による色指定をするか、直接色指定。くわしくは、こちらを参照。

<html>
<head>
</head>
<body>

↓基本の横線
<hr>
↓太さ12ピクセルの横線
<hr size="12">
↓長さ150ピクセルの横線
<hr width="150">
↓長さ50%で右寄せの横線
<hr width="50%" align="right">
↓影の無い横線
<hr noshade>
↓青色の横線
<hr color="blue">
↓太さ8ピクセルで長さ70%、右寄せの赤色、
影なしの横線(応用)
<hr size="8" width="70%" align="right"
 noshade color="red">

</body>
</html>
 ⇒サンプル


6.マージンを指定する
 <body leftmargin="*">〜</body>:画面の左側にスペースをあける。
 <body topmargin="*">〜</body>:画面の上にスペースをあける。

 上記のタグを使うことによって、画面の上、または、左側にスペースをあけることができます。
 このようなマージンを指定することで、ページが見やすくなり、美しくなります。
 *にはピクセル数を指定します。

<html>
<head>
</head>
<body leftmargin="30" topmargin="50">

↑がトップマージン!!スペースがあいてますね!!<br>
←がレフトマージン!!こっちも、スペースがあいてますね。

</body>
</html>
 ⇒サンプル
※<br>タグは、改行をするというタグです。Lesson5を参照。



⇒⇒Lesson4