タグ　遊び　１

ご迷惑おかけしております。見づらくてすみません
ブラウザの種類によっては正常に表示されません
遊び目的ですので、本格的にタグを覚えたい方
はタグ辞典などを参考にして下さい。

タグを使ったアートや文字を飾ったり、画像を飾ったりしています
ブラウザの種類によっては、正常に表記されない場合がございます
ブラウザの文字のサイズの設定の仕方によって
正常に表記されない場合がございます（中なら良いかな？）
また、方法は一例であってもっと簡単に表記できるやり方も有るかも知れません。

音楽を聴きながらなど、ながらでやっていたり気まぐれで記述しているため、誤りが有るかも知れません。　一応、オーサリングで確認していますが。
属性＝”値”　の引用符「”」は、HTML4.01では場合によって省略できる。
例：font color="red"　→　font color=red　など

ジャバスクリプト

<a href="javascript:onclick=history.back();">前履歴へ</a>
onclickは、クリックしたらの意味：クリックしたら前履歴へ行きますよ！

<a href="javascript:onclick=history.forward();">次履歴へ</a>

<a href="javascript:onclick=location.reload();">更新</a>

<a href="javascript:onclick=window.close();">ウインドウを閉じる</a>

<a href="javascript:onclick=document.write('あいうえおかきくけこ');">押してみて！</a>
「押してみて！」をクリックすると、「あいうえおかきくけこ」と表示

<a href="javascript:window.open('http://www.yahoo.co.jp','_blank','toolbar=0, location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=0,width=300, height=300,left=200,top=200');">TEST</a>
注：：left=200,top=200　ディスプレイの左上角から左へ200ピクセル、下へ200ピクセルの位置に左上角が来るように新しいウインドウを開く。　数値で可変。

<a href="javascript:onclick=window.blur();">複数のウインドウが開いているときに押されると、ウインドウが後ろに回る</a>

<a href="javascript:confirm('あいうえお');">確認ボタン付きダイアログボックス</a>

<a href="javascript:window.resizeTo(300,300);">ブラウザの大きさを指定した大きさにリサイズする</a>
注：：数値は(x,y)で、ピクセル値：：ToをByにすると、指定した分量ずつリサイズする（この例の場合、300px：300pxずつ広がる）　ただし、ブラウザの大きさが最大の時は効き目無し

<a href="javascript:window.moveTo(100,100);">ブラウザを指定した位置へ移動する</a>
注：：数値は(x,y)で、画面の左上の角を基準、ピクセル値。ただし、ブラウザの大きさが最大の時は効き目無し
ToをByにすると、指定した分量ずつ移動する。ただし、ブラウザの大きさが最大の時は効き目無し

<a href="javascript:window.scrollBy(20,50);">ブラウザの表示領域を指定した分量ずつスクロールする</a>
注：：数値は(x,y)で、xは横方向、yは縦方向：ピクセル値。

<a href="javascript:window.scrollTo(200,500);">ブラウザを指定した位置までスクロールする</a>
注：：数値は(x,y)で、xはウインドウ左上角から横方向、yは同縦方向

例：：
<a href="javascript:onclick=window.scrollBy(0,50);">上へ移動</a>
<a href="javascript:onclick=window.scrollBy(0,-50);">下へ移動</a>

<a href="javascript:onclick=window.print();">印刷しますか？</a>

<a href="javascript:onclick=window.external.AddFavorite('http://www.yahoo.co.jp/','検索ページ（ヤフー）');">ヤフーをお気に入りに追加しますか</a>

<a href="javascript:onmousedown=alert('投稿しますか？');onmouseup=document.write('<html><head><title>BASIC TAG SCHOOL</title></head><body bgcolor=#e6e6fa text=#000000><div align=center> <h3> 短時間連続投稿はできません。この掲示板への書き込みが混雑しており、いたずら防止機能が働きました。 しばらくしてから投稿してください。 ↓お待ちの間にどうぞ！（新しい画面を開きます）</h3> <a href=http://acnw.jp/h5k4/jtyP/1/tour/05kujira/index.htm target=_blank><img src=http://211.13.206.47/img/kujira.gif border=0></a> [ <a href=http://www.arwin.com/cgi-localbin/p4012_0.cgi target=_blank>小笠原で野生のイルカと遊ぶ！</a> ]　[ <a href=http://www.arwin.com/cgi-localbin/p010_0.cgi target=_blank>レンタルサーバー</a> ]　[ <a href=http://www.arwin.com/cgi-localbin/p4013_0.cgi target=_blank>エン･ジャパン</a> ]　 <a href=javascript:onclick=history.back();>戻る</a></div></body></html>');">ここを押すと・・・・？</a>
注：：onmousedownは、マウスボタンが押された時の動作。　onmouseupは、マウスボタンが離されたときの動作。
　マウスボタンを押すと「投稿しますか？」のアラートが現れ、OKして離すとドキュメント内に記述が現れます。

<a href="javascript:alert('もう一回押して下さい');style:display='ZZZZZ・・・';">お休み</a>
「お休み」の文字をクリックするとアラートが出て、OKを押すと、ディスプレイに「ZZZZZ・・・」と表示

あいうえおかきくけこあいうえおかきくけこ~~あいうえおかきくけこ~~~~あいうえおかきくけこ~~

点線　あいうえおかきくけこ

破線　あいうえおかきくけこ

実線　あいうえおかきくけこ

二重線　あいうえおかきくけこ

溝線　あいうえおかきくけこ

稜線　あいうえおかきくけこ

アウトセット　あいうえおかきくけこ

インセット　あいうえおかきくけこ

あいうえお　　あいうえお　　あいうえお

あいうえお　　あいうえお　　あいうえお

あいうえお　　あいうえお　　あいうえお

あいうえお　かきくけこ

あいうえお

あいうえお

あいうえお

あいうえお

あいうえお

あいうえお

あいうえお

点滅します

囲い文字　あいうえおかきくけこあいうえおかきくけこ<s>あいうえおかきくけこ</s><s>あいうえおかきくけこ</s> 
　nobr：：改行しない
b（ボールド：太字）、i（イタリック：斜体）、u（アンダーライン：下線）、s（取消線）

点線　あいうえおかきくけこ

破線　あいうえおかきくけこ

実線　あいうえおかきくけこ

二重線　あいうえおかきくけこ

溝線　あいうえおかきくけこ

稜線　あいうえおかきくけこ 

アウトセット　あいうえおかきくけこ

インセット　あいうえおかきくけこ

color="red"　は文字の色　　スタイルの、background:blue　はバックの色　　font-size:25px　は文字のサイズ

：：字体 face：：
あいうえお
あいうえお
あいうえお
あいうえお
あいうえお
あいうえお

注：スタイルではなく、あいうえお　のようにして文字の大きさを指定した場合は、数値は１から７までで、（一番小さい）１＜７（一番大きい）となる。　標準値は３
の場合は、一段階小さい文字（標準値３だと、２に相当）
の場合は、一段階大きい文字（標準値３だと、４に相当）

