（更新日：99/05/21)

さものタグ教室

「タグ教室　初級編」から「タグ教室」へ名前を変更しました。
理由・・・中級編、上級編の部屋が出来る見通しがないため(^^;)

スピッツベルゲンのホームページをご利用のみなさまへ・・・・

１９９９／５／２０をもちまして、チェリーハイツがリニューアルされ、
チェリー団地に変わりました。
リニューアルに伴い、団地の玄関と部屋でタグが使用できなくなりました。
複雑なタグを多様することによってサーバーに負荷がからるためと思われます。
いつの日か、タグのカキコが可能になる日が来るかもしれませんので
その日に備えて勉強して下さいね(^^;)

まずは、基礎知識

「タグ」とは
 HTMLとは
 HTMLファイル構造

いろいろなタグ

文字色
 大きさ
 書体
 太字
 斜体
 下線
 上付き文字
 下付き文字
 点滅
 改行
 特殊文字
 区切り線
 文字スクロール
 背景に色をつける
 他のホームページへLINK
テーブル
 入力フォーム
 裏技
 あとがき

【まずは、基礎知識】

「タグ(Tag)」とは　　　　

HTMLファイルを構成する文字等の属性を定義するものです。
タグは　<　>　で囲みます。
基本的には、タグには「開始タグ」と「終了タグ」があり、終了タグには文字の先頭に　/　が付いています。（</font>のように）
例えば、「あいうえお」という文字を太字で表示させる場合は以下の様になります。

　　例　　
　　　　　<b>あいうえお</b>　　　　　　　　　　　　　　　　　　　→　あいうえお　
　　　　　<b><font color=blue>あいうえお</font></b>　　　→　あいうえお

この場合は開始タグは<b>や<font　color=blue>で、終了タグは</b>や</font>です。
開始タグから終了タグの間に囲まれた文字全てが影響します。

注意点

●終了タグを付け忘れたり、スペルを間違えると、これ以降の文字全てがタグの影響を受けてしまいますので注意して下さい。
　（チェリーハイツ等のチャットでは、誰もが一度は経験してるでしょう(＾＾;)）

●タグは必ず半角で記述してください。　<font>　←ＯＫ（全て半角）　　＜font＞　←ＮＧ（＜＞が全角）　<ｆｏｎｔ>　　←ＮＧ（ｆｏｎｔが全角）

「HTML（Hyper Text Markup Language）」とは・・・・　　　　

WWW（World Wide Web）で使われる文書形式の呼び名です。
普通の文章にタグを付けることによってHTML文になります。
THML文で作成されたファイルはWebブラウザ（ネットスケープやインターネット・エクスプローラ）で
表示させることが出来ます。

HTMLファイル基本構造　　　　

基本的に以下の３つの部分で構成されています。

　　・　HTMLであるということを示す定義

　　　　　　<html>・・・・・・・・・・・・・・</html>

　　・　タイトルや特徴のヘッダ情報の定義（無くても構いません）

　　　　　　<head>・・・・・・・・・・・・・・</head>

　　・　本文

　　　　　　<body>・・・・・・・・・・・・・・</body>

上の３つの構造は以下の様になります。

<html>
　　<head>
　　　　　　ヘッダ情報　　　　
　　</head>
　　<body>
　　　　　　本文
　　</body>
</html>

備考・・・・スピッツファンクラブホームページのチェリーハイツでの部屋の書き込みは、
　　　　　　本文の一部分に書き込んでいることになっています。

【いろいろなタグ】

≪文字色≫　　　　

<font color=xxx>あいうえお</font>

xxxの部分に色を指定します。「blue」「red」のようにカラーネームを指定するか「#ff0000」の様に
赤、緑、青の３原色を１６進で指定する方法があります。

例：あいうえお　を赤くしたい場合

<font color=red>あいうえお</font>　　　　　→　　　　あいうえお
<font color="#ff0000">あいうえお</font>　　→　　　　あいうえお

色パレットで便利なホームページがあるので是非みてください。　→　ここ

色の例・・・・

ネームカラー	表示
ｒed	■
blue	■
yellow	■
white	■
green	■
purple	■
navy	■
gray	■
darkgray	■
slateblue	■
dodgerblue	■
lighteblue	■

ネームカラー	表示
cyan	■
darkgreen	■
wheat	■
chocolate	■
salmon	■
tomato	■
deeppink	■
violet	■
snow	■
black	■
aqua	■
olive	■

ネームカラー	表示
silver	■
skyblue	■
greenyellow	■
lightyellow	■
burlywood	■
sandybrown	■
orange	■
hotpink	■
palevioletred	■
plum	■
lavender	■
lemonchiffon	■

