◆　スタイルシート（ＣＳＳ）を個別の要素タグに直接定義して適用する方法　◆



★　この実践ページでは、ヘッダーや外部スタイルシートでページ全体に適用するのではなく、本文中部分的にスタイルシート（ＣＳＳ）を個別の要素タグに直接定義して適用する方法を試しました。

例えば、＜Ｐ＞〜＜／Ｐ＞の段落ごと、見出しタグ＜Ｈ＞〜＜／Ｈ＞の部分だけとか、スタイルを定義した要素タグ（開始タグ）と終了タグではさまれた範囲に対して適用する方法です。

スタイルで定義していない部分の背景（白）文字の色（グレー）と文字サイズ（３）は、このページのベースとなる基本（ ＜body＞ 〜 ＜/body＞ ） に設定したものです。
この説明部分はスタイル定義をしていないので、こんな感じです。


★　スタイルを直接タグに指定する場合の基本　★

　　　＜ 要素タグ　ＳＴＹＬＥ ＝ ” ＰＲＯＰＥＲＴＹ ： ＶＡＬＵＥ ”＞ テキストやイメージなど ＜ ／ 要素タグ ＞

　　　　　※　一つの要素タグに複数のスタイルを指定する場合は、「 ； 」（セミコロン）で区切って記述します。


★　部分的に適用したスタイル（ＣＳＳ）の中身　★

　◎　このページのタイトル部分　・・・　<ｈ２ ｓｔｙｌｅ ＝ ”ｃｏｌｏｒ：＃８７ｃｅｅｂ”> ◆ スタイル〜 ◆ <／ｈ２>

　　　　見出しタグ＜Ｈ２＞で、文字の色は「スカイブルー」に指定


　◎　スタイルを直接タグに指定する場合の基本の説明部分　・・・　<ｐ ｓｔｙｌｅ ＝ ”ｆｏｎｔ−ｗｅｉｇｈｔ：ｂｏｌｄ ； ｃｏｌｏｒ：＃ｇｒｅｅｎ”> 〜 <／ｐ>

　　　　前後に一行空きのある段落タグ＜Ｐ＞〜＜／Ｐ＞の範囲で、文字の色はグリーン、文字を太字に指定


　◎　スタイルの中身のこの説明部分　・・・　<ｐ ｓｔｙｌｅ ＝ ”ｆｏｎｔ−ｓｉｚｅ：１１ｐｔ ； ｃｏｌｏｒ：＃００００ｆｆ ”> 〜 <／ｐ>

　　　　前後に一行空きのある段落タグ＜Ｐ＞〜＜／Ｐ＞の範囲で、文字の色はブルー、文字のサイズは１１ポイントに指定


　◎　下の説明部分　・・・　<ｄｉｖ ｓｔｙｌｅ ＝ ”ｆｏｎｔ−ｓｔｙｌｅ ：ｉｔａｌｉｃ ； ｃｏｌｏｒ：＃ｆｆａ５００ ”> 〜 <／ｄｉｖ>

　　　　前後に空きのない「まとまり（段落）」を定義する＜ＤＩＶ＞〜＜／ＤＩＶ＞の範囲で、文字の色はオレンジ、文字の形は斜体に指定



☆　ＨＴＭＬのドキュメントタイプは、規制のゆるいフレームが使えるタイプをファイルの最初に記述しました。

このページのソースは下に記載しているので、興味のある方は見てね♪