　字体の前に「@」を付けると横文字になる
あいうえお
あいうえお
あいうえお

　逆文字
あいうえお　かきくけこ

　変な文字
あいうえお

　スライダーを付ける（はみ出した部分の処理）

<pre>
あいうえお 
あいうえお 
あいうえお 
あいうえお 
あいうえお 
あいうえお
</pre>

：：overflow:auto　は、必要に応じてスクロールできるようにします
　overflow:scroll　は、スクロールして見られるようにします

スクロールバー各部分の色づけ
scrollbar-base-color　（ベース色：スクロールバー全体の色調を指定）
scrollbar-face-color　（表面の色）
scrollbar-arrow-color　（矢印の色）
scrollbar-highlight-color　（ハイライトの色）
scrollbar-shadow-color　（影の色）
scrollbar-3dlight-color　（左端と上端の色）
scrollbar-darkshadow-color　（右端と下端の色）
scrollbar-track-color　（トラックの色）

例

　点滅マーキー
<marquee scrolldelay="500" scrollamount="230" width="300">点滅します</marquee>

　ノーマル　

　画像説明を入れる　

　画像に枠を入れる

　拡大

　上に文字

　中央に文字

　下に文字

　リンクを付ける　　

　リンクを付ける（枠なし）

　あいうえお
　かきくけこ
　さしすせそ
　たちつてと

注意：画像のURLは、実際のものではありません

<IMG src="img/ja/menu_paso.gif">　ノーマル

<img src="img/ja/menu_paso.gif" alt="何だろう">　画像説明を入れる（画像にマウスポインタを当てるとその画像に対する説明がポップアップされる）
属性「alt」の値に、改行タグ を使うとそのまま と表示されるから、「・・・・・・&#13；・・・・・・」のように、アスキーコードを使うと良い。

<img src="img/ja/menu_paso.gif" border="8">　画像に枠を入れる　border="数値"

<img src="img/ja/menu_paso.gif" width="200" height="200">　拡大　width="横幅（数値）"　height="縦の長さ（数値）"

画像とテキストの縦の位置関係
<img src="img/ja/menu_paso.gif" align="top">　上に文字

<img src="img/ja/menu_paso.gif" align="middle">　中央に文字
<img src="img/ja/menu_paso.gif" align="bottom">　下に文字

<a href="http://www.yahoo.co.jp" target="_blank"><img　src="img/ja/menu_paso.gif"></a>　画像にリンクを付ける

<a href="http://www.yahoo.co.jp" target="_blank"><img src="img/ja/menu_paso.gif" border="0"></a>　画像にリンクを付ける（枠なし）

画像にテキストを回り込ませる
<img src="img/ja/menu_paso.gif" align="left">
　あいうえお 
　かきくけこ 
　さしすせそ 
　たちつてと　　　文字右揃え

align="right"　では、画像が右でテキストは左へ回り込む

画像への回り込みの解除
br clear="どちら側の画像の回り込みを解除するか"
left　左側の画像に対するもの
right　右側の画像に対するもの
all　両側の画像に対するもの

例：：画像の右側に「あいうえおかきくけこ」の文字が書かれ、回り込みを解除し、「さしすせそ」と書かれる

<img src="img/ja/menu_paso.gif" align="left">
あいうえおかきくけこ
 
さしすせそ

画像と回り込ませたテキストの間隔を指定

vspace="縦間隔（数値）"　hspace="横間隔（数値）"

あいうえお

<img src="../pasocom.jpg" width="150" height="150" align="middle" hspace="50">あいうえお

タグ掲示板で、タグを表示させる場合

　<　は　<　　　>　は　>

タグ掲示板で、あいうえお とすると、文字のサイズが５で、色は赤であいうえおと表示されます。　そのままソースコードとして表示させたい場合に使います。
あいうえお　と言う具合

英小文字＋α１０進アスキーコード

a=97　b=98　c=99　d=100　e=101　f=102　g=103　h=104　i=105　j=106　k=107　l=108　m=109　 n=110　0=111　p=112　q=113　r=114　s=115　t=116　u=117　v=118　w=119　x=120　y=121　z=122　<=60　>=62　"（ダブルクォーテーション）=34　-（ハイフン）=45　&=38　改行コード=13
例：：f　のようにします

英小文字＋α１６進アスキーコード

a=61　b=62　c=63　d=64　e=65　f=66　g=67　h=68　i=69　j=6A　k=6B　l=6C　m=6D　 n=6E　0=6F　p=70　q=71　r=72　s=73　t=74　u=75　v=76　w=77　x=78　y=79　z=7A　<=3C　>=3E　"（ダブルクォーテーション）=22　-（ハイフン）=2D　&=26　改行コード=D
例：：f　　jのようにします

：：１０進を１６進に変換：：

例＊5678（10進）を16進に
A、5678÷16=354余り14
B、354÷16=22余り2
C、22÷16=1余り6
このように16で割り商と余りを求め、さらに商を16で割って余りを求め繰り返していく。 16で割ることが出来るところまで。　（15余り２だと、15は16で割れません。）
最終、この場合は（C）の式の商は１で余りは6、式Bの余りは2、Aの余りは14
１，６，２，１４に注目。　ここで、１０進の１は１６進では１
（１０進、１６進）＝（０，０）、（１，１）、（２，２）、（３，３）、（４，４）、（５，５）
（６，６）、（７，７）、（８，８）、（９，９）、（１０，Ａ）、（１１，Ｂ）、（１２，Ｃ）
（１３，Ｄ）、（１４，Ｅ）、（１５，Ｆ）　です。
１４は、１６進ではＥだから、162Eとなります。
２５６だと、256÷16=16余り0　　16÷16=1余り0　　100（16進）になります
関数電卓で行ったほうがはるかに速い

あいうえおかきくけこ

あいうえおかきくけこ

あいうえおかきくけこ

あいうえおかきくけこ

あいうえおかきくけこ

あいうえおかきくけこ

border:solid purple 6px 　は、線の太さは６ピクセル、色は紫、実線

あいうえおかきくけこ　　上に線

あいうえおかきくけこ　　下に線

あいうえおかきくけこ　　左に線

あいうえおかきくけこ　　右に線

ブラウザの種類によっては、表示のされ方が違う場合がございます。

ボックスについて

各要素は、ボックスと呼ばれる四角い領域を生成します
この領域は、次の４つの部分から成ります

ボックスの構造

マージン

枠線

内容の周りの空間
	内容

単位について：：
px　ピクセル（モニターの表示単位)
pt　ポイント（1pt=1/72in=0.3528mm）
pc　パイカ（1pc=12pt=4.2333mm）
in　インチ（1in=25.4mm）
cm　センチメートル
mm　ミリメートル
em　その範囲で有効なフォントの高さ（font-sizeの値）を１とする単位
ex　その範囲で有効なフォントのアルファベットの小文字「x」の高さを１とする単位
%　他の基準となる大きさに対する割合で、基準はそれぞれ異なる

