小技集
簡単に使える小技を紹介します。(小技とはいえないようなのもありますが)
少し長いものが多いですが、ひと通り理解することをオススメします。どれも応用がきくものなので、考え方に幅がつきます。
リンクに触れると!?
右のリンクにカーソルを触れてみてください。(触れるだけ)⇒リンク
文字の色が赤に、背景色がピンクになりましたね。
(他の作成例:
リンク
リンク
リンク
リンク
リンク
リンク
)
これはスタイルシートの「a:hover」を使います。a:hoverのあとに触れたらどうなるかを書きます。
(修飾内容は[タグ一覧]のスタイルシートの部分から探してください)
参考:[スタイルシート](必須) 、 [タグ一覧]
<head>
<STYLE TYPE="text/css">
<!--
a:hover { color:red; background:pink;}
-->
</STYLE>
</head>
<STYLE TYPE="text/css">
<!--
a:hover { color:red; background:pink;}
-->
</STYLE>
</head>
スクロールバーの色を変える
どれがどこの色かは説明するのが難しいのでいろいろ試してみてください。
<head>
<style type="text/css">
<!--
body{
scrollbar-face-color :#色指定;
scrollbar-highlight-color : #色指定;
scrollbar-shadow-color : #色指定;
scrollbar-arrow-color : #色指定;
scrollbar-3dlight-color : #色指定;
scrollbar-darkshadow-color : #色指定;
}
-->
</style>
</head>
<style type="text/css">
<!--
body{
scrollbar-face-color :#色指定;
scrollbar-highlight-color : #色指定;
scrollbar-shadow-color : #色指定;
scrollbar-arrow-color : #色指定;
scrollbar-3dlight-color : #色指定;
scrollbar-darkshadow-color : #色指定;
}
-->
</style>
</head>
軽量背景画像
ページの背景、テーブルの背景、文字の背景などに軽量の画像を敷き詰めるように使えばインターネット環境によらず利用効果大です。このサイトでもいくつか使っています。どこに使っているかわかりますか?
画像が小さいのでWindows付属のペイントでも簡単に作れます。
下の左側が背景にする画像。右側は背景にした場合。
|
いろんな枠を作る
テーブルを利用すればいろんな枠が作れます。
下の作成例では角4つに画像を使っています。
これはいろいろ応用できるので考えてみてください。(形を変える。影をつける。等)
|
← |
|
<table cellspacing="0px" cellpadding="0px">
<tr>
<td><img src="image/corner1.gif" ></td>
<td bgcolor="#ff9900" width="200px"></td>
<td><img src="image/corner2.gif" ></td>
</tr>
<tr>
<td bgcolor="#ff9900" height="50px"></td>
<td bgcolor="#ff9900">ここに文章を書きます。</td>
<td bgcolor="#ff9900"></td>
</tr>
<tr>
<td><img src="image/corner3.gif" ></td>
<td bgcolor="#ff9900" width="200px"></td>
<td><img src="image/corner4.gif" ></td>
</tr>
</table>
<tr>
<td><img src="image/corner1.gif" ></td>
<td bgcolor="#ff9900" width="200px"></td>
<td><img src="image/corner2.gif" ></td>
</tr>
<tr>
<td bgcolor="#ff9900" height="50px"></td>
<td bgcolor="#ff9900">ここに文章を書きます。</td>
<td bgcolor="#ff9900"></td>
</tr>
<tr>
<td><img src="image/corner3.gif" ></td>
<td bgcolor="#ff9900" width="200px"></td>
<td><img src="image/corner4.gif" ></td>
</tr>
</table>








