スタイルシートの書き方についての質問。

【講座名】
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の場合はサーバー上で実行する必要があります。


【ワンポイント】
スタイルシートは書き方の種類を混在させることができます。その場合は書き方の種類によって、重複定義した時の優先順位に違いがあるので注意が必要です。

スタイルシートの書き方は統一して、重複定義しないほうが無難です。


スポンサードリンク


スポンサードリンク






プログラミング入門 Q&A TOPへ