タグ講座

みゅみゅも初心者なので一緒に勉強していきたいと思います。

※タグをコピーして貼り付けるだけで出来ます。

＋＋＋タグを使用された方一言書いてくれるとうれしいな～♪＋＋＋

☆タグ専用ＢＢＢ☆

★【カラーコード】★
★文字に付いて★	★ちょっとＨＰを飾ろう３★
・文字の大きさを変える	♪カーソルを変化させよう♪
★文字を装飾する★	・文字の上にカーソルが乗ると変わるよ
・太い文字	・ページ全体のカーソルを変えよう
・斜め文字	♪リンクのいろいろ♪
・下線を引く	・リンクの下線を消そう
・取り消し線	・マウスが乗ったら色を変える
・上付き文字	・マウスが乗ったら背景色を付ける
・下付き文字	・マウスが乗ったら下線を表示
・文字に蛍光ペンでラインを引く	・マウスが乗ったら上下線を表示
・中央にそろえる・	・マウスが乗ったら太文字にする
・左にそろえる	・マウスが乗ったら文字を斜めにする
・右にそろえる	・リンク済みの色を変えよう
★文字を動かそう★	・サンプル
・左端から右端に文字が移動	★ちょっとHPを飾ろう４★
・右端から左端に文字が移動	・背景を自動的に動かす
・文字が左右折り返す	・お気に入りの登録ボタンを付けよう
・文字を上へ動かす	・スタイルシートを使ってのお気に入りボタン
・文字を下へ動かす	スタイルシートに付いて
★テーブルを作ろう★	♪枠の形状の指定
・ちょっと変化させてみよう	・四辺まとめて指定する
・枠に色を付けてみよう	・各辺ごとに指定する
・立体にしてみよう	♪枠の形状を変えよう
・テーブルの中に色をいれてみよう	★ちょっとHPを飾ろう５★
・入力ボックスを作ろう	♪リンクの色々♪
★ちょっとＨＰを飾ろう★	・文字でリンクを貼る
・画像を貼り付けてみよう	・画像でリンクを貼る
・メッセージボードを作ろう	・ドロップダウンリストからのリンク
・カーソルを乗せるを文字が出るよ	・ボタンを使ってのリンク
・カーソルを乗せるとウィンドウが開くよ	★ちょっとHPを飾ろう６★
・ドロップダウンリストを作ろう	♪ページを枠で囲んでみよう♪
・スクロールバーの色を変えてみよう	♪文字を変えてみよう♪
・ハートを書いてみよう	・半透明にしてみよう
テーブル内の文字をスクロールさせよう	・ほかし・ぶらしてみよう
★ちょっとＨＰを飾ろう２★	・影を投影してみよう
・点滅する文字を作ろう	・影文字にしてみよう
・点滅する文字を作ろう	・発光効果を付けてみよう
・背景画像を固定しよう。	・カラーマスクをかけてみよう
・一時間ごとに挨拶文を表示する	・なみなみな文字にしてみよう
・訪問者の回数を表示する

