◇前説・・・ブロックレベル要素とインラインレベル要素
HTML文書は、テキスト内容を"見出し要素" "段落要素" "リスト要素" "リンク要素(ハイパーリンク)"などの"要素"とする考え方を基に、それぞれの要素をタグで囲む(マークアップにより書き表す)文書構造になっています。
これらは総じてブロックレベル要素と呼ばれています。
■インラインレベル要素とは・・・?
ブロックレベル要素("ひとつのまとまり"から構成された要素)で挟まれたドキュメント内容の特定部分を変更したいときなどに用いる要素です。
■インラインレベル要素群(abc順)
<a> <big> <br> <img> <em> <strong> <small> <span>
▼
★ SPAN要素はブロックレベル要素内の内容変更
例えば、SPAN要素を使い、テキストを蛍光ペンでなぞったように表現できます。
▼
"ブロックレベル要素"で挟まれたドキュメント内容の変更は。インラインレベル要素を使います。
<ブロックレベル要素>〜</ブロックレベル要素>内の
ドキュメント内容の変更したい箇所を <インラインレベル要素>〜</インラインレベル要素>タグで挟みます。 インラインレベル要素の開始タグには、ドキュメント内容を変更する属性や値を記述します。
▼
作例
ブロックレベル要素のP要素(段落要素)で挟んだテキストを強調(EM要素)し、テキスト部分に色を付けた(SPAN要素)場合
未知の苦HTML解道
▼
|←←←←←←←←←← 要 素 →→→→→→→→→→→|
↓ブロックレベル要素(P要素) ↓要素内容
<P><em><SPAN CLASS="bscsp">未知の苦</SPAN></em></P>
↑EM要素 ↑SPAN要素
|←←属 性→→|
|←値→|
▼
作例におけるSPAN要素の属性値は、外部に設定したスタイルファイルを呼び出しています。
外部に設定したスタイルファイルのクラス名称と設定内容は次のとおりです。
.bscsp { background-color : #FFFFCC ; }
クラス名称について >> CLASS属性
スタイルシートの代替記述について >> インラインスタイルシート
▼
★ SPAN要素によるインラインスタイルの作例
■フォントを変更
・・・(SPAN要素+STYLE属性+font-style属性と値)
作例・・・ >> <未知の苦HTML解道
□ソース表示
<P><SPAN STYLE="font-style: italic ;"> 未知の苦HTML解道</SPAN></P>
>> フォントスタイルの詳細はこちら
■フォントを強調
・・・(SPAN要素+STYLE属性+font-weight属性と値)
作例・・・ >> 未知の苦HTML解道
□ソース表示
<P><SPAN STYLE="font-weight: bold "> 未知の苦HTML解道</SPAN></P>
>> フォントスタイルの詳細はこちら
■テキストフォント色を一部変更
・・・(SPAN要素+STYLE属性+color属性と値)
作例 ・・・ >> 未知の苦HTML解道
□ソース表示
<P>未知の苦<SPAN STYLE="color:#FF6699;"> HTML</SPAN>解道</P>
>> フォントカラーの詳細はこちら
■テキストの背景に色を付ける
>> ・・・(SPAN要素+STYLE属性+background-color属性と値)
作例 ・・・ >> 未知の苦HTML解道
□ソース表示
<P> <SPAN STYLE="background-color: #E0F1F6 ;"> 未知の苦HTML解道</SPAN></P>
>> 背景色の詳細はこちら
■テキストを二重罫線で囲む
>> ・・・(SPAN要素+STYLE属性+border-style属性と値ほか)
作例 ・・・ >> 未知の苦HTML解道
□ソース表示
<P><SPAN STYLE="border-style: double;border-color:#FFCCCC;padding:4px;">未知の苦HTML解道</SPAN></P>
>> 枠=罫線の詳細はこちら
■ブロックレベル要素とインラインレベル要素
The Web KANZAKI様 TOP | やや詳しい目次 | インターネットやコンピュータの話 | HTMLの説明 >> 簡単なHTMLの説明 | 2文書の骨格となる基本要素 >> 文書の骨格をかたちづくる基本要素 | ブロックとインライン >> ブロックレベル要素とインライン要素
|