ホームページのすゝめ

ホームページの言葉をおぼえよう(2)

トップ　＞　第2回

★ ページを修飾しよう

まず、前回作ったページをブラウザで開いてみてください。
何の修飾も無くて、ホームページっぽくないですよね？

では、今回は、背景画像を入れたり、文字を大きくしたり、
色を変えたりしてみたいと思います。

★ 背景をつけてみる。

背景画像を用意しましょう。今回は、こちらを使ってみてください。

まずは、画像を保存しましょう。画像の上にマウスポインタを持っていって、
右クリックをして、｢名前をつけて画像を保存｣(InternetExplorerの場合)をクリックします。
ファイル名を、｢bg.gif｣として、ホームページと同じフォルダに保存してください。
必ずファイル名は半角英数にしましょう。

つぎに、この前作ったホームページの｢ソース｣を、メモ帳などのテキストエディタで開きます。
そして、｢<body>｣と言うタグを探して、
｢<body background="bg.gif">｣と言うように、タグの中の命令を増やします。
このように、タグは命令を増やすことが出来ます。

この図で、青い部分をタグの要素、灰色の部分を属性、赤の部分を属性値と言います。
bodyと言う要素は、｢ここからホームページの本文ですよ｣と言う宣言で、
backgroundと言う属性は、｢ページの背景画像は =の後に書いた奴にしてね｣と言う命令です。
と言うわけで、タグは、<要素属性="属性値">と言う形で書きます。
まぁ、｢属性値｣とか、難しい言葉をおぼえる必要はあまりありません。
そのうち自然に覚えるかと思います。
ここでは、｢ああ、このように書くんだな｣と思ってくれれば結構です。

では、早速上書保存してブラウザで確認してみてください。
すでにページを開いている場合は、閉じて、開きなおす必要はありません。
｢更新｣ボタンを押せばOKです。

★ 文字を目立たせよう。

次は、文字を修飾する方法について説明します。
ソースは開いていますか？
文字の修飾は、等のタグで行います。
最初のは、属性と属性値の指定をします。
の属性は、｢文字の大きさ｣｢文字のフォント｣｢文字の色｣などです。
では、｢こんにちは。｣と言う文章を、大きく、明朝体で、赤い文字にしてみたいと思います。

こんにちは。
こんにちは。

今回は長めですね。それと、属性と属性値が3つもあります。
そうなんです。タグは、いくつもの属性と属性値を持っていて、それを使うことが出来るのです。
中には、属性がないタグもありますけど。
そして、第1回で言った｢囲む｣ということが、どういうことかお分かりいただけたでしょうか？
｢こんにちは。｣を、タグで囲んだ(はさんだ)のです。

では、このタグの説明をしましょう。
font : フォントを変更する。
size : サイズは、=で結んだ数値にしなさい。
face : 書体を =で結んだものにしなさい。
color : 色を、 =で結んだものにしなさい。
ここで一番問題なのが、色の指定の仕方が意味不明だということです。
｢#ff0000｣って何？と思った人も少なくは無いでしょう。
これは、特別な色の指定方法で、
#FF0000
上の図の色分けのように、左から2桁ずつ赤緑青の色を、それぞれどのくらいの強さで出すかを決めるのです。
で、数字ならともかく、F ってなんだよ？と思いますよね？

これは、私たちがふだん使うものの数え方と多少考え方が違うのです。
私たちは、1,2,3,4,5,6,7,8,9ときたら、次で2桁になります。
これを｢繰り上がる｣と言うことは、小学校で習ったかと思います。

しかし、この数え方は、1,2,3,4,5,6,7,8,9ときたら、繰り上がらず、
A,B,C...と、数字が足りないので無理やりアルファベットを使って
更に繰り上がらず数えつづけます。

そして、どこで繰り上がるかと言うと、F です。
F は、この数え方でいくと、15番目の数字になります。
Aが10,Bが11,Cが12,Dが13,Eが14,Fが15です。
そして、次の16番目の数字で始めて繰り上がります。
この数え方をわれわれがふだん使う｢十進法｣にたいして、｢十六進法｣といい、
この数え方で数える数字を｢十六進数｣と言います。

HTML言語での色の指定は全てこの｢十六進数｣で行いますが、
使い慣れないので訳がわからないかと思います。
なので、｢とほほのＷＷＷ入門｣にあった｢背景色エディタ｣を置いておきます。
有効に使ってみてください( こちら )。

その他のは、単純に、太字斜体下線と言うものです。
長くなってしまったので、とりあえずこの辺で。

いろいろとタグを組み合わせることによって、複雑なデザインも可能になります。
では、次回をお楽しみに(嫌)。

トップ　＞　第2回