毎週金曜日配信 What's New 2002/7/26
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
初心者のためのホームページ作り
http://www.scollabo.com/banban/
＜第11号＞
banban@scollabo.com
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
この講座はタグを覚えてテキストエディタだけでホームページを作るという、ど
ちらかというとやや専門的な作業が中心になります。各種の専用のオーサリング
ソフトとは一線を画して、思い通りのプロ並みのＨＰを作ることが出来ます。
時には専門的で難解な言葉も出てきますが、なるべく初心者にも分かりやすく
解説していきます。どうぞ、気軽な気持ちでお付き合いください。講座をすすめ
る中で分からない点があったら遠慮なく質問メールをください。
当講座ではHTML4.01を中心とした文法が主体となっています。なお、このマガ
ジンは等幅フォントでお読みいただくと快適に読めるようになります。
今週の課題■ Webで扱う画像 その２
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
◆今回も画像について解説します。なお、講座で使用する画像をまだ入手してい
ない方は、当サイトでダウンロードできるようにしてあります。
容量が小さいので、数秒でダウンロードが出来るようになっています。
・ダウンロード先（注意：先週までのURLを変更しました）
http://www.scollabo.com/banban/daf/material.html
Windows および Macintosh に対応しています。なお、教材は圧縮しています
がUNIX系を除いてダブルクリックで自己解凍します。
Windows版＝LHA形式 Macintosh版＝sit形式 UNIX系＝tar形式
UNIX系（Linux、FreeBSDなど）のOSの方はお手数ですが、圧縮・解凍ソフトを使
ってください。
この講座でお使いになるフォルダの中に、新たに images という名のフォルダを
作っておきます。
上記サイトでダウンロード後、圧縮ファイルをダブルクリックして解凍し、あ
らかじめ作っておいた images フォルダに解凍された画像ファイルを移動してお
いてください。画像は全部で８点あります。
ここにある画像は、今回だけでなくその後の講座でも使用するものが含まれて
います。
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
◆ページの背景に画像を貼り込む
Webページの背景は、各ブラウザのデフォルトの色で表示されます。白、灰色な
ど、ブラウザによって違いますが、この背景に自分で作った画像を貼り込んで、
表情をつけます。スタイルシートを利用することによって、さまざまな表示が可
能になり、楽しさが増します。
さっそく作ってみましょう。テキストエディタを起動して新たにHTML文書を作り
ます。下記のようにタイプしてください。なお、背景に貼り付ける画像は、ダウ
ンロードした教材から使用します。
入力の際、コロン「：」、セミコロン「；」を間違えないように。またダブル
コーテーション「 " 」の閉じ忘れのないように注意しましょう。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=SHIFT_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>背景に画像を貼る</title>
<style type="text/css">
<!--
body { background-image: url("images/kabe.png") ;
color: #fff }
-->
</style>
</head>
<body>
<h2>初心者のためのホームページ作り</h2>
</body>
</html>
入力が終わりましたら保存します。半角小文字で、
test_8.html と必ず拡張子 .html を忘れないようにします。
保存が終わったら、 test_08.html という文書のアイコンが、いつも使っている
ブラウザのアイコンになっているはずです。ダブルクリックしてブラウザで見て
みましょう。
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
◆解説
body { background-image: url("images/kabe.png"); color: #fff }
background-image ページ全体に、画像を貼り付ける記述です。
url("images/kabe.png") 画像のURLを指定する記述です。この場合は、images
フォルダの中の、kabe.png を指定しています。
color: #fff 文字色は白に指定しました。
ブラウザで見てみると青から薄い青へとグラデーションがかかった背景になりま
す。この画像は、非常に小さくて、高さがわずか１ピクセルしかありません。容
量も極めて小さくて、たったの 698バイトというサイズです。
つまり、この記述は、背景に指定した画像を、縦、横に繰り返して表示するも
のなので、ほんの小さな画像でもページ全体に表示されるわけです。
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
では、背景画像の繰り返し表示をコントロールします。スタイルシートの登場に
よって可能になった表示方法です。
テキストエディタで、新規にHTML文書を作成します。下記のようにタイプして
ください。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=SHIFT_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>背景に画像を貼る</title>
<style type="text/css">
<!--
body { background-color: #fff;
background-image: url("images/kabe.gif") ;
background-repeat: repeat-y }
-->
</style>
</head>
<body>
<h2>初心者のためのホームページ作り</h2>
</body>
</html>
入力が終わりましたら保存します。半角小文字で、
test_9.html と必ず拡張子 .html を忘れないようにします。
保存が終わったら、 ダブルクリックしてブラウザで見てみましょう。
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
◆解説
background-color: #fff;
あらかじめ背景色を白に設定しました。
background-image: url("images/kabe.gif") ;
背景画像を変えました。最初のHTMLでは、kabe.png でしたが、今度は kabe.gif
として、違う画像を用いました。レンガ模様の画像です。
background-repeat: repeat-y
この属性は、背景画像をＹ軸、つまり縦方向に繰り返して表示させるものです。
ちなみに、横方向はＸ軸で
background-repeat: repeat-x と記述します。試してみてください。
この指定がない場合は、 repeat が選択されて、縦、横方向に繰り返して表示
します。
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
次に、背景画像を固定して、スクロールしても動かないようにします。これもス
タイルシートで可能になるものです。
テキストエディタで、新たにHTML文書を作成します。下記のようにタイプして
ください。コロン「：」セミコロン「；」を間違えないように。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=SHIFT_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>背景に画像を貼る</title>
<style type="text/css">
<!--
body { background-color: #fff;
background-image: url("images/title.gif") ;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: right bottom }
-->
</style>
</head>
<body>
<h2>初心者のためのホームページ作り</h2>
<div>
<img src="images/space.gif" width="1" height="800" alt="">
</div>
<h1>初心者のためのホームページ作り</h1>
</body>
</html>
入力が終わりましたら、保存します。前回と同じように半角小文字で、
test_10.html という名前にして保存します。同様に、.html と拡張子を忘れな
いようにしてください。
保存後、ダブルクリックしてブラウザで確認してください。スクロールしてみ
ると右下にある背景画像が動かないはずです。
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
◆解説
background-color: #fff;
背景色を白に設定しす。
background-image: url("images/title.gif") ;
背景に貼り付ける画像を指定します。当サイトのタイトルをアレンジしました。
background-attachment: fixed;
背景画像が固定されることを設定します。デフォルト値は scroll です。
background-repeat: no-repeat;
背景画像が繰り返して表示することを禁じた設定をします。
デフォルト値は repeatです。
background-position: right bottom
背景画像の位置を設定します。ここでは右下に設定しました。
デフォルトは左上です。この設定には、％、ピクセル単位でも指定できます。
ここで言うデフォルトとは、設定しない場合に適応されるという意味です。
<img src="images/space.gif" width="1" height="800" alt="">
画像ファイルにある space.gif を横幅１ピクセル、高さ800ピクセルと設定し
たものです。もともとの画像は１ピクセル四方の極めて小さな、透明の GIF画像
ですが、 height属性によって、高さを800ピクセルとすることで、非常に長い領
域を設定して、わざとスクロールできるようにしました。
alt属性を、単にダブルコーテーションだけにしたのは、透明の画像で、意味
を持っていない、つまり書き込む必要がないために、あえてそうしたわけです。
alt属性は必須なので、記述しないわけにはいかないのです。
なお、背景画像は、背景色と同様に、多くの要素で使用できます。見出しや段
落、ボックス、今後講座で予定するテーブルなど、さまざまな場面で使用可能と
なっています。
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
◆ＯＳの違いによる色の見え方
色に関して「ガンマ値」と呼ばれる画面の明るさに関する初期設定では Windows
と、Macintoshでは異なるため、同じ画像であっても一般に、Windowsの方が暗く
見えます。
また、ユーザのマシンがサポートしているビット深度とその設定によって、表
示可能な色数が制限されている場合、確実に制作者側の環境と同じ色で表示され
ているとは限らず、ＯＳやブラウザによって他の近似色に置き換えられ、見づら
いものになってしまう場合もあります。それに、液晶とブラウン管でもガンマ値
が異なることも考慮する必要があります。
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
◆背景画像に関する注意点
自分で作った画像をページに貼り付けるというのは、楽しいものです。しかしな
がら、一番大切なのはコンテンツに違いありません。
背景画像が邪魔して、文字が読みにくいとか、背景色と文字色が近似色となっ
て、これまた読みにくいということが多々発生します。これでは、せっかくのコ
ンテンツが台無しです。
背景画像を作るポイントは、色数を極力抑えて、シンプルで、容量の小さいも
のを用意しましょう。コンテンツの邪魔にならないよう、配置にも気を遣うよう
にします。うっすらとそれとなく表示できるような画像を用意しましょう。
間違っても教材で使用した画像を使わないようにしましょう。あくまで、教材
用に作成したサンプルに過ぎません。つまり、背景画像にふさわしいものではあ
りません、念のため。
画像についてはこれで終わりますが、その他のオブジェクト（FLASHや動画など）
については必ず講座で取り上げます。
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
今回はここまで、ではでは・・
今週のおさらいはＷｅｂページにも掲載しましたので、是非見ておいてください。
Ｗｅｂページではサンプルもありますので、より分かりやすいと思います。あわ
せて過去の記事のおさらいも掲載しています。是非ご覧下さい。
（今週のおさらい）
http://www.scollabo.com/banban/magazine/
次回は、リストついて詳しく説明します。
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
質問・ご意見ははこちらまで→ banban@scollabo.com
なお、ご質問の際には、お使いのOS、通常使っているブラウザ、使っているテキ
ストエディタなど、なるべく分かりやすく制作環境を明記していただけると回答
しやすくなると思います。
発行者 ばんばん
協 力 スズキ・コラボレーション http://www.scollabo.com/
配信エンジン まぐまぐ http://www.mag2.com/ （ID 0000090196）
誤字・脱字・変換ミス・表現欠乏などには平に御容赦願います。なお、マガジン
のすべての記述に誤りがある場合、叱咤と罵声と共に私まで突きつけていただく
と幸いに思います。
バックナンバー こちらで公開しています。
プレーンテキスト http://www.scollabo.com/banban/magazine/magazine.html
各号のおさらい http://www.scollabo.com/banban/magazine/
まぐまぐ http://backno.mag2.com/reader/Back?id=0000090196
配信の変更・中止はこちらです。
個別の手続きは受け付けていませんので、ご面倒でも各自でお願いできれば助か
ります。
当サイトにて http://www.scollabo.com/banban/magazine/magazine.html
まぐまぐにて http://www.mag2.com/m/0000090196.htm
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
◆Web関連ニュース・・・最近話題になったトピックス
先日、米国の調査会社が世界のブロードバンド通信利用者数が、2002年初め時点
で約3000万人を突破したとの推計を発表しました。
この数字には別の意味で驚きがあります。世界中のインターネット利用者の合
計はどれくらいなのか詳しくは分かりませんが、その中でたったの3000万人しか
ブロードバンド利用者がいないのは、考えていたよりもはるかに少ない数字だと
思います。おそらく数パーセントにしか過ぎないのではないでしょうか。
インターネット普及率をアジア太平洋地域内でみるとオーストラリアが53.6％で
ダントツ。香港 53.3％と韓国 50.4％が僅差でこれに続き、以下、シンガポール
48.1％、ニュージーランド 47.6％、台湾 44.8％、日本 34.7％。上位3カ国は昨
年は40％以下にとどまっていましたが今年は一気に50％を突破する見込みだそう
です。
同様に世界各国のレベルでは１位がスウェーデン64.9％、アイスランド61.8％
デンマーク 59.9％、ノルウェー 59.1％、イギリス 58.2％、アメリカ 57.2％。
アジア太平洋の国では オーストラリア 10位、香港 11位、韓国 13位と並び、我
が日本は 27位にランクされています。（米国インスタット社調査より）
これらから推定するとインターネット利用者の総数は、十数億とみられます。
それにしても、ホームページの総数が20億を越えているのは不思議だ。
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
＜えでぃた〜ず・るーむ＞
あと10日あまりで、住民基本台帳ネットワークシステム、いわゆる住基ネットが
運用開始されます。これは1999年に法制化されたものです。
この住基ネットでは、すべての国民に11けたの「住民票コード」（番号）を強
制的に割り当て、全国民の個人情報がコンピューターで一元管理されることにな
ります。転入転出届がネット上でできるらしいけど、しかし行政サービスが異な
るとやっぱり窓口に行かなければならないようです。
一番の問題点は、やっぱりセキュリティでしょう。私の持論ですが、ネットの
セキュリティには限界があります、つまり信用していません。
あの米国国防総省ですら、ほぼ毎日、クラッカーによるハッキングが行われて
います。そういえばいつぞやマイクロソフト本社がハッキングされてデータが盗
まれたことがありましたね。去年後半だったと思います。
昨年の日本における不正アクセスは、従来の18倍に達したとの報告があります。
つまり、既存のセキュリティでは打つ手がないというのが現状でしょう。
ここだけの話ですが、私が今から６年前、日本を代表する企業のサーバーに侵入
した経験があります。
そこには開発中の技術、社員情報などが置かれていました。もちろん、これと
いって閲覧や盗むことはしませんでしたが、今でも実情は相変わらずでお寒い限
りです。
（今はハッキングなどはしていません、立派な犯罪になります。念のため。）
お役人が進める住基ネットが本当に安全で信頼できるものなら、利用価値は十
分にあると思います。でもどれくらいの資金が必要になるか理解できません。あ
の小泉首相のメールマガジン「らいおんはーと」では、運営に１億6000万円かけ
ているとのことです。かないませんねぇ、いちおくろくせんまんえん・・税金だ
よね、それって。
何にせよ、無事な住基ネットの運用を願うばかりです。誰かが勝手にデータを
フロッピーやMO（光磁気ディスク）などにコピーして、それを売り飛ばすことだ
けは避けて欲しいですよね。
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
◆Webサイト更新情報
●CGIプログラミング入門ページ
まだすべてが完成していませんが、チュートリアルを掲載しました。先の長い
ページになりそうです。興味のある方は是非！
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
◆著作権について
個人がご自分のＰＣに保存して利用する以外の記事の転載、引用は基本的に応じ
ておりません。記事中のすべての内容について、無断で使用することを固く禁じ
ます。
Copyright(C) 2002 www.scollabo.com/banban/
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
Copyright(C) 2002-3003 banban@scollabo.com