 マル秘ＨＴＭＬ技 |
| ここでは自分のホームページを楽しく、分かりやすく、便利にするためのＨＴＭＬ技をいくつか紹介します。ホームページを作っていく上で役立ててください。 |
| リンクの下線を消す |
| ＜ソース＞ |
<style TYPE="text/css">
<!--
A:link{text-decoration:none;}
A:active{text-decoration:none;}
A:visited{text-decoration:none;}
A:hover{text-decoration:none;}
-->
</style> |
|
＜使用方法＞
テキストなら、<HEAD>〜</HEAD>の間に上記のソースをコピーして下さい。
|
| マウスを乗せたときリンクの形状を変化させる。（1つのページ全て） |
1つのページ全てに、マウスを乗せたときにリンクの色を変更させることができます。
＜ソース＞ |
<STYLE TYPE="text/css">
<!--
A:hover { color: red}
-->
</STYLE> |
＜使い方＞
そのままコピーして下さい。
color:redのところは、自分の使いたい色を指定してください。 |
| マウスを乗せたとき画像を変化させる |
|
これを使うと、画像にマウスを乗せたときに、画像を別の物に変化させることができます。
＜ソース＞
|
<img src="image/a.jpg" onmouseover="this.src='image/b.jpg'"
onmouseout="this.src='image/a.jpg'"> |
＜使い方＞
img src="image/a.jpg" は、普通に表示する画像です。
image/a.jpg は使いたい画像を入力してください。
onmouseover="this.src="imge/b.jpg'"
は、マウスを乗せたときに表示する画像です。
onmouseout="this.src='image/a.jpg'"
は、マウスを放した時に表示される画像です。
コピーして使ってください。 |
| マウスを乗せたとき文字の色を変化させる |
|
テキストにカーソルを持っていったときに、色が変化します。
＜ソース＞
|
<SPAN STYLE="font-size:16pt" onMouseOver="window.event.srcElement.style.color = 'blue'"
onMouseOut="window.event.srcElement.style.color = 'red'">
ここに文字を入れてください</SPAN> |
＜使い方＞
font-size:16 は、フォントのサイズ。
onMouseOver="window.event.srcElement.style.color = 'blue'"は、カーソルをあわせたときに、変わる色をあらわしています。（この場合青）。
onMouseOut="window.event.srcElement.style.color = 'red'"は、カーソルをあわせてから放したときに表示される色です。（この場合赤） |
| 右クリックを禁止する |
|
ソースを見せたくないときなどに使えます。
＜ソース＞
|
<SCRIPT>
<!--
function mdown(e) {
if (navigator.appName == "Microsoft Internet Explorer") {
if (event.button & 2) {
alert("******");
return(false);
}
} else if (navigator.appName == "Netscape") {
if (e.which == 3) {
alert("******");
return(false);
}
}
}
if (document.all) {
document.onmousedown = mdown;
}
if (document.layers) {
window.onmousedown = mdown;
window.captureEvents(Event.MOUSEDOWN);
}
// -->
</SCRIPT> |
＜使い方＞
ソースをコピーして、alert("******") *に表示したい文字を書き込んでください。 |
| クリックでお気に入りに登録できるようにする |
|
クリックするだけでお気に入りに登録できるようになります。※これは、表示されているページが登録されます。
＜ソース（ノーマルバージョン）＞
|
<HEAD>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--
if ((navigator.appVersion.indexOf("MSIE") > 0)
&& (parseInt(navigator.appVersion) >= 4)) {
document.write("<SPAN STYLE='color:blue;cursor:hand;'onclick='window.external. AddFavorite(location.href, document.title);'>このページをお気に入りに登録する</SPAN>");
}
//-->
</SCRIPT>
</BODY> |
|
＜ソース（ボタン型バージョン）＞
|
<SCRIPT LANGUAGE="JavaScript">
<!--
if ((navigator.appVersion.indexOf("MSIE") > 0)
&& (parseInt(navigator.appVersion) >= 4)) {
document.write("<INPUT TYPE='button' VALUE='お気に入りに登録♪' onClick='window.external.AddFavorite(location.href,document.title);'>");
}
//-->
</SCRIPT> |
| ブラウザの戻るボタンと同じ意味をもたせる。 |
| ＜ソース＞ |
<HTML>
<HEAD></HEAD>
<BODY>
<A HREF="javaScript:history.back();">１つ前のページへ戻る</A>
</BODY></HTML> |
＜使い方＞
ソースをコピーして使ってください。 |
| マウスを乗せたときリンクの形状を変化させる。（1つのページ全て） |
|
1つのページ全てに、マウスを乗せたときにリンクの形状を変更させることができます。この場合は、上下に線を入れることが出来ます。
＜ソース＞
|
<HEAD>
<TITLE></TITLE>
<style type="text/css">
<!--
a:link,a:visited{text-decoration:none;}
a:hover{color:red;
border-top:solid 1px;
border-bottom:solid 1px;
}
-->
</style>
</HEAD> |
＜使い方＞
そのままコピーしてお使いください。
color:redとあるところは、使いたい色に応じて書き換えてください。blackなど。
top:solidというところは、上のラインの太さを、bottom:solidというところは、下のラインの太さのことです。 |
| ゆれるリンク |
| ＜ソース＞ |
<A href="○○○.htm">の部分にリンク先を記入してください
<MARQUEE width="50" behavior="alternate" scrollamount="5"><A href="○○○.htm" target="_blank">ENTER</A></MARQUEE> |
width=ゆらゆらする範囲
scrollamount=ゆらゆらするスピード |
| リンクにカーソルを合わせると バックの色が変わる |
このタグを <HEAD> と </HEAD>の間に入れてください。ページ全体に適用されます。
＜ソース＞ |
| <STYLE type="text/css"><!--a:hover {color :#9966ff ; background-color :#ede8ff;}--></STYLE> |
| 赤い文字の所は色なので自分の好きな色に変えて使ってください。 |
| ページ全体のリンクのアンダーラインを消し、色を変える |
リンクにカーソルを合わせると色が変ります。 アンダーラインを消しています。このタグを<HEAD> と </HEAD>の間に入れてください。
＜ソース＞ |
<STYLE type="text/css">
<!--
a:link { color:#996666 ;text-decoration:none ; }/*未訪問リンク */
a:visited { color:#cc6666 ;text-decoration:none ; }/*訪問済みリンク */
a:active { color:#cc6666 ; text-decoration:none ; }/*クリックしたとき */
a:hover { color:#993300 ; text-decoration:none ; }/*マウスが乗ったとき */
-->
</STYLE> |
|
アンダーラインを消したい時 text-decoration:none
アンダーラインを出したい時 text-decoration:underline
赤い文字の所は色なので自分の好きな色に変えて使って下さい。
|
| 文字を流す |
| ＜ソース＞ |
| <MARQUEE scrollamount="6" bgcolor="#ffacac"><FONT color="#ffffff">ここに文字を入れて下さい。</FONT></MARQUEE> |
|
scrollamount=流れる速さ
赤い文字の所は色なので自分の好きな色に変えて使って下さい。
|
| 画像を流す |
| ＜ソース＞ |
| <MARQUEE scrollamount=2><IMG src="○○○.gif"></MARQUEE> |
|
scrollamount=流れる速さです。
○○○のところに流したい画像を指定して下さい。
|
|
| ネットで稼ごう！ |
|
|
| お楽しみ情報 |
|
|
| 便利・お得情報 |
|
|
|