色指定：：（）内は例
＊RGB16進数指定　#に続けて、#RRGGBBのように16進数で2桁ずつ指定
　R=Red、G=Green、B=Blue　（#ff0000、#cc99cc、#ffccaa）
＊RGB16進数指定　#に続けて、#RGBのように16進数で1桁ずつ指定　（#f00、#c9c、#fca）
　　２桁ずつ指定から省略して１桁ずつで表示　　例えば#c9cは、#cc99ccと同じ
＊色名　色の名前で指定（red、green、blue、purple、black、orange）
＊rgb(R,G,B)　RGBを0から255の10進数で指定　例：rgb(100,0,90)
　　#ff0000だと、rgb(255,0,0)
＊rgb(R%,G%,B%)　RGBを0から100%の割合で指定　例：rgb(20%,70%,80%)
　　#ff0000だと、rgb(100%,0%,0%)
＊システムカラーで指定　（ActiveBorder、ButtomText、など）
注：16進数のffは、10進数の255、割合の100%に相当

ボックスの基本用語：：トップ（top）、ボトム（bottom）、レフト（left）、ライト（righｔ）
　margin（マージン）、border（ボーダー）、padding（パディング）

マージン

margin-top:??　上マージン　　margin-bottom:??　　下マージン
margin-left:??　　左マージン　　margin-right:??　　右マージン
「??は、単位を付けた数値、%指定、autoで自動設定」
例：：margin-top:50px　　margin-top:20%　　margin-left:auto　など

：：まとめて指定：：
margin:?? ?? ?? ??　　マージン　上　右　下　左（各値は半角スペースで区切る）
「??は、単位を付けた数値、%指定、autoで自動設定」
margin:20px　　値が１つの場合　　上下左右
margin:20px 10px　　値が２つの場合　　値１上下　値２　左右
margin:20px 10px 15px　値が３つの場合　値１上　値２左右　値３下
margin:20px 10px 15px 12px　値が４つの場合　　上　右　下　左
例：：margin:30px 10px　（上下が30pxで、左右が10px）

内容の周りの空間：パディング

padding-top:??　上の空間　　padding-bottom　下の空間
「??は、単位を付けた数値、%指定、autoで自動設定」
以下マージンと同じように：：padding:??でまとめて指定できるし、値が１つから４つの場合がある

枠線の太さ：ボーダーウィズス（読み方が間違ってるかもしれない）

border-top-width:??　上の枠線の太さ
「??は、単位を付けた値、キーワード指定」
thin　細い線を指定
medium　通常の太さ指定
thick　太い線を指定
以下同様に：：border-width:??でまとめて指定できるし、値が１つから４つの場合がある
初期値は、medium
widthは、img属性なんかでもおなじみだね！　「幅」

枠線の色指定：ボーダーカラー

border-top-color:??　上の枠線の色
「??は、色名、RGB値16進指定　など　red、blue、#ff0000等」
以下同様に：：border-color:??でまとめて指定できるし、値が１つから４つの場合がある
初期値は、「color：色指定」で設定されている値

border-color:?? ?? ?? ??
border-color:red　　値が１つの場合　　上下左右
border-color:red green　　値が２つの場合　　値１上下　値２　左右
border-color:red blue green　値が３つの場合　値１上　値２左右　値３下
border-color:red blue green orange　値が４つの場合　　上　右　下　左

枠線の形式指定：ボーダースタイル

border-top-style:??　上の枠線の形式
「??は、dotted（点線）、dashed（破線）、solid（実線）、double（二重線）、groove（溝線）、ridge（綾線）、outset（アウトセット）、inset（インセット）、none（表示しない）、hidden（表示しない：枠線が重なる場合に自分自身の値が優先される）」
以下同様に：：border-style:??で値がまとめて指定できるし、１つから４つの場合もある
初期値は、none

border-style:??
border-style:solid　　値が１つの場合　　上下左右
border-style:solid double　　値が２つの場合　　値１上下　値２　左右
border-style:solid double outset　値が３つの場合　値１上　値２左右　値３下
border-style:solid double outset inset　値が４つの場合　　上　右　下　左

枠線ごとにまとめて指定する：：トップ、ボトム、レフト、ライト

border-top:?? ?? ??　　上の枠線個別の設定
border-bottom:?? ?? ??　　下の枠線個別の設定
border-left:?? ?? ??　　左の枠線個別の設定　
border-right:?? ?? ??　　　右の枠線個別の設定
border:?? ?? ??　　上下左右の枠線に同じ値を設定
「??は、styleの値、colorの値、widthの値：：半角のスペースで区切る」
styleの値が指定されていないとcolorとwidthの効果が現れません。
記述の順番が違っていても大丈夫です。
指定されなっかた値については、初期値が適用される

例：：　border:solid red 5px 　上下左右の枠線に、実線：5pxの太さ：色は赤
こんなことも：　あいうえお
　文字「あいうえお」を5pxの赤色の実線で囲むのだが、上線は引かない。（border-top:none;）

幅と高さ

width:??　　幅「??は、単位を付けた数値、%指定、autoで自動設定」
height:??　　高さ「??は、単位を付けた数値、%指定、autoで自動設定」

背景：バックグラウンド

background-color:??　背景色指定
「background-color:red　　　background-color:#ffff00　　など、transparentは、色を透明にする」

background-image:url("・・・・・・・・")　背景画像指定

例：：ここに文字
幅、高さとも200pxに指定。この場合、それより小さい画像だと幾つか敷き詰められ、余った部分は、サイズに応じてカットされます。　大きい画像だと、サイズに応じてカットされます。

「background:red url("../img/abcd.jpg")」のようにまとめることもできる

background-repeat　背景画像の繰り返し方を指定
repeat　画像を縦横方向に繰り返して表示（初期値）
no-repeat　画像を繰り返さず１つだけ表示
repeat-x　横方向に繰り返して表示する
repeat-y　縦方向に繰り返して表示する
画像が敷き詰められない部分には、背景色が表示

あいうえおかきくけこ

background-position　背景画像の位置を指定

横方向(x)と縦方向(y)の位置をスペースで区切って指定し、値を一つだけ指定した場合は、もう一方はcenterになる
left　背景画像を左寄せにする
center　背景画像を中央寄せにする
right　背景画像を右寄せにする
top　背景画像を上寄せにする
bottom　背景画像を下寄せにする
実数値　位置を数値に単位を付けて指定
割合　パーセントで指定する
「background-position:right bottomやbackground-position:60px 150px」のように両方の位置を指定する場合、background-repeatでno-repeatを指定しておかないと効果が得られない。

例：まとめて記述
・・・・・・・・・・
（背景色は#ff0000、urlは・・・・・・、繰り返し方はrepeat-x、位置はcenter、背景の大きさは幅600pxで高さが400px）

フォントファミリー（フォントを指定する）

font-family:??
ＭＳＰゴシック、ＭＳＰ明朝、Arial、平成明朝、studz、HG創英角ﾎﾟｯﾌﾟ体、など

フォントのサイズ

font-size:80%　font-size:25px　font-size:12pt　font-size:x-large　など

