★CSSの基本
■HTML文書にCSSを適用する
CSSでHTML文書やXHTML文書にスタイルシートを適用するには、大きく分けて以下の3つの方法があります。
<link>要素で外部CSSファイルを呼び出して適用する
スタイルシートを記述したCSSファイルをHTMLファイルとは別に作成して、HTMLファイル内から呼び出します。 呼び出しには、HTML文書の<head>要素内に<link>要素を記述して、外部CSSファイルを指定します。 適用されるスタイルがCSSによるものであることをブラウザなどに知らせるために、<link>要素のtype属性の値にはtext/cssを指定します。 XHTMLとの互換性やスタイルの修正のしやすさなどを考慮すると、この方法でスタイルシートを設定するのがおすすめです。
スタイルシート部分は外部ファイル（xxx.css）に記述。
p {color:blue; line-height:1.5;}HTMLソース
<html><head>
<link rel="stylesheet" type="text/css" href="xxx.css">
</head>
<body>
<p>段落となります。</p>
</body>
</html>
<style>要素で文書単位に適用する
HTML文書の<head>要素内に<style>要素を記述して、文書単位にスタイルシートを設定します。 適用されるスタイルがCSSによるものであることをブラウザなどに知らせるために<style>要素のtype属性の値にはtext/cssを指定します。
尚、スタイルシート部分を<!-- -->でコメントにするのは、スタイルシートに対応していない古いブラウザで<style>要素の内容がそのまま表示されてしまうのを防ぐためです。ただし、近年ではほとんどのブラウザは<style>要素をサポートしているので、<!--と-->を省略してもほぼ問題ないでしょう。
<head>
<style type="text/css">
<!--
p {color:blue; line-height:1.5;}
-->
</style>
</head>
<body>
<p>段落となります。</p>
</body>
</html>
要素にstyle属性を追加して局所的に適用する
要素にstyle属性を追加して、HTMLソース中に直接スタイル指定を記述します。 style属性によるスタイル指定をする場合には、 文書内で使用されるスタイルシートがCSSによるものであることをブラウザなどに知らせるために、 <head>要素内に<meta>要素を記述してスタイル言語の値にtext/cssを指定します。 多くの場合、この指定をしなくてもブラウザによって自動的に判断されますが、誤動作を避けるためにも記述したほうが良いでしょう。
尚、style属性によるスタイル指定は、部分的にスタイルを優先指定する際などには便利ですが、 HTMLソースが複雑になってスタイル管理が煩雑になりがちです。効率の良いスタイル管理を目指す場合には、 CSS部分を外部ファイル化するのが一般的です。
例：style属性で直接スタイルシートを適用
<html><head>
<meta name="Content-Style-Type" content="text/css">
</head>
<body>
<p style="color:blue; line-height:1.5;">段落となります。</p>
</body>
</html>
| <前へ | 記事一覧へ | 次へ> |
Sponsors
ドメイン取るならお名前.com
現役エンジニアのオンライン家庭教師【CodeCamp】
サイトに広告を掲載してお小遣いが稼げる！【A8.net】
