HTML
このサイトで使用している小技を解説いたします。
動作確認はこのサイト内のみであり、ほか環境での保証は一切できません。
★☆背景を固定する☆★
■使用例■
<style type="text/css">
<!--
body {
background:
fixed
url(
../jpg/study_moon.jpg)
#000000
no-repeat
20% 40%
}
-->
</style>
■解説■
背景の指定は、「background;」で行ないます。
color, image, repeat, attachment, position を一度に指定します。
順序は自由で、省略も可能です。
color：
背景色を指定します。
テキスト部分のみの指定も可能です。
color には
・
色の名前
・
transparent
（規定値：透明色）
・
inherit
（継承）
のいずれかを指定します。
image：
・
背景画像の URL
・
none
（規定値：画像なし）
・
inherit
（継承）
のいずれかを指定します。
repeat：
背景画像の並べかたを
・
repeat
（規定値：敷き詰める）
・
repeat-x
（横方向のみ並べる）
・
repeat-y
（縦方向のみ並べる）
・
no-repeat
（ひとつだけ表示する）
・
inherit
（継承）
のいずれかで指定します。
attachment：
ウィンドウのスクロールを動かした時の背景の動作を
・
scroll
（規定値：一緒にスクロールする）
・
fixed
（スクロールしない）
・
inherit
（継承）
のいずれかで指定します。
position：
背景の横方向の位置を
・
left
（左端）
・
center
（中央）
・
right
（右端）
・
50%
のような割合で指定し、
縦方向の位置を
・
top
（上端）
・
center
（中央）
・
bottom
（下端）
・
50%
のような割合で指定します。
fixed と共に指定することにより、背景画像の表示位置を指定することができます。
[戻る]
★☆右クリックを禁止する☆★
■使用例■
<html>
<head>
<title>右クリック禁止</title>
</head>
<body
oncontextmenu="return false;"
>
:
</body>
</html>
■解説■
IE5.0 以降で有効です。Netscape ブラウザには対応しません。
[戻る]
★☆スクロールバーの色を変更する☆★
■使用例■
<style type="text/css">
<!--
BODY {
scrollbar-track-Color:
#000000
;
scrollbar-Face-Color:
#000000
;
scrollbar-Shadow-Color:
#778899
;
scrollbar-DarkShadow-Color:
#333333
;
scrollbar-Highlight-Color:
#FFFFFF
;
scrollbar-3dLight-Color:
#606060
;
scrollbar-Arrow-Color:
#FFFFFF
;
}
-->
</style>
■解説■
このｈｐはフレームを使用していますので<br> フレーム未対応のブラウザでは見られません。<br> ごめんなさい。<br>
[戻る]
★☆マウスカーソルの形状を変更する☆★
■使用例■
<style type="text/css">
<!--
BODY {
cursor:crosshair;
}
-->
</style>
■解説■
この要素にマウスを乗せたときのマウスカーソルの形状を
・
auto
（規定値：自動）
・
crosshair
（十字印）
・
default
（通常のもの）
・
pointer
（ポインタ）
・
move
（移動用）
・
e-resize
（右リサイズ）
・
ne-resize
（右上リサイズ）
・
nw-resize
（左上リサイズ）
・
n-resize
（上リサイズ）
・
se-resize
（右下リサイズ）
・
sw-resize
（左下リサイズ）
・
s-resize
（下リサイズ）
・
w-resize
（左リサイズ）
・
text
（テキスト選択）
・
wait
（待ち）
・
help
（ヘルプ）
・
inherit
（継承）
・
URL指定
のいずれかで指定します。
本サイトでは、要素にBODYを指定していますが、
テキストであっても可能です。
上の規定値にマウスカーソルを合わせてみてください。
※「URL指定」のみは、設定しておりません。
[戻る]
★☆外部ファイル（CSS）を読み込む☆★
■使用例■
<head>
<LINK rel="stylesheet" type="text/css" href="
../css/common.css
">
</head>
■解説■
外部からCSSを呼び出す…とは、ひとつのスタイルシートファイルを
全てのCSSで共有する事です。
何がいいかというと、例えば１００ページのHTMLの背景画像を一括で
変更できるのです。 CSSファイルで背景を指定しておけば、
どの階層でも関係なくなります。
相対パスをいちいち考えなくてよいのです。
絶対パス、相対パスについて
・絶対パスとは、http://から始まるアドレスの事です。
・相対パスとは、このページから見たリンク先のページをいいます。
ここでは、相対パスを用いています。
この構文は、<head>～</head>の中で定義してください。
[戻る]
★☆リンクの下線を消す☆★
■使用例■
<style type="text/css">
<!--
A:link {
text-decoration:
none
;
}
A:visited {
text-decoration:
none
;
}
A:active {
text-decoration:
none
;
}
A:hover {
text-decoration:
none
;
}
-->
</style>
■解説■
テキストの装飾を
・
none
（何もなし）
・
underline
（下線）
・
overline
（上線）
・
line-through
（打ち消し線）
・
blink
（点滅）
・
inherit
（継承）
で指定します。複数指定も可能です。
装飾のタイミングを
・
A:link
… リンク前
・
A:visited
… リンク後
・
A:active
… 押した時
・
A:hover
… ポイント時
で指定します。
[戻る]
★☆リンクにマウスが置かれたときの変化☆★
■使用例■
<style type="text/css">
<!--
A:hover {
cursor:
crosshair
;
background-color:
#FF0000
;
}
-->
</style>
■解説■
○カーソルを乗せるとカーソルが変化 (cursor: で指定します)
・A:link … リンク前
・A:visited … リンク後
・A:active … 押した時
・
A:hover
…
ポイント時
← こちらを使用
マウスカーソルの形状は
・
auto
（規定値：自動）
・
crosshair
（十字印）
・
default
（通常のもの）
・
pointer
（ポインタ）
・
move
（移動用）
・
e-resize
（右リサイズ）
・
ne-resize
（右上リサイズ）
・
nw-resize
（左上リサイズ）
・
n-resize
（上リサイズ）
・
se-resize
（右下リサイズ）
・
sw-resize
（左下リサイズ）
・
s-resize
（下リサイズ）
・
w-resize
（左リサイズ）
・
text
（テキスト選択）
・
wait
（待ち）
・
help
（ヘルプ）
・
inherit
（継承）
・
URL指定
のいずれかで指定します。
上の規定値にマウスカーソルを合わせてみてください。
○カーソルを乗せると背景の色が変化 (background-color: で指定します)
[戻る]
★☆ロボット型検索エンジンに登録されない☆★
■使用例■
<META name="robots" content="
noindex
,
nofollow
">
■解説■
検索エンジンには主に ３通りのタイプがあります。
・ロボット型
・ディレクトリ型
・両者の複合型
ディレクトリ型は、本人や推薦人からの登録申請によって登録されます。
ロボット型は、リンクを辿りながら世界中のページを定期的に
自動巡回して情報を収集します。
ロボット型検索エンジンのデータベースに登録されないようにするには、
<head>～</head> の間にタグ1行を追加します。
noindex,nofollow の部分には、
・
index
（登録を許可する）
・
noindex
（登録を禁止する）
・
follor
（このページ内のリンクの参照を許可する）
・
nofollow
（このページ内のリンクの参照を禁止する）
の組み合わせを指定します。
サイトのトップフォルダに、robots.txt という名前のテキストファイル
（下記の内容）を置いて、サイト全体を検索されないようにすることも
可能です。
--------------
User-agent: *
Disallow: /
--------------
[戻る]
★☆キャッシュされないようにする☆★
■使用例■
<head>
<META http-equiv="Pragma" content="no-cache">
<META http-equiv="Cache-Control" content="no-cache">
<META http-equiv="Expires" content="Thu, 01 Dec 1994 16:00:00 GMT">
</head>
■解説■
ファイルがローカルにキャッシュされると再更新してもページが
最新の状態にならないことがあります。
ページがキャッシュされないようにするには、
<head>～</head> の間に3行のタグを追記してください。
ただし、ブラウザの種類やバージョンにより無視される可能性が
あります。
またプロキシサーバーでキャッシュするような場合もあります。
[戻る]
★☆指定した場所にジャンプする☆★
■使用例■
○リンク元
<a href="
./homepage.html
#
010
">指定した場所にジャンプする。</a>
○リンク先
<a class="title" name="
010
">★☆指定した場所にジャンプする☆★</a>
■解説■
リンクをクリックした時に指定した場所にジャンプさせるには、
指定した場所に <a name="
名前
">...</a> で名前をつけておいて、
<a href="
ページ
#
名前
">...</a> でジャンプします。
[戻る]
★☆角の丸いテーブル☆★
■使用例■
<table border="0" cellpadding="0" cellspacing="0" bgcolor="
①
">
<tr>
<td width="
②
" height="
③
"><img src="
④
"></td>
<td> </td>
<td width="
②
" height="
③
"><img src="
⑤
"></td>
</tr>
<tr>
<td> </td>
<td>
⑧
</td>
<td> </td>
</tr>
<tr>
<td width="
②
" height="
③
"><img src="
⑥
"></td>
<td> </td>
<td width="
②
" height="
③
"><img src="
⑦
"></td>
</tr>
</table>
■解説■
本文
仕組みは、上のようになっています。
まず、４隅に表示する画像を用意します。
３×３のテーブルを作成し、４隅に適切に表示させます。
このとき以下４点の注意点があります。
・テーブルの枠線を非表示
border="0"
・テーブルの枠線とセルの内容の間の隙間
cellpadding="0"
・テーブルの内枠の太さをなくす
cellspacing="0"
・画像表示タグは改行せず１行で記載
<td ～><img ～></td>
これが基本となります。
あとは、お好みに合わせて改善していくだけです。
①
・・・ 用意した４隅の画像と合わせた色を指定します。
②
・・・ 用意した画像の幅を指定します。
③
・・・ 用意した画像の高さを指定します。
④
・・・ 左上用に用意した画像を指定します。
⑤
・・・ 右上用に用意した画像を指定します。
⑥
・・・ 左下用に用意した画像を指定します。
⑦
・・・ 右下用に用意した画像を指定します。
⑧
・・・ 本文を記載します。
[戻る]
★☆文字をランダムに動かす☆★
■使用例■
<MARQUEE scrollamount=2 scrolldelay=1 direction=up behavior=alternate width=450 height=100>
<MARQUEE scrollamount=2 scrolldelay=1 behavior=alternate>
<MARQUEE scrollamount=2 scrolldelay=1 direction=up behavior=alternate width=256 height=64>
<MARQUEE scrollamount=2 scrolldelay=1 behavior=alternate>
<MARQUEE scrollamount=2 scrolldelay=1 direction=up behavior=alternate width=128 height=32>
<MARQUEE scrollamount=2 scrolldelay=1 behavior=alternate>
WELCOME
</MARQUEE>
</MARQUEE>
</MARQUEE>
</MARQUEE>
</MARQUEE>
</MARQUEE>
■解説■
高さ、幅を指定した長方形の領域を
<MARQUEE> で縦方向に動かします。
この動く領域の中で、さらに領域を指定し <MARQUEE> で
今度は横方向に動かします。
これで、横に動きながら縦に動く領域を作成できました。
↑サンプルはテーブルを動かしており、
実際のコードとは異なります。
このセットを２回繰り返します。
このようにすることで、内側の領域は横に動きながら縦に。
縦に動きながら横に。横に動きながら縦に動きます。
擬似的にランダムに動いているように見えるわけです。
最後に一番内側の領域に文字を配置します。
（領域の背景色を同一色にします）
♪
↑サンプルは領域が小さいのですが、
「♪」の動き、それなりにランダムに見えるでしょう？
WELCOME
･･･ 動かしたい文字列
「MARQUEE」の属性をご参考までに。
behavior
スクロールの形式を
・
scroll
（スクロール）
・
slide
（端にぶつかると停止）
・
alternate
（端から端までを往復）
のいずれかで指定します。省略時の値はscrollです。
direction
スクロールの方向を指定します。
・
left
（右→左）
・
right
（左→右）
・
down
（上→下）
・
up
（下→上）
height
高さをピクセルまたはパーセンテージで指定します。
width
横幅をピクセルまたはパーセンテージで指定します。
scrollamount
スクロールする量をピクセルで指定します。
scrolldelay
スクロールする際の遅延時間をミリ秒単位で指定します。
[戻る]
★☆グラディエーション文字を作成する☆★
■使用例■
<FONT COLOR="#33FFFF" title="お遊び♪">W</FONT>
<FONT COLOR="#77FFFF" title="お遊び♪">E</FONT>
<FONT COLOR="#BBFFFF" title="お遊び♪">L</FONT>
<FONT COLOR="#FFFFFF" title="お遊び♪">C</FONT>
<FONT COLOR="#FFBBFF" title="お遊び♪">O</FONT>
<FONT COLOR="#FF77FF" title="お遊び♪">M</FONT>
<FONT COLOR="#FF33FF" title="お遊び♪">E</FONT>
■解説■
「
W
E
L
C
O
M
E
」
同じ色の文字列を表示するよりは、
綺麗な文字で一文字づつ色を変化させることによって
文字列がまるでグラデーションしているかのように
見せる事が出来ます。
同じように一文字づつサイズを変化させることによって
文字列がまるで３Ｄ化しているかのように
見せる事も出来ます。
W
H
I
S
P
E
R
M
O
O
O
N
N
N
[戻る]
戻る
