head要素にスタイルを書く


別ファイルでstyle.cssを作るほかに、タグの中に書く方法、部分的に装飾する方法、スタイルシートという名称でhead要素に書く方法があります。

ペラサイトのように1枚だけのホームページではhead要素にスタイルシートを書くこともありますが、W3Cで別ファイルにすることが推奨されていることもあり、また、ファイルが長くなるのでhead要素にスタイルを書くことはほとんどありません。

しかし、このホームページのようにwordpressを使い、カスタマイズを利用すると自動的にhead要素にスタイルシートを書くことになります。

スタイルを書く

ここでは、head要素にスタイルシートを書く方法を見てみます。

htmlソース

<!--====参考====-->
<head>
<style>
<!--
p {
    text-align: center;
    color: red;
}

.sample-1 {
    width: 50%;
    height: 145px;
    color: #000;
}
-->
</style>
</head>

のように
<style>
<!–

–>
</style>
の間に書きます。

style.cssファイルを作る

  1. タグの中に書く方法
  2. 部分的に装飾する方法
  3. head要素に書く方法
  4. style.cssファイルを作る