HTMLのpタグは文章の段落を作るためのタグで、style属性はその段落の見た目を直接指定するために使います。pタグとstyle属性の関係を理解すると、HTMLで表示する文章の色、大きさ、余白、行間などを自分で調整できるようになります。
HTMLのpタグとstyle属性の基本
pタグは文章の段落を表すタグです
HTMLのpタグは、文章を段落として表示するために使う基本的なタグです。HTMLとは、Webページの構造を作るための言語です。たとえば、見出し、文章、画像、リンクなどをブラウザに伝える役割があります。
pタグの「p」は「paragraph」の略で、日本語では「段落」という意味です。文章をただ並べるのではなく、意味のまとまりごとに分けて表示したいときに使います。ブログ記事、会社紹介ページ、商品説明ページなど、多くのWebページでpタグは頻繁に使われます。
たとえば、次のように書くと、1つの段落として文章が表示されます。
<p>これはHTMLのpタグで作った段落です。</p>開始タグである<p>から始まり、終了タグである</p>で終わります。この間に書いた文章が、1つの段落としてブラウザに表示されます。初心者のうちは、文章を書くときに毎回pタグで囲む意識を持つと、HTMLの構造を理解しやすくなります。
pタグを使うと、ブラウザは文章の前後に適度な余白を付けて表示します。この余白はブラウザが最初から用意している標準の見た目です。ただし、Webページのデザインによっては、標準の見た目ではなく、文字の色や大きさ、余白を変えたい場面があります。そのときに使える方法の1つがstyle属性です。
style属性は見た目を指定するための属性です
style属性は、HTMLタグに直接デザインの指定を書くための属性です。属性とは、タグに追加情報を与えるものです。たとえば、pタグだけでは「これは段落です」という構造を表しますが、style属性を加えると「この段落の文字色を赤にする」「文字サイズを大きくする」といった見た目の指示を追加できます。
style属性では、CSSという言語の書き方を使います。CSSとは、HTMLで作った要素の見た目を整えるための言語です。文字色、背景色、余白、線、配置などを指定できます。pタグにstyle属性を書く場合は、次のような形になります。
<p style="color: red;">この文章は赤色で表示されます。</p>この例では、pタグの中にstyle="color: red;"と書いています。colorは文字色を指定するCSSのプロパティです。プロパティとは、変更したい見た目の項目のことです。redは指定する値で、ここでは赤色を意味します。
style属性は、すぐに見た目を試したいときに便利です。HTMLファイルの中だけで指定できるため、別のCSSファイルを用意しなくても動作を確認できます。学習の初期段階では、pタグにstyle属性を書いて、どの指定がどのように画面に反映されるのかを確認すると理解が進みやすいです。
pタグとstyle属性を組み合わせると文章の印象を変えられます
pタグは文章の意味を表し、style属性は文章の見た目を変える役割を持ちます。この2つを組み合わせることで、同じ文章でも読みやすさや印象を調整できます。
たとえば、注意書きを目立たせたい場合は文字色を赤にしたり、補足説明をやわらかい印象にしたい場合は文字サイズを少し小さくしたりできます。文章の内容に合わせて見た目を変えることで、読み手が情報を理解しやすくなります。
<p style="font-size: 18px; color: blue;">
この文章は少し大きく、青色で表示されます。
</p>この例では、font-sizeで文字サイズを指定し、colorで文字色を指定しています。font-sizeは文字の大きさを変えるためのCSSプロパティです。18pxのpxは「ピクセル」と読み、画面上のサイズを表す単位です。
ただし、style属性は便利な反面、使いすぎるとHTMLが読みにくくなることがあります。たくさんのpタグにそれぞれ長いstyle指定を書くと、後から修正するときに手間がかかります。そのため、最初の学習ではstyle属性で仕組みを理解し、慣れてきたらCSSを別にまとめる方法も学ぶとよいです。
pタグにstyle属性を書く基本構文
pタグにstyle属性を書くと、段落の見た目をHTMLタグの中で直接指定できます。基本構文を理解すると、文字色、文字サイズ、背景色、余白などをどの位置に書けばよいのかが分かり、HTMLとCSSの関係も整理しやすくなります。
style属性は開始タグの中に書きます
style属性は、pタグの開始タグの中に書きます。開始タグとは、要素の始まりを表すタグのことです。pタグの場合は<p>が開始タグで、</p>が終了タグです。文章そのものは開始タグと終了タグの間に書き、見た目の指定は開始タグの中に追加します。
基本の形は次のとおりです。
<p style="color: red;">これは赤い文字の段落です。</p>この例では、style="color: red;"の部分がstyle属性です。style属性の値はダブルクォーテーションで囲み、その中にCSSの指定を書きます。CSSとは、HTMLの見た目を整えるための言語です。HTMLが文章や構造を担当し、CSSが色や大きさなどのデザインを担当すると考えると分かりやすいです。
style属性を終了タグに書いたり、文章の途中に書いたりしても正しく動きません。必ず開始タグの中に書くことが大切です。初心者のうちは、まず「pタグの開始タグにstyleを追加する」と覚えると、書く位置で迷いにくくなります。
CSSの指定はプロパティと値で書きます
style属性の中では、CSSの指定を「プロパティ: 値;」という形で書きます。プロパティとは、変更したい見た目の項目です。値とは、その項目をどのように変えるかを示す内容です。
たとえば、文字色を変えたい場合は、colorというプロパティを使います。赤色にしたい場合は、値としてredを書きます。
<p style="color: red;">文字色を赤にした段落です。</p>この場合、colorがプロパティで、redが値です。プロパティと値の間にはコロンを置き、1つの指定の終わりにはセミコロンを付けます。セミコロンは、CSSの指定がそこで終わることを示す記号です。
文字サイズを変える場合は、font-sizeというプロパティを使います。たとえば、文字を20pxにしたい場合は次のように書きます。
<p style="font-size: 20px;">文字サイズを20pxにした段落です。</p>pxは「ピクセル」と読み、画面上の大きさを表す単位です。数字が大きくなるほど文字も大きく表示されます。最初は、colorやfont-sizeのような分かりやすいプロパティから使ってみると、style属性の働きを実感しやすいです。
複数の指定はセミコロンで区切ります
pタグにstyle属性を書くときは、1つの見た目だけでなく、複数の見た目を同時に指定できます。たとえば、文字色を青にし、文字サイズを18pxにし、背景色を薄い黄色にすることもできます。
複数のCSSを指定する場合は、次のようにセミコロンで区切って書きます。
<p style="color: blue; font-size: 18px; background-color: lightyellow;">
青い文字で、背景色が薄い黄色の段落です。
</p>この例では、colorで文字色、font-sizeで文字サイズ、background-colorで背景色を指定しています。background-colorは背景色を変えるためのプロパティです。CSSの指定を複数並べる場合でも、基本は「プロパティ: 値;」の形を繰り返すだけです。
ただし、指定が増えすぎるとHTMLが長くなり、読みづらくなることがあります。学習中は動作確認のためにstyle属性を使うと便利ですが、実際のWeb制作ではCSSを別の場所にまとめる方法もよく使われます。まずはstyle属性で基本構文を理解し、どのプロパティがどの見た目に対応するのかを確認していくとよいです。
pタグで文字色や背景色を変更する方法
pタグにstyle属性を使うと、段落の文字色や背景色を直接変更できます。文字色は文章の印象や重要度を伝えるために役立ち、背景色は注意書きや補足情報などを目立たせるときに便利です。
文字色はcolorで指定します
pタグの文字色を変更したい場合は、style属性の中にcolorプロパティを書きます。プロパティとは、変更したい見た目の項目のことです。colorは文字そのものの色を指定するためのCSSプロパティです。
たとえば、段落の文字色を赤にしたい場合は、次のように書きます。
<p style="color: red;">この文章は赤色で表示されます。</p>このコードでは、pタグの開始タグにstyle="color: red;"を書いています。redは赤色を表す値です。ブラウザで表示すると、pタグで囲まれた文章が赤色になります。
色はredやblueのような英単語で指定できます。redは赤、blueは青、greenは緑、blackは黒、whiteは白を表します。初心者のうちは、まず英単語の色名を使うと分かりやすいです。
<p style="color: blue;">この文章は青色で表示されます。</p>
<p style="color: green;">この文章は緑色で表示されます。</p>文字色を変えると、読み手に与える印象が変わります。赤は注意や警告を連想させやすく、青は落ち着いた印象を与えやすいです。ただし、色だけで重要な情報を伝えると、見え方に個人差がある場合に内容が伝わりにくくなることがあります。重要な内容は、色に加えて文章でもはっきり説明することが大切です。
背景色はbackground-colorで指定します
pタグの背景色を変更したい場合は、background-colorプロパティを使います。background-colorは、要素の背景に色を付けるためのCSSプロパティです。pタグに指定すると、段落の背景部分に色が付きます。
たとえば、背景色を薄い黄色にしたい場合は、次のように書きます。
<p style="background-color: lightyellow;">
この段落は背景色が薄い黄色になります。
</p>lightyellowは薄い黄色を表す色名です。背景色を使うと、補足説明や注意事項を読み手に見つけてもらいやすくなります。特に文章が長いページでは、背景色によって情報のまとまりを視覚的に分けることができます。
文字色と背景色は同時に指定できます。複数のCSS指定を書く場合は、セミコロンで区切ります。
<p style="color: darkred; background-color: mistyrose;">
この段落は濃い赤色の文字で、背景色は薄い赤系になります。
</p>この例では、colorで文字色を指定し、background-colorで背景色を指定しています。darkredは濃い赤、mistyroseは淡い赤系の背景色です。文字色と背景色を組み合わせる場合は、文章が読みやすいかどうかを必ず確認してください。
読みやすい色の組み合わせを意識します
文字色や背景色を変更するときは、見た目の好みだけでなく、読みやすさを意識することが重要です。たとえば、白い背景に薄い黄色の文字を指定すると、文字が背景に近い色になり読みにくくなります。反対に、黒い文字を白い背景に置くと、色の差が大きいため読みやすくなります。
色の差のことをコントラストといいます。コントラストとは、文字色と背景色の明るさや濃さの違いのことです。コントラストが弱いと、文章がぼやけて見えます。コントラストが強いと、文章を認識しやすくなります。
<p style="color: white; background-color: navy;">
この段落は濃い青の背景に白い文字を表示します。
</p>この例では、背景色が濃いnavyで、文字色がwhiteです。濃い背景に明るい文字を組み合わせているため、文章が比較的読みやすくなります。
一方で、強すぎる色を広い範囲に使うと、画面全体が派手になり読みにくく感じることがあります。pタグで色を指定するときは、注意書き、重要な補足、強調したい文章など、目的を決めて使うと自然なデザインになります。
pタグで文字サイズや太さを調整する方法
pタグにstyle属性を使うと、段落内の文字サイズや太さを直接調整できます。文字サイズは読みやすさに大きく関係し、文字の太さは重要な情報を目立たせるときに役立ちます。
文字サイズはfont-sizeで指定します
pタグの文字サイズを変更したい場合は、font-sizeプロパティを使います。font-sizeは、文字の大きさを指定するCSSのプロパティです。CSSとは、HTMLで作った文章や要素の見た目を整えるための言語です。
たとえば、段落の文字サイズを20pxにしたい場合は、次のように書きます。
<p style="font-size: 20px;">この文章は20pxの文字サイズで表示されます。</p>pxは「ピクセル」と読み、画面上の大きさを表す単位です。数字が大きくなるほど文字は大きく表示され、数字が小さくなるほど文字は小さく表示されます。一般的な本文では、16px前後が使われることが多く、少し目立たせたい文章では18pxや20pxを使うことがあります。
文字サイズを大きくすると目立ちますが、すべての文章を大きくすると画面の中で情報の強弱が分かりにくくなります。本文、補足、注意書きなど、文章の役割に合わせてサイズを変えると、読み手が内容を整理しやすくなります。
<p style="font-size: 16px;">通常の説明文として読みやすいサイズです。</p>
<p style="font-size: 22px;">重要なお知らせとして目立たせたい文章です。</p>このように、pタグごとにfont-sizeを変えることで、同じ段落でも印象を調整できます。ただし、文字サイズを細かく変えすぎるとページ全体にまとまりがなくなるため、使用するサイズは数種類に絞ると扱いやすいです。
文字の太さはfont-weightで指定します
pタグの文字を太くしたい場合は、font-weightプロパティを使います。font-weightは、文字の太さを指定するCSSのプロパティです。重要な説明、注意点、強調したい文章などに使うと、読み手の視線を集めやすくなります。
たとえば、文字を太く表示したい場合は、次のように書きます。
<p style="font-weight: bold;">この文章は太字で表示されます。</p>boldは「太字」を表す値です。pタグ全体にfont-weightを指定すると、その段落に含まれる文章全体が太く表示されます。短い注意文や見出しに近い役割を持つ文章には向いていますが、長い本文全体を太字にすると読みづらくなる場合があります。
font-weightには、bold以外にも数値を指定できます。たとえば、400は通常の太さ、700は太字に近い太さとして使われます。ただし、指定した数値が実際にどのように見えるかは、使用しているフォントによって変わることがあります。フォントとは、文字の形のデザインのことです。
<p style="font-weight: 400;">この文章は通常の太さです。</p>
<p style="font-weight: 700;">この文章は太めに表示されます。</p>初心者のうちは、まずnormalとboldを覚えるとよいです。normalは通常の太さ、boldは太字を意味します。より細かく調整したいときに、400や700のような数値指定を使うと理解しやすいです。
サイズと太さを組み合わせて強調を作ります
font-sizeとfont-weightは同時に指定できます。文字サイズを少し大きくし、文字を太くすると、段落全体を強調したいときに効果的です。複数のCSS指定を書く場合は、セミコロンで区切ります。
<p style="font-size: 20px; font-weight: bold;">
この文章は大きく太く表示されます。
</p>この例では、font-sizeで文字サイズを20pxにし、font-weightで太字を指定しています。重要なメッセージや、ページ内で特に読んでほしい案内文に使いやすい書き方です。
ただし、強調は使いすぎると効果が弱くなります。すべての文章が大きく太いと、どこが本当に重要なのか分かりにくくなります。文字サイズや太さを変えるときは、どの文章を目立たせたいのかを決めてから指定することが大切です。
また、pタグは段落を表すタグなので、見出しそのものを作りたい場合はh1やh2などの見出しタグを使う方が適しています。h1やh2は文章の階層を示すためのタグで、ページの構造を分かりやすくする役割があります。pタグに大きな文字サイズや太字を指定すれば見出しのように見せることはできますが、意味としては段落のままです。文章の意味と見た目を分けて考えると、HTMLを正しく扱いやすくなります。
pタグで余白や行間を指定する方法
pタグにstyle属性を使うと、段落の外側や内側の余白、文章の行間を調整できます。余白と行間は文章の読みやすさに大きく関わるため、文字色や文字サイズと同じくらい重要な指定です。
外側の余白はmarginで指定します
pタグの外側に余白を作りたい場合は、marginプロパティを使います。marginとは、要素の外側にできる空間のことです。要素とは、HTMLタグで作られる1つひとつの部品を指します。pタグの場合、段落そのものが要素になります。
たとえば、pタグの下に余白を作りたい場合は、次のように書きます。
<p style="margin-bottom: 24px;">
この段落の下には24pxの余白があります。
</p>
<p>
次の段落です。
</p>margin-bottomは、要素の下側の外側余白を指定するプロパティです。pxは「ピクセル」と読み、画面上の長さを表す単位です。数値が大きいほど余白も広くなります。
pタグは、ブラウザの標準設定によって最初から上下に余白が付いていることがあります。そのため、何も指定していなくても段落同士の間に空きが見える場合があります。ページ全体の見た目を細かく整えたい場合は、marginを自分で指定すると余白を管理しやすくなります。
<p style="margin: 0;">
この段落は外側の余白を0にしています。
</p>
<p style="margin-top: 16px;">
この段落は上側に16pxの余白を付けています。
</p>marginには、margin-top、margin-right、margin-bottom、margin-leftのように方向を指定する書き方があります。topは上、rightは右、bottomは下、leftは左を意味します。初心者のうちは、段落の間隔を調整する目的でmargin-bottomやmargin-topから使うと理解しやすいです。
内側の余白はpaddingで指定します
pタグの内側に余白を作りたい場合は、paddingプロパティを使います。paddingとは、要素の内側にできる空間のことです。pタグで考えると、文字と背景や枠線の間にできる余白です。
たとえば、背景色を付けた段落にpaddingを指定すると、文字の周りにゆとりが生まれます。
<p style="background-color: lightyellow; padding: 16px;">
この段落は内側に16pxの余白があります。
</p>この例では、background-colorで背景色を指定し、paddingで内側の余白を指定しています。paddingがない場合、背景色は付いていても文字が端に近くなり、窮屈に見えることがあります。paddingを付けることで、文章が読みやすく、見た目にも落ち着いた印象になります。
paddingもmarginと同じように、方向ごとに指定できます。
<p style="padding-top: 12px; padding-bottom: 12px;">
この段落は上下の内側余白を指定しています。
</p>padding-topは上側の内側余白、padding-bottomは下側の内側余白を指定します。左右にも余白を付けたい場合は、padding-leftやpadding-rightを使います。注意書きや補足欄のように背景色を付ける場合は、paddingを一緒に指定すると読みやすい見た目になります。
行間はline-heightで指定します
文章の行と行の間隔を調整したい場合は、line-heightプロパティを使います。line-heightは行の高さを指定するCSSのプロパティです。文章が複数行になるとき、行間が狭すぎると読みにくくなり、広すぎるとまとまりが弱く見えることがあります。
たとえば、行間を1.8にしたい場合は、次のように書きます。
<p style="line-height: 1.8;">
HTMLのpタグは段落を作るために使います。文章が長くなる場合は、
line-heightを指定すると行と行の間にゆとりができ、読みやすくなります。
</p>line-heightに1.8のような数値を指定すると、文字サイズに対する割合で行の高さが決まります。たとえば、文字サイズが16pxでline-heightが1.8の場合、行の高さはおおよそ28.8pxになります。計算を細かく覚える必要はありませんが、数値を大きくすると行間が広がると理解すれば十分です。
<p style="font-size: 16px; line-height: 1.5;">
この段落は標準的な読みやすさを意識した行間です。
</p>
<p style="font-size: 16px; line-height: 2;">
この段落は行間を広めにして、ゆったり読める印象にしています。
</p>本文では、line-heightを1.5から1.8程度にすると読みやすくなることが多いです。ただし、文章の長さや文字サイズによって適切な行間は変わります。短い説明文では少し狭めでも問題ありませんが、長い本文では行間に余裕を持たせると読み手の負担を減らせます。
pタグにstyle属性を使うときの注意点
pタグにstyle属性を使うと、段落の見た目をすぐに変更できるため便利です。ただし、HTMLの中にデザイン指定を直接書く方法には、管理のしやすさや読みやすさに関する注意点があります。
style属性を使いすぎるとHTMLが読みにくくなります
style属性は、pタグの開始タグに直接CSSを書く方法です。CSSとは、文字色や余白などの見た目を指定するための言語です。たとえば、文字色を赤にしたい場合は、次のように書きます。
<p style="color: red;">この文章は赤色です。</p>このように1つだけ指定する場合は分かりやすいですが、指定が増えると開始タグが長くなります。文字色、背景色、文字サイズ、余白、行間などをすべてstyle属性に書くと、HTMLの構造が見えにくくなります。
<p style="color: red; background-color: lightyellow; font-size: 18px; margin-bottom: 24px; line-height: 1.8;">
注意書きとして表示したい文章です。
</p>このコードでは、pタグの中に多くの見た目の指定が入っています。学習や動作確認では便利ですが、文章が増えたページでは、どこに何の指定があるのか探しにくくなります。HTMLは本来、文章や見出しなどの構造を表す役割を持ちます。見た目の指定が多すぎると、構造とデザインが混ざり、後から修正するときに負担が大きくなります。
複数の段落で同じ見た目を使いたい場合にも注意が必要です。すべてのpタグに同じstyle属性を書くと、変更したいときに1か所ずつ修正しなければなりません。たとえば、赤色を青色に変えたいだけでも、該当するpタグをすべて探して書き換える必要があります。
同じデザインを繰り返す場合は管理方法を考えます
style属性は、そのタグだけに見た目を指定する方法です。このように、HTMLタグの中に直接CSSを書く方法をインラインCSSといいます。インラインとは「行の中に直接書く」という意味で、pタグの開始タグの中にstyle属性を書く形を指します。
インラインCSSは、1つの段落だけ特別に見た目を変えたいときには便利です。たとえば、ページの中に1か所だけ注意文を入れたい場合や、学習中にすぐ結果を確認したい場合には使いやすい方法です。
<p>通常の説明文です。</p>
<p style="color: red; font-weight: bold;">この部分だけ注意文として目立たせます。</p>一方で、同じデザインを何度も使う場合は、style属性だけで管理すると効率が悪くなります。たとえば、注意文を10か所に入れる場合、10個のpタグに同じstyle属性を書くことになります。後から色や文字サイズを変更したくなったとき、10か所すべてを修正しなければなりません。
このような場合は、CSSをまとめて管理する考え方が重要です。たとえば、HTMLの中でclass属性を使い、CSS側でまとめて見た目を指定する方法があります。class属性とは、HTML要素に名前を付けて、同じ種類の要素をまとめて扱いやすくするための属性です。
<p class="notice">この文章は注意文です。</p>
<p class="notice">この文章も同じ見た目の注意文です。</p>.notice {
color: red;
font-weight: bold;
}このように分けると、見た目を変更したいときはCSSの1か所を修正するだけで済みます。style属性を学ぶことはCSSの基本理解に役立ちますが、実際にページを作るときは、どの指定を直接書き、どの指定をまとめて管理するかを考えることが大切です。
見た目だけで意味を伝えないようにします
pタグにstyle属性を使うと、文字色や太さを変えて情報を目立たせることができます。ただし、見た目だけに頼って意味を伝えると、読み手によっては内容を理解しにくくなる場合があります。
たとえば、「赤い文字の部分を確認してください」とだけ書くと、赤色が見えにくい人や、画面設定によって色の違いが分かりにくい人には伝わりづらくなります。重要な情報は、色だけでなく文章としても意味が分かるように書く必要があります。
<p style="color: red;">
必須項目です。入力しないと送信できません。
</p>この例では、赤色で目立たせるだけでなく、「必須項目です」「送信できません」という内容を文章で説明しています。色は補助として使い、意味そのものは文章で伝えるようにすると、読み手にとって分かりやすくなります。
また、文字色と背景色の組み合わせにも注意が必要です。薄い文字色を薄い背景に重ねると、文章が読みにくくなります。読みやすさのためには、文字色と背景色の差を意識します。この差をコントラストといいます。コントラストとは、色の明るさや濃さの違いのことです。
<p style="color: white; background-color: navy; padding: 12px;">
濃い背景色に白い文字を組み合わせた読みやすい例です。
</p>pタグにstyle属性を使うときは、見た目を整えることだけでなく、読み手が内容を正しく理解できるかを考える必要があります。特に文章を読ませるWebページでは、派手さよりも読みやすさを優先すると扱いやすいデザインになります。
pタグのstyle属性を使った実践的なコード例
pタグのstyle属性は、文章の見た目をその場で調整したいときに役立ちます。ここでは、文字色、背景色、文字サイズ、太さ、余白、行間などを組み合わせた実践的な例を確認しながら、どの指定がどのような表示につながるのかを学びます。
注意文を目立たせるコード例です
Webページでは、入力フォームの注意事項や、ユーザーに必ず読んでほしい説明を目立たせたい場面があります。そのようなときは、pタグにstyle属性を使って文字色や背景色を指定すると、通常の文章との差を作れます。
<p style="color: darkred; background-color: mistyrose; padding: 12px; font-weight: bold;">
必須項目です。お名前とメールアドレスを入力してから送信してください。
</p>この例では、colorで文字色を濃い赤にし、background-colorで背景色を淡い赤系にしています。paddingは内側の余白を指定するプロパティです。文字と背景の端に適度な空間ができるため、文章が窮屈に見えにくくなります。
font-weightは文字の太さを指定するプロパティです。boldを指定すると太字になります。注意文は読み飛ばされると困る内容なので、色だけでなく太字も使うことで、読み手の目に入りやすくしています。
ただし、重要な点は、見た目だけで意味を伝えていないことです。このコードでは、赤系の色で目立たせるだけでなく、「必須項目です」「入力してから送信してください」と文章でも内容を説明しています。色は補助として使い、意味は文章で伝えるようにすると、初心者にも扱いやすい書き方になります。
説明文を読みやすくするコード例です
長めの説明文では、文字サイズや行間を調整すると読みやすくなります。特にスマートフォンやパソコンの画面で文章を読む場合、行間が狭すぎると文字が詰まって見え、読み手に負担がかかります。
<p style="font-size: 16px; line-height: 1.8; color: #333333;">
HTMLのpタグは、文章を段落として表示するために使います。
style属性を組み合わせると、文字の大きさや行間、色などを直接指定できます。
文章量が多いページでは、読みやすさを意識して見た目を整えることが大切です。
</p>この例では、font-sizeで文字サイズを16pxにしています。pxは「ピクセル」と読み、画面上の大きさを表す単位です。16pxは本文として使いやすい標準的なサイズです。
line-heightは行間を指定するプロパティです。ここでは1.8を指定しているため、行と行の間にゆとりができます。line-heightに単位を付けずに数値だけを書く場合、文字サイズに対する割合として扱われます。細かい計算を覚える必要はありませんが、1.5から1.8程度にすると本文が読みやすくなることが多いです。
colorには#333333を指定しています。これはカラーコードと呼ばれる色の指定方法です。カラーコードとは、色を記号と数字で表す方法です。#333333は真っ黒より少し明るい濃いグレーで、白い背景の上でも読みやすい色として使いやすいです。
補足情報をカード風に見せるコード例です
補足情報や豆知識を本文の中で分けて見せたい場合は、背景色、余白、枠線を組み合わせると、カードのような見た目にできます。カード風とは、情報のまとまりが1つの箱のように見えるデザインのことです。
<p style="background-color: #f5f5f5; padding: 16px; border-left: 5px solid #666666; line-height: 1.7;">
補足：pタグは段落を表すタグです。見た目を変えるためだけに使うのではなく、
文章のまとまりを示す目的で使うことが大切です。
</p>この例では、background-colorで薄いグレーの背景色を付けています。paddingで内側の余白を作り、文章が背景の端に近づきすぎないようにしています。
border-leftは左側の枠線を指定するプロパティです。5px solid #666666という指定は、太さ5pxの実線を濃いグレーで表示するという意味です。solidは実線を表します。左側に線を入れることで、通常の本文とは違う情報のまとまりであることが分かりやすくなります。
このようなデザインは、補足、注意、ポイント説明などに向いています。ただし、pタグだけで複雑なレイアウトを作りすぎると、HTMLの役割が分かりにくくなることがあります。段落として自然な文章を入れる場合に使うと、pタグの意味を保ちながら見た目も整えられます。
複数の段落で見た目を変えるコード例です
1つのページには、通常の説明文、重要なお知らせ、補足説明など、役割の違う文章が並ぶことがあります。pタグごとにstyle属性を変えると、それぞれの役割に合わせた見た目を指定できます。
<p style="font-size: 16px; line-height: 1.7;">
これは通常の説明文です。読みやすさを意識して、標準的な文字サイズと行間を指定しています。
</p>
<p style="font-size: 18px; font-weight: bold; color: darkblue;">
これは重要なお知らせです。文字を少し大きくし、太字と色で目立たせています。
</p>
<p style="font-size: 14px; color: #666666; background-color: #f9f9f9; padding: 10px;">
これは補足説明です。本文より少し小さい文字にして、背景色で情報を分けています。
</p>この例では、通常の説明文にはfont-sizeとline-heightを指定し、読みやすさを整えています。重要なお知らせにはfont-size、font-weight、colorを指定し、本文よりも目立つ印象にしています。補足説明には小さめの文字色と背景色、paddingを指定して、控えめながら情報のまとまりが分かるようにしています。
pタグのstyle属性は、学習中にCSSの動きを確認する方法として便利です。どのプロパティを変更すると、画面上のどの部分が変わるのかをすぐに確認できます。ただし、実際のWebページで同じ見た目を何度も使う場合は、CSSを別にまとめる方法も検討すると管理しやすくなります。
まとめ
HTMLのpタグとstyle属性を学ぶと、文章の段落を作りながら、その見た目を直接調整できるようになります。pタグは文章の意味やまとまりを表し、style属性は文字色、背景色、文字サイズ、太さ、余白、行間などの見た目を指定するために使います。
pタグは文章のまとまりを表すために使います
pタグは、HTMLで段落を作るための基本的なタグです。HTMLとは、Webページの構造を作るための言語です。見出し、本文、画像、リンクなどをどのように配置するかをブラウザに伝える役割があります。
pタグの「p」はparagraphの略で、日本語では段落を意味します。文章を意味のあるまとまりごとに分けることで、読み手にとって内容を理解しやすいページになります。たとえば、説明文、注意書き、補足情報などをそれぞれpタグで囲むと、文章の区切りが明確になります。
<p>これは1つの段落です。</p>
<p>こちらは別の段落です。</p>pタグは見た目を変えるためだけのタグではありません。文章のまとまりを示すことが本来の役割です。そのため、単に文字を大きくしたい、太くしたいという理由だけでpタグを使うのではなく、文章として1つの段落になっているかを考えることが大切です。
style属性は段落の見た目を直接指定できます
style属性は、HTMLタグに直接CSSを書くための属性です。CSSとは、HTMLで作った要素の見た目を整えるための言語です。要素とは、pタグやh2タグなど、HTMLタグによって作られるページ上の部品を指します。
pタグにstyle属性を書く場合は、開始タグの中に指定します。基本の形は「プロパティ: 値;」です。プロパティとは変更したい見た目の項目で、値とはどのように変更するかを示す内容です。
<p style="color: red;">この文章は赤色で表示されます。</p>この例では、colorがプロパティで、redが値です。colorは文字色を指定するCSSプロパティです。style属性の中では、文字色だけでなく、背景色、文字サイズ、太さ、余白、行間なども指定できます。
複数の指定を入れる場合は、セミコロンで区切ります。
<p style="color: blue; font-size: 18px; line-height: 1.8;">
この文章は青色で、少し大きく、行間も広めに表示されます。
</p>このように、pタグとstyle属性を組み合わせると、段落の内容に合わせて見た目を調整できます。学習の初期段階では、style属性を使うことでCSSの効果をすぐに確認しやすくなります。
文字色や背景色は読みやすさを意識して指定します
pタグでは、colorで文字色を指定し、background-colorで背景色を指定できます。文字色を変えると、文章の印象や重要度を伝えやすくなります。背景色を付けると、注意文や補足情報を通常の本文と分けて見せることができます。
<p style="color: darkred; background-color: mistyrose; padding: 12px;">
必須項目です。入力内容を確認してから送信してください。
</p>この例では、文字色を濃い赤にし、背景色を淡い赤系にしています。さらにpaddingで内側の余白を指定しているため、文字が背景の端に近づきすぎず、読みやすい表示になります。
色を使うときは、見た目のきれいさだけでなく、コントラストを意識する必要があります。コントラストとは、文字色と背景色の明るさや濃さの差のことです。文字色と背景色が近すぎると、文章が読みにくくなります。
また、色だけで意味を伝えないことも大切です。「赤い部分を見てください」と書くだけでは、色の違いが分かりにくい環境では情報が伝わらない場合があります。重要な情報は、色で目立たせるだけでなく、文章としても内容を明確に書くようにします。
文字サイズや太さは情報の強弱を作ります
pタグでは、font-sizeで文字サイズを指定し、font-weightで文字の太さを指定できます。font-sizeは文字の大きさを変えるプロパティで、font-weightは文字を通常の太さにしたり、太字にしたりするプロパティです。
<p style="font-size: 20px; font-weight: bold;">
この文章は大きく太く表示されます。
</p>文字サイズを大きくしたり、文字を太くしたりすると、文章を目立たせることができます。重要なお知らせや注意文など、読み手に特に見てほしい情報に使うと効果的です。
ただし、すべての文章を大きく太くすると、どこが重要なのか分かりにくくなります。強調は必要な部分だけに使うと、ページ全体の読みやすさが保たれます。
pタグに大きな文字サイズや太字を指定すると、見た目は見出しのようにできます。しかし、HTMLの意味としては段落のままです。ページの見出しを作る場合は、h1やh2などの見出しタグを使う方が適切です。HTMLでは、見た目だけでなく、タグの意味も意識することが大切です。
余白や行間は文章の読みやすさを整えます
pタグでは、marginで外側の余白、paddingで内側の余白、line-heightで行間を指定できます。余白や行間は、文章の読みやすさに大きく関わる重要な指定です。
marginは、段落の外側にできる空間を調整します。段落と段落の間隔を広げたい場合は、margin-bottomやmargin-topを使います。
<p style="margin-bottom: 24px;">
この段落の下には余白があります。
</p>paddingは、段落の内側にできる空間を調整します。背景色を付けた段落にpaddingを指定すると、文字の周りにゆとりが生まれます。
<p style="background-color: #f5f5f5; padding: 16px;">
この段落は内側に余白があり、読みやすく表示されます。
</p>line-heightは、文章の行と行の間隔を調整するプロパティです。長い文章では、行間が狭すぎると読みにくくなります。本文では1.5から1.8程度を目安にすると、ゆとりのある読みやすい表示になりやすいです。
<p style="line-height: 1.8;">
文章が複数行になる場合は、行間を広めに指定すると読みやすくなります。
特に説明文が長いページでは、line-heightの指定が効果的です。
</p>style属性は便利ですが使い方に注意します
style属性は、pタグの見た目をすぐに変更できる便利な方法です。学習中にCSSの動きを確認したい場合や、1つの段落だけ特別な見た目にしたい場合には使いやすいです。
一方で、style属性を多くのpタグに書きすぎると、HTMLが読みにくくなります。HTMLの中に長いCSS指定が増えると、文章の構造が見えにくくなり、後から修正するときにも手間がかかります。
同じデザインを何度も使う場合は、class属性を使ってCSSをまとめる方法もあります。class属性とは、HTML要素に名前を付けて、同じ見た目をまとめて指定しやすくするための属性です。
<p class="notice">この文章は注意文です。</p>
<p class="notice">この文章も同じ見た目の注意文です。</p>.notice {
color: red;
font-weight: bold;
}このように分けると、見た目を変更したいときにCSSの1か所を修正するだけで済みます。style属性はCSSの基本を学ぶ入口として便利ですが、ページの規模が大きくなる場合は、管理しやすい書き方も意識するとよいです。
