ＨＴＭＬの小技

ＨＰをお持ちでない方は

小技を使ってＨＰを可愛く飾ろう！

*・・・***・・・*　◇ お約束事項 ◇　*・・***・・*　 ◇ 小技の使い方 ◇ 　*・・・***・・・*

　
＋＋＋ お品書き ＋＋＋
　
スクロールバーの色を変える
ウィンドウの周りを囲む
壁紙を固定する
ゆれるリンク
文字にカーソルを合わせるとポインタの形が変わる
リンクにカーソルを合わせるとバックの色が変る
リンクにカーソルを合わせるとポップアップで説明が出る
リンクの下線を消す
画像を使わずに､ＨＴＭＬでボタンをつくる
可愛いテキストボックス
ページ全体リンクのアンダーラインを消し､色を変える
ページ全体のフォントサイズを固定する
流れる文字や画像
流れるメッセージ
お気に入りに追加するには？
自動的に指定ＵＲＬに飛ばすには？
色々なリンクの開き方



Various Colorsをお気に入りに追加する♪







★ スクロールバーの色を変えてみよう ★


☆ カラーバリエーション ☆


このタグを<HEAD>　と　</HEAD>の間に入れてください。（ＩＥ5.5以上のみ）
<STYLE type="text/css">
<!--BODY{
scrollbar-face-color:#ffffff; /*スクロールバー本体の色*/
scrollbar-highlight-color:#ff6699;/*スクロールバー左側（上）の影*/
scrollbar-shadow-color: #ff6699; /*スクロールバー右側（上）の影*/
scrollbar-3dlight-color: #ffffff; /*スクロールバーの左側（下）の影*/
scrollbar-arrow-color: #ff6699; /*矢印の色*/
scrollbar-track-color: #ffffff; /*背面の色*/
scrollbar-darkshadow-color: #ffffff;/*スクロールバー右側（下）の影*/
}-->
</STYLE>


☆ 赤い文字の所は色なので自分の好きな色に変えて使ってね。







★　ウィンドウの周りを囲む　★



ウインドウの周りを綺麗な色で縁取りしてみよう！


サンプル



このタグを<BODY>に追加してください。border=縁取りの幅
style="border:20px solid #a8a8d5;"


<BODY style="border:20px solid #a8a8d5;">









★ 壁紙を固定する ★


スクロールした時に 壁紙が一緒に動かないように固定してしまおう！


☆ 他のも見てみる ☆


このタグを<BODY>に追加してください。（ＩＥのみ）
bgProperties="fixed"

例えばこんな感じです。"○○○.gif" のところで背景画像を指定してね♪

<BODY text="#999999" background="○○○.gif" bgProperties="fixed">







★　ゆれるリンク　★



リンクがゆらゆらしたら すこぶる可愛いね♪


ENTER


<A href="○○○.htm">の部分にリンク先を記入してね☆
<MARQUEE width="50" behavior="alternate" scrollamount="5"><A href="○○○.htm" target="_blank">ENTER</A></MARQUEE>


width=ゆらゆらする範囲
scrollamount=ゆらゆらするスピード














★ カーソルを合わせると ポインタの形が変わる　★




ここにカーソルを合わせてみてρﾞ(･･ )


☆ 他のも見てみる ☆


リンクじゃないのにカーソルを合わせるとポインタの形が変わるの。×××の所に好きな文字を入れてね。

<SPAN style=cursor:help;>××××××</SPAN>












★ リンクにカーソルを合わせると バックの色が変わる　★


リンクへカーソルを合わせてみよう！！　リンクの周りの色が変ります。


リンク


☆ 他のも見てみる ☆

