◆ ＳＰＡＮタグで範囲を指定してスタイルシート（ＣＳＳ）を適用する方法 ◆
★ ＳＰＡＮタグは、要素タグ＜ＤＩＶ＞や＜Ｐ＞などの「まとまり（段落）」に定義する場合とは違って、前後が改行されない行内レベルでの細かい範囲でスタイルを指定する事ができます。
例えば、＜Ｐ＞〜＜／Ｐ＞の段落の中や＜Ｈ＞〜＜／Ｈ＞の中などで、一部の文字の大きさや色を変えたい場合などに、このＳＰＡＮタグを使います。
スタイルで定義していない部分の「背景（白）」「文字の色（グレー）」と「文字サイズ（３）」は、このページのベースとなる基本（ ＜body＞ 〜 ＜/body＞ ） に設定したものです。
この説明部分はスタイル定義をしていないので、こんな感じです。
★ ＳＰＡＮタグでスタイルを指定する場合の基本 ★
＜ ＳＰＡＮ ＳＴＹＬＥ ＝ ” ＰＲＯＰＥＲＴＹ ： ＶＡＬＵＥ ”＞ テキストやイメージなど ＜ ／ ＳＰＡＮ ＞
※ 複数のスタイルを指定する場合は、「 ； 」（セミコロン）で区切って記述します。
−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−
● 上記の「ＳＰＡＮタグでスタイルを指定する場合の基本」のところは、＜Ｐ＞〜＜／Ｐ＞の段落全体を「文字を太字にして色を緑」（この部分もＳＰＡＮタグ使用）というスタイルを指定していますが、基本の記述部分だけをＳＰＡＮタグを使って文字を斜体にして色を赤（この部分もＳＰＡＮタグ使用）に、「 セミコロン」の部分をオレンジ色（この部分もＳＰＡＮタグ使用）に指定してみます。
★ ＳＰＡＮタグでスタイルを指定する場合の基本 ★
＜ ＳＰＡＮ ＳＴＹＬＥ ＝ ” ＰＲＯＰＥＲＴＹ ： ＶＡＬＵＥ ”＞ テキストやイメージなど ＜ ／ ＳＰＡＮ ＞
※ 複数のスタイルを指定する場合は、「 ； 」（セミコロン）で区切って記述します。
● このページのタイトル部分は＜Ｈ２＞〜＜／Ｈ２＞で色をスカイブルーでスタイルを指定してますが、ＳＰＡＮタグを使って「スタイルシート（ＣＳＳ）」の部分だけを、文字を斜体にして色をブルー（この部分もＳＰＡＮタグ使用）に指定してみます。
◆ ＳＰＡＮタグで範囲を指定してスタイルシート（ＣＳＳ）を適用する方法 ◆
★ 部分的に適用したスタイル（ＣＳＳ）の中身 ★
◎ このページのタイトル部分 ・・・ <ｈ２ ｓｔｙｌｅ ＝ ”ｃｏｌｏｒ：＃８７ｃｅｅｂ”> ◆ スタイル〜 ◆ <／ｈ２>
見出しタグ＜Ｈ２＞で、文字の色は「スカイブルー」に指定
「スタイルシート（ＣＳＳ）」のところを、ＳＰＡＮタグで文字を斜体にして色をブルーに指定しました。
「 ； 」（セミコロン）の部分を、ＳＰＡＮタグで文字の色をオレンジに指定しました。
◎ スタイルを指定する場合の基本の説明部分 ・・・ <ｐ ｓｔｙｌｅ ＝ ”ｆｏｎｔ−ｗｅｉｇｈｔ：ｂｏｌｄ ； ｃｏｌｏｒ：＃ｇｒｅｅｎ”> 〜 <／ｐ>
前後に一行空きのある段落タグ＜Ｐ＞〜＜／Ｐ＞の範囲で、文字の色はグリーン、文字を太字に指定
基本のタグの記述部分を、ＳＰＡＮタグで文字を斜体にして色を赤に指定しました。
◎ スタイルの中身のこの説明部分 ・・・ <ｐ ｓｔｙｌｅ ＝ ”ｆｏｎｔ−ｓｉｚｅ：１１ｐｔ ； ｃｏｌｏｒ：＃００００ｆｆ ”> 〜 <／ｐ>
前後に一行空きのある段落タグ＜Ｐ＞〜＜／Ｐ＞の範囲で、文字の色はブルー、文字のサイズは１１ポイントに指定
◎ 下の説明部分 ・・・ <ｄｉｖ ｓｔｙｌｅ ＝ ”ｆｏｎｔ−ｓｔｙｌｅ ：ｉｔａｌｉｃ ； ｃｏｌｏｒ：＃ｆｆａ５００ ”> 〜 <／ｄｉｖ>
前後に空きのない「まとまり（段落）」を定義する＜ＤＩＶ＞〜＜／ＤＩＶ＞の範囲で、文字の色はオレンジ、文字の形は斜体に指定
☆ ＨＴＭＬのドキュメントタイプは、規制のゆるいフレームが使えるタイプをファイルの最初に記述しました。
このページのソースは下に記載しているので、興味のある方は見てね♪
−−−−−−−−− 以下 ↓ が、このページのソースで〜す♪ −−−−−−−−−−−−−−−−−−−−−−
<![CDATA[
<!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>
−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−<br>
<br>
● 上記の「ＳＰＡＮタグでスタイルを指定する場合の基本」のところは、＜Ｐ＞〜＜／Ｐ＞の段落全体を<span style="font-weight:bold;color:green">「文字を太字にして色を緑」</span>（この部分もＳＰＡＮタグ使用）というスタイルを指定していますが、基本の記述部分だけをＳＰＡＮタグを使って<span style="font-style:italic;color:red">文字を斜体にして色を赤</span>（この部分もＳＰＡＮタグ使用）に、<span style="color:orange">「 セミコロン」の部分をオレンジ色</span>（この部分もＳＰＡＮタグ使用）に指定してみます。<br>
<br>
<p style="font-weight:bold;color:green">
★ ＳＰＡＮタグでスタイルを指定する場合の基本 ★<br>
<br>
<span style="font-style:italic;color:red">＜ ＳＰＡＮ ＳＴＹＬＥ ＝ ” ＰＲＯＰＥＲＴＹ ： ＶＡＬＵＥ ”＞ テキストやイメージなど ＜ ／ ＳＰＡＮ ＞</span><br>
<br>
※ 複数のスタイルを指定する場合は、<span style="color:orange">「 ； 」（セミコロン）</span>で区切って記述します。
</p>
<br>
● このページのタイトル部分は＜Ｈ２＞〜＜／Ｈ２＞で色をスカイブルーでスタイルを指定してますが、ＳＰＡＮタグを使って「スタイルシート（ＣＳＳ）」の部分だけを、<span style="font-style:italic;color:#0000ff">文字を斜体にして色をブルー</span>（この部分もＳＰＡＮタグ使用）に指定してみます。<br>
<h2 style="color:#87ceeb">◆ ＳＰＡＮタグで範囲を指定して<span style="font-style:italic;color:#0000ff">スタイルシート（ＣＳＳ）</span>を適用する方法 ◆</h2><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>
<br>
<br>
◎ 下の説明部分 ・・・ <ｄｉｖ ｓｔｙｌｅ ＝ ”ｆｏｎｔ−ｓｔｙｌｅ ：ｉｔａｌｉｃ ； ｃｏｌｏｒ：＃ｆｆａ５００ ”> 〜 <／ｄｉｖ><br>
<br>
前後に空きのない「まとまり（段落）」を定義する＜ＤＩＶ＞〜＜／ＤＩＶ＞の範囲で、文字の色はオレンジ、文字の形は斜体に指定<br>
<br>
<br>
</p>
<div style="font-style:italic;color:#ffa500">
<br>
☆ ＨＴＭＬのドキュメントタイプは、規制のゆるいフレームが使えるタイプをファイルの最初に記述しました。<br>
<br>
このページのソースは下に記載しているので、興味のある方は見てね♪
<br>
<br>
<br>
−−−−−−−−− 以下 ↓ が、このページのソースで〜す♪ −−−−−−−−−−−−−−−−−−−−−−<br>
<br>
</div>
]]>
|
|
|