カラーサンプル
#ffffff	#fafafa	#f0f0f0	#e6e6e6
#dcdcdc	#c8c8c8	#b4b4b4	#a0a0a0
#8c8c8c	#787878	#646464	#505050
#3c3c3c	#282828	#141414	#000000
#ccffcc	#ccffff	#ccccff	#ffccff
#ffcccc	#ffffcc	#99ff99	#99ffcc
#66ffff	#66ccff	#99ccff	#cc99ff
#ff99ff	#ff99cc	#ff9999	#ffcc99
#ffff99	#ccff99	#66ff66	#66ff99
#66ffcc	#00ffff	#33ccff	#1aa9ff
#3399ff	#6699ff	#9999ff	#cc66ff
#ff66ff	#ff66cc	#ff6699	#ff6666
#ff9966	#ffcc66	#ffff66	#ccff66
#99ff66	#33cc33	#00ff00	#00ff99
#00ffcc	#33cccc	#00ccff	#0099ff
#0066ff	#3366ff	#6666ff	#9966ff
#cc33ff	#ff00ff	#ff33cc	#ff3399
#ff0066	#ff6600	#ff9933	#ffcc00
#ffff00	#ccff33	#99ff33	#66ff33
#009933	#00cc00	#00cc66	#00cc99
#009999	#006699	#0099cc	#0066cc
#0033cc	#0000ff	#3333ff	#3333cc
#6600ff	#9933ff	#cc00ff	#cc00cc
#cc0099	#cc3399	#cc6699	#cc0066
#cc0000	#ff0000	#ff3300	#cc6600
#ff9900	#cc9900	#cccc00	#99cc00
#669900	#009900	#003300	#006600
#339933	#339966	#669999	#006666
#003366	#336699	#3366cc	#003399
#000099	#0000cc	#000066	#333399
#666699	#6600cc	#9900ff	#9900cc
#660066	#993399	#990099	#993366
#660033	#990033	#993333	#800000
#990000	#993300	#cc3300	#996600
#663300	#996633	#999966	#666633

★文字の大きさについて★

・文字の大きさを変える

「size="1"　大きさ」　「size="2"　大きさ」　「size="3"　大きさ」　　「size="4"　大きさ」
「size="5"　大きさ」　　「size="6"　大きさ」　　　「size="7"　大きさ」

★文字を装飾する★

太い文字

斜め文字

下線を引く

~~取り消し線~~

上付き^文字

下付き_文字

文字に蛍光ペンでラインを引く

文字を中央にそろえる

文字を左にそろえる

文字を右にそろえる

★文字を動かそう★

♪文字を動かす範囲

・幅･･･width="数字"　・高さ･･･height="数字"　・スピード･･･scrollamount="数字"

右端から左端に文字が移動

★こんな感じだよ★

左端から右端に文字が移動

★こんな感じだよ★

文字が左右折り返す

★こんな感じだよ★

文字を上へ動かす

★こんな感じだよ★

文字を下に動かす

★こんな感じだよ★

★テーブルを作ろう★

こんな表だよ

《ちょっと変化させてみよう！》

※border＝枠の太さ
※width＝表の幅
※height＝表の高さ
※bordercolor＝枠の色
※bgcolor＝背景色

♪入力ボックスを作ろう（ここでダグを入れるのに使ってる↓だよ）

※rows＝行数　※cols＝長さ

★ちょっとホームページを飾ろう★

画像を貼り付ける

メッセージボード作ろう

　

メッセージボードだよ

文字にカーソルを乗せると文字がでるよ

『カーソル乗せてごらん★』

文字にカーソルを乗せるとウインドウがひらくよ

『ここにもカーソル乗せてよ★』

ドロップダウンリストを作ろう

キリ番とかに使えるかも・・・

スクロールバーの色を変えてみよう

*★サンプルです★*		face		arrow
base		shadow		highlight

↓こう打つとこう→なるよ（ちょっと項目多いけど）