単位を付けた数値で指定、%で指定
キーワード指定（初期値medium）
xx-small　非常に小さい　9pxに相当
x-small　小さい　10pxに相当
small　やや小さい　12pxに相当
medium　通常サイズ　16pxに相当
large　やや大きい　18pxに相当
x-large　大きい　24pxに相当
xx-large　非常に大きい　32pxに相当
larger　ひとまわり大きい
smaller　ひとまわり小さい

フォントの太さ：フォントウエート

font-weight:??
normal（通常：数値400相当）　　bold（一般的：数値700相当）　　lighter（一段階細い）　　bolder（一段階太い）
100から900の100単位の数値：：400でノーマル、700でボールド
初期値は、normal

文字にスモールキャピタルを指定する

font-variant:??
small-caps　文字をスモールキャピタル（アルファベットの小文字を、サイズの小さい大文字で表示すること）にする
nomal　通常の状態にする
初期値は、normal

文字を斜体に指定：フォントスタイル

font-style:??
値にitalicまたはobliqueを指定すると文字が斜体になる
nomal　通常の状態にする
初期値は、normal

font style="font:style variant weight size/height family;"　のようにまとめることも出来る
赤色、青色、緑色の順番で並べる
赤色の、style variant weightは順番を入れ替えて指定できる
line-height（行の高さ）は、/を付けて指定する
styleはfont-styleの値、variantはfont-variantの値、weightはfont-weightの値、sizeはfont-sizeの値、heightはline-heightの値、familyはfont-familyの値
サイズとフォント名は省略不可
例：：font style="font:bolder 30px HG創英角ﾎﾟｯﾌﾟ体;
　文字の太さをbolder、大きさを30px、フォントをHG創英角ﾎﾟｯﾌﾟ体に指定

例：：font style="font:30px;"
　文字の大きさのみ30pxに指定

例：：font style="font:italic 20px/150% ＭＳＰゴシック
　斜体の20pxの大きさの文字で、ＭＳＰゴシックにて記述され、行の高さは150%

文字間隔：レタースペーシング他

letter-spacing:??　　（??は単位付きの数値、normalで標準の状態にする）
　初期値は、normal
●●●●●

　　●●●●●

●^o^

line-height:??　は行の高さ（??は単位付きの数値、%、normalで通常の高さ）
　初期値は、normal

vertical-align:??　は縦方向の位置
vertical-align:top　指定された要素の上をその行の上に合わせる
middle　中心をその行の「ベースライン＋小文字Xの半分の高さ」に合わせる
bottom　指定された要素の下をその行の下に合わせる
baseline　文字をベースラインに配置する
super　文字を上付きにする
sub　文字を下付にする
text-top　要素の上辺を親要素のフォントの上辺と揃える
text-bottom　要素の下辺を親要素のフォントの下辺と揃える
数値　文字の縦方向（垂直）位置を数値に単位を付けて指定する
注：：マージンやパディング要素には、設定できない
初期値は、baseline

例：：文字を上付きにする。
例：：文字を下付きにする。

左が、vertical-alignを加えたもの、右が無しのもの
line-height:65%　とすることで、------部分と重なっています（行間が縮まった）
title="おはよ～う"　はタイトルです　下記の●の部分にマウスポインタを当ててみて下さい
title　の値に、改行タグ を使うとそのまま と表示されるから、「・・・・・・&#13；・・・・・・」のように、アスキーコードを使うと良い。

●^o^●^o^
------------------------------------

顔と顔の空白には、margin　を使っています

●●●

●●●

応用例：：四角形に丸を重ねる

■●

■●
色紙を重ねる

■■■

■■■

丸を重ねる

●●●●●●

●●●●●●

配置位置を決めるposition:や、重なる順序指定のz-index:は使っておりません！

text-align:??　行揃えを指定する
auto　テキストを自動的に配置する
left　テキストを左揃えで表示する
center　テキストを中央揃えで表示する
right　テキストを右揃えで表示する
justify　テキストを両端揃えで表示する

text-decoration:??　テキストデコレーション（文字の装飾）
underline　　テキストの各行にアンダーラインを引く
overline　　テキストの各行に上線を引く
line-through　　テキストの各行に取消線を引く
blink　文字を点滅させる（ＩＥは非対応）
none　飾りを付けずに表示（初期値）
「style="text-decoration:underline overline line-through;"」のように、複数利用も可（半角スペースで区切る）
<a href="http://www.yahoo.co.jp" target=_blank" style="text-decoration:none;">検索ページへ</a>　とすると、「検索ページへ」の下に付く、リンクがあることを示すアンダーラインが無くなる。

text-indent:??　テキストの先頭にインデント（字下げ）を付ける
??は、20px、2emなどの数値か%
1emは1文字分のサイズに相当

word-spacing:??　ワードスペーシング
??は、20px、10ptなどの数値
normalで、標準に戻す。　初期値は、normal
英語のように一つ一つ区切って使う言語に対し間隔をあける（半角スペースなどで区切られた単語の間隔を指定する）
例：This is a pen

text-transform:??　英文の大文字、小文字の表記方法を指定
英文の一文字目を大文字にしたり、すべての文字を大文字あるいは小文字で表示したりする。
none　テキスト通りに表示する（初期値）
capitalize　先頭の文字を大文字にする
uppercase　すべてを大文字にする
lowercase　すべてを小文字にする
例：：This is a pen
　太文字の部分が大文字になる

white-space:??　空白や改行をそのまま表示する
normal　連続する半角スペースやタブ、改行を一つの半角スペースとして扱う
pre　連続する半角スペースやタブ、改行を入力されている通りにそのまま表示する。　計算式やプログラムソースなどの半角スペースやタブ、改行をそのまま表示させたい場合に便利。
nowrap　連続する半角スペースやタブ、改行を一つの半角スペースに変換して、改行せずに表示する。

表示の形式

display:none　その要素自体が無い状態

display:block　要素をブロック要素（見出しや段落、表など一つにまとまったブロックを構成する要素のことで、一般的には前後に改行が入る）として表示する
例えば、「あああああいいいいいあああああ」と記述すると
あああああ
いいいいい
あああああ
のように改行されて表示される

display:inline　要素をインライン要素（文章の一部として含まれる要素で、リンク、強調、略語などで、一般的には前後に改行が入らない）として表示する
例えば、「あああああいいいいいあああああ」と記述すると
あああああいいいいいあああああ
のように改行されず表示する（ただし、ディスプレイの幅によります）

visibility:hidden　その要素の表示領域は確保されるが、見えない状態（透明）になる
あいうえお　領域確保
あいうえお　領域は確保されない

例：「あああ」の間に幅60pxの空白

ああああああ

ああああああ

：：：：：例：：：：：：

あいうえおかきくけこ
：：背景色は青、上に7pxの緑色の実線の枠が付き、「あいうえおかきくけこ」の文字が25pxの大きさで赤く表示される

各属性は、；　でつなぐ。

おなじみのものタグ

b　太文字　　i　斜体　　s　取消線　　u　アンダーライン

