style属性で文章の見た目を整えよう。【font-size, color 編】

前回は架空のタグと架空のstyle属性のプロパティでスタイルとはなんたるかを解説しました。

今回は実際に存在するプロパティを変更してみましょう。

文章は前回と同じものを使いますが、一旦pタグでマークアップしておきます。

    <p>「全くアメリカ人好みの浅ましい食べ物だ...」</p>
    <p>「見ろ手が汚れてしまった！2度とこんなものを出すな！」</p>

さて、はりきって見た目を整えていきましょう。

フォントサイズはstyle属性のfont-sizeプロパティで指定することができます。

「見ろ手が汚れてしまった！2度とこんなものを出すな！」のフォントサイズを変更するのであれば、

    <p>「全くアメリカ人好みの浅ましい食べ物だ...」</p>
    <p style="font-size: 25px;">「見ろ手が汚れてしまった！2度とこんなものを出すな！」</p>

というような感じで変更します。
前回の繰り返しになりますがstyle属性は、

プロパティ名: 値;

というように記述していきましょう。

ブラウザが、該当箇所のfont-sizeを25pxで表示してくれるようになりました。

文字色はstyle属性のcolorプロパティで指定することができます。

「見ろ手が汚れてしまった！2度とこんなものを出すな！」の文字色も変更したのであれば、

color: red;

という記述を足してみましょう。

    <p>「全くアメリカ人好みの浅ましい食べ物だ...」</p>
    <p style="font-size: 25px; color: red">「見ろ手が汚れてしまった！2度とこんなものを出すな！」</p>

いかがでしょう、該当箇所の文字色が赤になりました。

上記例では該当の文章をpタグでマークアップしているので、

「全くアメリカ人好みの浅ましい食べ物だ...」

も、

「見ろ手が汚れてしまった！2度とこんなものを出すな！」

も、

ブラウザがの解釈している文章の意味はあくまでも段落であるということのみです。

style属性は文章の意味ではなく見た目を調整しているのみということを意識しなければなりません。
人の目で見ると、「見ろ手が汚れてしまった！2度とこんなものを出すな！」のほうが重要そうに見えるかもしれません。目立ちますし、ダイナミックですし。

しかし、それはあくまで人の印象であってブラウザの解釈ではないということを理解なければなりません。

今回は以上です。

みかづきブログその3