Perl Web開発者のHTML・CSS入門

【HTML5】styleタグ - スタイルシート(CSS)を記述する

styleタグを使うと、HTMLの中にスタイルシート(CSS)を記述することができます。

<style>
  h5 {
    color:red;
  }
</style>

h5タグ - 見出し5

HTMLの中にstyleタグを使ってスタイルを書いてもいいの?

「HTMLの中にstyleタグを使ってスタイルを書いてもいいの?」と質問したくなりますね。

原則はスタイルシート(CSS)ファイルを読み込むのがよい

原則はスタイルシート(CSS)ファイルを読み込むのがベストプラクティスです。Webサイトの基本的なスタイルシートの設定は「/css/default.css」のようなスタールシート(CSS)ファイルに記述して、それをHTMLヘッダで、読み込みます。

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

お試しでスタイルを書く場合

お試してスタイルを書く場合は、よくsytleタグを使います。スタイルシート(CSS)ファイルは、別のディレクトリにあるので、開くのが面倒です。

こうしたら、どうなるんだろう? とちょっと試したい場合は、styleタグを使うことが多いです。

プログラムで、スタイルを変更したい場合

Webシステム開発をしているときに、たまに、if文で条件分岐して、プログラムでスタイル自体を変更したい場合があります。

そのような場合は、styleタグを使って、条件を満たす場合だけ、条件を設定するということができます。

でも、これは、ごくたまにしかないので、スタイルシート(CSS)ファイルに、すべて書くことを、原則としてください。