a　アンカー　a href="・・・・・・・・・・・・・・・・
ブラウザを別途開く場合は、<a href="http://www.・・・・・・・・" target="_blank">
リンクをクリックするごとにブラウザが開き困る場合は、ターゲットを「_$」などにすると良いと思います。
target="_$"

font size=　　文字の大きさ　　１から７まで（1が最小、7が最大）
font fase=　　文字の種類　HG創英角ﾎﾟｯﾌﾟ体　　ＭＳＰゴシック　　ARマッチ体B　　など
font color=　文字の色　red、blue、#ff0000、rgb(255,0,0)、rgb(100%,0%,0%)　など
br　改行

その他
h　見出し　h1　から　h6　まで（1が最大、6が最小）
pre　指定した範囲のテキストを、入力した通りに等幅フォントで表示
big　文字を大きく（具体的にどの程度サイズを変更するかは決まっていない）
small　文字を小さく（具体的にどの程度サイズを変更するかは決まっていない）
p　段落を表す（その部分が一つの段落であることを示し、一般的なブラウザでは、この要素の前後に一行分のスペースが取られて表示される）

その他応用編

　レインボー

●●●●●●●

●●●●●●● ●●●●●●●■
右側のものはソースの後尾に、■　を付け足し、背景と同じ色の（このページは#ffccff）■で下半分をマスクしている

　台形

▲■■▲
▲■■▲

　●に文字を重ねる

●<pre>鈴木</pre>

●

鈴木

ガイコツ


●●　●▲■|■|■■|■|■


●●　●▲■|■|■■|■|■

▲の位置

ノーマル：▲

中央：▲

右揃え：▲

▲▲▲

１：▲

２：▲

３：▲

４：▲

５：▲

左から下にかけて、１，２，３，４，５

▲ ▲▲

▲▲

配置　position:

position:absolute　　絶対的な位置に配置する（top:100px;left:200pxとすると、その位置に絶対的配置される。全く同じ大きさの違った画像をtop:100px;left:200pxに配置させた場合、その位置で重なってしまう。）
position:relative　　相対的な位置に配置する：指定された要素を本来表示されるべき位置から相対的に移動させて表示（要素Aがtop:100px;left:200pxの位置にあったとする。さらに要素BをAと同じtop:100px;left:200pxの位置に配置する。重なるのではなく、要素Aの位置は保たれる。）
position:fixed　　絶対的な位置に固定配置する：要素を絶対的位置に配置し、その要素はウインドウ上のその位置に固定されて、スクロールしても位置は変わらない（N6以降、Mac版IE5、Op6のみ対応）

top:??　　上からの距離
bottom:??　　下からの距離
left:??　　左からの距離
right:??　　右からの距離
??は、単位付きの数値、%

z-index:?　重なる順序：数値（整数値）が大きいほど上に重ねられた状態で表示される

例：このページの左上角にある色紙が重なった様がそうです
■■■

画像の場合
<img src="http://abcde.co.jp/images/aaa/xyz.gif" width="90" height="150" border="0" style="position:absolute;top:10px;left:10px;">

■■■

writing-mode:tb-rl　文字を縦書きにする
lr-tb　だと横書き
あいうえおかきくけこ

float　回り込みの指定
left　指定した要素を左側に配置し、後に続く内容を右に回り込ませる
right　指定した要素を右側に配置し、後に続く内容を左に回り込ませる
none　回り込みをしない（初期値）

例：：画像の右に「あいうえお」の文字
<img src="img/ja/menu_paso.gif" style="float:left;">あいうえお

clear　回り込みを解除する
left　左側の要素に対する回り込みを解除
right　右側の要素に対する回り込みを解除
both　左右両側の要素に対する回り込みを解除
none　回り込みを解除しない（初期値）

例：：縦文字に横文字を挟む

あいうえおかきくけこ
あいうえおかきくけこ

　さしすせそ 
　さしすせそ

あいうえおかきくけこ
あいうえおかきくけこ

zoom:??　ズーム（文字や画像を大きくする）
??は、単位の付けない数字、%
normal（通常、初期値）
zoom:2、zoom:200%はどちらも２倍に拡大（余り大きな数値を用いないこと）

あいうえお
のように記述すると、縦書き文字の右側にラインが引かれます。
あいうえお
のように記述すると、縦書き文字の中央にラインが引かれます。
あいうえお
とすると「左側に引かれるのかな？」と思うが、右側に引かれます。
そこで、
あいうえお
とすると、左側に引かれます。

text-underline-position　（下線の位置を変更する。）
above　下線を文字の上に指定する。縦書きの場合は文章の右側に表示する。
below　下線を文字の下に指定する。縦書きの場合は文章の左側に表示する。（IE5.5初期値）
auto　言語が日本語で（lang属性をjaとした場合）、縦書きの場合は下線を右側に表示し、それ以外はbelowと同じ。（IE6以降初期値）
auto-pos　autoと機能は同じ。

あいうえお　または
あいうえお
のようにしても線が左側に引かれます。　こちらの方が簡単。

direction:??;unicode-bidi:??;
directionで文字の表記方向を指定して、unicode-bidiでその指定内容を有効にする。
direction:ltr 　左から右へ：初期値
direction:rtl 　　右から左へ
unicode-bidi:bidi-override　　有効にする
unicode-bidi:embed　　状況により
unicode-bidi:normal　　通常：初期値

directionでrtlを指定しただけでは、文章を右から左に流すことができない。文章を右から左に流したい場合には、unicode-bidiを追加してbidi-override を指定する。

あいうえおかきくけこ

お遊び

文字をクリックするとメーラーが開く
<a href="mailto:?subject=ご意見">メール下さい</a>

subを使わない下付き文字
H2SO4

supを使わない上付き文字
∫X3dx=4-1X4+C

vertical-alignのsub、superを使うともっと簡単に記述出来そうですね！

H2SO4

∫X3dx=4-1X4+C

behavior　ビヘイビア：動き、挙動

文字の移動：右から左
あいうえお

文字の大文字に注意して下さい
behaviorは、動きという意味があります。　マーキータグの移動属性にも使われています。
style="behavior:url(#default#time)"　は、基本
id="MOVE1"とすることで、オブジェクト化（独立）させる文章の名前をMOVE1としています。
このように、文章や画像を独立させなければなりません
x=600　で開始位置を決めます。　x=x-20は、ｘの値を20ずつ減らしていきます。
変数xは、yでもaでもかまいません。
if(x<=0){x=600}　xが0になったなら再度x=600として始めます。
setIntervalは、指定されたミリ秒が経過するたびに動作が行われる（この例の場合、50ミリ秒ごとにxの値が20ずつ減っていく）
50の数値を変えると、移動の速さが変わります。（小さいほど速い：1000で1秒）
onendは、動作が終了したときの処理
t:dur=は、表示している秒数（1で１秒、0だと止まったまま：この例の場合、0.1秒後に移動が始まります）
その他、属性に次のものがあります
t:repeat=は、表示回数（indefiniteを設定すれば無限）
t:begin=は、表示が開始される秒数（ただし、t:timeline="seq／par"の設定に依存）
t:timeline=は、seqだと１つの子要素の表示が終了してから次の子要素の表示が開始されます。この場合、t:beginは前の表示が終了してから開始されるまでの秒数になります。　parだと子要素の表示がバラバラに開始されます。 t:beginはページが表示されてから開始されるまでの秒数となります。
t:timeaction=は、visibilityだと単に非表示になるだけなので位置関係が維持される（初期値）。　displayでは非表示の時にはそのオブジェクトの存在を消し、次に表示されるオブジェクトは同じ位置に表示されます。

