 早速作ってみましょう（No3)・・・背景を工夫する |
| ■ |
背景の色を変えてみよう |
|
背景のデフォルトは（何も指定しないとき）白色です。背景を変えるには、色を指定して変える方法と、画像を使って変える方法があります。 |
|
<BODY BGCOLOR="#FF0000"></BODY>
背景が赤くなります
<BODY BGCOLOR=RED></BODY>
背景が赤くなります |
Tagは#FF0000で書いてもREDと書いても、同じ様に背景が赤色になります |
|
背景が赤くなります 背景が青くなります
|
|
|
| ■ |
背景に画像を使って見ましょう |
|
<BODY BACKGROUND="greybkg.gif"></BODY>
背景がグレーの画像になります。 |
背景画像は、サイズの小さいものほど背景のきめが細かくなります。フリーの素材が沢山あるので探してみると良いでしょう |
|
|
| ■ |
表を作ってみよう |
|
表をつくるには、外・・<TABLE></TABLE> 中・・<TR></TR> 中の中・・・<TD></TD>というタグを使います。すべて入れ子になることが大切です。<TBODY> |
|
<TABLE>
<TR>・・・・・・・・・・・・・１行目
<TD>A</TD>・・・・・・・・・・１列目
<TD>B</TD>・・・・・・・・・・２列目
<TD>C</TD>・・・・・・・・・・３列目
</TR>。。。。。。。。。１行目の終わり
<TR>
<TD>1</TD>
<TD>2</TD>
<TD>3</TD>
</TR>
<TR>
<TD>あ</TD>
<TD>い</TD>
<TD>う</TD>
</TR>
</TABLE> |
<TABLE>で一番外の枠を設定します次の<TR>で行を設定します、<TD>で列を設定します
<TABLE ALIGN="left" BORDER="1" CELLSPACING="3" CELLPADDING="3" WIDTH="10" HEIGHT="5" BGCOLOR="blue" BORDERCOLOR="green">
ALIGN=テーブル自体の位置
BORDER=枠線の太さ
CELLSPACING=セル間のスペース
CELLPADDING=セルと罫のスペース
WIDTH=枠の幅 HEIGHT=枠の高さ
BGCOLOR=枠内の背景色
BORDERCOLOR=枠線の色
など細かく設定できます。 |
|
|
| ■ |
フレームで画面を区切ってみよう |
|
画面を左右に区切る |
|
<FRAMESET cols="30%,70%">
<FRAME src="left.html">
<FRAME src="right.html">
</FRAMESET>
このファイルを frame.html という名前で保存し、
frame.html を開くとフレームで切られたページが表現されます。 |
<FRAMESET COLS=横方面に区切ります
％もしくはピクセルで設定
COLS=20%,* または＝250,* などと設定
FRAMEBORDER="no"・・境目を表示しない
BORDERCOLOR="blue"・・・境目の色
FRAMESPACING="3">
</FRAMESET>
<HTML>
|
|
(境目あり) （境目なし）
|
| ■ |
フレーム画面からのリンクを考える |
|
フレーム画面からのリンクは、頭の中を少し整理する必要があります。どこにリンクを飛ばすのかを良く考えてＴａｇ文を書き込まなくてはなりません。ポイントは、フレーム個々の名前と飛ばす先（ターゲット）です。 |
|
<FRAMESET cols="30%,70%">
<FRAME src="left.html" name="hidari">
<FRAME src="right.html" name="migii">
</FRAMESET>
①<A href="link1.html" target="migii">
リンク１</A>
|
left.htmlが hidariという名前です
right.htmlが migiiという名前です
①の場合、右のフレームに link1.htmlをリンク表示させます。
|
|
|
| ■ |
target タグを覚えておきましょう |
|
_top・・・・・・・・・フレームをやめて、全体にページを表示する。
_self・・・・・・・・・同じフレームに表示する。
_blank・・・・・・・新しいウインドウを開いて表示する。
_parent・・・・・・リンク元のフレームの親フレームに表示する。 |
|
|
|
|