HTML CSS 講座 トップページへ

ホームページ作成 いまさらHTML,CSS講座
|  Home  |  ホームページ作成の知識  |  HTML 講座  |  HTML TABLE 講座  |  スタイルシート(CSS) 講座  |  携帯サイト 作成 講座  |
[HTMLテンプレートカテゴリ] [未分類カテゴリ]

いまさらHTML,CSS講座トップ > 初心者講座 > ページ全体の基本指定
様々なブックマークサービスがご利用頂けます。

■　ページ全体の基本指定

本稿では、ブラウザに表示される 1ページ全体のフォントカラーや背景、リンク関連カラーなどを指定します。
指定方法は、body要素に直接記述する方法の他、スタイルシートで指定する事が出来ます。また、スタイルシートでの指定方法は、head要素に記述する方法と、外部スタイルシートを参照する方法があります。
HTML文書のページ全体の基本指定について、詳しく学びたい方はこちら
■ body要素にページ全体の基本指定を記述する場合
<body background="abcdefg.gif" bgcolor="#ffffff" text="#000000" link="#0000ff" alink="#ff0000" vlink="#800080">

  1. background 属性
    背景に使う画像を指定します。ページに背景画像を使う場合、何らかのトラブルで、背景画像が表示されなかった場合の代替表示として、背景画像とよく似た背景色も同時に指定しておきます。
  2. bgcolor 属性
    ページ全体の背景色を指定します。値は、16進数で表すRGB値、またはカラーネームで指定します。
  3. text 属性
    ページ全体の文字色をRGB値、またはカラーネームで指定します。
  4. link 属性
    ハイパーリンクが設定されている文字をRGB値、またはカラーネームで指定します。
  5. vlink 属性
    一度訪れたことのあるページへのハイパーリンク文字をRGB値、またはカラーネームで指定します。
  6. alink 属性
    ハイパーリンクが設定されている文字をクリックしたときの文字色をRGB値、またはカラーネームで指定します。
■ スタイルシートでページ全体の基本指定をする場合。
■ head 要素内に記述する場合
<style type="text/css">
<!--
a:link{color:#6666cc;}
a:visited{color:#6666cc;}
a:active{color:#ff6699;}
a:hover{color:#ff6699;}
body{background-image:url(sample.gif);background-color:#ffffff;color:#000080;}
-->
</style>
上記記述例を、head要素内に記述します。具体的には、title要素の下～/headタグで良いと思います。
  1. a:link
    ハイパーリンクが設定されている文字をRGB値、またはカラーネームで指定します。
  2. a:visited
    一度訪れたことのあるページへのハイパーリンク文字をRGB値、またはカラーネームで指定します。
  3. a:hover
    ハイパーリンクが設定されている文字の上にマウスカーソルを乗せた時の色を、RGB値、またはカラーネームで指定します。
  4. background-image プロパティ
    background-imgeプロパティの値は、( ) 内に背景に使う画像を指定します。
    ページに背景画像を使う場合、何らかのトラブルで、背景画像が表示されなかった場合の代替表示として、背景画像とよく似た背景色も同時に指定しておきます。
  5. background-color プロパティ
    ページ全体の背景色を指定します。値は、16進数で表すRGB値、またはカラーネームで指定します。
  6. color プロパティ
    ページ全体の文字色をRGB値、またはカラーネームで指定します。
スタイルシートでページ全体の基本指定をする場合について詳しく知りたい方はこちら

■ 外部スタイルシートを参照する場合
① ページに適用させるスタイルファイルを作成します。
a:link{color:#6666cc;}
a:visited{color:#6666cc;}
a:active{color:#ff6699;}
a:hover{color:#ff6699;}
body{background-image:url(sample.gif);background-color:#ffffff;color:#000080;}
上記記述例を、テキストエディタで記述し、cssファイル( 拡張子が、.css )で保存します。
② ①で作成したスタイルファイルをページで適用するには、link要素の href 属性の値で指定します。link 要素は、head要素内に記述します。title要素の下～/headタグで良いと思います。
<link rel="stylesheet" type="text/css" href="">
link要素の rel="stylesheet" は、外部スタイルシートを参照する事を示し、type属性に、CSSファイルの MIME タイプを記述し、href属性で、外部スタイルシートファイルへのリンク先を指定します。
⇒ 外部スタイルシートファイルの例
スタイルシートでページ全体の基本指定を行う事は下記の理由があります。
ホームページを作成する上で、参考にして下さい。
  • 本来、HTMLは、文書の意味だけを定義する事が目的で、文書の見栄えは定義するものではないと言う考え方から、開発されたものがスタイルシートであること。
  • ページ全体指定で使用する要素の、bgcolor、background、text、link、alink、vlink 属性はいずれも、HTML4.01では、非推奨の属性に指定されており、DOCTYPE宣言も Transitionalに制限されており、Strictで行う事はできません。

Lesson1  >>  Lesson2 >>  Lesson3 >>  Lesson4 >>  Lesson5 >>  Lesson6 >>  Lesson7 >>  Last Lesson >>  Lesson 実践
(C) いまさらHTML CSS講座 2002-2008 All right reserved