HTMLのpタグとstyle属性で色を指定する基本では、文章を表すpタグに対して、文字色や背景色をどのように指定するのかを学びます。HTMLだけで見た目を少し変えたい場面では、style属性を使うことで、特定の段落だけに色を付けることができます。まずは、pタグ、style属性、色指定の関係を整理して理解していきましょう。
HTMLのpタグとstyle属性で色を指定する基本
pタグは段落を作るためのHTMLタグです
pタグは、HTMLで文章の段落を作るために使うタグです。HTMLとは、Webページの文章や画像、見出しなどの構造を作るための言語です。たとえば、自己紹介文、お知らせ文、説明文などをページに表示したいとき、ひとまとまりの文章をpタグで囲みます。
次のように書くと、ブラウザ上には「これは段落です。」という文章が表示されます。
<p>これは段落です。</p>この状態では、文字の色はブラウザやサイト全体の設定に従って表示されます。多くの場合、初期状態では黒に近い色で表示されます。ただし、重要なお知らせだけ赤色にしたい、補足説明だけ灰色にしたい、といった場面では、pタグに対して色を指定する必要があります。
pタグは文章の意味を表すためのタグであり、色や大きさなどの見た目を決めるための専用タグではありません。そのため、見た目を変えるときにはCSSという仕組みを使います。CSSとは、文字色、背景色、余白、サイズなど、Webページの見た目を整えるための言語です。
style属性はタグに直接CSSを書くための指定です
style属性は、HTMLタグの中に直接CSSを書くための属性です。属性とは、タグに追加情報を与えるための書き方です。たとえば、pタグにstyle属性を追加すると、その段落だけに見た目の指定を加えることができます。
文字色を赤にしたい場合は、次のように書きます。
<p style="color: red;">この文章は赤色で表示されます。</p>このコードでは、pタグの中にstyle="color: red;"という指定があります。colorは文字の色を指定するCSSのプロパティです。プロパティとは、「何を変更するか」を表す項目です。redは色の値で、「赤色にする」という意味です。
style属性の中では、CSSを次の形で書きます。
style="プロパティ: 値;"文字色を変える場合は、プロパティにcolorを使います。背景色を変える場合は、background-colorを使います。このように、変えたい内容によって使うプロパティが異なります。
pタグに色を指定する基本の考え方
pタグに色を指定するときは、「文字の色を変えたいのか」「背景の色を変えたいのか」を先に考えることが大切です。文字そのものの色を変えたい場合はcolorを使い、段落の背景に色を付けたい場合はbackground-colorを使います。
文字色を青にする例は、次のとおりです。
<p style="color: blue;">この文章は青色です。</p>背景色を黄色にする例は、次のとおりです。
<p style="background-color: yellow;">この段落の背景は黄色です。</p>文字色と背景色は、見た目の意味が違います。colorは文字そのものに影響しますが、background-colorは文字の後ろにある領域の色に影響します。初心者の方は、色を変えたいと思ったときに、どちらの色を変えたいのかを区別すると理解しやすくなります。
また、色の指定にはredやblueのような英単語のほか、より細かい色を表せる16進数カラーコードも使えます。16進数カラーコードとは、#ff0000のように、シャープ記号と英数字で色を表す方法です。たとえば、赤は#ff0000、白は#ffffff、黒は#000000のように表せます。
<p style="color: #ff0000;">この文章はカラーコードで赤色を指定しています。</p>style属性で色を指定するメリットと注意点
style属性を使うメリットは、特定のpタグだけにすぐ色を指定できることです。HTMLファイルの中で確認しながら書けるため、学習の初期段階では動きが分かりやすい方法です。たとえば、1つの段落だけ赤色にしたい場合、style属性を使えば簡単に変更できます。
一方で、style属性を多用すると、HTMLが読みにくくなりやすい点には注意が必要です。同じ色を何度も指定する場合、すべてのpタグにstyle属性を書く必要があり、後から変更するときに手間が増えます。たとえば、赤色を青色に変えたい場合、style属性がたくさんあると1つずつ修正しなければなりません。
学習の最初はstyle属性で仕組みを理解し、慣れてきたらCSSを別の場所にまとめて書く方法も学ぶとよいです。ただし、まずはpタグに直接style属性を書き、colorやbackground-colorがどのように反映されるのかを確認することが大切です。
pタグの文字色を変えるcolorプロパティの使い方
pタグの文字色を変えるcolorプロパティの使い方では、段落内の文字そのものに色を付ける方法を学びます。colorプロパティは、CSSで文字色を指定するときに使う基本的なプロパティです。pタグのstyle属性にcolorを書くことで、その段落だけ文字色を変更できます。
colorプロパティは文字の色を指定します
colorプロパティは、HTMLの要素に表示される文字の色を指定するためのCSSです。CSSとは、Webページの見た目を整えるための書き方です。HTMLが文章や見出しなどの構造を作る役割を持つのに対して、CSSは色や大きさ、余白などを調整する役割を持ちます。
pタグにcolorプロパティを指定すると、そのpタグの中に書かれた文字の色が変わります。たとえば、次のように書くと、段落の文字色が赤になります。
<p style="color: red;">この文章は赤色で表示されます。</p>このコードでは、style属性の中にcolor: red;と書いています。colorが「文字色を変える指定」、redが「赤色にする値」です。CSSでは、基本的に「何を変えるか」をプロパティで書き、「どのように変えるか」を値で書きます。
style属性を使う場合、CSSはダブルクォーテーションの中に記述します。最後にセミコロンを付けることで、指定の区切りが分かりやすくなります。1つだけ指定する場合でも、セミコロンを付ける習慣を持つと、後から指定を追加するときにミスを防ぎやすくなります。
色名を使うと分かりやすく指定できます
colorプロパティの値には、red、blue、green、black、whiteなどの色名を指定できます。色名は英単語で色を表す方法です。学習を始めたばかりの段階では、色名を使うと見た目の変化をイメージしやすくなります。
<p style="color: blue;">この文章は青色で表示されます。</p>
<p style="color: green;">この文章は緑色で表示されます。</p>
<p style="color: gray;">この文章は灰色で表示されます。</p>色名を使う書き方は直感的ですが、細かい色合いを調整したい場合には限界があります。たとえば、同じ青でも少し明るい青、落ち着いた青、紫に近い青など、Webページではさまざまな色を使い分けることがあります。そのような場合は、カラーコードを使うとより細かく色を指定できます。
色名は練習用として便利ですが、実際のWeb制作では、デザインに合わせて正確な色を指定する場面が多くなります。そのため、最初は色名で基本を理解し、次にカラーコードの指定にも慣れていくとよいです。
カラーコードを使うと細かい色を指定できます
カラーコードとは、色を英数字で表す方法です。代表的なものに、16進数カラーコードがあります。16進数とは、0から9までの数字とaからfまでの英字を使って数を表す方法です。CSSでは、#ff0000のようにシャープ記号から始まる形で色を指定できます。
<p style="color: #ff0000;">この文章は赤色です。</p>
<p style="color: #0000ff;">この文章は青色です。</p>
<p style="color: #333333;">この文章は濃い灰色です。</p>#ff0000は赤、#0000ffは青、#333333は黒に近い灰色を表します。カラーコードを使うと、色名では表しにくい細かな色を指定できます。Webサイト全体の印象を整えたいときや、ブランドカラーに合わせたいときにも役立ちます。
初心者の方は、最初からすべてのカラーコードを覚える必要はありません。まずは、#000000が黒、#ffffffが白、#ff0000が赤というように、よく使う色から少しずつ覚えていくと理解しやすくなります。
colorプロパティを使うときの見やすさへの配慮
文字色を指定するときは、見た目の好みだけでなく、読みやすさも大切です。たとえば、白い背景に薄い黄色の文字を置くと、文字が背景に近い色になり、読みにくくなります。反対に、白い背景に黒や濃い灰色の文字を置くと、文字がはっきり見えます。
<p style="color: #333333;">この文章は読みやすい濃い灰色です。</p>Webページでは、文字色と背景色の差が小さいと、読む人に負担がかかります。特に、スマートフォンの小さな画面や明るい場所で見る場合、色の差が少ない文章はさらに読みにくくなります。
重要な文章だけ色を変える場合も、赤や青などを使いすぎると、どこが本当に重要なのか分かりにくくなります。colorプロパティは便利ですが、すべての段落に違う色を付けるのではなく、意味のある場所に限定して使うと、ページ全体が見やすくなります。
pタグの背景色を変えるbackground-colorプロパティの使い方
pタグの背景色を変えるbackground-colorプロパティの使い方では、段落の文字そのものではなく、文字の後ろにある領域へ色を付ける方法を学びます。文字色を変えるcolorプロパティとは役割が異なり、background-colorは段落の背景部分を目立たせたいときに使います。注意書きや補足情報など、特定の文章のまとまりを見やすくしたい場面で役立つ指定です。
background-colorプロパティは背景の色を指定します
background-colorプロパティは、HTML要素の背景色を指定するためのCSSです。CSSとは、Webページの見た目を整えるための書き方で、色、大きさ、余白、配置などを指定できます。pタグにbackground-colorを指定すると、その段落の背景に色が付きます。
たとえば、pタグの背景を黄色にしたい場合は、次のように書きます。
<p style="background-color: yellow;">この段落の背景は黄色です。</p>このコードでは、style属性の中にbackground-color: yellow;と書いています。background-colorが「背景色を変える指定」で、yellowが「黄色にする値」です。style属性とは、HTMLタグの中に直接CSSを書くための属性です。
文字色を変えるcolorとは違い、background-colorは文字の後ろ側にある表示領域へ色を付けます。そのため、段落全体を強調したい場合や、情報のまとまりを視覚的に分けたい場合に向いています。
背景色を使うと文章のまとまりを強調できます
背景色は、文章の内容を目立たせたいときに便利です。たとえば、注意点、補足説明、重要なお知らせなどに背景色を付けると、読み手がその部分に気づきやすくなります。
<p style="background-color: lightyellow;">
入力内容に誤りがないか確認してから送信してください。
</p>この例では、薄い黄色の背景色を使っています。黄色は注意を促す印象を与えやすい色ですが、濃すぎる黄色を使うと文字が読みにくくなることがあります。そのため、背景色には淡い色を使うと扱いやすくなります。
背景色を使うときは、装飾として目立たせるだけでなく、文章の意味と合っているかを考えることも大切です。注意なら黄色系、成功メッセージなら緑系、エラーなら赤系のように、色の印象と内容を合わせると、読み手が情報を理解しやすくなります。
文字色との組み合わせに注意します
background-colorを使うときは、文字色との組み合わせが重要です。背景色と文字色が似ていると、文字が読みづらくなります。たとえば、黄色の背景に白い文字を置くと、文字が背景に溶け込んでしまい、読む人に負担がかかります。
読みやすい組み合わせの例は、次のようになります。
<p style="background-color: #f0f0f0; color: #333333;">
この段落は薄い灰色の背景に濃い灰色の文字を指定しています。
</p>この例では、背景色に薄い灰色、文字色に濃い灰色を指定しています。背景と文字の明るさに差があるため、文章を読みやすくできます。色の差が十分にある状態を、コントラストが高いと表現します。コントラストとは、明るさや色の違いのことです。
背景色を指定するときは、背景だけを見て判断するのではなく、その上に表示される文字まで含めて確認することが大切です。特に、長い文章に背景色を付ける場合は、見た目の印象よりも読みやすさを優先するとよいです。
背景色だけでは余白が少なく見えることがあります
pタグにbackground-colorを指定すると、段落の背景に色は付きますが、文字と背景の端が近く見える場合があります。これは、pタグの内側に十分な余白がないためです。余白とは、文字や要素の周囲にある空間のことです。
次のように、背景色だけを指定すると、環境によっては文字が少し窮屈に見えることがあります。
<p style="background-color: lightblue;">
背景色を指定した段落です。
</p>このような場合は、paddingというCSSプロパティを一緒に使うと見やすくなります。paddingは、要素の内側の余白を指定するためのプロパティです。
<p style="background-color: lightblue; padding: 10px;">
背景色と内側の余白を指定した段落です。
</p>この例では、背景色に加えてpaddingを10px指定しています。pxはピクセルと読み、画面上の長さを表す単位です。paddingを指定すると、文字と背景の端の間に空間ができるため、文章が読みやすくなります。
background-colorは、単体でも背景色を変えられる便利なプロパティです。ただし、実際の見た目を整えるには、文字色や余白と組み合わせて使うことが多くなります。
style属性に色を指定するときの書き方の種類
style属性に色を指定するときの書き方の種類では、pタグの文字色や背景色を指定する際に使える色の表し方を学びます。HTMLのstyle属性では、redやblueのような色名だけでなく、カラーコードやrgbなどの形式も使用できます。書き方の種類を知っておくと、目的に合わせて色を選びやすくなります。
色名で指定する書き方
色名で指定する方法は、初心者の方にとって最も分かりやすい書き方です。red、blue、green、black、white、grayなど、英単語で色を指定します。見たままの意味で理解しやすいため、HTMLやCSSの学習を始めたばかりの段階では扱いやすい方法です。
<p style="color: red;">この文章は赤色で表示されます。</p>
<p style="background-color: yellow;">この段落の背景は黄色です。</p>この例では、1つ目のpタグで文字色を赤にし、2つ目のpタグで背景色を黄色にしています。colorは文字色を指定するプロパティで、background-colorは背景色を指定するプロパティです。プロパティとは、CSSで「何を変えるか」を表す項目です。
色名は読みやすく、コードを見ただけでどの色を指定しているのか分かりやすい点が特徴です。ただし、色名だけでは細かい色合いを指定しにくい場合があります。たとえば、少し暗い青や、淡い赤、くすんだ緑などを正確に表したいときは、別の書き方を使うと便利です。
16進数カラーコードで指定する書き方
16進数カラーコードは、#ff0000のようにシャープ記号と英数字を組み合わせて色を表す方法です。Web制作ではよく使われる指定方法で、色名よりも細かく色を指定できます。16進数とは、0から9までの数字とaからfまでの英字を使って数値を表す形式です。
<p style="color: #ff0000;">この文章はカラーコードで赤色を指定しています。</p>
<p style="color: #333333;">この文章は濃い灰色で表示されます。</p>
<p style="background-color: #f5f5f5;">この段落の背景は薄い灰色です。</p>カラーコードでは、赤、緑、青の光の強さを組み合わせて色を表します。たとえば、#ff0000は赤、#00ff00は緑、#0000ffは青を表します。#000000は黒、#ffffffは白です。
最初は英数字の並びが難しく見えるかもしれませんが、実際にはよく使う色から少しずつ覚えれば問題ありません。Webページ全体の印象を整えたい場合や、細かい色の違いを反映したい場合には、16進数カラーコードが役立ちます。
rgbで指定する書き方
rgbは、赤、緑、青の数値を使って色を指定する方法です。rgbはRed、Green、Blueの頭文字を取った表現です。それぞれの数値は一般的に0から255までで指定し、数値が大きいほどその色の成分が強くなります。
<p style="color: rgb(255, 0, 0);">この文章はrgbで赤色を指定しています。</p>
<p style="color: rgb(0, 0, 255);">この文章はrgbで青色を指定しています。</p>
<p style="background-color: rgb(240, 240, 240);">この段落の背景は薄い灰色です。</p>rgb(255, 0, 0)は赤、rgb(0, 0, 255)は青を表します。3つの数値は左から順に赤、緑、青を意味します。たとえば、赤だけを強くしたい場合は最初の数値を大きくし、青を強くしたい場合は3つ目の数値を大きくします。
rgbの利点は、色の仕組みを数値として理解しやすいことです。カラーコードと同じように細かい色を指定できますが、赤、緑、青の値が分かれているため、どの色の成分を調整しているのかを確認しやすい書き方です。
rgbaで透明度を含めて指定する書き方
rgbaは、rgbに透明度を加えた指定方法です。透明度とは、色がどれくらい透けて見えるかを表す度合いです。rgbaのaはアルファと呼ばれ、透明度を指定する値です。aの値は0から1の範囲で指定し、0に近いほど透明、1に近いほど不透明になります。
<p style="background-color: rgba(255, 0, 0, 0.2);">
この段落は薄く透けた赤い背景色です。
</p>この例では、赤色に透明度を加えて背景色を指定しています。rgba(255, 0, 0, 0.2)は、赤色をかなり薄く表示する指定です。注意書きの背景や、やわらかい強調表現を作りたいときに使いやすい方法です。
rgbaを使うと、背景に色を付けながらも強すぎない印象にできます。ただし、透明度を低くしすぎると色の意味が分かりにくくなる場合があります。読みやすさを確認しながら、文字色との組み合わせにも注意して指定することが大切です。
pタグに複数のstyleを指定する方法
pタグに複数のstyleを指定する方法では、文字色、背景色、余白、文字サイズなどを1つのpタグにまとめて指定する書き方を学びます。style属性の中では、複数のCSSをセミコロンで区切って記述できます。色だけでなく、見た目全体を少し整えたい場面で役立つ基本的な書き方です。
複数のCSSはセミコロンで区切ります
pタグに複数のstyleを指定するときは、style属性の中にCSSを続けて書きます。CSSとは、Webページの見た目を整えるための指定です。文字色を変えるcolor、背景色を変えるbackground-color、内側の余白を指定するpaddingなどを、1つのpタグにまとめて指定できます。
基本の形は、次のとおりです。
<p style="color: blue; background-color: lightyellow;">
この段落は文字色と背景色を同時に指定しています。
</p>このコードでは、color: blue;で文字色を青にし、background-color: lightyellow;で背景色を薄い黄色にしています。それぞれの指定の最後にセミコロンを付けているため、どこまでが1つの指定なのかが分かりやすくなります。
セミコロンは、CSSの指定を区切るための記号です。1つだけ指定する場合でも付けておくと、後から別の指定を追加したときに書き間違いを防ぎやすくなります。特に、複数のstyleを書く場合は、セミコロンの付け忘れに注意が必要です。
文字色と背景色を同時に指定できます
pタグでは、colorとbackground-colorを組み合わせて、文字と背景の両方に色を付けることができます。colorは文字色を指定するプロパティで、background-colorは背景色を指定するプロパティです。プロパティとは、CSSで「何を変更するか」を表す項目です。
<p style="color: #333333; background-color: #f0f0f0;">
この段落は濃い灰色の文字と薄い灰色の背景を指定しています。
</p>この例では、文字色に#333333、背景色に#f0f0f0を指定しています。どちらも16進数カラーコードと呼ばれる色の指定方法です。16進数カラーコードは、シャープ記号と英数字を使って色を表します。
文字色と背景色を同時に指定するときは、読みやすさを意識することが大切です。背景色と文字色が近い色だと、文字が見えにくくなります。たとえば、薄い黄色の背景に白い文字を置くと、読みにくくなることがあります。背景が明るい場合は文字を濃い色にし、背景が暗い場合は文字を明るい色にすると、読みやすい組み合わせになりやすいです。
余白や文字サイズも一緒に指定できます
style属性では、色だけでなく余白や文字サイズも指定できます。背景色を付けた段落では、文字と背景の端が近く見えることがあります。そのような場合は、paddingを指定すると見やすくなります。paddingとは、要素の内側の余白を指定するCSSプロパティです。
<p style="color: #333333; background-color: #e6f3ff; padding: 12px;">
この段落は文字色、背景色、内側の余白を指定しています。
</p>この例では、文字色、背景色、paddingを同時に指定しています。paddingに12pxを指定することで、文字の周りに空間ができ、背景色付きの段落が読みやすくなります。pxはピクセルと読み、画面上の長さを表す単位です。
文字サイズを変えたい場合は、font-sizeを使います。font-sizeは、文字の大きさを指定するCSSプロパティです。
<p style="color: navy; background-color: #f5f5f5; padding: 10px; font-size: 18px;">
この段落は文字サイズも指定しています。
</p>複数のstyleを指定すると、1つのpタグだけでも見た目を大きく変えることができます。ただし、指定が増えすぎるとHTMLが読みにくくなるため、学習段階では「何を変えるための指定なのか」を確認しながら書くことが大切です。
同じプロパティを重複して書かないようにします
style属性の中で同じプロパティを複数回書くと、後に書いた指定が優先されます。たとえば、colorを2回書いた場合、最後に書かれたcolorの値が反映されます。
<p style="color: red; color: blue;">
この文章は最終的に青色で表示されます。
</p>この例では、最初にcolor: red;と書いていますが、その後にcolor: blue;と書いているため、文字色は青になります。CSSでは、同じ場所に同じ内容の指定がある場合、後から書かれた指定が適用されることがあります。
重複した指定は、HTMLを読む人にとって分かりにくい原因になります。自分では意図していなくても、修正を繰り返すうちに同じプロパティが残ってしまうことがあります。pタグに複数のstyleを書くときは、colorは1回、background-colorも1回というように、同じ指定を何度も書いていないか確認するとよいです。
pタグで色を指定するときによくある間違い
pタグで色を指定するときによくある間違いでは、style属性やcolorプロパティ、background-colorプロパティを使う際に起こりやすいミスを確認します。HTMLやCSSは記号の書き忘れやスペルの違いによって、思ったように表示されないことがあります。原因を一つずつ確認できるようになると、色指定の失敗を落ち着いて修正しやすくなります。
style属性の書き方を間違えるケース
pタグに色を指定するときは、style属性の書き方が正しくないとCSSが反映されません。style属性は、HTMLタグの中に直接CSSを書くための属性です。基本の形は、style="プロパティ: 値;"です。
正しい例は、次のようになります。
<p style="color: red;">この文章は赤色です。</p>一方で、次のようにダブルクォーテーションが抜けていたり、コロンの代わりに別の記号を書いたりすると、うまく表示されない原因になります。
<p style=color: red;>この書き方は避けましょう。</p>
<p style="color = red;">この書き方も正しくありません。</p>HTMLでは、属性の値をダブルクォーテーションで囲む書き方が一般的です。また、CSSではプロパティと値の間にコロンを使います。イコールはHTML属性の名前と値をつなぐときに使いますが、CSSの指定では使いません。
初心者の方は、HTMLのイコールとCSSのコロンが混ざりやすいです。style="color: red;"という基本形を何度も書いて、記号の位置に慣れることが大切です。
colorとbackground-colorを混同するケース
文字色を変えたいのにbackground-colorを書いてしまったり、背景色を変えたいのにcolorを書いてしまったりする間違いもよくあります。colorは文字の色を変えるプロパティで、background-colorは背景の色を変えるプロパティです。
文字色を赤にする場合は、次のように書きます。
<p style="color: red;">この文章の文字色は赤です。</p>背景色を黄色にする場合は、次のように書きます。
<p style="background-color: yellow;">この段落の背景色は黄色です。</p>この2つはどちらも色に関する指定ですが、変わる場所が異なります。colorは文字そのもの、background-colorは文字の後ろの領域に影響します。画面を見て「色が変わっていない」と感じたときは、文字を変えたいのか、背景を変えたいのかを確認すると原因を見つけやすくなります。
文字色と背景色の両方を変えたい場合は、両方のプロパティをstyle属性の中に書きます。
<p style="color: white; background-color: blue;">
この段落は白い文字と青い背景です。
</p>セミコロンやスペルを忘れるケース
CSSでは、指定の最後にセミコロンを付けます。セミコロンは、1つのCSS指定がどこで終わるのかを示す区切りの記号です。1つだけ指定する場合は表示されることもありますが、複数の指定を書くときにセミコロンがないと、次の指定とつながって解釈されることがあります。
<p style="color: red; background-color: yellow;">
文字色と背景色を正しく指定しています。
</p>また、プロパティ名のスペルミスにも注意が必要です。たとえば、background-colorをbackgrond-colorのように書くと、ブラウザは正しいCSSとして認識できません。CSSでは、プロパティ名が少しでも違うと無効になることがあります。
<p style="backgrond-color: yellow;">
background-colorのスペルが間違っている例です。
</p>スペルミスは、見た目だけでは原因を判断しにくい場合があります。色が反映されないときは、まずプロパティ名、コロン、値、セミコロンの順番で確認するとよいです。特にbackground-colorは文字数が長いため、ハイフンの位置や英字の抜けに注意してください。
色の組み合わせで読みにくくなるケース
CSSの書き方が正しくても、色の組み合わせによっては文章が読みにくくなることがあります。たとえば、白い背景に黄色の文字、薄い灰色の背景に白い文字などは、文字と背景の差が少なく、読み手に負担をかけます。
<p style="color: yellow; background-color: white;">
この文章は背景と文字の差が少なく読みにくい例です。
</p>読みやすくするには、文字色と背景色の明るさに差を付けることが大切です。背景が明るい場合は濃い文字色を使い、背景が暗い場合は明るい文字色を使うと、文章が見やすくなります。
<p style="color: #333333; background-color: #f5f5f5;">
この文章は薄い背景と濃い文字色で読みやすくしています。
</p>色は見た目の印象を作る大切な要素ですが、文章を読むためのページでは読みやすさが優先されます。特に本文のように長く読む文章では、派手な色を多用するよりも、落ち着いた色を使う方が内容を理解しやすくなります。
実際のHTMLコードでpタグの色指定を確認する
実際のHTMLコードでpタグの色指定を確認するでは、これまで学んだcolor、background-color、style属性の書き方をまとめて、ブラウザで表示を確認できる形にします。pタグに色を指定するときは、コードを書くだけでなく、実際に表示して文字色や背景色が意図した通りになっているかを見ることが大切です。ここでは、基本的なHTMLの形の中で、複数のpタグに異なる色指定を行う例を確認します。
HTMLファイル全体の形を確認します
HTMLでpタグの色指定を試すときは、まずHTMLファイル全体の基本形を用意します。HTMLファイルとは、Webページの内容を書くためのファイルです。pタグだけを書いてもブラウザで表示できる場合はありますが、学習では基本構造を含めて書くと理解しやすくなります。
次のコードは、pタグにstyle属性を使って文字色や背景色を指定する例です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>pタグの色指定を確認する</title>
</head>
<body>
<p style="color: red;">この文章は赤色で表示されます。</p>
<p style="color: blue;">この文章は青色で表示されます。</p>
<p style="background-color: yellow;">
この段落は背景色が黄色で表示されます。
</p>
</body>
</html><!DOCTYPE html>は、この文書がHTMLで書かれていることをブラウザに伝えるための宣言です。htmlタグはページ全体を囲むタグで、headタグにはページの設定情報を書きます。bodyタグには、実際に画面へ表示される内容を書きます。
pタグはbodyタグの中に書きます。上の例では、1つ目のpタグで文字色を赤、2つ目のpタグで文字色を青、3つ目のpタグで背景色を黄色にしています。style属性の中にCSSを書くことで、そのpタグだけに見た目の指定を反映できます。
文字色と背景色を同時に指定します
pタグでは、文字色と背景色を同時に指定できます。文字色を変えるにはcolorプロパティを使い、背景色を変えるにはbackground-colorプロパティを使います。プロパティとは、CSSで「どの見た目を変更するか」を表す項目です。
次のコードでは、文字色、背景色、余白を1つのpタグにまとめて指定しています。
<p style="color: white; background-color: navy; padding: 10px;">
この段落は白い文字と紺色の背景で表示されます。
</p>この例では、color: white;で文字色を白にし、background-color: navy;で背景色を紺色にしています。さらに、padding: 10px;で内側の余白を指定しています。paddingとは、文字と背景の端との間に空間を作るためのCSSプロパティです。
背景色を指定するときは、paddingを一緒に使うと見た目が整いやすくなります。背景色だけを付けると、文字が背景の端に近く見えて窮屈な印象になる場合があります。余白を少し加えることで、文章の読みやすさが上がります。
複数のCSSをstyle属性に書く場合は、指定ごとにセミコロンで区切ります。セミコロンは、1つのCSS指定の終わりを示す記号です。color: white; background-color: navy; padding: 10px;のように書くことで、ブラウザがそれぞれの指定を正しく読み取れます。
色の指定方法を変えて表示を比べます
pタグの色指定では、色名、16進数カラーコード、rgb、rgbaなどの書き方を使えます。色名はredやblueのような英単語で指定する方法です。16進数カラーコードは、#333333のようにシャープ記号と英数字で色を表す方法です。rgbは赤、緑、青の数値で色を表し、rgbaはrgbに透明度を加えた指定方法です。
次の例では、同じpタグでも異なる形式で色を指定しています。
<p style="color: green;">
色名を使って緑色を指定しています。
</p>
<p style="color: #333333;">
16進数カラーコードを使って濃い灰色を指定しています。
</p>
<p style="color: rgb(255, 0, 0);">
rgbを使って赤色を指定しています。
</p>
<p style="background-color: rgba(0, 0, 255, 0.2);">
rgbaを使って薄く透けた青い背景色を指定しています。
</p>色名は分かりやすい一方で、細かい色合いを調整しにくい場合があります。16進数カラーコードやrgbを使うと、より細かく色を指定できます。rgbaを使うと透明度も指定できるため、やわらかい背景色を作りたいときに便利です。
初心者の段階では、まず色名で変化を確認し、次にカラーコードやrgbを試すと理解しやすくなります。書き方を変えても、colorは文字色、background-colorは背景色を変えるという基本は同じです。
表示されないときはコードを順番に確認します
pタグの色指定が反映されないときは、コードを上から順番に確認します。特に、style属性のダブルクォーテーション、CSSのコロン、指定の最後のセミコロン、プロパティ名のスペルを確認することが大切です。
正しい書き方は、次の形です。
<p style="color: red;">この文章は赤色です。</p>間違いやすい例として、次のような書き方があります。
<p style="color = red;">この書き方では正しく反映されません。</p>
<p style="backgrond-color: yellow;">プロパティ名のスペルが間違っています。</p>CSSでは、プロパティと値の間にはイコールではなくコロンを使います。また、background-colorのような長いプロパティ名は、スペルミスが起こりやすいです。色が変わらない場合でも、原因の多くは小さな記号や文字の抜けにあります。
ブラウザで表示を確認するときは、1つのpタグに1つずつ指定を追加していくと、どこで間違えたのかを見つけやすくなります。最初に文字色だけを指定し、次に背景色、最後にpaddingやfont-sizeを追加すると、変化を段階的に確認できます。
まとめ
HTMLのpタグとstyle属性で色を指定する学習の振り返りでは、これまで扱った文字色、背景色、色の書き方、複数指定、よくある間違いを整理します。pタグは文章の段落を作るためのHTMLタグであり、style属性を使うことで、その段落だけにCSSを直接指定できます。色を変える基本を理解すると、Webページの文章を見やすく整えたり、重要な情報を分かりやすく目立たせたりできるようになります。
pタグとstyle属性の関係を整理します
pタグは、HTMLで段落を作るためのタグです。HTMLとは、Webページの文章や画像、見出しなどの構造を作るための言語です。文章をひとまとまりにして表示したいときにpタグを使いますが、pタグだけでは文字色や背景色を細かく変えることはできません。
そこで使うのがstyle属性です。style属性は、HTMLタグの中に直接CSSを書くための属性です。CSSとは、Webページの見た目を整えるための書き方で、文字色、背景色、余白、文字サイズなどを指定できます。pタグにstyle属性を追加すると、その段落だけに見た目の変更を加えられます。
基本の形は、次のようになります。
<p style="color: red;">この文章は赤色で表示されます。</p>この例では、colorプロパティを使って文字色を赤にしています。プロパティとは、CSSで「何を変更するか」を表す項目です。値とは、「どのように変更するか」を表す内容です。color: red;であれば、colorがプロパティ、redが値です。
文字色と背景色の違いを理解します
pタグで色を指定するときは、文字色を変えたいのか、背景色を変えたいのかを区別することが大切です。文字そのものの色を変える場合はcolorプロパティを使います。段落の後ろにある背景の色を変える場合はbackground-colorプロパティを使います。
文字色を青にする例は、次のとおりです。
<p style="color: blue;">この文章は青色で表示されます。</p>背景色を黄色にする例は、次のとおりです。
<p style="background-color: yellow;">この段落の背景は黄色です。</p>文字色と背景色はどちらも見た目に関する指定ですが、影響する場所が違います。colorは文字に反映され、background-colorは段落の背景に反映されます。両方を同時に指定する場合は、style属性の中でセミコロンを使って区切ります。
<p style="color: white; background-color: navy;">
この段落は白い文字と紺色の背景で表示されます。
</p>色を指定するときは、見た目の好みだけでなく読みやすさも意識します。背景が明るい場合は濃い文字色、背景が暗い場合は明るい文字色にすると、文章が読みやすくなります。
色の指定方法を使い分けます
style属性で色を指定するときは、色名、16進数カラーコード、rgb、rgbaなどの書き方を使えます。色名はredやblueのような英単語で指定する方法です。初心者の方にとっては意味をイメージしやすく、最初の練習に向いています。
16進数カラーコードは、#ff0000や#333333のように、シャープ記号と英数字で色を表す方法です。色名よりも細かい色合いを指定できるため、実際のWeb制作でもよく使われます。#000000は黒、#ffffffは白、#ff0000は赤を表します。
rgbは、赤、緑、青の数値で色を指定する方法です。たとえば、rgb(255, 0, 0)は赤を表します。rgbaはrgbに透明度を加えた書き方で、背景色を少し透けたように見せたいときに便利です。
<p style="background-color: rgba(255, 0, 0, 0.2);">
この段落は薄く透けた赤い背景色です。
</p>最初からすべての指定方法を完璧に覚える必要はありません。まずは色名で変化を確認し、慣れてきたらカラーコードやrgb、rgbaを使うと理解しやすくなります。
複数のstyle指定と確認の習慣を身に付けます
pタグには、色だけでなく余白や文字サイズも同時に指定できます。複数のCSSを書く場合は、1つずつセミコロンで区切ります。たとえば、文字色、背景色、内側の余白をまとめて指定する場合は、次のように書きます。
<p style="color: #333333; background-color: #f5f5f5; padding: 10px;">
この段落は文字色、背景色、余白を指定しています。
</p>paddingは、要素の内側の余白を指定するCSSプロパティです。背景色を付けた段落では、文字と背景の端が近いと窮屈に見えることがあります。paddingを指定すると、文字の周囲に空間ができ、読みやすい見た目になります。
色が反映されない場合は、style属性の書き方、コロン、セミコロン、プロパティ名のスペルを順番に確認します。特に、background-colorは文字数が長いため、スペルミスが起こりやすいです。また、CSSではプロパティと値の間にイコールではなくコロンを使います。
<p style="color: red;">正しい書き方です。</p>
<p style="color = red;">避けたい書き方です。</p>pタグの色指定は、HTMLとCSSの関係を学ぶうえでとても扱いやすい題材です。文字色を変えるcolor、背景色を変えるbackground-color、複数の指定を区切るセミコロン、読みやすさを意識した色の組み合わせを押さえることで、基本的な見た目の調整ができるようになります。
