CSSの書き方いろいろ
CSSの書き方にはいくつか方法があります。
- CSSファイルにまとめて書く方法
HTMLファイルとは別にCSSファイルを作ってその中にCSSを書く方法。 - HTMLファイル内にstyleタグでまとめて書く方法
CSSファイルを別途用意しなくてもHTML内にCSSを書くことができます。 - HTMLの各タグに書く方法
特定のタグにだけ有効なCSS指定。
この３つの書き方について説明します。
- CSSファイルに書く方法
HTMLファイルとは別にCSSファイルを作ってその中にCSSを書く方法です。CSSファイルに書いたCSSはHTML内で呼び出すことで使えるようになります。他の方法と違い、CSSファイルを呼び出すだけで複数のHTMLで同じCSSを使うことができます。例えば次のようになります。- sample1.css (CSSファイル)
div.sample{
border: solid black 1px;
background: #f99;
} - sample1.html (HTMLファイル)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<link rel="stylesheet" href="sample1.css" type="text/css" />
</head>
<body>
<div class="sample">
サンプル
</div>
</body>
</html>
- sample1.css (CSSファイル)
- HTMLファイル内にstyleタグでまとめて書く方法
CSSファイルを別途用意しなくてもHTML内にCSSを書くことができます。- sample2.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<style type="text/css">
div.sample{
border: solid black 1px;
background: #f99;
}
</style>
</head>
<body>
<div class="sample">
サンプル
</div>
</body>
</html>
- sample2.html
- HTMLの各タグに書く方法
特定のタグにだけ有効なCSS指定ができます。- sample3.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head></head>
<body>
<div style="border: solid black 1px; background: #f99">
サンプル
</div>
</body>
</html>
- sample3.html
この３つの例はすべて同じCSS指定になります。
コメント