MOVE1は、0.1秒後に左マージン600pxの位置から20ずつ（580,560,540・・・・・）と50ミリ秒間隔で減らしていき、0になったら600の位置に戻って繰り返します。

文字の移動：左から右
=600){y=0}',50)" t:dur="0.1">あいうえお

見本は有りません。　記述すると他のスタイルがばらける恐れがあるので！


=1000){y=0}',10)" t:dur="0.1">

マウスカーソルを当てると文字が出て、離すと消える
出してあげる

style="behavior:url(#default#time2)"は、基本
id="IN"とすることで、オブジェクト化（独立）させる文章の名前をINとしています。
このように、文章や画像を独立させなければなりません
color="#ffccffは、このページの背景色と同じ色です。　サイズ6の大きさで同色で「出してあげる」と書いています。　マウスカーソルが乗ったときに、スタイル「background:yellow」が実行され、文字が浮かび上がります。　begin="IN.mouseout" end="IN.mouseover　と逆さまにすると、一旦マウスを当て離した時に文字が浮かび上がります。　さらにその文字にマウスポインタを当てると文字は消え、離すと浮かび上がります。
mouseover：カーソルが乗ったときのイベント
mouseout：カーソルが離れたときのイベント
begin：開始状態　　end：終了状態
timeaction="style"　styleで記述された動作をしなさい
idはこの場合INとしていますが、NNでもXXでもかまいません

マウスカーソルを当てると文字が消える
消してあげる

マウスカーソルを当てると、赤い文字に赤い背景が重なります。

マウスカーソルを当てると文字が消える２
消してあげる２

マウスカーソルを当てると、visibility:hiddenが実行されます。

その他、応用
大きくしてあげる

広くしてあげる

ずらしてあげる

■●　　パターン１

■●　　パターン２
＊＊endとonendのちがいは、下で試して下さい

●

●●●●●●●

↓　この下にマウスポインタを当ててみて！
出してあげる

消してあげる

消してあげる２

大きくしてあげる

広くしてあげる

ずらしてあげる

黄色の●にマウスポインタを当ててみて！
■●

■●

●

小さい●にマウスポインタを当ててみて！

●●●●●●●

ヤマハの「XGmusic」フォントが入っていると音符や音楽記号になります
abcdefghijABCDEFGHIJKLMNOPQRSTUVWXYZ

a　b　c　d　e　f　g　h　i　j　A　B　C　D　E　F　G　H　I　J　K　L　M　N　O　P　Q　R　S　T　U　V　W　X　Y　Z

各文字にマウスポインタを当ててみて下さい

あいうえお　　あいうえお　　あいうえお
あいうえお　　あいうえお　　あいうえお
あいうえお　　あいうえお　　あいうえお　　あいうえお

：：マックでは、表示される形が変わります：：
あいうえお　クロス
あいうえお　ポインター
あいうえお　ムーブ
あいうえお　テキスト
あいうえお　ウェイト
あいうえお　ヘルプ
あいうえお　リサイズ
あいうえお
あいうえお
あいうえお

hand　autoにマウスポインターを当ててみて下さい
ポインターは「hand」　テキストは「auto」でも使える

コンピューターの設定が標準である場合は上下とも同じ方向に矢印が向きます
左から右　：　上から下　：　左上から右下　：　右上から左下
w-resize　　n-resize　　se-resize　　ne-resize
e-resize　　s-resize　　nw-resize　　sw-resize

以下、英字にマウスポインタを当ててみて下さい

デフォルト　default

：：エクスプローラ６以降で対応しているもの：：

col-resize　　row-resize　　no-drop　　not-allowed

all-scroll　　progress　　vertical-text

あいうえお
注：：「http://www.xxx.co.jp/xxx/xxx.bin」はカーソルのURLで、これは一例です。
この記述通り行ってもうまくいきません。　好みのカーソルを好みのURLに置き、そのURLを記述することで、文字上にマウスカーソルをかざすとカーソルの形状が変わります。

特殊文字

∞　∞　　√　√　　∑　∑　　⇒　⇒　　⇔　⇔
≠　≠　　‡　&Dagger;　　†　&dagger;　　⊂　⊂
♠　&spades;　　♣　&clubs;　　♥　&hearts;　　♦　&diams;　　

注：画像のURLは、実際のものではありません

注：画像のURLは、実際のものではありません

padding （内側の余白）を使う　　padding 　上　右　下　左

個別に余白を付ける場合
上　padding-top
右　padding-right
下　padding-bottom
左　padding-left



<img src="http://www.teacup.com/common/img/ja/menu_paso.gif" width="200" height="200">

padding: 20px 20px 20px 20px　のように４つの値を書きましたが、この場合、padding: 20px　と１つの値にしても上下左右に20pxが適用されます。　padding: 30px 20px　の場合は、上下が30pxで、左右が20px。　padding: 30px 20px 15px　の場合は、上が30px、左右が20px、下が15pxとなります。

フィルタ

基本 filter:フィルタの種類(属性=値,属性=値)
注：：width、heightを使って幅、高さを指定するか、positionでabsoluteを指定し表示位置を指定するか、しないと設定が無効になる場合があります。
例：あいうえおかきくけこ
ティーカップ掲示板では、positionのp、filterのfは文字コードで。

Alpha()　　テキストや画像の透明化
opacity=?　開始透明度　0（透明）から100（不透明）
finishOpacity=?　終了透明度　0（透明）から100（不透明）
style=?　（?は0から3）　グラデーションスタイル　0は全体をopacityで指定した値に透過します。その他のフィルタプロパティは指定しても無意味。　1はstartX、startYで指定した座標からfinishX、finishY指定した座標へ、opacityで指定した値からfinishOpacityで指定した値へ透過。　2は中心から放射状に、opacityで指定した値からfinishOpacityで指定した値へ透過。　3は中心からピラミッド状に、opacityで指定した値からfinishOpacityで指定した値へ透過
startX=?, startY=?, finishX=?, finishY=?　　各値０から100　グラデーションをかける領域指定　スタート地点のX,Y座標及び終了地点のX,Y座標

Blur()　　テキストや画像にブレを持たす
add=true(1)またはfalse(0)　true(1)を指定すると元の画像をブレた絵の上に重ねて表示し、false(0)は重ねない　（add=1　と　add=true　は同じ）
direction=?　ブレの方向指定：４５度単位（真上0、右上45、右90、右下135、真下180、左下225、左270、左上315）
strength=?　ブレの距離（ピクセル値）
pixelradius=?　対象をどの範囲でぼかすかを指定　0から100
shadowopacity=?　画像の透明度　　0：完全透明から　1：そのまま（完全非透過）　0.5　.4のように
makeshadow=trueかfalse　　trueは対象を影効果として扱い、対象を黒で塗りつぶす。　falseはそのまま