このタグを <HEAD>　と　</HEAD>の間に入れてください。ページ全体に適用されます！
<STYLE type="text/css"><!--a:hover {color :#9966ff ; background-color :#ede8ff;}--></STYLE>



☆ 赤い文字の所は色なので自分の好きな色に変えて使ってね。







★ リンクに説明を出す　★


リンクにカーソルを合わせるとポップアップの説明が出るよ！


ＨＯＭＥ


<A href="リンク先.htm"　の後に付けます
title="ほらね♪"


<A href="リンク先.htm" title="ほらね♪">ＨＯＭＥ</A>







★　リンクの下線を消すには　★


部分的にリンクの下線を消す方法です。ページ全体に適用するにはこちら


リンク


<A href="リンク先.htm"　の後に付けます
style="text-decoration:none"

上のリンクを例にしてみると､こういう風になります。

<A href="リンク先.htm"style="text-decoration:none">リンク</A>







★　画像を使わずにボタンをつくろう　★



ＨＯＭＥ


☆ カラーバリエーション ☆

ＨＴＭＬだけでボタンをつくれると便利だね。<A href="○○○.htm">の部分にリンク先を記入してね☆
<TABLE cellpadding="2" bgcolor="#ffe5dd">
<TBODY>
<TR>
<TD width="80" bgcolor="#feefed" align="center" height="20" nowrap><A href="○○○.htm" target=""><FONT color="#999999">ＨＯＭＥ</FONT></A></TD>
</TR>
</TBODY>
</TABLE>





ぼ た ん


☆ カラーバリエーション ☆


<A href="○○○.htm">の部分にリンク先を記入してね☆
<TABLE cellspacing="3" bgcolor="#ffd4d0">
<TBODY>
<TR>
<TD bgcolor="#fffcfb">
<TABLE bgcolor="#ffd4d0" cellspacing="1">
<TBODY>
<TR>
<TD width="95" height="20" bgcolor="#fffcfb" align="center" nowrap><A href="○○○.htm"><FONT color="">ぼ た ん</FONT></A></TD>
</TR>
</TBODY>
</TABLE>
</TD>
</TR>
</TBODY>
</TABLE>



☆ 赤い文字の所は色なので自分の好きな色に変えて使ってね。







★　可愛いテキストボックス　★






☆ カラーバリエーション ☆


テキストボックスも色を付けて可愛くしよう♪（一番下のcolorは文字色です。rows=行数 cols=桁数）
<TEXTAREA name="kowaza_form" rows="6" cols="34" style="font-size:9pt;font-family:Tahoma;
border:double 4#ffb5b5;/*フォームの枠の太さと色*/
scrollbar-face-color:#ffd9d9;/*スクロールバー本体の色*/
scrollbar-highlight-color:#ff9999;/*スクロールバー左側（上）の影*/
scrollbar-shadow-color: #ff9999;/*スクロールバー右側（上）の影*/
scrollbar-3dlight-color: #ffffff;/*スクロールバーの左側（下）の影*/
scrollbar-arrow-color: #fffcf8;/*矢印の色*/
scrollbar-track-color: #fffcf8;/*背面の色*/
scrollbar-darkshadow-color: #ffffff;/*スクロールバー右側（下）の影*/
background-color:#fffcf8;/*テキストボックス内部の色*/
color:#cc9999">ここに文章を記入</TEXTAREA>


rows=6（高さ） と cols=34（幅） を変更すれば、大きさを変えることができるよ！






一行タイプのテキストボックスも可愛くしてみました♪



テキストボックスの大きさはsize=""で変えられるよ！
<FORM>
<INPUT type="text" size="40"
value="文字を表示させたい時はここに入力"
style="border-style:solid ;/*枠線を単純な線に*/
border-width:1px; /*枠線の太さ*/
border-color:#d8b8b8; /*枠線の色*/
background:#f8ece8; /*背面の色*/
color:#cc9999; /*文字色*/
"></FORM>






文字を入力する時に、色が変わるタイプです。



文字を入力する時に色が変わるよ！ onFocus=入力する時、onBlur=入力後です。
<FORM>
<INPUT type="text" size="40"
value="文字を表示させたい時はここに入力"
style="border-style:solid; /*枠線を単純な線に*/
border-width:1px; /*枠線の太さ*/
border-color:#d8d8eb; /*枠線の色*/
background:#fafafc; /*背面の色*/
color:#bcbcbc; /*文字色*/"
onFocus = "if (document.all) {
this.style.backgroundColor='#e5ddff'; /*入力時の背面の色*/
this.style.color='#ffffff'; /*入力時の文字色*/
}"
onBlur = "if (document.all) {
this.style.backgroundColor='#fafafc'; /*マウスが離れた時の背面の色*/
this.style.color='#bcbcbc'; /*マウスが離れた時の文字色*/
}">
</FORM>


