CSSを外部ファイルにしちゃおう
|
|
CSS（スタイルシート）の解説 CSSを外部ファイルにしちゃおう |
|
|
雑記 メモ 掲示板 SCRIPT HTML ├ 基本 ├ 前準備 ├ 保存 ├ 確認 ├ 更新 ├ 装飾 ├ リンク ├ テーブル ├ テーブル2 ├ フレーム └ フレーム2 CSS ├ 記述方法 ├ CSSファイル └ テキスト リンク メール |
1.CSSファイルって？ 例えば基本となる文字の大きさとか色とか背景色をファイルの数だけ書くのは アレだし（笑）リニューアルする時に面倒ですよね。 ファイルの数だけ記述を書き直さないといけないんだから。 そこで登場するのが基本装飾を一括で記述できるCSSファイルなんですよ。 細々した説明より実際の記述を見てもらった方が早いです。 2.CSSファイルを作る まずはテキストエディタ（メモ帳とか）を起動してください。 そうだな・・・ここで使ってるCSSファイルを載せましょう。 メモ帳に下のを打ってください（コピペ可） BODY { color: #444455; font-size: 11pt; background-color: #f5f5f5; scrollbar-3dlight-color:#999999; scrollbar-arrow-color:#999999; scrollbar-base-color:#d3dada; scrollbar-darkshadow-color:#999999; scrollbar-face-color:#d3dada; scrollbar-highlight-color:#ffffff; scrollbar-shadow-color:#d3dada; margin: 20pt 0pt 20pt 30pt; line-height: 150%; } A:link, A:visited, A:active, A:hover { color: #30a966; } A:link, A:visited { text-decoration: none; } A:hover, A:active { text-decoration: none; color: #444444; } これを「main.css」という名前で保存してください。 もちろん任意の名前で保存していいし上の記述通りじゃなくてもいいから（＾＾； これでCSSファイルの完成です。 注：拡張子が「.css」です。 拡張子の指定が解らない方はこのページを参考にしてください。 3.リンクを貼る ただCSSファイルを作っただけではＨＴＭＬファイルに反映されません。 そこでこの装飾を反映させたいファイルにリンクを貼りましょう。
<HTML> <HEAD> <TITLE>ＣＳＳ入門</TITLE> <LINK rel="stylesheet" href="main.css" type="text/css"> </HEAD> <BODY> </BODY> </HTML> この1文を反映させたいHTMLファイルに記述したらオッケイです。 これなら「main.css」を変更しただけでリンクが貼ってあるファイル全部に反映するから メンテナンスやリニューアルが非常に楽になります。 あと。基本を「main.css」にして背景色と文字色だけ変えたいときは
<HTML> <HEAD> <TITLE>ＣＳＳ入門</TITLE> <LINK rel="stylesheet" href="main.css" type="text/css"> <STYLE type="text/css"> <!-- BODY { background-color: #000000; color: #888888 } --> </STYLE> </HEAD> <BODY> </BODY> </HTML> こんな感じで通常の書き方をしてもらえたらいいです。 ほら。CSSは後に書いたほうが有効って言ったでしょ。 くれぐれも記述の順番には気をつけてください。 △ 上へ △ |
|
| HOME | 雑記 | メモ | 掲示板 | SCRIPT | HTML | リンク | メール |