CSS例文
基本的に<Head>〜</Head>に挿入。
使える物を紹介。随時更新。
ページ全体の背景色を指定する。
<style type="text/css"><!--
body { background-color:blue; }
--></style>
ページ全体の余白をなくす
<style type="text/css"><!--
body { margin:0px; }
--></style>
ウィンドウの右側のスクロールバーを消す
<style type="text/css"><!--
body { overflow-y: hidden; }
--></style>
ウィンドウの下側のスクロールバーを消す
<style type="text/css"><!--
body { overflow-x: hidden; }
p { background-color:#ffe; border:2px solid black; width:200%; }
--></style>
水平線の色を指定する
<style type="text/css"><!--
.type1 { border:1px solid yellow; height:8px; }
.type2 { border:1px solid red; background-color:blue; height:8px; }
--></style>
（表示させたい場所に <hr class="type1">または、"type2"を挿入 ）
複数の水平線の色を指定する
<style type="text/css"><!--
.colRed { border:1px solid red; color:red; }
.colBlue { border:1px solid green; color:blue; }
--></style>
（表示させたい場所に <hr class="type1">または、"type2"を挿入 ）
背景画像を指定する
<style type="text/css"><!--
body { background-image:url(URL); }
--></style>
ページの背景画像を固定する
<style type="text/css"><!--
body { background-attachment:fixed; }
--></style>
ページの背景画像を１枚だけ表示する
<style type="text/css"><!--
body { background-repeat:no-repeat; }
--></style>
段落の背景色を指定する
<style type="text/css"><!--
p { background-color:yellow; }
--></style>
段落の背景画像を指定する
<style type="text/css"><!--
p { background-image:url(bg.gif); }
--></style>
段落の色を指定する
<style type="text/css"><!--
p { border:4px solid red; }
--></style>
段落の枠幅を上下左右別々に指定する
<style type="text/css"><!--
p { border-style:solid;
border-width:1px 8px 30px 15px; }
--></style>
段落の枠の色を上下左右別々に指定する
<style type="text/css"><!--
p { border-style:solid;
border-width:8px;
border-color:red green blue yellow; }
--></style>
縦書きにする
<style type="text/css"><!--
p { writing-mode:tb-rl; }
--></style>
段落と見出しの隙間をなくす
<style type="text/css"><!--
h1 { margin-bottom:0px; background-color:orange; }
p { margin-top:0px; border:1px orange solid; }
--></style>
リンク文字の下線をなくす
<style type="text/css"><!--
a { text-decoration:none; }
--></style>
マウスがリンク文字上に乗ったらリンク文字の色を変える
<style type="text/css"><!--
a:hover { color:green; }
--></style>
マウスがリンク文字上に乗ったら背景色を変える
<style type="text/css"><!--
a:hover { background-color:blue; }
--></style>
マウスがリンク文字上に乗ったら下線を表示する
<style type="text/css"><!--
a { text-decoration:none; }
a:hover { text-decoration:underline; }
--></style>
マウスがリンク文字上に乗ったら上線を表示する
<style type="text/css"><!--
a { text-decoration:none; }
a:hover { text-decoration:overline; }
--></style>
マウスがリンク文字上に乗ったらリンク文字の色を個別に変える
<style type="text/css"><!--
a.type1 { color:blue; }
a:hover.type1 { color:red; }
a.type2 { color:blue; }
a:hover.type2 { color:green; }
--></style>
( <a href="URL" class="type1">リンク（type1）</a><br>
<a href="URL" class="type2">リンク（type2）</a><br> ←のように使い分けが可能)