Lecture/InfoDesignB2004/5th/color の変更点

追加された行はこの色です。
削除された行はこの色です。
Lecture/InfoDesignB2004/5th/color へ行く。
*色を表現する [#v2a65f6e]

**色の表現 [#nb409f51]
HTMLでは、文字や線の色などを指定できます。
指定するには、色の名前や色の値を使います。

***色の値 [#za529456]
光の三原色である、赤(R)緑(G)青(B)の強さを値であらわします。
16進数(0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F)を使い、RGBそれぞれを00〜FFまでの256段階で設定することができます。~
blackは#000000、redは#FF0000、whiteは#FFFFFFのように、「#」のあとにRGBの値を設定します。~
--参考：とほほの色入門：色見本
---http://tohoho.wakusei.ne.jp/wwwcolor.htm
***色の名前 [#l686104d]
代表的な色（16色）には、名前がつけられています。
それぞれの色の名前（そして色の値）は次のとおりです。
|CENTER:|CENTER:||CENTER:|CENTER:||CENTER:|CENTER:||CENTER:|CENTER:|c
|色の名前|色の値||色の名前|色の値||色の名前|色の値||色の名前|色の値|h
|COLOR(white):BGCOLOR(black):black|#000000||BGCOLOR(gray):gray|#808080||BGCOLOR(silver):silver|#C0C0C0||BGCOLOR(white):white|#FFFFFF|
|BGCOLOR(red):red|#FF0000||BGCOLOR(yellow):yellow|#FFFF00||BGCOLOR(lime):lime|#00FF00||BGCOLOR(aqua):aqua|#00FFFF|
|COLOR(white):BGCOLOR(blue):blue|#0000FF||BGCOLOR(fuchsia):fuchsia|#FF00FF||COLOR(white):BGCOLOR(maroon):maroon|#800000||COLOR(white):BGCOLOR(olive):olive|#808000|
|COLOR(white):BGCOLOR(green):green|#008000||COLOR(white):BGCOLOR(teal):teal|#008080||COLOR(white):BGCOLOR(navy):naby|#000080||COLOR(white):BGCOLOR(purple):purple|#800080|


**HTMLで色の指定するときの注意 [#v7d78138]
HTMLでは、色を指定する要素や属性があります。
しかし、HTMLは文書の構造を示すのが役割です。
COLOR(red):''HTMLで色を指定することは、''
COLOR(red):''現在よく使われているバージョンであるHTML 4.01では推奨されていません。''

HTML 4.01では、色の指定はCSS（スタイルシート）を使うことが推奨されています。
今回は、古典的な手法として、
HTMLでの色の指定を紹介します。

**全体の背景の色を指定する [#a54ae3d3]
ページ全体の背景色を設定するには、
body要素に''bgcolor''属性を指定します。

#pre(novervatim){{
COLOR(red):<body bgcolor="COLOR(blue):色の値COLOR(red):">
 ...
COLOR(red):</body>
</pre>
}}

背景色を指定するときには、
文字色も設定しておくとよいでしょう。
背景色が文字色と同系列の色になると、文字が見えなくなる可能性があります。

**全体の文字の色を指定する [#q5834862]
ページ全体の文字色を設定するには、
body要素に''text''属性を指定します。

#pre(novervatim){{
COLOR(red):<body text="COLOR(blue):色の値COLOR(red):">
 ...
COLOR(red):</body>
</pre>
}}

ページ全体の文字色を変更しますが、
リンク部分の色は変更されません。
全体の色のバランスを考えて、
必要であれば、リンクの色も変更しましょう。

#pre(novervatim){{
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>「兵庫太郎の日記」</title>
</head>
COLOR(red):<body text="COLOR(blue):#0066CCCOLOR(red):" bgcolor="COLOR(blue):#FFFFFFCOLOR(red):">
...
</pre>
}}


**全体のリンクの色を指定する [#q5834862]
ページ全体のリンクの文字色を設定するには、
body要素に''link''属性、''vlink''属性、''alink''属性を指定します。

#pre(novervatim){{
COLOR(red):<body link="COLOR(blue):色の値COLOR(red):" vlink="COLOR(blue):色の値COLOR(red):" alink="COLOR(blue):色の値COLOR(red):">
 ...
COLOR(red):</body>
</pre>
}}

それぞれの属性には、次のような意味があります。
注意して設定する必要があります。
-link: まだ見ていないリンク部分の文字色
-vlink: すでに見たリンク部分の文字色
-alink: マウスのボタンを押したときのリンク部分の文字色

**文字の色を指定する [#k921dc21]
>COLOR(red):ここで紹介する方法は、あまり薦められない方法です。注意してください。

文字の色を設定するには、
''font''要素と''color''属性を指定します。
#pre(novervatim){{
COLOR(red):<font color="COLOR(blue):色の値COLOR(red):">COLOR(black):...COLOR(red):</font>
</pre>
}}

font要素は、文字のさまざまな属性を指定する要素です。
color属性を使うことで、指定した範囲の文字の色を設定することができます。

**表やセルの背景の色を指定する [#z4716a3d]
表やセルに背景色を設定するには、
table、tr、th、td要素に、''bgcolor''属性を指定します。

#pre(novervatim){{
COLOR(red):<table bgcolor="COLOR(blue):色の値COLOR(red):">COLOR(black):...COLOR(red):</table>
COLOR(red):<tr bgcolor="COLOR(blue):色の値COLOR(red):">COLOR(black):...COLOR(red):</tr>
COLOR(red):<th bgcolor="COLOR(blue):色の値COLOR(red):">COLOR(black):...COLOR(red):</th>
COLOR(red):<td bgcolor="COLOR(blue):色の値COLOR(red):">COLOR(black):...COLOR(red):</td>
</pre>
}}

bgcolor属性を使って、背景色を指定します。
table要素の場合は表全体に、
tr要素の場合は行全体に、
thやtd要素の場合はそのセルに、それぞれ背景色が設定されます。

&br;
&navi2(Lecture/InfoDesignB2004/5th,next);進んでください。
----
#navi2(Lecture/InfoDesignB2004/5th,prev,toc,next)

}}
KAWANO's PukiWiki Plus! - Lecture/InfoDesignB2004/5th/color の変更点

メニュー

大学関係リンク

今日の5件

最新の5件
