6日でできる 新HTML&CSS入門｜style属性で見た目を変えよう
style属性を使えば、今見ているタグだけをすぐに装飾できる。手軽さと注意点を理解して、HTMLの見た目を一歩ずつ整えよう。
HTMLで作ったWebページは、見出し、段落、画像、表、リンクなどの構造を持っています。HTMLだけでもページは表示できますが、文字色や背景色、文字サイズなどを細かく変えたい場合は、見た目を指定する仕組みが必要になります。
そのひとつがstyle属性です。style属性は、HTMLタグの中に直接見た目の指定を書く方法です。たとえば、この見出しだけ赤くしたい、この段落だけ背景色を付けたい、この文字だけ少し大きくしたい、というように、特定の要素だけをすぐに装飾できます。
通常、Webページ全体のデザインを管理するときは、内部スタイルや外部CSSを使うことが多くなります。内部スタイルはstyle要素の中にCSSを書く方法で、外部CSSは別のCSSファイルに見た目の指定をまとめる方法です。
一方、style属性は、ひとつのHTML要素に対して直接指定を書くため、すぐに結果を確認しやすいという特徴があります。学習中に「この指定を入れるとどう見えるのか」を試したいときや、1か所だけ見た目を変えたいときに役立ちます。
ただし、style属性は便利な反面、多用するとHTMLが読みにくくなります。同じデザインを何度も使い回したい場合や、複数ページの見た目をまとめて管理したい場合には向いていません。
この記事では、style属性の基本的な書き方、プロパティと値の指定方法、複数の装飾をまとめて書く方法、サンプルHTMLでの使い方、そしてメリットと注意点をやさしく解説していきます。
style属性はタグに直接見た目を書く方法
style属性は、HTMLタグの中に直接見た目の指定を書くための属性です。
通常のCSSでは、どの要素にスタイルを当てるかをセレクタで指定します。しかし、style属性では、そのタグ自体に直接指定を書くため、セレクタを書く必要がありません。
| 考え方 | 通常のCSS | style属性 |
|---|---|---|
| 対象の指定 | セレクタで選ぶ | 属性を書いた要素そのものが対象 |
| 書く場所 | style要素内や外部CSSファイル | HTMLタグの中 |
| 向いている使い方 | 複数要素や複数ページの管理 | 1か所だけの確認や調整 |
| 管理のしやすさ | 整理しやすい | 多用すると読みにくい |
style属性は、ひとつの要素に直接指定するため、すぐに効果を確認できます。
たとえば、h1にstyle属性を書けば、そのh1だけの文字色や文字サイズを変えられます。pにstyle属性を書けば、そのpだけの背景色や文字色を変えられます。
このように、style属性は「ここだけ見た目を変えたい」という場面で使いやすい方法です。
図1：style属性はタグに直接見た目を指定する
この図から分かること
この図から、style属性はHTMLタグに直接見た目の指定を書く方法であることが分かります。
通常のCSSでは、どの要素を装飾するかをセレクタで選びます。しかし、style属性では、その属性を書いたタグ自体が対象になります。
そのため、1つの見出しだけ色を変えたい、1つの段落だけ背景色を付けたいといった局所的な指定に向いています。
ただし、style属性をたくさん使うと、HTMLの中に見た目の指定が増えてしまいます。学習や一時的な確認には便利ですが、大きなページでは使いどころを考える必要があります。
style属性の基本形
style属性の基本形は、HTMLタグの開始タグの中にstyleを書き、その値としてプロパティと値を指定します。
<tag style="プロパティ: 値;">
内容
</tag>style属性の中では、CSSと同じようにプロパティと値を組み合わせて書きます。
| 用語 | 役割 | 例 |
|---|---|---|
| プロパティ | 何を変えるか | color、font-size、background |
| 値 | どのように変えるか | #ff6600、150%、#fff4e6 |
| コロン | プロパティと値をつなぐ | : |
| セミコロン | ひとつの指定の終わりを示す | ; |
たとえば、文字色を赤にしたい場合は、colorに赤系の値を指定します。
文字サイズを大きくしたい場合は、font-sizeに大きさを指定します。
背景色を付けたい場合は、backgroundやbackground-colorに色を指定します。
style属性ではセレクタを書かない
style属性の大きな特徴は、セレクタを書かないことです。
通常のCSSでは、h1やpのようなセレクタを使って、どの要素にスタイルを適用するかを指定します。
一方、style属性では、すでにそのタグに直接書いているため、対象は明確です。そのため、セレクタは不要です。
| CSSの基本要素 | 通常のCSS | style属性 |
|---|---|---|
| セレクタ | 必要 | 不要 |
| プロパティ | 必要 | 必要 |
| 値 | 必要 | 必要 |
たとえば、h1にstyle属性を書いた場合、そのh1だけが対象になります。
pにstyle属性を書いた場合、そのpだけが対象になります。
つまり、style属性では「このタグ自身に対して、どの見た目を指定するか」を書くと考えると分かりやすいです。
複数の指定はセミコロンで区切る
style属性の中には、複数の指定を書くことができます。
たとえば、文字色を変え、文字サイズも変えたい場合は、プロパティと値の組み合わせをセミコロンで区切って並べます。
<h1 style="color: #d00000; font-size: 220%;">
見出し
</h1>この例では、h1に対して2つの指定をしています。
| 指定 | 役割 |
|---|---|
| color: #d00000; | 文字色を濃い赤にする |
| font-size: 220%; | 文字サイズを大きくする |
複数の指定を書くときは、ひとつの指定が終わるたびにセミコロンを付けます。
セミコロンを忘れると、次の指定が正しく読み取られないことがあります。学習中は、最後の指定にもセミコロンを付ける習慣をつけておくと安心です。
style属性でページ全体と見出しを装飾する
最初のサンプルでは、bodyにstyle属性を付けてページ全体の背景色と文字色を指定します。さらに、h1にもstyle属性を付けて、見出しの色と大きさを変えます。
ファイル名： lesson24_1.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>インラインCSS入門</title>
</head>
<body style="background: #fafad2; color: #222222;">
<h1 style="color: #d00000; font-size: 220%;">style属性だけで装飾</h1>
<p>外部スタイルを使わなくても、このタグだけ見た目を変えられます。</p>
</body>
</html>ブラウザの表示例
ブラウザで表示すると、ページ全体の背景が淡いレモン色になり、文字色は濃いグレーになります。h1は濃い赤色で、通常より大きめに表示されます。
| 対象 | style属性の指定 | 表示のイメージ |
|---|---|---|
| body | background | ページ全体の背景が淡いレモン色になる |
| body | color | 基本の文字色が濃いグレーになる |
| h1 | color | 見出しが濃い赤になる |
| h1 | font-size | 見出しが大きくなる |
bodyにstyle属性を指定すると、ページ全体に関係する見た目を変えられます。
h1にstyle属性を指定すると、その見出しだけに見た目の指定が適用されます。
このように、style属性を使うと、HTMLタグごとに直接見た目を指定できます。
bodyにstyle属性を書くとページ全体に影響する
bodyは、ブラウザに表示される内容全体を包む要素です。そのため、bodyにstyle属性を書くと、ページ全体に関係する見た目を指定できます。
| 指定する場所 | 効果 |
|---|---|
| bodyのbackground | ページ全体の背景を変える |
| bodyのcolor | ページ全体の基本文字色を変える |
| bodyのfont-size | ページ全体の文字サイズに影響する |
| bodyのfont-family | ページ全体の書体に影響する |
サンプルでは、bodyのbackgroundでページ全体の背景色を変えています。
また、bodyのcolorで基本の文字色を指定しています。bodyの中にあるpの文字色は、特別に別の指定をしていないため、この基本文字色の影響を受けます。
ただし、h1には別のcolorが指定されています。そのため、h1はbodyの文字色ではなく、h1自身に指定した濃い赤色で表示されます。
h1にstyle属性を書くと見出しだけ変わる
h1にstyle属性を書くと、そのh1だけに見た目の指定が適用されます。
| 指定 | 効果 |
|---|---|
| color | 見出しの文字色を変える |
| font-size | 見出しの文字サイズを変える |
| background | 見出し部分の背景を変える |
| text-align | 見出しの配置を変える |
サンプルでは、h1にcolorとfont-sizeを指定しています。
これにより、h1だけが濃い赤色で大きく表示されます。pにはstyle属性を付けていないため、pは標準的な文字サイズのままです。
このように、style属性は「この要素だけ変える」という感覚で使えます。
図2：bodyとh1にstyle属性を指定したときの違い
この図から分かること
この図から、style属性を書く場所によって、影響する範囲が変わることが分かります。
bodyにstyle属性を書くと、ページ全体に関係する指定になります。背景色や基本の文字色など、ページ全体の見た目を変えるときに使えます。
h1にstyle属性を書くと、そのh1だけが対象になります。見出しだけ色を変えたり、文字サイズを大きくしたりできます。
style属性は、どのタグに書いたかがとても重要です。対象をよく確認してから指定しましょう。
要素ごとに異なる装飾を指定する
次のサンプルでは、複数の見出しや段落に、それぞれ別のstyle属性を指定します。
同じh2でも、style属性の値が違えば、見た目も変わります。
ファイル名： lesson24_2.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>タグごとに別スタイル</title>
</head>
<body>
<h2 style="color: #008c8c;">見出しA</h2>
<p>これは標準の段落です。</p>
<h2 style="color: #ff8c00; font-size: 150%;">見出しB</h2>
<p style="background: #fff4e6;">こちらの段落は背景付きです。</p>
</body>
</html>ブラウザの表示例
ブラウザで表示すると、見出しAは青緑系の文字色で表示されます。次の段落は標準の見た目です。
見出しBはオレンジ系の色で、少し大きめに表示されます。最後の段落には淡い背景色が付きます。
| 対象 | 指定 | 表示のイメージ |
|---|---|---|
| 見出しA | color | 青緑系の見出し |
| 1つ目の段落 | 指定なし | 標準の見た目 |
| 見出しB | color、font-size | オレンジ系で大きめの見出し |
| 2つ目の段落 | background | 淡い背景付きの段落 |
同じh2でも、style属性に書いた内容が違えば、見た目も変わります。
このように、style属性は要素ごとに細かく指定できます。ページ内の一部だけを試しに変更したいときには便利です。
同じタグでもstyle属性の値が違えば見た目が変わる
lesson24_2.htmlでは、2つのh2が登場します。
どちらもh2ですが、指定しているstyle属性の内容が違うため、見た目も異なります。
| 要素 | style属性の内容 | 見た目 |
|---|---|---|
| 1つ目のh2 | colorのみ | 青緑系の文字 |
| 2つ目のh2 | colorとfont-size | オレンジ系で大きめの文字 |
HTMLでは同じh2でも、style属性によって個別に見た目を変えられます。
これは便利ですが、同じ種類の要素なのに見た目がばらばらになりやすいという注意点もあります。
ページ全体で統一感を出したい場合は、style属性で個別に指定するよりも、style要素や外部CSSでまとめて指定するほうが管理しやすくなります。
段落だけに背景を付ける
サンプルでは、2つ目のpにだけbackgroundを指定しています。
これにより、その段落だけに淡い背景色が付きます。
| 指定する場所 | 効果 |
|---|---|
| pにbackgroundを指定 | その段落だけ背景色が付く |
| bodyにbackgroundを指定 | ページ全体の背景色が変わる |
| h2にbackgroundを指定 | 見出し部分だけ背景色が付く |
背景色は、注意文や補足説明を目立たせたいときに使いやすい指定です。
ただし、背景色を付けるときは、文字色との読みやすさも考える必要があります。背景と文字の色が近すぎると、文章が読みにくくなります。
図3：同じタグでもstyle属性で個別に見た目を変えられる
この図から分かること
この図から、同じタグであっても、style属性の指定内容によって見た目を変えられることが分かります。
2つの見出しはどちらもh2ですが、1つ目は青緑系、2つ目はオレンジ系で大きめに表示されています。
また、段落のうち1つだけに背景色を付けることもできます。
このように、style属性は特定の要素だけをすばやく装飾したいときに便利です。ただし、個別指定が増えるほどページ全体の管理は難しくなります。
style属性のメリット
style属性には、すぐに使える手軽さがあります。
HTMLタグに直接書くため、別ファイルを用意しなくても見た目を変えられます。学習中にプロパティや値を試したいときにも便利です。
| メリット | 内容 |
|---|---|
| すぐに試せる | HTMLタグに直接書くだけで反映できる |
| 1か所だけ変えやすい | 指定した要素だけを装飾できる |
| 学習で確認しやすい | どのタグに効いているか分かりやすい |
| 小さなテストに向いている | 一時的な確認がしやすい |
たとえば、見出しの色を試しに変えてみたい場合、h1にstyle属性を書けばすぐ確認できます。
1か所だけ背景色を付けて確認したい場合にも、style属性は使いやすい方法です。
style属性のデメリット
style属性は便利ですが、多用すると問題も出てきます。
特に、HTMLの中に見た目の指定がたくさん入り込むと、コードが読みにくくなります。
| デメリット | 内容 |
|---|---|
| HTMLが長くなる | タグの中に指定が増える |
| 修正が大変になる | 同じ指定を何か所も直す必要がある |
| 統一感が崩れやすい | 要素ごとに別々の見た目になりやすい |
| 再利用しにくい | 同じデザインをまとめて使いにくい |
たとえば、ページ内に10個の見出しがあり、すべて同じ色にしたい場合、それぞれのh2にstyle属性を書くのは大変です。
あとから色を変更したい場合も、10か所すべてを修正しなければなりません。
このような場合は、style属性ではなく、style要素や外部CSSでまとめて指定するほうが管理しやすくなります。
style属性は例外的な微調整に向いている
style属性は、ページ全体のデザインを管理するためというより、特定の要素だけを一時的に調整するために向いています。
| 向いている場面 | 理由 |
|---|---|
| 学習中の確認 | すぐに見た目の変化を試せる |
| 1か所だけの一時的な調整 | 対象が明確で分かりやすい |
| 小さなサンプルコード | ファイルを分けずに確認しやすい |
| 動作確認 | プロパティや値の効果を試しやすい |
反対に、Webサイト全体のデザインを整える場合は、style属性だけで管理するのはおすすめできません。
複数ページに同じデザインを使う場合や、同じ装飾を何度も使う場合は、内部スタイルや外部CSSを使うほうが整理しやすくなります。
style属性と内部スタイル・外部CSSの使い分け
CSSの指定方法には、style属性、内部スタイル、外部CSSがあります。それぞれに向いている使い方があります。
| 方法 | 書く場所 | 向いている使い方 |
|---|---|---|
| style属性 | HTMLタグの中 | 1か所だけの装飾や学習中の確認 |
| 内部スタイル | head内のstyle要素 | 1ページだけのデザイン管理 |
| 外部CSS | 別のCSSファイル | 複数ページのデザイン管理 |
style属性は、対象のタグに直接書くため、すぐに確認できるのが強みです。
内部スタイルは、1つのHTMLファイル内でCSSをまとめて管理できます。
外部CSSは、複数ページで同じCSSを使い回せるため、実際のWeb制作でよく使われます。
学習の最初はstyle属性で変化を確認し、次に内部スタイルでまとめて管理し、最終的には外部CSSでページ全体を整える流れで学ぶと理解しやすくなります。
style属性で使ったプロパティを整理する
今回のサンプルで登場した主なプロパティを整理しておきましょう。
| プロパティ | 役割 | 使用例 |
|---|---|---|
| background | 背景を指定する | ページ全体や段落の背景色 |
| color | 文字色を指定する | 見出しや本文の文字色 |
| font-size | 文字サイズを指定する | 見出しを大きくする |
backgroundは、背景色や背景画像など、背景に関係する指定を行うためのプロパティです。ここでは、背景色の指定として使っています。
colorは、文字色を指定するプロパティです。見出しや本文の色を変えると、ページの印象が大きく変わります。
font-sizeは、文字サイズを指定するプロパティです。見出しを大きくすると、ページ内の情報の強弱が分かりやすくなります。
使用するタグ・属性・CSSを整理する
この記事で登場したタグ、属性、CSSの考え方を整理しておきます。
| 種類 | 名前 | 説明 |
|---|---|---|
| タグ | html | HTML文書全体を表す |
| タグ | head | ページの設定情報を書く |
| タグ | meta | 文字コードなどを指定する |
| タグ | title | ブラウザのタブに表示される題名 |
| タグ | body | ブラウザに表示する内容を書く |
| タグ | h1 | 大きな見出しを表す |
| タグ | h2 | 中くらいの見出しを表す |
| タグ | p | 段落を表す |
| 属性 | style | タグに直接見た目の指定を書く |
| CSS | background | 背景を指定する |
| CSS | color | 文字色を指定する |
| CSS | font-size | 文字サイズを指定する |
style属性は、HTMLタグの中に直接CSSの指定を書くための属性です。
タグそのものが対象になるため、セレクタは不要です。プロパティと値を組み合わせて、見た目を指定します。
style属性を書くときの確認ポイント
style属性を書くときは、次の点を確認するとミスを減らせます。
| 確認項目 | 内容 |
|---|---|
| 指定するタグ | どの要素の見た目を変えたいか |
| プロパティ | 何を変えたいか |
| 値 | どのように変えたいか |
| コロン | プロパティと値の間にあるか |
| セミコロン | 指定の終わりにあるか |
| ダブルクォーテーション | style属性の値全体を囲んでいるか |
style属性では、タグの中に見た目の指定を書くため、記号の書き忘れに注意が必要です。
特に、コロンとセミコロンを混同しないようにしましょう。コロンはプロパティと値をつなぎ、セミコロンは指定の終わりを表します。
複数の指定を書くときは、指定ごとにセミコロンで区切ります。
style属性を使うときに意識したいこと
style属性は、Webページの見た目をすばやく変えられる便利な方法です。
ただし、便利だからといって、すべての装飾をstyle属性で書くと、HTMLが読みにくくなり、あとから修正しづらくなります。
| 意識したいこと | 内容 |
|---|---|
| 1か所だけの装飾に使う | 局所的な変更に向いている |
| 学習や確認に使う | すぐに表示を試しやすい |
| 多用しすぎない | HTMLが複雑になりやすい |
| 統一デザインはまとめて管理する | 内部スタイルや外部CSSが向いている |
| 役割分担を意識する | 構造はHTML、見た目はCSS |
style属性は、CSSの効果をすぐに確認できるため、学習の入り口としてとても分かりやすい方法です。
まずは、color、background、font-sizeのような基本的な指定を使って、見た目がどのように変わるかを試してみましょう。
そのうえで、同じ指定を何度も使うようになったら、style要素や外部CSSにまとめる考え方へ進むと、より管理しやすいWebページを作れるようになります。