トップページ > 初心者向けホームページ作成講座 > ホームページの文字・背景・リンクの色を変更する
ホームページの文字・背景・リンクの色を変更
ホームページの文字・背景・リンクの色を変更するには
<body>タグを編集します。
bgcolor：背景色を変える
background：背景に画像を指定する
text：ページ全体の文字色を変える
link：まだクリックしていないリンクの色
vlink：クリックした後(ページを読み込んだ後)のリンクの色
alink：クリックした時のリンクの色
これらを複数指定する場合は半角スペースで区切って指定します。
例 link="#FFFFFF" bgcolor="#000000" text="#FFFFFF"
「=」は
を押しながら
「"」はを押しながら
を押します。
次に色名かカラーコードを入れます。ここではskyblueと入力。
そして "> を入力してタグを閉じます。 (色名・カラーコードについては後述)
保存してブラウザで開くと、背景色が変わります。
あらかじめ以下の「wall01.jpg」「wall02.gif」を保存して、
編集するhtmlが置いてある同じフォルダ（ディレクトリ）に入れてください。
保存方法：画像の上で右クリック→メニューから[名前を付けて画像を保存]を選択
ファイル名はそのままにしてください。
wall01.jpg
wall02.gif
bodyの隣に半角スペースを入れて background=" と入力。
次に画像ファイル名「wall01.jpg」または「wall02.gif」入力し " で閉じます。
半角スペースを入れて bgcolor="skyblue" (または bgcolor="white") を入力し > で閉じます。
保存してブラウザで開くと、背景に画像が敷き詰められます。（画像ファイルwall01.jpg）
横長の壁紙だと、こうなります。（画像ファイルwall02.gif）
壁紙の色と背景色はなるべく合わせましょう。
画像を読み込まない設定にしているブラウザでは
背景色しか読み込まないため、背景と文字色を同じにしていると
文字が読めなくなる可能性があります。
これでページ全体の文字色が変わります。
背景色も変えたい場合は、半角スペースで区切って
bgcolor="#996600" と入力。
文字の色：#CCCC99 背景色：#996600
背景と文字色の設定には注意。
文字の色が背景と同化すると文字が読みにくくなるので（下画像）
見た人が必ず読めるような設定にしましょう。
リンクの張り方については後で説明します。
半角スペースの後にlink="#FFFFFF" vlink="#FFCC00" alink="#CC66FF" と入力。
linkはクリックしていない色、vlinkはリンクをクリックしたことがある色
alinkはクリックした時の色です。
「red」「blue」「green」「yellow」というように英語で指定します。
カラーコードは「#000000」という、シャープ記号と６桁の値で
構成されています。
色の３原色である赤(Red)、緑(Green)、青(Blue)の各色ごとに
2桁の16進数（0〜9,A〜F）を並べ 先頭に#をつけて表記します。
色名での指定の場合、古いブラウザが対応していない場合が
ありますので、カラーコードを推奨します。
詳しいカラーコード・色名については「色一覧」へ。
<HTML>
<HEAD>
<TITLE>段落タグ</TITLE>
</HEAD>
<BODY>
文章や画像など
</BODY>
</HTML>
bodyタグには以下のオプションがあります。<HEAD>
<TITLE>段落タグ</TITLE>
</HEAD>
<BODY>
文章や画像など
</BODY>
</HTML>
bgcolor：背景色を変える
background：背景に画像を指定する
text：ページ全体の文字色を変える
link：まだクリックしていないリンクの色
vlink：クリックした後(ページを読み込んだ後)のリンクの色
alink：クリックした時のリンクの色
これらを複数指定する場合は半角スペースで区切って指定します。
例 link="#FFFFFF" bgcolor="#000000" text="#FFFFFF"
spacer
背景色を変える
bodyの隣に半角スペースを入れて bgcolor=" と入力。「=」は
を押しながら「"」は
を押しながらを押します。
<body bgcolor="
次に色名かカラーコードを入れます。ここではskyblueと入力。
そして "> を入力してタグを閉じます。 (色名・カラーコードについては後述)
<body bgcolor="skyblue">
保存してブラウザで開くと、背景色が変わります。
spacer
背景に画像を敷き詰める
下の画像をホームページの背景に敷き詰めることができます。あらかじめ以下の「wall01.jpg」「wall02.gif」を保存して、
編集するhtmlが置いてある同じフォルダ（ディレクトリ）に入れてください。
保存方法：画像の上で右クリック→メニューから[名前を付けて画像を保存]を選択
ファイル名はそのままにしてください。
wall01.jpg
wall02.gif
bodyの隣に半角スペースを入れて background=" と入力。
<body background="
次に画像ファイル名「wall01.jpg」または「wall02.gif」入力し " で閉じます。
<body background="wall01.jpg"
<body background="wall02.gif"
半角スペースを入れて bgcolor="skyblue" (または bgcolor="white") を入力し > で閉じます。
<body background="wall01.jpg" bgcolor="skyblue">
<body background="wall02.gif" bgcolor="white">
保存してブラウザで開くと、背景に画像が敷き詰められます。（画像ファイルwall01.jpg）
横長の壁紙だと、こうなります。（画像ファイルwall02.gif）
壁紙の色と背景色はなるべく合わせましょう。
画像を読み込まない設定にしているブラウザでは
背景色しか読み込まないため、背景と文字色を同じにしていると
文字が読めなくなる可能性があります。
spacer
ページ全体の文字色を変える
bodyの隣に半角スペースを入力し text="#CCCC99" と入力。これでページ全体の文字色が変わります。
背景色も変えたい場合は、半角スペースで区切って
bgcolor="#996600" と入力。
<body text="#CCCC99" bgcolor="#996600">
文字の色：#CCCC99 背景色：#996600
背景と文字色の設定には注意。
文字の色が背景と同化すると文字が読みにくくなるので（下画像）
見た人が必ず読めるような設定にしましょう。
spacer
リンクの文字色を変える
クリックすると別のページに移動する、リンクの色を変えます。リンクの張り方については後で説明します。
半角スペースの後にlink="#FFFFFF" vlink="#FFCC00" alink="#CC66FF" と入力。
linkはクリックしていない色、vlinkはリンクをクリックしたことがある色
alinkはクリックした時の色です。
<body link="#FFFFFF" vlink="#FFCC00" alink="#CC66FF">
ブラウザでプレビュー(下線が引かれてる部分がリンクです)
spacer
色の指定方法
色名とはその名の通り色の名前です。「red」「blue」「green」「yellow」というように英語で指定します。
カラーコードは「#000000」という、シャープ記号と６桁の値で
構成されています。
色の３原色である赤(Red)、緑(Green)、青(Blue)の各色ごとに
2桁の16進数（0〜9,A〜F）を並べ 先頭に#をつけて表記します。
カラーコードの色の位置 #FFFFFF
カラーコードの例
#FF0000:■ #00FF00:■ #0000FF:■ #FFFFFF:■ #000000:■
カラーコードの例
#FF0000:■ #00FF00:■ #0000FF:■ #FFFFFF:■ #000000:■
色名での指定の場合、古いブラウザが対応していない場合が
ありますので、カラーコードを推奨します。
詳しいカラーコード・色名については「色一覧」へ。
前の講座：段落・改行で文章を整える/文章の位置を変更 | 次の講座：文字色を指定する/文字を修飾する | トップページ | ページの一番上へ▲