<STYLE type=text/css> body {scrollbar-base-color:#0000ff; scrollbar-face-color: #000000; scrollbar-shadow-color: #3333ff; scrollbar-highlight-color: #3333ff; scrollbar-3dlight-color: #3333ff; scrollbar-darkshadow-color: #3333ff; scrollbar-track-color: #000000; scrollbar-arrow-color: #3333ff;} </style>

ハートを書いてみよう

こんな感じ→ｩ

<font face=symbol color=red size=5>ｩ</font>

テーブル内の文字をスクロールさせよう

ようこそいらっしゃいました。ゆっくりしていってくださいね。

<TABLE border="4" cellspacing="10" width="500"> <tr bgcolor=#0000ff><td><font color="#FF9933"><marquee direction=reft height="20" width="500" scrollAmount="6"><font color=#ffff00 size="2"> ようこそいらっしゃいました。ゆっくりしていってくださいね。</font></marquee></TABLE>

★ちょっとHPを飾ろう２.★

点滅する文字を作ろう

点滅するよ

こんな点滅はどう？

点滅

背景を固定しょう！

指定した背景のタグの後ろに　bgproperties="fixed"　を追加する

一時間ごとに挨拶文を表示する

ちょっと長いです(^_^;)

※mes［23］等は時間を表しています。メッセージはお好きに変えて使ってくださいね。
文字の色、大きさは　font color=#FF00FF size=+2を変えてね。

訪問者の回数を表示する

★ちょっとＨＰを飾ろう３.★

♪カーソルを変化させよう♪

文字の上に乗せるとカーソル形状をかえます

**こんな感じぃ～♪**

ページ全体のカーソルを変えてみよう

<ＨＥＡＤ>と<／ＨＥＡＤ>の間に入れてください

カーソルのサンプルです。試してみてね。

n-resize	s-resize
w-resize	e-resize
wait crosshair	hand
move	ne-resize
sw-resize	se-resize
nw-resize	text
help	crosshair

♪リンクのいろいろ♪

リンクの下線を消す。

<ＨＥＡＤ>と<／ＨＥＡＤ>の間に入れてください。

★ちょっとホームページを飾ろう４．★

背景を自動的に動かす

 サンプル

お気に入りに登録ボタンを付ける

スタイルシートでこんな表示も出来るよ

・border-width枠の太さ）・border-color（枠の色）・background（背景色）

・font-size:（文字の大きさ）・color（文字の色）

スタイルシートについて

♪枠の形状の指定

・四辺まとめて指定する

style= ;border-style: ○○○

・各辺ごとに指定する

border-top-style: ○○○ （上辺）

border-bottom-style: ○○○ （下辺）

border-left-style: ○○○ （左辺）

border-right-style: ○○○ （右辺）

♪枠の形状を変えよう

・solid	実線です	・double	二重線です
・groove	へこんだ感じの立体枠です	・ridge	とんがった感じの立体枠です
・inset	内容が沈んだ感じになる立体枠です	・outset	内容が浮き出た感じになる立体枠です
・dotted	丸い点線	・dashed	四角い点線

★ちょっとホームページを飾ろう５．★

【※ブラウザの戻るボタンで戻ってください】

♪リンクのいろいろ♪

・文字でリンクを貼る

 ☆ぽちっとな☆

・画像でリンクを貼る

（画像をクリックしてみて！）

・画像の枠を消す場合

・新しく画面を開く場合

target="blank"

・同じページに開く場合

target="self"

・画面全体に開く場合

target="top"

・ドロップダウンリストからのリンク

・ボタンを使ってのリンク

★ちょっとホームページを飾ろう６．★

♪ページに枠を付けてみよう♪

ここではこうやってるよ！<ＨＥＡＤ>～<／ＨＥＡＤ>の間に貼り付けてね。

枠の形状は★ちょっと飾ろう4.★を見て色々やってね。

♪文字をちょっと変えてみよう♪

★半透明にしてみよう　　【filter: alpha 】

Myumyu's Room

ここではopacity=90、style＝3に設定しています。

・opacity＝*の数字が大きくなるほど透明度がまします。

・style＝※　　0：均等　1：線上　2：円形　3：長方形　という風になります。

★ぼかし、ぶれさせてみよう　　【 filter: blur 】

Myumyu's Room

背景が黒くてよく見えなくてすみません。

・direction=※

ぼかしの方向です。　0、45、90、135と45度単位で入力です。

★影を投影してみよう　　【 filter: dropshadow 】

Myumyu's Room

★ 影文字にしてみよう　　【filter: shadow 】

Myumyu's Room

★発光効果を付けてみよう　　【filter: glow 】

Myumyu's Room

★カラーマスクをかけよう　　【filter: mask 】

Myumyu's Room

★なみなみな文字にしてみよう　　【 filter: wave 】

Myumyu's Room

・add=*　元イメージの　0=合成　1=合成しない

・freq=*　波数　0～

・strength=*　強度　0～