札幌学院大学社会情報学部 ＡＯ入試課題用テキスト
ＨＴＭＬの基礎知識 （３）
１． スタイル指定
フォントの大きさや種類、行間、ページ上のレイアウトなどを文書の『スタイル』と呼び、このスタイルを指定するためのデータを『スタイルシート』と呼ぶ。以下ではＣＳＳ（Ｃａｓｃａｄｉｎｇ Ｓｔｙｌｅ Ｓｈｅｅｔｓ）と呼ばれるスタイルシート言語を使用する。
１−１ 文字の色指定
見出しの文字の色を変えてみよう。見出しの『開始タグ』中で色指定を行なう。赤を指定したい場合には次のようにする。
３種類の見出しの文字を、赤、緑、青にしてみよう。ＣＳＳを使うためには、下図の枠内に示した指定を行なう必要がある。（このプリントでは特に断りがない限り、この指定が行なわれているものとする。）
|
注意： 上記のcolorとredの間にある記号はコロンである。色が赤に「等しい」という意味で使われている。コロンと似た記号にセミコロンがある。コロンは、上の図に示すように丸い点が２個上下に並んでいるが、セミコロンは下の点がカンマになっている。 拡大図： コロン「：」 セミコロン「；」 スタイル指定を複数行うときに、セミコロンで区切るので、そのときに間違えないようにしよう。 |
<html>
<head>
<meta http-equiv="Content-Style-Type"
content="text/css" />
<title>フォントの色を変える</title>
</head>
<body>
<h1 style="color:red">赤</h1>
<h2 style="color:green">緑</h2>
<h3 style="color:blue">青</h3>
</body>
</html>
ブラウザの表示結果は以下の通りである。
次の部分はCSSを使うための指定である。
<meta
http-equiv="Content-Style-Type" content="text/css" />
******************************************************************
１−２ 文字のサイズ指定
文字サイズを変更する場合も上記と同じ要領で開始タグ内で行なう。プロパティをcolorからfont-sizeに変更し、段落の文字サイズを変更してみよう。
<html>
<head>
<meta http-equiv="Content-Style-Type"
content="text/css" />
<title>フォントのサイズを変える</title>
</head>
<body>
<h1 style="color:red">赤い見出し</h1>
<p style="font-size:24pt">フォントを２４ポイントにした</p>
<p style="font-size:12pt">フォントを１２ポイントにした</p>
</body>
</html>
ブラウザの表示結果は以下の通りである。
******************************************************************
１−３ フォントの色と文字サイズを変える
フォントの色と文字サイズを同時に変更するには、開始タグ内で、前述の２種類の指定を組み合わせれば良い。このとき、２つの指定の間をセミコロン『；』で区切る。
<html>
<head>
<meta http-equiv="Content-Style-Type"
content="text/css" />
<title>フォントのサイズを変える</title>
</head>
<body>
<h1 style="color:red">赤い見出し</h1>
<p style="font-size:24pt;color:green">フォントを緑の２４ポイントにした</p>
<p style="font-size:12pt;color:blue">フォントを青の１２ポイントにした</p>
</body>
</html>
コロンとセミコロンの位置に注意しよう。
ブラウザの表示結果は以下の通りである。
******************************************************************
１−４ 色の指定方法（詳細）
前述の例では、色の名称によって色指定を行なった。予め準備されている色の名称（色のキーワードと呼ばれる）は次の通りである。
black, green, gray, olive, maroon, navy, purple, teal,
silver, lime, white, yellow, red, blue, fuchsia, aqua
コンピュータの画面上で表現される色の種類は実際にはもっとたくさんあり、True Colorモードでは約１６７０万色が表現できる。具体的には、ＲＧＢそれぞれの輝度が０〜２５５までの数値で表現され、０が最も暗く、２５５が最も明るい場合である。
ＲＧＢそれぞれの値が０〜２５５の値を取るので、ＲＧＢを組み合わせた場合には
２５６ × ２５６ × ２５６ ＝ １６７７７２１６
通りの色を表現することが可能となる。
以下の図は画像加工ソフトウェアＰｈｏｔｏｓｈｏｐで色を指定するためのカラーピッカ−である。図中で『輝度の数値表現』と書かれた部分に着目しよう。
Ｒ：１７９、 Ｇ：９５、 Ｂ：１９１
はＲＧＢの輝度の値を示している。この場合には、ＲとＢの割合が高くなっている。
さて、『Ｂ３５ＦＢＦ』は何を意味するのだろうか？これは、上記のＲＧＢの輝度を１６進数で表したものである。まず、記号を２個ずつ区切って『Ｂ３』、『５Ｆ』、『ＢＦ』とする。ここで、１０進数と２進数、１６進数との関係の復習をしておく。
|
１０進数 |
２進数 |
１６進数 |
|
０ |
００００ |
０ |
|
１ |
０００１ |
１ |
|
２ |
００１０ |
２ |
|
３ |
００１１ |
３ |
|
４ |
０１００ |
４ |
|
５ |
０１０１ |
５ |
|
６ |
０１１０ |
６ |
|
７ |
０１１１ |
７ |
|
８ |
１０００ |
８ |
|
９ |
１００１ |
９ |
|
１０ |
１０１０ |
Ａ |
|
１１ |
１０１１ |
Ｂ |
|
１２ |
１１００ |
Ｃ |
|
１３ |
１１０１ |
Ｄ |
|
１４ |
１１１０ |
Ｅ |
|
１５ |
１１１１ |
Ｆ |
１６進数の１桁の数は０からＦまでの記号を用いて表現される。１６進数で２桁の数を１０進数に置きかえるための計算は、それぞれの桁の数を１０進数に置き換えて、
２桁目の数 × １６ ＋ １桁目の数
である。『Ｂ３』、『５Ｆ』、『ＢＦ』のそれぞれを、この式にあてはめて計算してみよう。
Ｂ３ ： １１×１６＋３ ＝ １７９
５Ｆ ： ５×１６＋１５ ＝ ９５
ＢＦ ： １１×１６＋１５ ＝ １９１
この結果は、最初に１０進数で表した
Ｒ：１７９、 Ｇ：９５、 Ｂ：１９１
と一致していることがわかる。
これらの値を使って実際に色指定を行なってみよう。最初が１０進数、次が１６進数による指定である。
<html>
<head>
<meta http-equiv="Content-Style-Type"
content="text/css" />
<title>フォントのサイズを変える</title>
</head>
<body>
<h1>RGBの輝度を直接指定する</h1>
<p style="color:rgb(179,95,191)">輝度を１０進数で指定</p>
<p style="color:#B35FBF">輝度を１６進数で指定</p>
</body>
</html>
表示結果は以下の通りである。いずれの指定方法を使っても同じ結果になっているはずである。
ここで、代表的な１６個の色の１６進数表現を掲載しておく。
|
色 名 |
１６進表現 |
色 名 |
１６進表現 |
|
ｂｌａｃｋ |
００００００ |
ｇｒｅｅｎ |
００８０００ |
|
ｓｉｌｖｅｒ |
Ｃ０Ｃ０Ｃ０ |
ｌｉｍｅ |
００ＦＦ００ |
|
ｇｒａｙ |
８０８０８０ |
ｏｌｉｖｅ |
８０８０００ |
|
ｗｈｉｔｅ |
ＦＦＦＦＦＦ |
ｙｅｌｌｏｗ |
ＦＦＦＦ００ |
|
ｍａｒｏｏｎ |
８０００００ |
ｎａｖｙ |
００００８０ |
|
ｒｅｄ |
ＦＦ００００ |
ｂｌｕｅ |
００００ＦＦ |
|
ｐｕｒｐｌｅ |
８０００８０ |
ｔｅａｌ |
００８０８０ |
|
ｆｕｃｈｓｉａ |
ＦＦ００ＦＦ |
ａｑｕａ |
００ＦＦＦＦ |
注）光の３原色の説明に基づけばｇｒｅｅｎの１６進表現は００ＦＦ００であるはずだが、
ＨＴＭＬの定義では、ｌｉｍｅを００ＦＦ００とし、相対的に暗い緑に見える００８０００
をｇｒｅｅｎと呼んでいる。
******************************************************************
１−５ 余白と段落幅を指定
段落を見やすくするために開始位置と、表示幅を指定することができる。ブラウザ画面左側からの余白は
marigin-left:ピクセル数
で指定し、表示幅は
width:ピクセル数
で指定する。ピクセルとは画面上の表示の最小単位である。画素とも呼ばれる。
以下の例では、左の余白を５０ピクセル、段落幅を４００ピクセルとしている。
<html>
<head>
<meta http-equiv="Content-Style-Type"
content="text/css" />
<title>余白と段落幅指定</title> </head>
<body>
<h3>余白（マージン）と段落幅を指定する</h3>
<p style="margin-left:50px;width:400px">ＣＧ（コンピュータグラフィックス）のモデリングや作図方法などに関する基礎知識、ＣＧ制作やホームページ作りの基礎を学び、コンピュータ上で作品を作ることを経験します。</p>
</body>
</html>
表示結果は以下の通りである。margin-left,widthが示す部分を確かめよう。
******************************************************************
１−６ 段落に色をつける
上記の段落に色をつけてみよう。開始タグにbackground-color（背景色）プロパティを追加する。色の指定方法は文字の場合と同じである。ここでは、１６進数でEFAFEFを指定し、全体的に明るい色にしている。
<html>
<head>
<meta
http-equiv="Content-Style-Type" content="text/css" />
<title>色指定</title> </head>
<body>
<h3>段落に色を指定する</h3>
<p style="margin-left:50px;width:400px;background-color:#EFAFEF">ＣＧ（コンピュータグラフィックス）のモデリングや作図方法などに関する基礎知識、ＣＧ制作やホームページ作りの基礎を学び、コンピュータ上で作品を作ることを経験します。</p>
</body>
</html>
ブラウザの表示結果は以下の通りである。
今度は段落を２つにして異なる背景色を与えてみよう。色の指定を１６進数と１０進数の２通りにしている。
<html>
<head>
<meta http-equiv="Content-Style-Type" content="text/css"
/>
<title>色指定</title> </head>
<body>
<h3>段落に色を指定する</h3>
<p
style="margin-left:50px;width:400px;background-color:#EFAFEF">ＣＧ（コンピュータグラフィックス）のモデリングや作図方法などに関する基礎知識、ＣＧ制作やホームページ作りの基礎を学び、コンピュータ上で作品を作ることを経験します。</p>
<p
style="margin-left:70px;width:300px;background-color:rgb(200,200,150)">学んだ基礎知識を応用し、その成果を公表するまでの（試行錯誤を含む）一連の過程を経験します。ゼミナールで学んだことの集大成です。</p>
</body>
</html>
******************************************************************
１−７ ページ背景色の設定
ページの背景色を設定するには、ｂｏｄｙの開始タグ内で以下のような指定を行なえば良い。
<html>
<head>
<meta http-equiv="Content-Style-Type"
content="text/css" />
<title>背景色指定</title> </head>
<body
style="background-color:#00E0E0">
<h3>段落に色を指定する</h3>
<p
style="margin-left:50px;width:400px;background-color:#EFAFEF">ＣＧ（コンピュータグラフィックス）のモデリングや作図方法などに関する基礎知識、ＣＧ制作やホームページ作りの基礎を学び、コンピュータ上で作品を作ることを経験します。</p>
<p style="margin-left:70px;width:300px;background-color:rgb(200,200,150)">学んだ基礎知識を応用し、その成果を公表するまでの（試行錯誤を含む）一連の過程を経験します。ゼミナールで学んだことの集大成です。</p>
</body>
</html>
**************************************************************
１−８ 行間隔･文字間隔の指定
行間隔：
行間隔はline-heightプロパティによって設定する。font-sizeプロパティとの関係を以下の図で確かめよう。
<html>
<head>
<meta http-equiv="Content-Style-Type"
content="text/css" />
<title>行間隔</title> </head>
<body>
<h3>行間隔を指定する</h3>
<p style="width:300px;font-size:12pt;line-height:36pt">ＣＧ（コンピュータグラフィックス）のモデリングや作図方法などに関する基礎知識、ＣＧ制作やホームページ作りの基礎を学び、コンピュータ上で作品を作ることを経験します。</p>
</body>
</html>
line-heightプロパティの値をfont-sizeプロパティの値よりも小さくすると下図のように文字が重なってしまうことは容易に推測がつくだろう。
<html>
<head>
<meta http-equiv="Content-Style-Type"
content="text/css" />
<title>行間隔</title> </head>
<body>
<h3>行間隔を指定する</h3>
<p style="width:300px;font-size:12pt;line-height:10pt">ＣＧ（コンピュータグラフィックス）のモデリングや作図方法などに関する基礎知識、ＣＧ制作やホームページ作りの基礎を学び、コンピュータ上で作品を作ることを経験します。</p>
</body>
</html>
文字間隔：
文字間隔はletter-spacingプロパティによって設定する。
<html>
<head>
<meta http-equiv="Content-Style-Type"
content="text/css" />
<title>文字間隔間隔</title> </head>
<body>
<h3>文字間隔を指定する</h3>
<p
style="width:300px;font-size:12pt;line-height:16pt;letter-spacing:12pt">ＣＧ（コンピュータグラフィックス）のモデリングや作図方法などに関する基礎知識、ＣＧ制作やホームページ作りの基礎を学び、コンピュータ上で作品を作ることを経験します。</p>
</body>
</html>
************************************************
練習問題３：
練習問題１で作った説明文に色をつけてみよう。