小技集

簡単に使える小技を紹介します。(小技とはいえないようなのもありますが)
少し長いものが多いですが、ひと通り理解することをオススメします。どれも応用がきくものなので、考え方に幅がつきます。

リンクに触れると!?

右のリンクにカーソルを触れてみてください。(触れるだけ)⇒リンク
文字の色が赤に、背景色がピンクになりましたね。
(他の作成例: リンク リンク リンク リンク リンク リンク )
これはスタイルシートの「a:hover」を使います。a:hoverのあとに触れたらどうなるかを書きます。
(修飾内容は[タグ一覧]のスタイルシートの部分から探してください)
参考:[スタイルシート](必須) 、 [タグ一覧]

<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>

軽量背景画像

ページの背景、テーブルの背景、文字の背景などに軽量の画像を敷き詰めるように使えばインターネット環境によらず利用効果大です。このサイトでもいくつか使っています。どこに使っているかわかりますか?
画像が小さいので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>
タグ辞典 HTML・CSSを網羅!!おすすめ!!↓
★★★★★
HTML(エイチティエムエル)+CSS
HTML(エイチティエムエル)+CSS handbook2nd edit

↓ぜひ感想をお願いします。(管理人が跳んで喜びます!!不満点などでも結構です。)
分かりやすかった 難しかった
メールアドレス:(書かなくてもいいです。)
感想・要望などあればひとことよろしくお願いします。
ぜひ作ったホームページのアドレスを教えてください!!
【特集】おすすめ!接続料金をタダに!
A8.net Click Here!
ホームページ用の広告を配信しているサイトです。わたしはこのサイトを含め2つホームページに広告を貼っていますが、らくらく接続料金ぐらいは報酬をいただいています。これが楽しみのひとつにもなってます!