−−−−−−−−− 以下 ↓ が、このページのソースで〜す♪ −−−−−−−−−−−−−−−−−−−−−−

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <html> <head> <title>スタイルシート（ＣＳＳ）・適用方法≪実践ページ：個別の要素タグにスタイルを直接定義して適用する方法≫</title> </head> <body bgcolor="#FFFFFF" text="gray"> <basefont size="3"> <br> <br> <h2 style="color:#87ceeb">◆　スタイルシート（ＣＳＳ）を個別の要素タグに直接定義して適用する方法　◆</h2><br> <br> ★　この実践ページでは、ヘッダーや外部スタイルシートでページ全体に適用するのではなく、本文中部分的にスタイルシート（ＣＳＳ）を個別の要素タグに直接定義して適用する方法を試しました。<br> <br> 例えば、＜Ｐ＞〜＜／Ｐ＞の段落ごと、見出しタグ＜Ｈ＞〜＜／Ｈ＞の部分だけとか、スタイルを定義した要素タグ（開始タグ）と終了タグではさまれた範囲に対して適用する方法です。<br> <br> スタイルで定義していない部分の背景（白）文字の色（グレー）と文字サイズ（３）は、このページのベースとなる基本（ ＜body＞ 〜 ＜/body＞ ） に設定したものです。<br> この説明部分はスタイル定義をしていないので、こんな感じです。<br> <br> <br> <p style="font-weight:bold;color:green"> ★　スタイルを直接タグに指定する場合の基本　★<br> <br> 　　　＜ 要素タグ　ＳＴＹＬＥ ＝ ” ＰＲＯＰＥＲＴＹ ： ＶＡＬＵＥ ”＞ テキストやイメージなど ＜ ／ 要素タグ ＞<br> <br> 　　　　　※　一つの要素タグに複数のスタイルを指定する場合は、「 ； 」（セミコロン）で区切って記述します。 </p> <br> <p style="font-size:11pt;color:#0000ff"> ★　部分的に適用したスタイル（ＣＳＳ）の中身　★<br> <br> 　◎　このページのタイトル部分　・・・　<ｈ２ ｓｔｙｌｅ ＝ ”ｃｏｌｏｒ：＃８７ｃｅｅｂ”> ◆ スタイル〜 ◆ <／ｈ２><br> <br> 　　　　見出しタグ＜Ｈ２＞で、文字の色は「スカイブルー」に指定<br> <br> <br> 　◎　スタイルを直接タグに指定する場合の基本の説明部分　・・・　<ｐ ｓｔｙｌｅ ＝ ”ｆｏｎｔ−ｗｅｉｇｈｔ：ｂｏｌｄ ； ｃｏｌｏｒ：＃ｇｒｅｅｎ”> 〜 <／ｐ><br> <br> 　　　　前後に一行空きのある段落タグ＜Ｐ＞〜＜／Ｐ＞の範囲で、文字の色はグリーン、文字を太字に指定<br> <br> <br> 　◎　スタイルの中身のこの説明部分　・・・　<ｐ ｓｔｙｌｅ ＝ ”ｆｏｎｔ−ｓｉｚｅ：１１ｐｔ ； ｃｏｌｏｒ：＃００００ｆｆ ”> 〜 <／ｐ><br> <br> 　　　　前後に一行空きのある段落タグ＜Ｐ＞〜＜／Ｐ＞の範囲で、文字の色はブルー、文字のサイズは１１ポイントに指定<br> <br> <br> 　◎　下の説明部分　・・・　<ｄｉｖ ｓｔｙｌｅ ＝ ”ｆｏｎｔ−ｓｔｙｌｅ ：ｉｔａｌｉｃ ； ｃｏｌｏｒ：＃ｆｆａ５００ ”> 〜 <／ｄｉｖ><br> <br> 　　　　前後に空きのない「まとまり（段落）」を定義する＜ＤＩＶ＞〜＜／ＤＩＶ＞の範囲で、文字の色はオレンジ、文字の形は斜体に指定<br> <br> <br> </p> <div style="font-style:italic;color:#ffa500"> <br> ☆　ＨＴＭＬのドキュメントタイプは、規制のゆるいフレームが使えるタイプをファイルの最初に記述しました。<br> <br> このページのソースは下に記載しているので、興味のある方は見てね♪ <br> <br> <br> −−−−−−−−− 以下 ↓ が、このページのソースで〜す♪ −−−−−−−−−−−−−−−−−−−−−−<br> <br> </div>