CSSを統一する
戻る

CSSを外部ファイル”*.css”にまとめて設定すると、 共通したレイアウトを各ページで指定する事ができます。


外部CSSのサンプル

以降をコピーしてメモ帳に貼り付け、[ cssset.css ] という名前で保存します。

body {
scrollbar-face-color:#88ff88;
scrollbar-track-color:#ddff88;
scrollbar-arrow-color:#008822;
scrollbar-highlight-color:#00ffdd;
scrollbar-3dlight-color:#ffffff;
}

.font09{font-family:sans-serif;font-size: 9pt;line-height:150%;}
.font10{font-family:sans-serif;font-size:10pt;line-height:150%;}
.font12{font-family:sans-serif;font-size:12pt;line-height:150%;}
.font14{font-family:sans-serif;font-size:14pt;line-height:150%;}
.font20{font-family:sans-serif;font-size:20pt;line-height:120%;}
.font30{font-family:sans-serif;font-size:30pt;line-height:120%;}
.font40{font-family:sans-serif;font-size:40pt;line-height:120%;}

.filt01{filter: alpha(style=1, opacity=0, finishopacity=100, startx=0, starty=0, finishx=60, finishy=60);}
.filt02{filter: alpha(style=1, opacity=0, finishopacity=100);}
.filt03{filter: alpha(style=1, opacity=50);}

.bord01{border:double 6px #0000ff;width:300px;padding:6px;}
.bord02{border:dashed 6px #ff0000;width:300px;padding:6px;}


CSSを呼び出すには<head>〜</head>に
<link type="text/css" rel="stylesheet" href="cssset.css">
と記入して呼び出します。
これで全体の設定が反映されます。

上のcssset.cssのうち青で記載された部分は読み込んだ時にページ全体に反映される設定です。
緑の部分の.font10などはクラスと呼ばれるものです。これは必要な時に<div class="">や <span class="">などで呼び出します。
imgタグやtableタグなどには直接 class=""を追加する事もできます。

例えば<span class="font20">20ptのフォント</span>とすると、
20ptのフォントと指定でき、
<img src="../../img/icon.gif" class="filt02">とすると
とフィルターグラデーションがかけられます。



TOPへ