<<PREV | TOP | NEXT>>

文書の背景画像と背景色

last modified 5th/Oct. 2000

Transitional DTD では、 BODY 要素に「背景画像、背景色、文字色、リンクアンカーの文字色」を指示する属性が定義されていすが、これらは廃止予定の属性です。スタイルシートで実現すべきでしょう。

次に、廃止予定の非推奨属性を与えて見栄えを指定した例を挙げます;

廃止予定属性を与えたBODY要素の開始タグ;

<body background="../back.jpg" bgcolor="black" text="white"
         link="#000066" vlink="#660066" alink="#999900">
上の例で与えた廃止予定属性とその説明
属性属性値
background../back.jpg背景画像
bgcolorblack (#000000)背景色
textwhite (#ffffff)文字色
link#000066未訪問のリンク・アンカーの文字色
vlink#660066訪問済みのリンク・アンカーの文字色
alink#999900閲覧者に選択されたリンク・アンカーの文字色

BODY 要素の背景画像を指定する 'background' 属性の値は、一般に URL です。上の例では、相対 URL によって、当該 HTML ファイルよりも一つ上のフォルダにある画像ファイルを背景画像に指定しています。

bgcolor, text, link, vlink, alink などの属性では、背景や文字の色を指定しています。HTML での色の指定方法は、キーワード (black, white, red, etc.) か、 RGB (#000000, #ffffff, #ff0000, etc.) と云う形式で指定します。

これらの属性を用いる場合は、可読性の確保のため、どれか一つだけと云う事が無いように、必ず全て明示する様に心掛けて下さい。この点はスタイルシートを用いても同様です。

BODY 要素の属性;

<!ATTLIST BODY
  %attrs;                              -- %coreattrs, %i18n, %events --
  onload          %Script;   #IMPLIED  -- the document has been loaded --
  onunload        %Script;   #IMPLIED  -- the document has been removed --
  background      %URI;      #IMPLIED  -- texture tile for document
                                          background --
  %bodycolors;                         -- bgcolor, text, link, vlink, alink --
  >

%bodycolors; の定義;

<!ENTITY % bodycolors "
  bgcolor     %Color;        #IMPLIED  -- document background color --
  text        %Color;        #IMPLIED  -- document text color --
  link        %Color;        #IMPLIED  -- color of links --
  vlink       %Color;        #IMPLIED  -- color of visited links --
  alink       %Color;        #IMPLIED  -- color of selected links --
  ">

DTD の読み方は、「DTD の読み方」を参照ください。

CSS による実現

ここでは、 HTML 文書の標準スタイルシートである CSS による実現の例を挙げます;

CSS による実現の例;

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
  <head>
    <title>CSSによる見栄えの例</title>
    <meta http-equiv="content-style-type" content="text/css">
    <style type="text/css">
    <!--
body { background-image: url(../image.jpg);
  background-color: black;
  text: white;}
a:link { color: #006 }       /* 訪問済みリンクアンカー */
a:visited { color: #606 }    /* 未訪問のリンクアンカー */
a:active { color: #990}     /* 選択されたリンクアンカー */
    -->
    </style>
  </head>
  <body>
    <p>これは CSS の例です。</p>
  </body>
</html>

CSS の基本的な仕組みに付いては、「CSS の紹介」を御覧ください。

'background-image', 'background-color', 'color' などの具体的な定義に付いては「CSS 入門」を参照ください。

<<PREV | TOP | NEXT>>

SEO [PR] [ Windows7 f ^T[o[ Cu`bg SEO