Chroma() 　画像の中の指定した色を透明化
color=#??????　　透明化したい色の指定　（例：color=#000000、color=red）

DropShadow()　画像やテキストにずらしたようなシャドウ（影）を付ける
color=xxxxx　　影色の指定　　カラーを８桁で表記した場合は、00は完全に透過でFFは全く透過しない　（#FF0000FFは、非透過のブルー）
offx=?, offy=?　　影の移動距離：ピクセル値（offxは右：-値は左、offyは下：-値は上方向）
positive=true(1)またはfalse(0)　　影の反転（false：反転指定では、画像の透明化された部分にまで影をつけられる）

FlipH() 　画像やテキストの左右反転

FlipV() 　画像やテキストの上下反転

Gray() 　画像やテキストの白黒化

Glow() 　画像やテキストに炎のような影付け（発光）
color=xxxxxx　　影の色　　color=red　　color=#ffff00　など
strength=?　　影を付ける度合い、ピクセル値（1：弱から255：強）

Invert()　色（色合い、明るさ、彩度）を反転

Mask() 　マスク：画像やテキストの透明部を指定色で塗りつぶし、非透明部を透明（切り抜き）にする
color=xxxxxx　　透明部を塗りつぶす色を指定。　カラーを８桁で表記した場合は、00は完全に透過でFFは全く透過しない　（#FF0000FFは、非透過のブルー）

Shadow()　シャドウ：影付け
color=xxxxx　　影の色
direction=?　　方向指定：４５度単位（真上0、右上45、右下135、真下180）
Strength=?　影を付ける度合い（0から100）

Wave()　ウェーブ：画像やテキストに波かけの効果を持たす
add=0（false）か1（true）　　波の上に元の物を重ねるかどうかの指定（0は重ねない）
freq=?　　波の個数指定（数値）
lightStrength=?　　光の強さを0から100の間で指定（数値が大きいほど強い）
phase=?　　波の開始位相（位置）を0から100の間で指定
strength=?　　波の横幅（数値）

Xray()　レントゲン写真のような効果

progid:DXImageTransform.Microsoft.BasicImage()　いろいろな効果を付ける
rotation=?　　0はそのまま、1は９０度回転、2は１８０度回転、3は２７０度回転
opacity=?　　画像の透明度　　0：完全透明から　1：そのまま（完全非透過）　0.5　.4のように
mirror=　　1を指定すると鏡に映した状態になる（左右反転）：0はそのまま
invert=　　1を指定すると色合い、明るさ、彩度が変わる（各画素のRGB値の#FFFFFFから引いた値）：0はそのまま
x-ray=　　1を指定するとレントゲン写真効果：0はそのまま
grayscale=　　1を指定するとグレースケール画像：0はそのまま

progid:DXImageTransform.Microsoft.AlphaImageLoader()　画像の扱い
使用例：

src=　　画像の位置
高さ、幅とも２００ピクセルの赤い背景の上に画像が現れます。　sizingmethod=cropでは背景は指定した大きさ画像は背景の大きさに切り取られる（背景が100px×100pxだと画像はその大きさにカット）、sizingmethod=imageでは背景は画像の大きさ画像はそのままの大きさ、sizingmethod=scaleでは画像を指定された範囲に拡大・縮小して表示する

progid:DXImageTransform.Microsoft.Emboss()　グレー化した画像に凹凸をもたらす（文字だとグレー化するだけであまり効果無し）
bias=?　画像の隆起度合いを-1 ～ 1で指定。1が最も隆起していて、0が平坦、-1が最も窪む。　この属性、値の取得は出来ても、指定は出来ないようです？

progid:DXImageTransform.Microsoft.Engrave()　画像をグレー化し、彫刻したようなくぼみをもたらす（文字だとグレー化するだけであまり効果無し）
bias=?　画像の隆起度合いを-1 ～ 1で指定。1が最も隆起していて、0が平坦、-1が最も窪む。　この属性、値の取得は出来ても、指定は出来ないようです？

progid:DXImageTransform.Microsoft.MotionBlur()　動きのあるブレ
direction=?　ブレの方向指定：４５度単位（真上0、右上45、右90、右下135、真下180、左下225、左270、左上315）
strength=?　ブレの距離（ピクセル値）
add=　　trueは、効果適用後、元のイメージを上書き表示し、falseは、しない

progid:DXImageTransform.Microsoft.Pixelate()　画像の目を粗くする（タイル状）
maxsquare=?　（数値が大きいほど粗くなる）

progid:DXImageTransform.Microsoft.Matrix()　画像を360度x360度、自在に回転・拡大縮小させる
filtertype=　拡大縮小時の色の取り方：：bilinearは、対象となる画素色を定義する方法として最も近い4画素から平均値を採る方法を用いる。　nearestは、対象となる画素色を定義する方法として最も近い画素の値を採る方法を用いる。
dx=?　対象を回転・拡大縮小させる始点の内容辺左上からのX座標をピクセル値で指定
dy=?　対象を回転・拡大縮小させる始点の内容辺左上からのY座標をピクセル値で指定
m11=?　1行1列目の対象の横方向の倍率を指定
m12=?　1行2列目の対象の底辺を横方向にどれくらいずらすかを高さに対する比率で指定
m21=?　2行1列目の対象の右辺を縦方向にどれくらいずらすかを幅に対する比率で指定
m22=?　2行2列目の対象の縦方向の倍率を指定
sizingmethod=　　clip to originalは、指定された範囲内でのみ表示し、はみ出した部分は切り取り。　auto expandは、回転・拡大縮小に合わせて、要素の大きさを変更し、この場合、dx、dyは無効

progid:DXImageTransform.Microsoft.Gradient（）　グラデーション効果をかける
startColorstr=xxxxxx　　始まりの色
endColorstr=xxxxxx　　終わりの色
gradientType=?　　0は上下にかけて、1は左右にかけて
カラーを８桁で表記した場合は、00は完全に透過でFFは全く透過しない　（#FF0000FFは、非透過のブルー）

Alpha()

<img src="../pasocom/part1/toshiba.jpg" width="188" height="147" style="filter:Alpha(opacity=30);">	<img src="../pasocom/part1/toshiba.jpg" width="188" height="147" style="filter:Alpha(opacity=50,style=2);">
	あいうえお
<img src="../pasocom/part1/toshiba.jpg" width="188" height="147" style="filter:Alpha(opacity=50,finishOpacity=30,style=1,startX=50,startY=50,finishX=130,finishX=130);">	<font color="red" style="font size:20px;width:80%; filter:Alpha(opacity=70,style=1);">あいうえお</font>
Blur()

