部分的に装飾する


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

文字列の部分的な装飾を見てみましょう。

スタイルを書く

ブラウザに「ホームページを自作するサイト」と表示してみます。
枠はPC画面と思ってください。

タグの中に書く方法では文字列そのものを装飾しましたが、文字列の一部、例えば「自作」だけを装飾することができます。

htmlソース

<!--====参考====-->
<body>
    <p>ホームページを<span style="color: red;">自作</span>するサイト</p>
    <p>ホームページを<span style="background: red; padding: 2px;">自作</span>するサイト</p>
</body>

ホームページを自作するサイト

ホームページを自作するサイト

span要素はブロックの一部をインラインに設定するタグでよく使います。
要素ですから、開始タグと終了タグがあります。
span開始タグとspan終了タグで挟み、その部分を装飾することができます。

ここを注視してほしい、強調したい、などで使うことがありますが多用すると見苦しくなるので注意が必要です。

head要素にスタイルを書く方法

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