フォームのカスタマイズ
border-style:solid　　枠線を平な線にする
border-style:dotted　　枠線を点線に
border-width:1px　　枠線の太さを１ピクセルにする
border-color:#d8d8e　　枠線の色を#d8d8eにする
color:#bcbcbc　　文字の色を#bcbcbcにする
background:#fafafc　　背景色を #fafafcにする
width:200px　テキストボックスの幅を 200px にする
height:20px　　テキストボックスの高さを 20px にする



☆ 赤い文字の所は色なので自分の好きな色に変えて使ってね。







★　カラフルな セレクトボックス　★





background-color=背景色、color=文字色です。
<FORM><SELECT style="font-size:10pt; color:9999ff; background-color:#fff0f5">
<OPTION>*ＭＥＮＵ*
<OPTION>おはよう
<OPTION>こんにちは　　
<OPTION>こんばんは
</SELECT></FORM>






background-color=背景色、color=文字色です。
<FORM><SELECT>
<OPTION style=background-color:#ccccff;color:#666699>*ＭＥＮＵ*
<OPTION style=background-color:#9999ff;color:#d7d7d7>おはよう
<OPTION style=background-color:#7979ff;color:#e1e1e1>こんにちは
<OPTION style=background-color:#6666cc;color:#ffffff>こんばんは
</SELECT></FORM>












★　ページ全体のリンクのアンダーラインを消し、色を変える　★


リンクにカーソルを合わせると色が変ります。　アンダーラインを消しています。


このタグを<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


☆ 赤い文字の所は色なので自分の好きな色に変えて使ってね。







★　ページ全体のフォントサイズを固定する　★


リンクにカーソルを合わせると､フォントが大きくなるように指定してます。
　リンク部分は１２ポイント､その他のフォントは１０ポイントに指定してあります。

このタグを<HEAD>　と　</HEAD>の間に入れてください。
<STYLE type="text/css">
<!--
a:link {
font-size: 12pt;
text-decoration:none;
color:#8000ff; /*未訪問リンク */
}
a:visited {
font-size: 12pt;
text-decoration:none;
color:#9966ff; /*訪問済みリンク */
}
a:active {
font-size: 12pt;
text-decoration:none;
color:#cc66ff ; /*クリックしたとき */
}
a:hover {
font-size: 13pt;
text-decoration:underline;
color:#ff9999 ; /*マウスが乗ったとき */
}
td {
font-size: 10pt; /*枠内のフォントサイズ*/
}
span {
font-size: 10pt;/*<SPAN>〜</SPAN>のフォントサイズ*/
}
b {
font-size: 10pt; /*太字のフォントサイズ*/
}
body {
font-size: 10pt; /*フォントサイズ*/
color:#5044a4; /*フォントカラー*/
}
-->
</STYLE>


アンダーラインを消したい時　text-decoration:none
アンダーラインを出したい時　text-decoration:underline


☆ 赤い文字の所は色なので自分の好きな色に変えて使ってね。







★　文字を流してみよう　★




こんな感じで流れるの･･･♪


☆ 他のも見てみる ☆


何処にでも、好きなところに貼り付ければOKよ！
scrollamount=流れる速さなので､好きな速さに変えてね。
<MARQUEE scrollamount="6">こんな感じで流れるの･･･♪</MARQUEE>








