HPの小技


目次

1.影付き文字を表示させる(IE4.0以上対応)
2.テキスト文字にグラデーションをかける
3.スタイルシートを使って文字を重ねる(IE4.0以上)
4.背景を左の縦一列のみ表示
5.タグを活用する
6.文章を隠す(IE4.0以上)
7.上と左に余白を空ける
8.マウスを合わせると文字の色が変わる
9.メールのサブジェクトを自動表示する

一つ前へ


1.影付き文字を表示させる(IE4.0以上対応)

ソース:
<SPAN STYLE="font-family:'Impact';font-weight:bold;font-size:100pt;color:#0055FF;
width:100;height:100;filter:Shadow(Color=#333333,Direction=120);">
koshino</SPAN>

表示:
koshino


2.テキスト文字にグラデーションをかける
ソース:
<FONT SIZE=7 COLOR="#000000" FACE="Impact">T</FONT>
<FONT SIZE=7 COLOR="#222222" FACE="Impact">h</FONT>
<FONT SIZE=7 COLOR="#444444" FACE="Impact">a</FONT>
<FONT SIZE=7 COLOR="#666666" FACE="Impact">n</FONT>
<FONT SIZE=7 COLOR="#888888" FACE="Impact">k</FONT>
<FONT SIZE=7 COLOR="#AAAAAA" FACE="Impact">Y</FONT>
<FONT SIZE=7 COLOR="#CCCCCC" FACE="Impact">o</FONT>
<FONT SIZE=7 COLOR="#EEEEEE" FACE="Impact">u</FONT>

表示:
ThankYou

3.スタイルシートを使って文字を重ねる(IE4.0以上)
ソース:
<DIV STYLE="font-family:'impact';font-size:70;color:#ff7755;">Chiba<BR></DIV>
<DIV STYLE="font-family:'impact';font-size:70;color:#55ff55;margin-top:-40pt;margin-left:20pt;">Cyousei<BR></DIV>
説明:
Webの表示-フォント:impact;サイズ:70ピクセル;色:オレンジ
Factoryの表示-フォント:impact;サイズ:70ピクセル;色:黄緑;上へ40ピクセル移動:右へ20ピクセル移動
表示:
Chiba
Cyousei

4.背景を左の縦一列のみ表示(IE4.0以上)

ソース:
<BODY STYLE="background-color:white;background-image:url('waza004.gif');background-repeat:repeat-y;">
説明:
background-repeat:repeat-y; の所で指定します。
その他
repeat-x で横一列の表示
no-repeat で1枚のみの表示になります。
表示:
こちらで表示

5.タグを活用する

ソース:
<META NAME="keywords" CONTENT="html,ホームページ作成,技,工夫">
<META NAME="description" CONTENT="ホームページ作成の小技と工夫">
<META HTTP-EQUIV="CONTENT-TYPE" CONTENT="text/html;CHARSET=iso-2022-jp">

説明:
タグはとの間に記入してください
1行目(keyword)...html,ホームページ作成,技,工夫 がロボットサーチ
などでの検索キーワードになります。
2行目(description)...検索で引っかかった時の説明文を記述します
3行目...文字コードを指定します。
日本語JIS CHARSET=iso-2022-jp
日本語Shift-JIS CHARSET=Shift JIS
日本語EUC CHARSET=euc-jp

6.文章を隠す(IE4.0以上)
ソース:

<P onclick="document.all.d.style.display=document.all.d.style.display=='none'?'':'none'">ここをクリックしてね</P>
<P ID=d STYLE="display:none">これが隠したい文章です!</P>

表示:

ここをクリックしてね




7.上と左に余白を空ける
ソース:
<BODY BGCOLOR="#ffffff" topmargin=100 leftmargin=100>

表示:
このページは、上100pt空けて左100pt空けて表示しています。


8.マウスを合わせると文字の色が変わる
対応ブラウザ:
InternetExplorer 4
InternetExplorer 5

ソース:
<SPAN onmouseover='this.style.backgroundColor="##FF4040"'
onmouseout='this.style.backgroundColor="##606060"'>
ここにマウスを合わせてね
</SPAN>

説明:
onmouseover でマウスが文字に乗った時の色を指定
onmouseout でマウスが文字を離れた時の色を指定

表示:
ここにマウスを合わせてね



9.メールのサブジェクトを自動表示する

ソース:
<A HREF="mailto:koshino@olive.ocn.ne.jp?subject=TEST Mail">
koshino@olive.ocn.ne.jp</A>

説明:
subject=TEST Mail がサブジェクトを表示する部分です。

表示:
koshino@olive.ocn.ne.jp



一つ前へ