小技集

HOME>よくわかるHTML講座>小技集

ページ全般
ページ背景色・背景画像
文字色・文字サイズ
スタイルシート
基本的な記述方法
スタイルシート記述例
行の高さを指定する
Javascript使用例
適正体重を計算する



ページ全般

WEBにおける色
HTMLにおいて「色」は赤・緑・青(光の三原色ですね)をそれぞれ256段階(16進法)で指定する方法(カラーコード)と、あらかじめ決められたカラーネームで指定する方法があります。
カラーコードはいわゆる「加法混色」という手法です。三色ともゼロにすると黒、三色とも最大値(255)にすると白になります。
16進法
日常生活で使われているのは10進法です。一桁に0-9の10種類の数字が入ります。
16進法は一桁に0-fの16種類の数字(?)が入ります。コンピューターの世界でよく使われます。
10進法を16進法に変換する
10進法0123456789101112131415
16進法0123456789abcdef
例：10進法の 200 を16進法で表すと「 c8 」。
200/16=12 あまり 8
12 は16進法で c
なので「 c8 」
加法混色とWEBカラー
加法混色
カラーネーム赤緑青カラーコード
black000#000000
red25500#ff0000
lime02550#00ff00
blue00255#0000ff
yellow2552550#ffff00
fuchsia2550255#ff00ff
aqua0255255#00ffff
white255255255#ffffff
他のカラーネームは他のサイトを調べてください(爆)。
背景色のテスト
背景色を変更するJavascriptを用意してみました。赤・緑・青それぞれに0〜255の数字を入れて「16進法に変換」を押し、続いて「背景色変更」を押してみて下さい。当然ながらJavascriptを切っていると作動しません。
赤：
緑：
青：
 カラーコード：
解説
上記のフォーム部分は以下のようになっています(表示を整えるためにテーブルタグを使用していますが、その部分は省略してあります)
1: <form method="get" action="#" onsubmit="return false" name="color">
2: 赤：<input type="text" size="5" name="red" maxlength="3" value="255"><br />
3: 緑：<input type="text" size="5" name="green" maxlength="3" value="255"><br />
4: 青：<input type="text" size="5" name="blue" maxlength="3" value="255"><br />
5: <input type="button" name="change" onclick="hex_change()" value="16進法に変換">
6: カラーコード：<input type="text" size="8" name="hex" value="#ffffff">
7: <input type="button" name="change2" onclick="bg_change()" value="背景色変更">
8: <input type="button" name="c_reset" onclick="bg_reset()" value="背景色リセット">
9: </form>
まず、1行目でフォームを作り、name="color"としてcolorという名前を付けます。また、onsubmit="return false" とすることで、フォーム本来の働きを打ち消します。
次に2〜4行目と6行目で、赤、青、緑それぞれの値を入力してもらうフォーム部品とカラーコードを表示させるためのフォーム部品を作り、それぞれred、blue、green、hexと名づけます。これによって、Javascriptから r=color.red.value 等として「変数rにcolorというフォームのredという部品の値を代入せよ」と命令したり、 color.hex.value="#ffffff" と「colorというフォームのhexという部品に"#ffffff"という値を代入せよ」と命令できるようになります。
5行目と7〜8行目でボタンを作成しています。onclick="hex_change()"などとして、「ボタンがクリックされたらhex_changeという関数を呼び出せ」と指定します。

ページ背景色・背景画像

説明
ページの背景色や背景画像を指定するには、<body>タグの要素を指定する方法とスタイルシートを使用する方法の2通りあります。
最近ではスタイルシートで指定する方法が推奨されているようです。

<body>タグの要素を指定する方法(背景色)

<body bgcolor="背景色">
背景色
カラーコードまたはカラーネームを指定します。

<body>タグにスタイルシートを適用する方法(背景色)

<body style="background-color:背景色">
背景色
カラーコードまたはカラーネームを指定します。

<body>タグの要素を指定する方法(背景画像)

<body background="背景画像">
背景画像
背景にする画像のアドレスを指定します。画像は敷き詰められて表示されます。敷き詰めたくないときはスタイルシートを使って指定して下さい。「背景画像を使うと必ず文字が読みにくくなる」と信じている人なので、やり方はあまりよく分かりません(泣)。

文字色・文字サイズ

説明
文字色・サイズを変えるには<font>タグを使う方法と、スタイルシートで指定する方法の2通りあります。
時代の潮流は「WEB文書の論理構造はタグで、見た目(スタイル)はスタイルシートで」なので、今後はスタイルシートを使った指定方法が主流になるようです。最新のHTML仕様では<font>タグは使えないことになっているらしいです。

<font>タグの使用例

ソース
実行結果
タグで赤くする
タグで大きくする
タグで青く大きくする

スタイルシートで文字色・サイズを指定する例

ソース
実行結果
スタイルシートで赤くする
スタイルシートで大きくする
スタイルシートで青く大きくする



スタイルシート

タグ名.クラス{プロパティー名:値;プロパティー名:値; …}
タグ名
スタイルを適用させたいタグ名を書きます。<p>タグに適用させたいなら p と書きます。省略することもでき、その際は「全てのタグに対して」という解釈になります。
クラス
タグ名の後に . でつなげてクラスを指定することが出来ます。例えば p.smallfont としておくと、<p class="smallfont">と指定したタグに対してスタイルが適用されます。省略すると「クラスを指定しないものすべてに対して」という解釈になります。
プロパティー名
「文字の色」とか「文字のサイズ」などのことです。代表的なものを以下に示しておきます。
color文字色
font-size文字サイズ
font-weightnormal を指定すると通常、bold を指定すると太字
text-decorationnone を指定すると何も無し、underline を指定すると下線
line-height行の高さ(行間)
background-color背景色
値
プロパティーのあとに : をつけて値を指定します。サイズとか色とかです。 ; をつけていくつも連続でプロパティーと値を指定することができます。じゃんじゃん指定しましょう。