ネームカラー	表示
maroon	■
teal	■
lime	■
aquamarine	■
turquoise	■
lightgreen	■
gold	■
beige	■
tan	■
brown	■
pink	■
mistyrose	■

注意・・・・背景色と同じ色にすると文字が見えなくなるので注意してください。（わざとやる場合もあります）
　　　　　　上記はネームカラーの一部です。もっとたくさんのネームカラーがあります。

≪大きさ≫　　　

<font size=xxx>あいうえお</font>

xxxの部分に　1　から　7　までの数字を入れます。

例

<font size=1>あいうえお</font>　　　→　　　あいうえお
<font size=3>あいうえお</font>　　　→　　　あいうえお
<font size=5>あいうえお</font>　　　→　　　あいうえお
<font size=7>あいうえお</font>　　　→　　　あいうえお

≪書体≫　　　　

<font face="xxx">あいうえお</font>

xxxに書体名を入れます。

例

<font face="ＭＳ明朝">あいうえお</font>　　→　　あいうえお
<font face="ＭＳゴシック">あいうえお</font>　　→　　あいうえお
<font face="ＤＦＰ特太ゴシック体">あいうえお</font>　　→　　あいうえお

注意：パソコン側でサポートされていないフォントを指定すると正しく表示されません。

[補足]

「font」タグは一度に複数の定義が出来ます。

例えば、「あいうえお」という文字を青く大きく表示させる場合は・・・・

<font color=blue size=7>あいうえお</font>　　→　　あいうえお

でいいわけです。下記の記述でもOKですが、短い記述の方がいいですよね。
<font color=blue><font size=7>あいうえお</font></font>　　→　　あいうえお

≪太字≫　　　

<b>あいうえお</b>　　　→　　　あいうえお

≪斜体≫　　　

<i>あいうえお</i>　　　→　　　あいうえお

≪下線≫　　　　

<u>あいうえお</u>　　　→　　　あいうえお

≪上付き文字≫　　　　

ｃｍ<sup>２</sup>　　→　　　ｃｍ^２

≪下付き文字≫　　　

ｃｍ<sub>２</sub>　　→　　　ｃｍ_２

≪点滅≫（ネットスケープのみ）　　　

<blink>あいうえお</blink>　　　→　　あいうえお

≪改行≫　　　

<br>

終了タグは必要ありません。

例

あいう<br>えお　　↓

あいう
えお

≪特殊文字の表示≫　　　

タグ用の文字は表示させようとしても表示できません。ブラウザ上で「<あいうえお>」と表示させようとしても
<>はタグの囲み文字として判断されてしまうからです。
それらの文字をタグ用の文字ではなく単に文字として表示させる場合は以下の様にします。

"　は　　"　と記述します
&　は　　&amp:　と記述します
<　は　　<　と記述します
>　は　　>　と記述します　

などなど・・・

≪区切り線≫　　　

<hr size=xxx width=yyy align=zzz color=aaa>

終了タグは必要ありません。

xxx：線の太さ（ピクセル数）
yyy：線の幅（ピクセル数またはパーセント）
zzz：線の位置（left｜center｜right）
aaa：線の色　（←ネットスケープでは無効です）
を指定します。（何も指定しなくても任意のものだけを指定してもOKです）

例えば、太さ５ピクセル、長さ５００ピクセル、色が赤で画面の中央に配置したい場合・・・・

<hr size=5 width=500 align=center color=red>　　↓

≪文字スクロール≫　（インターネットエクスプローラのみ）　　　

<marquee align=aaa behavior=bbb bgcolor=ccc direction=ddd height=eee width=fff hspace=ggg vspace=hhh loop=iii scrollamount=jjj scrolldelay=kkk>
あいうえお
</marquee>

aaa：スクロール文字の垂直位置を指定（バージョン4.0では無効です）

　　　top：上の方に表示
　　　middle：中央に表示
　　　bottom：下の方に表示

bbb：スクロールパターン

　　　scroll：一方から現れ、一方へ消えてくスクロールを繰り返します
　　　alide：一方から現れ、一方の端で止まります
　　　alternate：文字が行ったり来たりを繰り返します

ccc：スクロールエリアの色を指定します（先に説明した「文字色」のカラーネーム等を指定）

ddd：スクロール方向

　　　left：右から左
　　　right：左から右

eee：スクロールエリアの高さ（ピクセル数またはパーセント）

fff：スクロールエリアの幅（ピクセル数またはパーセント）

ggg：スクロールエリアの左右の余白（ピクセル数）

hhh：スクロールエリアの上下の余白（ピクセル数）

iii：スクロール回数（数字）（－１から有効）

　　　behavior=scroll　　と併用している場合は指定回数スクロールした後は画面から文字は消えます。
　　　behavior=alide　　と併用している場合は端に当たって止まったところで消えて再び現れる動作を繰り返し、
　　　　　　　　　　　　　　指定回数繰り返した後は端っこで文字は表示されたまま止まります。
　　　behavior=alternate　と併用している場合は一往復を２回と判断します。

