トップページ＞タグを打ってみよう！＞スタイルシート基本の書き方

スタイルシート基本の書き方

スタイルシートはどこに書けばいいのでしょうか？
このページではスタイルシートを書く位置を説明しています。 記述するには、３通りの方法があります。

HTML文書中のヘッダ部に書く

1つは、ヘッダ部に書く方法です。文書の量があまり多くないときに便利な書き方です。 HTML文書のヘッダ部、<head> と</head>の間に書きます。 

<html>
<head>
<style type="text/css">
<!--
    h2{
    border-top: solid 1px blue;
    border-left: solid 1px blue;
    }
  -->
</style>
</head>
<body>
----------本文がはいる----------
</body>
</html>

<!-- と -->の中にスタイルシートを書くことに注意して下さい。 <!-- -->の記号は<!-- と -->の中に書いたものは表示されないという記号です。これを忘れると、ブラウザで表示したときに、スタイルシートの記述がそのまま表示されてしまいます。

上に戻る

インラインスタイルシートで書く

２つ目は、スタイルシートをHTML内の、指定したい部分に書きこむ方法です。例えば、
<h2 style=" color: red ">のように書きます。h2 見出しを、色は赤にする、という指定です。
スタイル属性を使って書くといいます。HTMLの行中にに書き込むことから、インラインスタイルシートとよばれます。
部分的に文字の色や、デザインなどを変えたいときに使える方法です。

外部スタイルシートとして書く

スタイルシートのファイルはHTMLファイルと同じ場所に置く。
３番目は外部スタイルシートといわれる方法です。スタイルシートを別ファイルにまとめて記述し、HTMLファイルと同じ場所に保存しておきます。

外部スタイルシートとは、スタイルシートを別のファイルとして保存する方法です。ページ数が増えてきたらこの方法が便利です。1つのスタイルシートで全部のページに対して、指定ができるからです。後々の管理もやりやすくなります。

スタイルシートをstyle.css のように、ファイル名の後に拡張子.css を付け、HTML文書と同じフォルダに保存しておきます。

ヘッダ部には以下のように記述します。style.cssというファイルを読みこむ、という指示書きです。 

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

ヘッダ部に書いた、外部スタイルシート読み込み指定。11行目→の部分。
ヘッダ部に、外部スタイルシートを読み込む指定を書く。

参考：外部スタイルシートの例。
テキストエディタで書いた、スタイルシート。HTMLと別ファイルになっている。

用語：ヘッダ部/スタイル属性/インラインスタイルシート

ホームページ作成 用語集

スタイルシート(CSS)の基本前のページ | 次のページ文字の大きさ（フォントサイズ）

上に戻る

inserted by FC2 system