HTMLにCSSを直接書く方法｜style属性の使い方と外部CSSとの違い

HTMLを書いていて、「この文字だけ赤くしたい」「この見出しだけ少し大きくしたい」と思うことがあります。そんなときは、HTML要素のstyle属性へCSSを直接書くと、その場ですぐに見た目を変更できます。

ただし、style属性は手軽な反面、何か所も使うと修正しにくくなります。練習や一時的な確認には便利ですが、Webサイトを継続して管理するなら外部CSSへ分ける方法が基本です。

この記事では、style属性の書き方、色・文字サイズ・太字・背景・余白の変更、複数のCSSを組み合わせる方法、外部CSSとの違いまで初心者向けに順番に解説します。

HTMLへCSSを直接書く基本形

CSSを直接指定したいHTML要素へ、style="CSSのプロパティ: 値;"という属性を追加します。この書き方は「インラインCSS」または「インラインスタイル」と呼ばれます。

<p style="color: #b91c1c;">この文章を赤色で表示します。</p>

styleは属性名、colorは変更する内容を示すプロパティ、#b91c1cは設定する値です。プロパティと値の間をコロン（:）で区切り、指定の最後にセミコロン（;）を付けます。

style属性の中身全体は、半角のダブルクォーテーション（"）で囲みます。全角の記号や日本語のコロンを使うとCSSとして認識されないため、コードは半角で入力してください。

CSSを適用する3つの方法

HTMLへCSSを反映する方法は、主にインラインCSS・内部CSS・外部CSSの3つです。どれも見た目を変更できますが、CSSを書く場所と適用できる範囲が違います。

HTMLとCSSのファイルを分ける基本から確認したい場合は、次の記事でフォルダー構成と読み込み方を説明しています。

style属性で文字の色を変える

文字色はcolorプロパティで変更します。文章の一部分だけを変えたい場合は、その部分をspan要素で囲み、style属性を追加します。

<p>思わず<span style="color: #b91c1c;">「あっ」</span>と叫ぶ。</p>

span要素は、文章の一部をまとめるために使える要素です。span自体には見た目の変化がないため、CSSを適用したい範囲だけを囲めます。

色はredのような色名でも指定できますが、実際の制作では#b91c1cのような16進数カラーコードを使うと色を細かく調整できます。先頭の#も忘れずに入力してください。

色だけで意味を伝えない

赤色だけで「エラー」を表すと、色の違いを判別しにくい読者には意味が伝わらない場合があります。「入力内容を確認してください」のような文章やアイコンも組み合わせてください。

文字色と背景色の差が小さいと読みづらくなります。淡い色を選ぶときは、実際の背景上でコントラストを確認しましょう。

文字の大きさを変える

文字サイズはfont-sizeプロパティで変更します。次の例では、通常の文字サイズを基準にして1.25倍を表す1.25remを指定しています。

<p><span style="font-size: 1.25rem;">少し大きな文字</span>を表示します。</p>

本文を極端に小さくすると、スマートフォンや視力の弱い読者が読みにくくなります。ブラウザの文字拡大やズームを使っても内容が読めるか確認してください。

太字にする方法

見た目だけを太くしたい場合は、CSSのfont-weightを使います。一般的な太字は700またはboldで指定できます。

<span style="font-weight: 700;">見た目を太くする文字</span>

文章の中で重要性を示したい場合は、見た目だけではなくstrong要素を使います。strongには「内容が重要である」というHTML上の意味があり、多くのブラウザでは初期状態で太字になります。

<p><strong>送信前にメールアドレスを確認してください。</strong></p>

「重要だからstrong」「装飾として太くしたいからfont-weight」と、目的で使い分けるとHTMLの意味が分かりやすくなります。なお、見た目を変えるための古いfont要素は現在のHTMLでは廃止されているため使いません。

背景色・枠線・余白をまとめて指定する

style属性には複数のCSSを記述できます。各指定をセミコロンで区切って並べてください。

<p style="color: #1e3a8a; background-color: #eff6ff; border: 1px solid #93c5fd; padding: 1rem; border-radius: 0.5rem;">
  複数のCSSを組み合わせたお知らせです。
</p>

CSSの中に改行を入れることもできますが、属性へ多くの指定を詰め込むとHTMLが読みにくくなります。指定が2〜3個を超える、または同じデザインを繰り返す場合は、クラスと外部CSSへ移す合図です。

文字を中央揃えにする

文章や見出しの水平方向の揃え方は、text-alignで指定します。中央揃えはcenterです。

<h2 style="text-align: center;">中央に配置した見出し</h2>

text-alignは要素そのものを画面中央へ移動する指定ではなく、その要素の中にあるインライン方向の内容を揃える指定です。箱全体の配置には、幅やmargin、Flexbox、Gridなど別の仕組みを使います。

インラインCSSを外部CSSへ書き換える

同じデザインを複数の要素へ使うなら、style属性をコピーするのではなく、HTMLへclass属性を付けてCSSファイルへまとめます。