こんなのも可愛いかも･･･。


☆ 他のも見てみる ☆


白抜きにしてみるのも可愛いかもね。
scrollamount=流れる速さなので､好きな速さに変えてね。
<MARQUEE scrollamount="6" bgcolor="#ffacac"><FONT color="#ffffff">こんなのも可愛いかも･･･。</FONT></MARQUEE>


☆ 赤い文字の所は色なので自分の好きな色に変えて使ってね。






☆ 他のも見てみる ☆


画像だって流せるよ☆彡　　○○○のところで流したい画像を指定してね♪
scrollamount=流れる速さです。
<MARQUEE scrollamount=2><IMG src="○○○.gif"></MARQUEE>













★　流れるメッセージ　★



メッセージが流れるよ☆彡　

枠や、フォントカラーを変えて色々と楽しめそう♪

［ＨＴＭＬボタン］を枠の代わりに使うのも可愛いよ！その場合<MARQUEE>〜</MARQUEE>をボタンの中に入れてね！

scrollamount=流れる速さだよ！


☆ カラーバリエーション ☆


メッセージを流して注目度アップ！scrollamount=流れる速さです。
<TABLE bgcolor="#eae7ef" cellspacing="3"><TBODY><TR><TD bgcolor="#fcfcfc"><TABLE bgcolor="#eae7ef" cellspacing="1" cellpadding="3"><TBODY><TR><TD bgcolor="#fcfcfc">
<MARQUEE direction="up" height="85" width="160" scrollamount="1">
<FONT size="1" color="#666699">
ここに文章を記入
</FONT>
</MARQUEE>
</TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>



☆ 赤い文字の所は色なので自分の好きな色に変えて使ってね。







★　お気に入りに追加するには？　★



クリック一つでお気に入りに追加出来ちゃう！これなら うっかり追加しちゃうかも？！


お気に入りに追加


☆ カラーバリエーション ☆


カーソルを合わせるとマウスポインタが出るようにしてみたよ♪
ピンクの部分を自分のサイト用に変えて使ってね♪ （ＩＥ４以上）
<TABLE cellspacing="1" bgcolor="#d8d8eb" cellpadding="3" style="cursor :pointer;">
<TBODY>
<TR>
<TD bgcolor="#fafafc" align="center"><P onclick="window.external.addFavorite('サイトＵＲＬ','サイト名')"><FONT color="#bcbcbc" size="2">お気に入りに追加</FONT></P></TD>
</TR>
</TBODY>
</TABLE>

cellspacing=枠線の太さです。太さを変えてもかわいいよ！


☆ 赤い文字の所は色なので自分の好きな色に変えて使ってね。







★　自動的に指定ＵＲＬに飛ばすには？　★


ホームページを移転した時など、指定ＵＲＬに自動的に飛ばす事が出来たらすこぶる便利！


サンプル



このタグを<HEAD>　と　</HEAD>の間に入れてください。
http://○○.htmの部分は移動先のＵＲＬを記入してください。
<META HTTP-EQUIV="Refresh" CONTENT="5;URL=http://○○.htm">

CONTENT="5 は５秒後に指定先ＵＲＬに移動させるかという意味です。
必要に応じて変更してね♪

万一自動で飛ばない場合を考えて、普通のリンクも入れておけば完璧！







★　色々なリンクの開き方　★



リンク先を新しいウィンドウで立ち上げたい場合や
フレーム内に取り込みたくない時などに使うと便利♪


<A href="リンク先"　の後に付けます。
新しいウィンドウで開く target="_blank"
全画面で開く（フレームを壊して開く） target="_top"
同一ウィンドウで開く（フレームは壊さず開く） target="_self"


新しいウィンドウを開く場合はこうなります。


<A href="○○○.htm" target="_blank">ＨＯＭＥ</A>






Copyright (C) 2001-2014. Various Colors. All rights reserved.