MB-Support

パソコン初心者のサポートページ

ページの背景色を変更する bgcolor=

 <font color=" カラーコード or カラーネーム "> 〜 </font> 。このページでは、HTMLで文字や文章の色を変更するために利用しますが、カラーネーム、カラーコードは背景色を変更する時にも利用します。


背景色を変更したいページの <body> 内に、bgcolor="カラーコード or カラーネーム" を挿入します。 カーラーコード は#で始まる6桁の数字です(#8B0000)。カーラーネームは色の名前です ( red、blackなど )。 指定が無い場合は白 ( white #ffffff ) です。



HTMLソース(メモ帳)

<html>
<head>
<title>題名</title>
</head>
<body bgcolor="pink">
<p>シャーロック・ホームズ</p>
</body>
</html>

ブラウザ


背景色を黒にして、文字色を白にする

HTMLソース(メモ帳)

<html>
<head>
<title>題名</title>
</head>
<body bgcolor="#000000">
<p><font color="#ffffff">シャーロック・ホームズ</font></p>
</body>
</html>

ブラウザ


スタイルシートを利用する

body タグ 無いに bgcolor で指定するのは簡単ですが、ページの背景色はサイトで統一したい場合が多いでしょう。 単独のページであれば body タグ内でも問題ありませんが、複数のページで同じ背景色を利用する場合、変更を容易にするためにスタイルシートを利用のが一番です。



スタイルシートは HTML 内に記述できますが、それでは bgcolor を利用する場合と同じで、変更する時に複数のページを修正する必要があります。 なので、外部にスタイルシートを作成して、各ページに読み込む方法が便利でしょう。 まずは、新規にテキストを作成します。



例えば全てのページの背景色を黒 ( カラーコード #000000 ) に統一したい場合は、以下の記述をしてテキストファイルを保存します。


body	{
	background-color:#000000;
} 


テキストファイルの名前を変更します。名前は自由に決めて構いませんが、分かりやすいものが良いでしょう。 拡張子は「.css」にします。右の例では「新規テキストドキュメント.txt」から「myhomepage.css」に変更してみました。



背景色 [ #000000 ] を指定したいページ全ての <head> と </head> の間に、上で作成したスタイルシートを読み込ますソースを挿入します。 ソースの基本は以下。

<link rel="stylesheet" type="text/css" href="パス" />

ここからは、背景色 [ #000000 ] の指定があるCSSファイルと、それを適用するページとの位置が重要になります。 パスの部分には、絶対パスか相対パスを記入します。 例えば、適用したいページファイルが、CSS と同じフォルダに存在するならば、ソースは以下の様になります。

HTMLソース(メモ帳)

<html>
<head>
<title>題名</title>
<link rel="stylesheet" type="text/css" href="myhomepage.css" />
</head>
<body>
 <p><font color="#ffffff">シャーロック・ホームズ</font></p>
</body>
</html>

ブラウザ


ディレクトリ

もし、myhomepage.css が css フォルダ内にあり、適用したいページが sample フォルダ内の存在する場合のソースは以下になります。


<link rel="stylesheet" type="text/css" href="../css/myhomepage.css" />

1つ上の階層を参照するには、「../」を記入します。つまり、sample フォルダ内のHTMLページから見れば、css フォルダ内 の myhomepage.css にアクセスするためには、1 つ上の階層に上がる必要があります。 パスの最初に「../」を入力する事で、「HOME PAGE」の階層まで上がった事になります。次に css フォルダを参照します。 つまりパスは「../css/」となります。そして、 css フォルダの myhomepage.css が目当てなので、「../css/myhomepage.css」となります。

さらに階層が深い場所にあるページに適用するには、「../」を階層の数だけ入力します。 例えば、smaple フォルダ内の mypage フォルダ内にある HTML ファイルでは、「../../css/myhomepage.css」となります。

以上で、このスタイルシートへのリンクが貼られたページは、スタイルシートで指定した背景色が適用されます。 複数のページを作成するうちに、背景色をデフォルトの白に変更したくなった場合は、myhomepage.css の #000000 を #ffffff に変更すれば、全てのページに適用されます。 これは、ページ数が多ければ多いほど楽です。100 ページの Body タグを変更するより、myhomepage.css の一か所を変更するだけで、100 ページ全てに変更が適用されます。




戻る 一覧表示 次へ


BTOパソコン・ゲームPC・自作パソコンなら【TSUKUMO】 - 自作PCに必要なパーツ、豊富な品揃え

Copyright © 2013 MB-Support パソコン初心者のサポートページ All Rights Reserved.

管理人サイト閲覧方法プライバシーポリシー著作権/免責事項