ｊｊｊ：スクロール速度（ピクセル数）

　　　文字が一回描画されるごとに文字が進む距離を指定。数値が大きい程早くなります。

kkk：スクロール速度（秒）

　　　文字を移動させるために描画する間隔を１０００分の１秒単位で指定します。数値が大きい程遅くなります。
　　　１００を指定すると１０００分の１００秒で一回描画を行います。

例：

<marquee>あいうえお</marquee>だけでもOKです。その場合左から右へスクロールします。
↓
あいうえお

<marquee width=200 behavior=scroll scrollamount=10 bgcolor=skyblue>＞゜)))彡</marquee>
↓
＞゜)))彡

<marquee align=top behavior=alternate bgcolor=pink direction=right height=100 width=250 hspace=30 vspace=50 loop=30 scrollamount=20>くコ:彡</marquee>
↓
<コ:彡

≪背景に色をつける≫　　　（バージョンや環境によっては、このタグが無効になる場合があります。）

背景に色の指定をしないと、ＩＥ３．０なら灰色、ＩＥ４．０やネスケ４．０なら白です。
その色を変えるには例えば・・・・

<BODY bgcolor=pink></BODY>　の様に記述すると背景がピンクになります。

≪他のホームページへLINK≫　　　

例

<A href="http://www2s.biglobe.ne.jp/~SAMO/">あいうえお</A>　　↓

あいうえお

と、やると　あいうえおの部分をクリックすると「http://www2s.biglobe.ne.jp/~SAMO/」へ行くことができます。
A harf=　の後の「"」で囲まれた部分にＬＩＮＫしたいＵＲＬを記述すれば良いわけです。

A harf　の「A」は大文字の方が良いです。なぜ？？？

≪テーブル≫（これは奥が深いのでチョットだけの説明にしておきます(^^;)）　　　

<TABLE BORDER=aaa WIDTH=bbb HEIGHT=ccc>
<TR>
<TD BGCOLOR=ddd Align=eee>
あいうえお
</TD>
</TR>
</TABLE>

　　aaa.......枠の太さ（ドット）
　　bbb........表の幅（ドット）
　　ccc.......表の高さ（ドット）
　　ddd......表の色
　　eee........文字位置（right/center/left）

例：

<TABLE BORDER=10 WIDTH=300 HEIGHT=40><TR><TD BGCOLOR=blue Align=Center>あいうえお</TD></TR></TABLE>　↓

あいうえお

基本的にtable,tr,tdの３つのタグで構成されます。
二次元テーブルを作る場合は<ｔｒ><ｔｄ>を複数作成します。
ｔｒが行、ｔｄが列の部分になります。
たとえば、

あ	い	う
か	き	く

とやりたい場合は

<TABLE>
<TR>
<TD>あ</TD>
<TD>い</TD>
<TD>う</TD>
</TR>
<TR>
<TD>か</TD>
<TD>き</TD>
<TD>く</TD>
</TR>
</TABLE>

とやります。

≪入力フォーム≫（これは奥が深いのでチョットだけの説明にしておきます(^^;)）　　　
（ラジオボタン以降追加しました。）

フォームは入力された文字や選択肢をホームページのサーバー送信し、サーバーにあるＣＧＩ等のプログラム
により処理されて結果をホームページやメールに返信させるために使われます。
フォームだけでは機能しませんので注意して下さい。
ここでは、フォーム

[選択ボックス]
これは、▼をクリックすることによって、あらかじめ用意された項目の中から
どれか一つを選択させるためのものです。

<form>
<select>
<option>さも１
<option>さも２
</select>
</form>

と、やると・・・・

と、なります。<option>の後ろに文字を入れればよいわけです。

[チェックボックス]
これは、あらかじめ用意された項目の横にある□をクリックすることによって
一つまたは、複数の項目を選択させるためのものです。（複数選択可）

<FORM><INPUT type="checkbox">さも１　　　　<INPUT type="checkbox">さも２</FORM>

と、やると・・・

と、なります。

[ラジオボタン]
これは、あらかじめ用意された項目の横にある○をクリックすることによって
どれか一つの項目を選択させるためのものです。

<FORM><INPUT type="radio">さも１　　<INPUT type="radio">さも２</FORM>

と、やると・・・

と、なります。

[一行テキスト領域]
これは、一行のみの領域に自由に文字を入力させるためのものです。

<FORM><INPUT size="20"></FORM>

と、やると・・・

と、なります。

INPUT size=　の右の"20"は横の長さです。この数字を変えると長さが変わります。

