PHP初心者入門講座
Ajax初心者入門講座
【質問】
スタイルシートは「.html」ファイル、「.php」ファイルのどちらに組み込むものですか？またスタイルシートの書き方について教えてください。
【回答】
スタイルシートは html と php のどちらにでも書くことができます。
CSS(Cascading Style Sheets）とは、Webページのレイアウト(見栄え)を定義する規格です。
HTMLにはレイアウトに関することも書けます。しかし本来 HTML は文書の論理構造を記述するもので、レイアウトに関することは CSS として書いたほうがよいと言われています。
CSS には書き方の種類がいくつかあります。以下はHTMLの例ですが、ファイルの拡張子が変わるだけで、PHPの場合も同じです。
(1)HTMLタグに直接CSSを定義する方法
ファイル名 test1.html
<html>
<head>
<title>test1</title>
</head>
<body>
<p style="color:blue;">あああ</p>
</body>
</html>
(2)HTML内にまとめてCSSを定義する方法
ファイル名 test2.html
<html>
<head>
<title>test2</title>
<style type="text/css">
<!--
p { color: blue; }
-->
</style>
</head>
<body>
<p>いいい</p>
</body>
</html>
(3)CSSを外部ファイルとして定義する方法
ファイル名 test3.html
<html>
<head>
<link href="test.css" rel="stylesheet" type="text/css">
<title>test3</title>
</head>
<body>
<p>ううう</p>
</body>
</html>
ファイル名 test.css
p {
color: blue;
}
＊外部ファイルとしてCSSを定義する場合は、スタイルシートの部分だけ書きます。
(4)インポートスタイルシートで定義する方法
ファイル名 test4.html
<html>
<head>
<style type="text/css">
@import "test.css";
</style>
<title>test4</title>
</head>
<body>
<p>えええ</p>
</body>
</html>
＊test.css は (3) と共通
当講座では主に (3) の方法を使っています。CSSを外部ファイルにすることで、HTMLが簡潔になります。しかも複数のHTMLで、スタイルシートを共有できるメリットがあるからです。
上記の例の拡張子を「.php」に変えて表示しても同じ結果になります。そのことからスタイルシートは html と php のどちらにでも書けることがわかります。
もちろんPHPの場合はサーバー上で実行する必要があります。
【ワンポイント】
スタイルシートは書き方の種類を混在させることができます。その場合は書き方の種類によって、重複定義した時の優先順位に違いがあるので注意が必要です。
スタイルシートの書き方は統一して、重複定義しないほうが無難です。
