チョットした小技

文字の発光効果

限定です
HTML タグであそぼう

<div style="position: absolute; filter:Glow(color=★,strength=☆)">〜</div>
★=発光色
☆=発光強度

<html>
<head>
<title>タグであそぼう！</title>
</head>
<body>
<div style="font-size: 24pt; color: orange; position: absolute; filter:Glow(color=aqua,strength=8)">HTML タグであそぼう</div> </body>
</html>

影付き文字にしよう

限定です
HTMLタグであそぼう

<div style="position: absolute; filter: shadow(★)">
★=パラメータ
color(カラー名またはカラーコード)
direction(影の方向（角度）)
サンプル


ソース
<div style="position: absolute; filter: shadow(color=#0000cd,direction=135)"><font size=6 color=DeepSkyBlue>HTMLタグであそぼう</font></div>

半透明化

テーブルでの使用例
opacity=60
<table style="filter:Alpha(opacity=★)">
★=透明度

リンクボタンにマーキー！


<button onclick="location.href='****.htm'" style="width=100;font-size:12pt; color:white; background-color:black;"><marquee>ここをクリック！</marquee></button>
サンプル

ページ読み込み中のメッセージ

限定です
ボディタグ付加部分
<body style="z-index:0" onLoad="Yomikomi.style.visibility='hidden'">
表示部スタイル指定
<div id="Yomikomi" style="color:blue;font-weight:bold;position:absolute;top:0px;left:0px;width:75%;height:75%; z-index:10;">
Now Loading...(ただ今読み込み中・・・) </div>
スペースの都合改行していますが使用時はタグ内では改行しないで下さい
top:*px;left:*pxで表示位置を指定

オンマウスでフィルター効果

限定です
a img {filter: Alpha(Opacity=60)}
a:hover img {filter: Alpha(Opacity=100)}
記述例(ヘッダ内に記述)
<style TYPE="text/css">
<!--
a img {filter: Alpha(Opacity=60)}
a:hover img {filter: Alpha(Opacity=100)}
-->
</style>


フィルタ効果（モノクロ）


記述例(ヘッダ内に記述)
<style TYPE="text/css">
<!--
a img {filter: Gray}
a:hover img {filter: Alpha(Opacity=100)}
-->
</style>

フィルタ効果（反転）

左右反転上下反転

記述例(ヘッダ内に記述)
<style TYPE="text/css">
<!--
a:hover img {filter: FlipH}
a:hover img {filter:FlipV}
-->
</style>
FlipH（左右反転）、filter:FlipV（上下反転）

リストマークに画像を使用

<ul style="list-style-image: url(???.gif);">
ヘッダ記述例
ul { list-style-image: url(???.gif);}
???は画像ファイル名またはＵＲＬ

カーソルに画像を使用する

BODY{ cursor:url('???.cur'); }

???の部分はカーソル画像ファイルを指定します
拡張子が.cur（カーソル）.ani（アニメカーソル）

スクロールしても項目が固定のテーブル

div{overflow-y: scroll; width: 350px; height: 65px;}
タグに記述する場合
<div style="overflow-y: scroll; width: 350px; height: 65px;">

サンプル
IE4.01 IE5.0 IE5.5 IE6.0 Opera
○ ○ ○ ○
× × ○ × ×
× ○ ○ ○

○ ○ ○ ○

× ○ × ○



ソース
<table border="1" cellpadding="0" cellspacing="1" width="400px">
<col span="5" width="80">
<tr>
<th>IE4.01</th>
<th>IE5.0</th>
<th>IE5.5</th>
<th>IE6.0</th>
<th>Opera</th>
</tr>
</table>
<div style="overflow-y: scroll; width: 400px; height: 55px;">
<table border="1" cellpadding="0" cellspacing="1" width="400px">
<col span="5" width="80">
<tr>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td><br></td>
</tr>
以下略
</table> </div>

区切り線にグラデーション効果を付ける

限定です
<hr color="★" size="☆" style="filter: alpha(opacity=■,finishopacity=100,style=2)">
★=カラーコード又はカラーネーム、☆=幅、■=透明度
△=透過スタイル[1=直線状、2=円状、3=長方形状]

カラー#808080、幅15、透明度30、透過スタイル2を適応

カラー#0000CC、幅10、透明度20、透過スタイル3を適応

カラー#FF6600、幅10、透明度50、透過スタイル1を適応

startX=0,startY=0,finishX=100,finishY=100の追記でグラデーションの向きを指定可能です

インラインフレームの境界線

<iframe src="○" width="□" height="△" scrolling="☆" frameborder="0"
style=" border-style: ★; border-width: ●; color: ■;"></iframe>
注)改行せずに1行で！

○=インラインフレーム内に表示させるファイル名
□=幅
△=高さ
☆=スクロールの有無
★=境界線の種類
無し none 実線 solid 点線 dotted
粗い点線 dashed ２重線 double 谷線 groove
山線 ridge 内線 inset 外線 outset

●=境界線の太さ,thin（細)medium（中）thick（太）または（ピクセル数)
■=カラー名または＃カラーコード

画像を保存されにくくする

画像を背景として外部スタイルシート（.css）ファイルから呼び出し
右クリックを無効とする事で画像を保存されにくくしますが
完全に画像の保存を防止する事はできません


設置例
CSSファイルの作成
拡張子が.cssとするファイルをテキストエディタまたはメモ帳などで作成
内容
table.gazou{ background-image:url("●●.jpg"); background-repeat: no-repeat;}
●●=画像ファイル名

画像を掲載するファイル 記述例(cssファイル名がimage.cssの場合)
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>画像を保存されにくくする</title>
<link rel="stylesheet" type="text/css" href="./image.css">
</head>
<body>
<table class="gazou" width="80%" height="80%" onContextmenu="return false">
<tr><td></td></tr>
</table>
</body>
</html>