BODY要素の属性
BODY要素の持つ属性を指定すると、ページ全体の文字色や背景色、リンクの色を変更することができます。
<BODY>の要素の属性は、スタイルシートで設定することが推奨されています。
ページ全体の文字色がBODYの属性で一応変更(保持)されますが、SPAN要素の文字列やその他の要素に直接指定された色については、文字列に近い要素の属性設定ほど最優先で指定されます。つまり、テキストや文字の要素が近いほど優先的に指定します。
Webブラウザの設定でHTML文書内のスタイイルシートを無視するようにしている場合はその限りではありません。
◆ スタイルシートでページの基本指定
<HEAD>要素の中に用意したスタイルシートを、思い出しましょう。
body{プロパティ}でページ内の文字色と背景、ついでにリンクの文字色を指定します。
詳しくは、CSSの基礎知識をご覧下さい。
<HEAD>
<STYLE type="text/css"><!--
この間に下のプロパティの要素名{属性名:属性値;}」を書きます。
--></STYLE>
</HEAD>
下記の指定で「a:link」から「a:active」の順番を変えないこと!!正確に作動しなくなります。
◆ 背景色と基本の文字色を決める
ソース:
<HEAD>
<STYLE type="text/css" ><!--
BODY { BACKGROUND-COLOR : BLACK ; ページの背景色
BACKGROUND-IMAGE : url('***.gif') ; ページの背景画像
COLOR : GRAY ; } ページの基本文字色
A : link { COLOR : BLUE ; } リンク文字色
A : visited { COLOR : LIME ; } 訪問済みリンク文字色
A : hover { COLOR : RED ; } マウスポインターが文字の上に乗ったときのリンク文字色
A : active { COLOR : TEAL ; } クリックした場合のリンク文字色
--></style>
</HEAD>
表示結果は、こちらのサンプルです。背景が黒、文字がグレイになっています。
色見本は、カラーチャートをご覧下さい。(背景色が決まれば、文字の色の比較になるようにしました。)
もし、指定がない場合、見る人のwebブラウザ任せになります。
BACKGROUND-COLOR : の値は、色の値と transparent です。transparent は、背景色を解除します。
・ 非推奨になったBODY要素の属性指定
- TEXT="色の指定" が、スタイルシートでは、「BODY {color:色の指定;}」に、変更します。
- BGCOLOR="色の指定" が、スタイルシートでは、「BODY {background-color:色の指定;}」に、変更します。
- BACKGROUND="画像のURL" が、スタイルシートでは、「BODY {background-image:url('画像のURL');}」に、変更します。
- LINK="色の指定" が、スタイルシートでは、「A:link{color:色の指定;}」に、変更します。
- ALINK="色の指定" が、スタイルシートでは、「A:active{color:色の指定;}」に、変更します。
- VLINK="色の値" がスタイルシートでは、「A:visited{color:色の指定;}」に、変更します。
◆. HEAD内のスタイルシート指定方法
基本的な指定法方です。下記を、「<STYLE type="text/css"><!--」の直下にタイプします。
スタイルシートと通常HTMLタグとの指定比較
比較指定 |
Start
コンテナ |
要素 |
接続
条件 |
属性 |
値 |
連結 |
End
コンテナ |
HTMLタグ |
< |
要素名 |
半角スペース |
属性名= |
”値” |
なし
半角スペースで新たに属性名=から |
> |
スタイルシート(HEAD内指定) |
要素名指定後 |
要素名 |
{ |
プロパティ: |
値 |
; |
;} |
スタイルシート(BODY内指定) |
< |
要素名 |
半角スペース |
STYLE=”プロパティ: |
値” |
; |
> |
▼ スタイルシートの指定法方
“セレクタ(要素名の指定){属性:値;}”が通常のセットで、「{属性:色値;}」を、プロパティ宣言と言い、「<style="属性:値;">」を、スタイルプロパティと言います。
プロパティ(属性)と値の間にはコロン(colon.)で仕切り、「 body { color : 文字色指定値 ; background-color : 背景色指定値 ; } 」のように、一つ一つのプロパティ宣言の最後に「;」セミコロン(semicolon.)を付けることで、プロパティ宣言の追加が可能になります。
例:
body{color:文字色指定値;background-color:背景色指定値;}
<body style="color:文字色指定値;background-color:背景色指定値">
◆ BODY内のスタイルシート指定
▼ スタイルシートの行揃え(align属性)
個別に設定する場合での説明例です。
- H要素に直接指定するときは、<H数字 style=”text-align:行の値”>文字列</H数字>
- P要素の段落に直接指定するときは、、<P style=”text-align:行の値”>文字列</P>
- 見出し<H*>や複数の段落<P)>を一つのブロックにしまとめて指定するときは、
<DIV>要素を使い<DIV style=”text-align:行の値”>〜</DIV>にします。
▼. スタイルシートで文字を装飾する
フォントを飾り文字に変えるスタイルシートの指定法方です。
- 抹消線:抹消線
<span style="text-decoration:line-through">抹消線</span>
- 下の線:下線
<span style="text-decoration:underline">下線</span>
- 上の線:上線
<span style="text-decoration:overline">上の線</span>
- 斜体:斜体・ABC
<span style="font-style:oblique">斜体</span>
- イタリック体:イタリック体・ABC
<i>イタリック体</i>
<span style="font-style:italic">イタリック体</span>
- 太字:太字
<b>太字</b>
<span style="font-weight:bold">太字</span>
- 等幅:ABCabcあいう
ABCabcあいうは、<tt>等幅</tt>
ABCabcあいうは、<span style="font-family:monospace">等幅</span>
- ゴシック体:ABCabcあいう
ABCabcあいうは、
<span style="font-family:MS ゴシック,MS Pゴシック,Osaka,中ゴシックBBB,平成角ゴシック,GothicBBBHelvetica,sans-serif">ゴシック体</span>
- 明朝体:ABCabcあいう
ABCabcあいうは、
<span style="font-family:MS 明朝,MS P明朝,本明朝-M,平成明朝,RyuminTimes-Light,serif">明朝体</span>
- 上付き文字:m2
m2は、m<sup>2</sup>
m2は、m<span style="vertical-align:super">2</span>
- 下付き文字:H2O
H2Oは、H<sub>2</sub>O
H2Oは、H<span style="vertical-align:sub">2</span>O
- 点滅:NNのみ点滅
<blink>点滅</blink>
<span style="text-decoration:blink">点滅</span>
タグ練習ブラウザを使って試してみよう!
▼ インラインでのスタイルシートのstyle="属性値"が指定できないもの
要素名に直接的にSTYLE=""が付けられない物があります。「何故?」と感じた方もおられると思います。
当たり前ですが「HTML,HEAD,META,TITLE,STYLE,BASE」の要素はもちろん論外です。
それとは別に、インラインで<要素名 style="属性値">style属性が要素名に直接指定を出来ない要素が、「BASEFONT,SCRIPT,PARAM,」等に上げられます。
それらは、STYLEには無縁の物や、廃止予定だったり、インラインのスタイルシートで属性の扱いになります。(インラインのスタイルシートは、それぞれの要素説明に解説します。)
簡単に説明すると、スタイルシートの別な方法に指定されるか、属性に変更指定されるかの違いになります。(詳しくは、英語ですが、W3C-CSSにアクセスしましょう。)