HTML技集
ここでは自分のホームページを楽しく、分かりやすく、便利にするためのHTML技をいくつか紹介します。ホームページを作っていく上で役立ててください。
リンクの下線を消す |
<ソース> |
<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();">1つ前のページへ戻る</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=流れる速さです。
○○○のところに流したい画像を指定して下さい。
|
|
|
|
ネット収入初歩編 |
|
アフィリエイトガイド |
|
懸賞ガイド |
|
|