基本的な記述方法

<head>タグ内に記述する方法

<html>
<head>
<style type="text/css">
<!--

ここにスタイルシートを記述する

-->
</style>
</head>
<body>

ここに本文を記述する

</body>
</html>
<!--〜-->でコメントアウトするのをお忘れなく。

タグ内に直接記述する方法

<p style="ここにスタイルシートを記述する">
ヘッダ内で指定したスタイルシートよりも、タグに直接書いたスタイルシートが優先されます。ヘッダ内で大まかな指定をして、タグ内で細かい指定をするという手法が多用されています。

スタイルシート記述例

基本編

/* 〜 */で囲った部分はコメントとみなされ、ブラウザに無視されます。
<style type="text/css">
<!--
p{color:red}		/* <p>〜</p>で囲った部分の文字色を赤にする */
a{font-size:16px}		/* <a>〜</a>で囲った部分の文字サイズを16ピクセルにする */
p.bigfont{font-size:200%}	/* <p class="bigfont">〜</p>で囲った部分の文字サイズを倍にする */
.smallfont{font-size:70%}	/* class="smallfont"と記述したタグの中身だけ文字サイズを小さくする */
.{background-color:black}	/* 全てのタグの背景色を黒にする */
-->
</style>

発展?編

複数のスタイルを ; で区切って一度に設定することもできます。また、途中で改行することもできます。下に示したスタイルシートは現在ご覧のページで実際に使われているものの一部です 。
<style type="text/css">
<!--
a{color:slateblue;text-decoration:none}		/* リンクタグのスタイル指定 */
a:hover{color:seagreen;text-decoration:underline}	/* リンクタグにマウスが乗ったときのスタイル指定 */
/* 大見出し部分のスタイル指定 */
h1{
border: 2px solid red;
padding:2px;
background-color:pink
}
/* 中見出し部分のスタイル指定 */
h2{
border-left: 2px solid chocolate;
border-bottom: 1px solid chocolate;
padding:2px
}
/* 小見出し部分のスタイル指定 */
h3{
border-bottom: 2px dotted green;
padding:2px
}
-->
</style>

行の高さを指定する

説明
スタイルシートの登場によって行の高さが指定できるようになりました。行間をあけることによって、詰まった感じが解消できるでしょう。
line-height:100%とすると上の行と下の行がピッタリ合わさって表示され、line-height:150%とすると上の行と下の行の間が文字の高さの半分だけ開きます。100％未満を指定すると行が重なって表示されてしまいます。
ソース
実行結果

行の高さを指定しない。
行の高さを指定しない。
行の高さを指定しない。
行の高さを指定しない。
行の高さを指定しない。

行の高さを指定する。
行の高さを指定する。
行の高さを指定する。
行の高さを指定する。
行の高さを指定する。




Javascript使用例

おことわり
とてもじゃないですが、javascriptリファレンスなんて作れるような身分ではないので、簡単な例を挙げるに留めます。

適正体重を計算する

説明
適正体重を求めるJavascriptを書いてみます。適正体重は「身長(m)の二乗に22をかけたもの」だそうです。

<head>〜<head>に記述する部分

// からその行の終わりまではコメントとしてブラウザに無視されます。
<head>
<script type="text/javascript">
<!--

function tekisei_calc(){

// フォームから値を得る
sinchou=bmi.height_input.value;

// 0 を減じることによって文字列を数値に変換
sinchou=sinchou-0;

// 100 で割って cm を m に修正
sinchou=sinchou/100;

// 身長の二乗に22をかけて適正体重を求める
tekisei_taijuu=sinchou*sinchou*22;

//10をかけて四捨五入し10で割ると小数点以下第一位を四捨五入したことになる
tekisei_taijuu=Math.round(tekisei_taijuu*10)/10;

// フォームに求めた値を表示させる
bmi.weight_disp.value=tekisei_taijuu;

}

//-->
</script>
</head>

本文中に書く部分

<form action="#" method="get" onsubmit="return false" name="bmi">
身長<input type="text" name="height_input" size="7" maxlength="5">cm<br />
<input type="button" onclick="tekisei_calc()" value="あなたの適正体重は？"><br />
<input type="text" name="weight_disp" size="7">kg
</form>

実行してみましょう。

身長cm

kg

解説

フォームを作る
<form>〜<form>の部分がフォームと呼ばれる部分です。掲示板やアンケートフォームなどでお馴染みのアレですね。
フォーム部品に名前をつける
<form>や<input>タグにname="…"と名前をつけます。フォーム全体に bmi 、身長を入力する<input>タグには height_input 、適正体重を表示させる<input>タグには weight_disp という名前をつけました。
Javascriptを呼び出す
<input type="button">タグに onclick="tekisei_calc()" と入れます。「クリックしたらtekisei_calc()という関数を呼び出せ」という意味です。
Javascriptからフォームの値を参照する
Javascriptから bmi と名づけたフォームの height_input と名づけたフォーム部品に入力された値を参照し、 sinchou という変数に代入します。
Javascriptで演算
フォームから取得した値を数値に変換し、適正体重を求め taijuu という変数に代入し、それを四捨五入します。
演算した値をフォーム部品に代入する
Javascriptから bmi と名づけたフォームの weight_disp と名づけたフォーム部品に taijuu の値を代入します。