文字の色についての質問

Question

CSSを学んでいるものです。
HTMLで<p style="color: red;">こんにちわ</p>と打ち込んで赤文字の「こんにちわ」にするのと、CSSで指定して赤文字にするのとでは何が違うのでしょうか？CSSの方が太さや大きさなどを変えられるといった感じでしょうか？

Answer 1

style属性に書かれてるのはCSSです。「インラインスタイル」と呼ばれるやり方です。
そのまま下記のようにしても装飾できます。

<p style="color: red;font-weight:bold;font-size:30px;">

ただ、大抵は同様の装飾を他にもしたいときや調整で何箇所も触らなくて良いようにセレクタ（調べてください）を使い外出しします。

<style>
p{
color: red;font-weight:bold;font-size:30px;
}
</style>

<p>

上記はpタグ全てに反映する場合。
html内に書く場合はstyleタグを利用します。（.cssに書く場合はstyleタグ不要）

Comments

[atuko]

なるほど！ありがとうございます！

[m.ts10806]

ただ「CSSの勉強をしています」というのでしたら何かしら参考にしているものがあるはずで、そこに何も言及されていないとは思えません。
「丸投げ」という低評価がついているのは「探せばすぐ見つかること」という意図もあると思います。

Answer 2

昔は

<font color="red">こんにちわ</font>

のようなことをやっていましたが、文字を修飾するためだけのタグは廃止されました。
styleでcolorを設定するのは悪いとは言いませんが、
本来htmlは構造と内容を定義するためのマークアップ言語なので、
個別のタグに色を指定するのはおすすめできません。
たとえばbタグは強調であり、太文字タグではありませんし
iタグは興味深い文字であり、斜体タグではありません。

学習段階ではsytleを指定すれば修飾されるという現象を覚えるための手法で
class="red"的な書き方でもよいとは思いますが、運用の際には枷になりかねません

赤い文字のタグを青にしましょう！・・・となったとき
.red{color:blue}のようにおかしなことになりかねません

Comments

[atuko]

なるほど、やはり色づけや文字の装飾はCSSでするのがいいのですね。ありがとうございます！

Answer 3

が違うのでしょうか？

style属性で書くのもCSSによる指定の1形態です。

Comments

[atuko]

そうなのですね！ありがとうございます！

Answer 4

まだご解決されないということは、ご不明な点があるのでしょうか？
ご不明点がおありでしたら、質問にご追記されないと回答者に伝わりませんので、いつまでも解決しないと思いますよ。

ところで、style属性を使った時の違いですが、!importantなどがない限りstyle属性がstyle要素に優先されるということが違います。

CSS ではなく、HTML で div 要素の style 属性にスタイルを指定したなら、これは A が 1 ポイントとなり、いちばん優先順位が強くなります。

100年後も崩れないCSS勉強会 · 第1回「詳細度」