[複数行テキスト領域]
これは、複数行書ける領域に自由に文字を入力させるためのものです。

<FORM><TEXTAREA rows="5" cols="40"></TEXTAREA></FORM>

と、やると・・・

と、なります。

rows=　の右の　"5"　は縦の長さです。cols=　の右の　"40"　は横の長さです。
この数字を変えると長さが変わります。

[送信ボタン]
これは、フォームに入力されたものをサーバーへ送信するためのボタンです。

<FORM><INPUT type="submit" value="送信しま～す"></FORM>

と、やると・・・

と、なります。

value=　の右の　"送信しま～す"　を変えるとボタンに表示される文字が変わります。
必ず　　"　で囲んで下さい。

[リセットボタン]
これは、フォームに入力したものを消すボタンです。

<FORM><INPUT type="reset" value="書き直し～"></FORM>

と、やると・・・

と、なります。

value=　の右の　"書き直し～"　を変えるとボタンに表示される文字が変わります。
必ず　　"　で囲んで下さい。

【おまけ】（チェリーハイツの住民専用）（99/02/21）
これをハイツの玄関に作れば行きたい部屋番号の玄関・チャットルームへ行け、さらに検索もできます。
（チェリーハイツのぴと師匠（９９２号室）のタグを参考にさせていただきました。ぴとさんご協力ありがとうございます。）

<FORM action="http://spitz.r-s.co.jp/cgi-bin/cherry_room.pl?" target="_blank">
<INPUT type="hidden" name="mode" value="browse">
<INPUT name="room_id" size="9"><INPUT type="submit" value="玄関">
</FORM>
<FORM action="http://spitz.r-s.co.jp/cgi-bin/chat.pl?" target="_blank">
<INPUT type="hidden" name="mode" value="browse">
<INPUT name="room_id" size="9"><INPUT type="submit" value="部屋">
</FORM>
<FORM action="http://spitz.r-s.co.jp/cgi-bin/search.pl" method="POST" target="_blank" name="search">
<INPUT name="key" size="19"><INPUT type="submit" value="検索くん">
</FORM>

とやると

と、なります。

≪裏技≫（環境によっては絵に見えない場合があります。）　　　

(99/02/28)
[絵文字１（ハートマーク他）]（フォント「Symbol」の表示が可能な環境のみ）

チェリーハイツで流行っている（？）絵文字の出し方です。

<font face="Symbol">か</font>　とやるとハートマークになります。

「か」の部分を半角カナで、しかも小さい「ウ」でも表示されます。
ハート以外にもダイヤ、スペード、クラブもあります。

あと、サイズや色も変えられます。

<font size=6 color=red face="Symbol">か</font>
↓
か

<font size=6 color=red face="Symbol">ｩ</font>
↓
ｩ

※ハートの大きさや「か」「ｩ」の違いによって、ハートの左に□が付く事があります。
※「か」「ｩ」の部分を他の文字に変えるといろんな絵文字が見れます。

ｧ	ｨ	ｩ	ｪ	ｫ
ｧ	ｨ	ｩ	ｪ	ｫ

ぉ	お	か	が
ぉ	お	か	が

他にも沢山あるので探してみてね。

[絵文字２]（フォント「wingdings」の表示が可能な環境のみ）

チェリーハイツで流行っている（？）絵文字の出し方です。

例えば・・・・・
<font face="wingdings" color=blue size=7>J</font>
と、やると・・・・

J

と、なります。
「J」の部分を他の文字に変えるといろんな絵文字が見れます。

一覧表をつくってみました。

1	2	3	4	5	6	7	8	9	0	-	^	\	@	[	;	:	]	,	.	/	\
1	2	3	4	5	6	7	8	9	0	-	^	\	@	[	;	:	]	,	.	/	\

(

)

{

}

(

)

{

}

注意・・・・「<」と「>」は単独で使用すると他のタグに影響してしまいますので
　　　　　　つかうときは「<>」のように使用して下さい。

[絵文字３]（フォント「MS Outlook」の表示が可能な環境のみ）

例えば、
<font face="MS Outlook" color=red size=7>I</font>　　とやると、
I
と、なります。（ケーキに見えるかな？）
"MS Outlook"のフォントが無い人、結構多い様な気が・・・・

「Ｉ」の部分を他の文字に変えるといろんな絵文字が見れます。

例・・・

A	B	C	D	E	G	I	J	M	N
A	B	C	D	E	G	I	J	M	N
ベル	鍵	矢印	矢印	人の顔	ゼムクリップ	ケーキ	勲章？	ペン	？

【あとがき】　　　　

・・・と、まあ、こんな感じで作って見ましたが、いかがでしたでしょうか？
参考になれば幸いです。

アラ探しにもご協力下さい(^^;)

E-mail:samo.kubota@nifty.ne.jp