外部スタイルシートのサンプルです。 ・余白0指定 ・文字サイズ ・リンクの色の指定、下線を消す処理 ・スクロールバーの色変更(IEのみ) ・水平線の色とスタイル(IEのみ) ・見出し1〜3のスタイル (見出し1〜3は、それぞれページの中で<h1></h1>、<h2></h2>、<h3></h3>で囲んだ文字などに適用されます) 下記の部分をコピーして、メモ帳などに貼り付け、「style.css」というファイル名で保存して使用して下さい。 呼び出して使う場合は、ページの<head>部分に <link rel="stylesheet" type="text/css" href="style.css"> と記述して呼び出しましょう。 |
//基本スタイル部分 BODY { margin: 0px; /* 余白を0にする */ font-size: 80%; /* 文字の大きさ */ color: #999999; /* 文字の色 */ background: #ffffff; /* ページの背景色 */ line-height: 140%; /* 行の高さ(行間) */ scrollbar-face-color: #ffffff; /* 表面の色 */ scrollbar-3dlight-color: #ffffff; /* 左端と上端の色 */ scrollbar-darkshadow-color: #ffffff; /* 右端と下端 */ scrollbar-highlight-color: #999999; /* ハイライトの色 */ scrollbar-shadow-color: #999999; /* 影の色 */ scrollbar-arrow-color: #999999; /* 矢印の色 */ scrollbar-track-color: #ffffff; /* バーの背景の色 */ } TH,TD { font-size: 80%; /* テーブル内の文字の大きさ */ color: #999999; /* テーブル内の文字の色 */ line-height: 140%; /* 行の高さ(行間) */ } //リンクのスタイル指定 A:link { color: #3333ff; /* リンクの色 */ text-decoration:none; } A:visited { color: #9999ff; /* 訪問済みリンクの色 */ text-decoration:none; } A:hover { color: #ff0000; /* ポイントした時のリンクの色 */ text-decoration:underline; /* 下線を表示する */ } A:active { color: #ffcc00; /* クリックした時のリンクの色 */ text-decoration:none; } //罫線のスタイル(※IEのみ) HR { size: 1px; /* 線の太さ */ color: #3333ff; /* 線の色 */ } //見出し、強調スタイル /*<h1></h1>で囲まれた部分 */ H1{ font-size: 120%; font-weight: bold; color: #ffffff; background: #3333ff; padding: 3px; } /*<h2></h2>で囲まれた部分 */ H1{ font-size: 80%; color: #999999; background: #9999ff; padding: 3px; } /* <h3></h3>で囲まれた部分 */ H3{ font-size: 80%; font-weight: bold; color: #ff0000; } |