元Webデザイナー兼コーダーの備忘録

ITとデザインの話題を中心に書きます。

 menu

CSS入門(CSSを記述する場所)

CSSを記述する場所

CSSを記述する場所は3種類あります。それぞれの違いを理解して使い分けてください。

HTMLのタグに直書きする

HTMLのタグにstyle属性を追加してCSSを記述します。例えば以下のように書きます。

<h1 style="color:red;">HTMLの練習</h1>

用途としては、お試しでスタイルを当てるときに使います。この書き方を多用してしまうとHTMLのコードとCSSのコードが混在し読みにくくなります。また、コードの修正が面倒くさくなります。例えば下記のような場合です。

<h1 style="color:red;text-decoration:underline;border:solid 1px #000000;padding:10px;margin:10px;background-color:pink;">HTMLの練習</h1>
<p style="color:blue;border:solid 1px #000000;padding:10px;margin:10px;background-color:skyblue;font-size:12px;font-weight:bold;">このページではCSSを記述する場所について解説しています。よろしくお願いします。</p>

HTMLファイルからCSSの記述を分離するのが基本的な考え方なので、この方法はおすすめしません。CSSは別ファイルとして用意して、HTMLから読み込むようにします。

styleタグに書く

headタグの子要素として、styleタグを書きます。その中にCSSを記述します。styleタグの中にまとめてそのページのCSSを記述します。HTMLのタグに直書きする方法よりもコードの見通しが良くなります。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <style type="text/css">
    h1{ color:red; }
  </style>
  <title>HTMLの練習</title>
</head>
<body>
  <h1>見出しタグ</h1>
</body>
</html>

以下に該当の箇所だけ抜き出します。

<style type="text/css">
  h1{ color:red; }
</style>

CSSファイルを作成し、HTMLファイルから読み込む

HTMLファイルとは別にCSSファイルを作成します。例えば、「style.css」と言うCSSファイルを作成して、その中にCSSを記述します。そして、そのファイルをHTMLのheadタグ内で読み込みます。以下のように記述します。

<!-- HTMLファイルからCSSファイルを読み込む例 -->
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <!-- ↓CSSファイルの読み込み↓ -->
  <link rel="stylesheet" type="text/css" href="style.css">
  <title>HTMLの練習</title>
</head>
<body>
  <h1>見出しタグ</h1>
</body>
</html>

以下に該当の箇所だけ抜き出します。

<link rel="stylesheet" type="text/css" href="style.css">

「style.css」ファイルの内容は以下です。

h1{ color:red; }

まとめ

  • CSSを記述する場所は3つある
    • HTMLのタグに直書きする
    • styleタグに書く
    • CSSファイルを作成し、HTMLファイルから読み込む
  • HTMLの文書構造からCSSの記述を分離するのが望ましい