タグの中にスタイルを書く

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

タグの中にを書く方法を見てみましょう。

スタイルを書く

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

htmlソース

<!--====参考====--->
<body>
    <p>ホームページを自作するサイト</p>
</body>

pタグを使いましたが、p要素はblock（ブロック）の要素ともいい、塊という意味です。
文字は1つ1つのもの、inline（インライン）の要素といいますが、文字列を塊とするためにpタグを使っています。
ほとんどの文字列はpタグで書きます。
そのほか、画像もpタグを使うことがあります。
ここではpタグはblockの要素で塊である、とだけ覚えてください。

実行するとこの様に画面の左上が基準となり、そこから表示がはじまります。

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

では、この文字列を中央に表示し、文字色を赤にしてみましょう。

htmlソース

<!--====参考====--->
<body>
    <p style="text-align: center; color: red;">ホームページを自作するサイト</p>
</body>

装飾部分を分解してみますね。
p—————-p要素の
style————装飾
=—————をする
“—————-ここから装飾開始
text-align——inline要素の文字揃
:—————-を
ccenter———中央に揃える
;—————-終わり
color———–文字色
:—————を
red————赤色にする
;—————終わり
“—————装飾はここまで
管理者の独断で無理やりこじつけてみましたが、このような内容です。
こうしてみるとそんなに難しいものでもない、と思いませんか？

では、実行してみましょう。

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

この様に装飾することで見た目を変えることができます。

htmlファイルは左上を基準に表示する、その見た目を変えるのが装飾です。

この例ではpタグの中に書いてあるtext-align: center; color: red;が装飾の部分で、pタグにこの装飾を適用する、という書き方ですが、ソースコードが見にくくなるので、タグの中に書くことはあまりしません。

次は部分的に装飾する方法