<img src="../pasocom/part1/toshiba.jpg" width="188" height="147" style="filter:Blur(direction=90,strength=140);">	<img src="../pasocom/part1/toshiba.jpg" width="188" height="147" style="filter:Blur(direction=45,strength=140,add=1);">
あいうえお	あいうえお
<font color="red" style="font size:20px;width:80%;filter:Blur(direction=90,strength=140);">あいうえお</font>	<font color="red" style="font size:20px;width:80%;filter:Blur(direction=270,strength=140,add=1);">あいうえお</font>
Chroma()
	あいうえおあいうえお
<img src="../gif/neko.gif" width="50" height="50" style="filter:Chroma(color=#928f9b);">	<font style="font size:20px;width:80%;style;filter:Chroma(color=red);">あ<font color="red">いう</font>えお</font>
DropShadow()

<img src="../gif/neko.gif" width="50" height="50" style="filter:DropShadow(color=red,offx=5,offy=-5);">	<img src="../gif/neko.gif" width="50" height="50" style="filter:DropShadow(color=yellow,offx=5,offy=-5,positive=0);">
あいうえお	あいうえお
<font color="red" style="font size:20px;width:80%;filter:DropShadow(color=blue,offx=2,offy=2);">あいうえお</font>	<font color="red" style="font size:20px;width:80%;filter:DropShadow(color=blue,offx=2,offy=2,positive=0);">あいうえお</font>
FlipH()
	あいうえお
<img src="../pasocom/part1/toshiba.jpg" width="188" height="147" style="filter:FlipH();">	<font color="red" style="font size:20px;width:80%;filter:FlipH();">あいうえお</font>
FlipV()
	あいうえお
<img src="../pasocom/part1/toshiba.jpg" width="188" height="147" style="filter:FlipV();">	<font color="red" style="font size:20px;width:80%;filter:FlipV();">あいうえお</font>
Gray()	Invert()

<img src="../pasocom/part1/toshiba.jpg" width="188" height="147" style="filter:Gray();">	<img src="../pasocom/part1/toshiba.jpg" width="188" height="147" style="filter:Invert()">
Glow()
	あいうえお
<img src="../gif/neko.gif" width="50" height="50" style="filter:Glow(color=red,strength=60);">	<font style="width:80%;filter:glow(strength=5,color=red);" color="#ff0066" size="5">あいうえお</FONT>
Mask()	Shadow()
画像やテキストの透明部を指定色で塗りつぶし、非透明部を透明にする	あいうえお
<font style="width:80%;filter:Mask(color=white);">画像やテキストの透明部を指定色で塗りつぶし、非透明部を透明にする</font>	<font style="width:80%;filter:shadow(color=red,direction=115,strength=40);" color="blue" size="5">あいうえお</FONT>
Wave()
	画像やテキストに波かけの効果を持たす
<img src="../pasocom/part1/toshiba.jpg" width="188" height="147" style="filter:Wave(freq=3,lightStrength=30,phase=45,strength=5);">	<font style="width:100%;filter:Wave(freq=2,lightStrength=20,phase=10,strength=2);">画像やテキストに波かけの効果を持たす</font>
Xray()	progid:DXImageTransform.Microsoft.BasicImage()

<img src="../pasocom/part1/toshiba.jpg" width="188" height="147" style="filter:Xray();">	<img src="../pasocom/part1/toshiba.jpg" width="188" height="147" style="filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3,opacity=0.3);">
progid:DXImageTransform.Microsoft.Emboss()	progid:DXImageTransform.Microsoft.Engrave()

<img src="../pasocom/part1/toshiba.jpg" width="188" height="147" style="filter:progid:DXImageTransform.Microsoft.Emboss();">	<img src="../pasocom/part1/toshiba.jpg" width="188" height="147" style="filter:progid:DXImageTransform.Microsoft.Engrave();">
progid:DXImageTransform.Microsoft.MotionBlur()
	あいうえおかきくけこ
<img src="../pasocom/part1/toshiba.jpg" width="188" height="147" style="filter:progid:DXImageTransform.Microsoft.MotionBlur(direction=90,strength=100);">	<font style="width:80%;font size:20px;filter:progid:DXImageTransform.Microsoft.MotionBlur(direction=45,strength=30);">あいうえおかきくけこ</font>
progid:DXImageTransform.Microsoft.Pixelate()
	あいうえおかきくけこ
<img src="../pasocom/part1/toshiba.jpg" width="188" height="147" style="filter:progid:DXImageTransform.Microsoft.Pixelate(maxsquare=8);">	<font style="width:80%;font size:20px;filter:progid:DXImageTransform.Microsoft.Pixelate(maxsquare=3);">あいうえおかきくけこ</font>
progid:DXImageTransform.Microsoft.AlphaImageLoader()

<font style="background:red;width:70px;height:70px;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=../gif/neko.gif,sizingmethod=crop);"></font> <font style="background:red;width:70px;height:70px;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=../gif/neko.gif,sizingmethod=image);"></font> <font style="background:red;width:70px;height:70px;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=../gif/neko.gif,sizingmethod=scale);"></font>
progid:DXImageTransform.Microsoft.Matrix()

<img src="../pasocom/part1/toshiba.jpg" width="188" height="147" style="filter:progid:DXImageTransform.Microsoft.Matrix(filtertype=bilinear,dx=5,dy=8,m12=0.1,m11=0.6,m21=0.2,m22=0.6);">
progid:DXImageTransform.Microsoft.Gradient（）
あいうえお	あいうえお
<font style="FILTER:progid:DXImageTransform.Microsoft.Gradient(endColorstr=red,startColorstr=yellow,gradientType=1);width:300px;height:50px;border-style:solid;border-color:green;background-color:purple;">あいうえお</Font>	<font style="FILTER:progid:DXImageTransform.Microsoft.Gradient(endColorstr=red,startColorstr=blue,gradientType=0);width:80%;">あいうえお</Font>

＊＊＊＊＊　　　 あいうえお　あいうえお 　　＊＊＊＊＊

大文字

大文字２

<marquee scrollamount="6" width="380">
＊＊＊＊＊　　　 <MARQUEE scrollamount="3" direction="up" behavior="alternate" width="200" height="100">
<MARQUEE scrollamount="20" behavior="alternate">
あいうえお　あいうえお
</marquee></marquee>　　＊＊＊＊＊
</marquee>

大文字　大文字

大文字２　大文字２

あいうえお
かきくけこ

注：画像のURLは、実際のものではありません

<MARQUEE scrolldelay="500" scrollamount="230" width="300"><img src="img/menu_paso.gif" border="0"></MARQUEE>　　

<MARQUEE scrolldelay="500" scrollamount="230" width="300"><img src="img/menu_paso.gif" style="border:6px red solid"></MARQUEE>　　点滅、画像枠あり

<img src="img/menu_paso.gif" width="150" height="150" style="border-top:8px red solid;border-bottom:8px red solid;border-right:10px blue inset;border-left:10px blue inset"> 　枠付き画像

あいうえお かきくけこ　画像の上に文字

上へ

タグ 遊び １

タグ　遊び　１