スタイルシートをHTMLファイルと別に作る

2013年3月22日：CSS

CSSの記述場所はいくつか方法があります。

  1. 外部ファイルに記述する
  2. head要素内に記述する
  3. インラインでタグ内に記述する

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ファイルと同じ階層に保存します。

作ったファイルを見てみる

つくったものをブラウザで表示すると以下のようになります。

helloworld

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>

ちょっと試したい場合に便利です。

あと、ファースビューの部分はインラインにかいておくと、スタイルシートを読み込む必要がないので早く表示されるというメリットもあります。

著者：安井 真人(やすい　まさと)

TOP