変更前：style属性へ直接書く

<p style="color: #1e3a8a; background-color: #eff6ff; padding: 1rem;">お知らせA</p>
<p style="color: #1e3a8a; background-color: #eff6ff; padding: 1rem;">お知らせB</p>

この状態では、背景色を変えるだけでも2か所を修正しなければなりません。数が増えるほど、変更漏れや入力間違いが起きやすくなります。

変更後：classと外部CSSへ分ける

<link rel="stylesheet" href="style.css">

<p class="notice">お知らせA</p>
<p class="notice">お知らせB</p>

.notice {
  color: #1e3a8a;
  background-color: #eff6ff;
  padding: 1rem;
}

外部CSSなら、.noticeの内容を1か所変更するだけで、同じクラスを付けたすべての要素へ反映されます。HTMLには内容と構造、CSSには見た目という役割が分かれ、コードも探しやすくなります。

セレクタや宣言の基本をもう少し詳しく確認したい場合は、次の記事も参考にしてください。

style属性のCSSが優先されやすい理由

同じ要素の同じプロパティへ複数のCSSが指定された場合、ブラウザは「カスケード」という規則で最終的な値を決めます。その判定要素の1つが、セレクタの優先度を表す「詳細度」です。

style属性の指定は、通常のクラスセレクタや要素セレクタより優先されやすくなります。そのため、外部CSSを直しても見た目が変わらず、HTML内のインラインCSSを探して修正することになる場合があります。

<p class="message" style="color: #b91c1c;">どちらの色になるでしょうか。</p>

.message {
  color: #1d4ed8;
}

この例では、通常はstyle属性の赤色が表示されます。無理に!importantを増やして上書きするより、不要なインラインCSSを削除し、クラスへまとめるほうが後から管理しやすくなります。

style属性を使ってよい場面

style属性が常に間違いというわけではありません。目的と範囲が明確で、将来の修正負担が小さい場面では役立ちます。

• CSSの効果を1要素だけですばやく試したいとき
• 外部CSSを編集する前に、開発者ツールなどで値を比較するとき
• システムが動的に計算した幅や位置を、その要素へ設定するとき
• HTMLメールなど、利用環境の制約でインライン化が必要なとき

一方、ナビゲーション、ボタン、見出し、カードなど、サイト内で繰り返すデザインには外部CSSが向いています。色や余白を一括で変更できるため、ページが増えても見た目を揃えやすくなります。

直接書いたCSSが反映されないときの確認項目

属性全体を半角の引用符で囲んでいるか

style="color: red;"のように、CSS全体を半角のダブルクォーテーションで囲みます。全角の“ ”をコピーしていないかも確認してください。

プロパティと値の間がコロンになっているか

正しくはcolor: red;です。color = redのようにイコールでつながないでください。イコールはHTMLの属性名と属性値をつなぐ場所で使います。

プロパティ名や値を打ち間違えていないか

font-sizeをfont_sizeと書いたり、カラーコードの#を省略したりすると反映されません。ブラウザの開発者ツールでは、無効な指定に取り消し線や警告が表示されることがあります。

別のCSSに上書きされていないか

!important付きの規則、アニメーション、ユーザー側の設定など、ほかの規則が最終結果へ影響する場合があります。まず開発者ツールの「Styles」や「Computed」で、どの指定が採用されているか確認してください。

よくある質問

HTMLだけで文字色を変えられますか？

style属性をHTMLへ書けば、別ファイルを作らずに文字色を変えられます。ただし、属性の中に書いている内容はCSSです。HTMLが見た目を変えているのではなく、HTML要素へCSSを直接指定しています。

セミコロンは最後にも必要ですか？

最後の1つは省略しても解釈される場合がありますが、後から指定を追加しやすく、区切りも明確になるため付ける習慣がおすすめです。複数の指定の間にあるセミコロンは省略できません。

style要素とstyle属性は同じですか？

異なります。style属性は1つのHTML要素へ直接指定します。style要素は通常head内に置き、セレクタを使ってそのページ内の複数要素へCSSを適用します。

スマートフォン用のCSSもstyle属性へ書けますか？

画面幅に応じて切り替えるメディアクエリは、通常のstyle属性へ直接書けません。レスポンシブ対応が必要なデザインは、style要素または外部CSSへ記述してください。

style属性を試したら外部CSSへ整理しよう

HTMLへCSSを直接書くには、変更したい要素へstyle="プロパティ: 値;"を追加します。文字色はcolor、文字サイズはfont-size、太さはfont-weightで変更でき、複数の指定はセミコロンで区切ります。

まず1か所で表示を確かめる用途なら、style属性は分かりやすい方法です。同じ見た目を繰り返す段階になったら、クラスと外部CSSへ移して、1か所の変更で全体を更新できる状態にしてください。

実際に手を動かして定着させたい場合は、次の記事の練習方法も使えます。コードを少しずつ変え、ブラウザで結果を確認してみましょう。