スタイルシートをHTMLファイルと別に作る
2013年3月22日:CSS
CSSの記述場所はいくつか方法があります。
- 外部ファイルに記述する
- head要素内に記述する
- インラインでタグ内に記述する
HTMLファイルとCSSファイルは分けて書くのが普通です。
というのも、HTMLで構造をかき、CSSファイルでは細かいデザインをかくという役割があるからです。
よって、一番目の「外部ファイルに記述する」という方法が通常使用されます。
ここでは、外部ファイルとしてCSSをつくる方法で解説を進めていきます。
HTMLファイルを作る
まず、HTMLファイルをつくります。以下のようにメモ帳に書いてindex.htmlとして保存しましょう。
<!doctype html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <h1>Hello</h1> <h2>World!</h2> </body> </html>
ここでのポイントは5行目にあります。
rel=”stylesheet”で外部スタイルシートを参照することを示しています。
type=”text/css”ではhrefでリンクしたファイルの形式(MIMEタイプ、ここではCSSスタイルファイルであることをtext/cssで示している)を示しています。
hrefはCSSファイルのURLを示します。
CSSファイルを作る
次に、CSSファイルを作ります。以下のようにstyle.cssファイルを作ります。
h1{color:#FF0000} h2{color:#0000FF}
h1には赤色、h2には青色の設定をしています。
このstyle.cssファイルをhtmlファイルと同じ階層に保存します。
作ったファイルを見てみる
つくったものをブラウザで表示すると以下のようになります。
h1が赤で、h2が青色になっています。
以上のように、HTMLとCSSを分離して書くことで、構造とデザインを分けて考えることができます。
CSSファイルを編集するときの注意ですが
ブラウザの更新ボタンを押さないとCSSファイルの変化が反映されません。
ブラウザでは、一度読み込んだcssファイルを使いまわすため、更新ボタンを押さないと変更したCSSファイルが反映されないのです。
CSSファイルの編集時は注意しましょう。
TOPICS「他のCSS記述方法」
はじめに述べた外部ファイルでない方法も紹介します。
head要素内に記述
ヘッダー内にスタイルを書く際は<style>と</style>の間に記述します。
<!doctype html> <html> <head> <meta charset="UTF-8"> <style> h1{color:#FF0000} h2{color:#0000FF} </style> </head> <body> <h1>Hello</h1> <h2>World!</h2> </body> </html>
インラインでタグへ直接記述
インラインで書く場合は、style=”CSS”の形で記述します。
<!doctype html> <html> <head> <meta charset="UTF-8"> </head> <body> <h1 style="color:#FF0000">Hello</h1> <h2 style="color:#0000FF"">World!</h2> </body> </html>
ちょっと試したい場合に便利です。
著者:安井 真人(やすい まさと)
@yasui_masatoさんをフォロー