毎週金曜日配信 What's New 2002/12/20
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
初心者のためのホームページ作り
http://www.scollabo.com/banban/
＜第32号＞
banban@scollabo.com
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
この講座はタグを覚えてテキストエディタだけでホームページを作るという、ど
ちらかというとやや専門的な作業が中心になります。
時には専門的で難解な言葉も出てきますが、なるべく初心者にも分かりやすく
解説していきます。どうぞ、気軽な気持ちでお付き合いください。講座をすすめ
る中で分からない点がありましたら、ご遠慮なくメールください。
当講座ではHTML4.01を中心とした文法が主体となっています。なお、このマガ
ジンは等幅フォントでお読みいただくと快適に読めるようになります。
今週の課題 ■ 背景の応用
■ HTML 汎用属性
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
◆背景
背景とは、ページそのものに色や画像などを指定して、基本的に変化することの
ない壁紙と同じ役割をさせるものです。
ブラウザのデフォルト（初期値）では、背景色はブラウザに依存しています。
HTMLでは、はっきりと決められていません。古いブラウザでは灰色のものがあり
ました。この初期値は、ブラウザの設定でユーザが任意に色を決めることができ
ます。私の場合には灰色（#ccc）に指定してあります。そのため、ページに背景
色が指定されていない場合には、すべて灰色で表示してくれます。
今回の解説では、実際にマガジン上で表現することができませんので、サンプ
ルを本誌サイト上に掲載してありますので、お手数かけて恐縮ですが参考までに
ご覧いただけると、理解が早まると思います。
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
◆背景色の指定
ページに背景の色を指定する方法は２つあります。
■HTMLによる背景色の指定
bgcolor属性（非推奨） 値にカラーコードを指定します。
利用できる要素 body、table、tr、td、th、thead、tbody、tfoot
構文
<body bgcolor="#00ffff">
ページ全体の背景色を水色に指定したものです。カラーコードは必ず６桁を記
述します。あるいは、カラー名（Color Name）でも指定できますが、この場合
どのブラウザにも適用できる16色の中から選ぶことになります。
<body bgcolor="aqua">
bgcolor属性サンプル
http://www.scollabo.com/banban/magazine/sample/mmsample_049.html
■スタイルシートによる背景色の指定
background-color: カラーコード CSS Level 1
利用できる要素 ヘッダを除くすべての要素に適用
構文
h1 { background:color: #cff }
スタイルシートの場合、３桁による RGB指定が可能です。スタイルシートでは
ほとんどの要素に適用できるのが大きな特徴ですが、ブラウザでサポートして
いないものもあります。
対応ブラウザ
HTML：bgcolor属性
MSIE、Netscape、Opera、Mozilla、iCabなどすべてにサポートされています。
CSS：background-color属性
Netscape Navigator 4.x以前 すべて不可
MSIE 2.0 すべて不可
Opera 6.05 一部の要素で不可（thead、tbody、tfootなど）
iCab 2.2.8 一部の要素で不可
CSS: background-color属性サンプル
http://www.scollabo.com/banban/magazine/sample/mmsample_050.html
◆背景色を指定する場合の注意点
この講座で何度も取り上げましたが、色を使う場合には、色弱障害者に対する配
慮が大切です。統計によると、約10％の人が何らかの色の判別ができない障害を
持っていると言われています。
特に赤（#ff0000） や、緑（#00ff00） の配色には注意が必要です。この２色
を配色すると、色弱障害者の場合には見えなくなってしまいます。
また、モニターによっては色の識別がわかりにくいものがあります。ブラウン
管式モニター（CRT） では見えても液晶式モニター（TFT） では識別が困難な場
合もあります。近似色の配色にはそういった意味では難しいものです。
W3CのWAI（アクセシビリティ・ガイドライン）でも、色に頼ったページは好ま
しくないとされています。
指定した背景色が、テキストや他のコンテンツの邪魔にならないように、工夫
しましょう。
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
◆背景画像の指定
背景色の変わりに画像を用いることも可能です。
■HTMLによる背景画像の指定
background属性（非推奨）
利用できる要素 body、table、tr、td、th、thead、tbody、tfoot
構文
<body background="kabe.png">
画像を指定して背景に埋め込みます。この場合、横幅（width）と高さ（height）
の指定、および代替のテキスト（alt）などは必要ありません。
background属性サンプル
http://www.scollabo.com/banban/magazine/sample/mmsample_051.html
■CSSによる背景画像の指定
background-image 画像の指定 CSS Lavel 1
利用できる要素 ヘッダ部を除くすべての要素に適用
構文
div { background-image: url("kabe.png") }
汎用ブロックレベル要素に画像を指定して、背景に埋め込む構文です。もちろ
ん、body要素にも埋め込むことが可能です。スタイルシートでは、ブロックレ
ベル要素だけでなく、インラインレベル要素にも設定が可能です。
CSS: background-image属性サンプル
http://www.scollabo.com/banban/magazine/sample/mmsample_052.html
スタイルシートでは、背景画像の表示方法がいろいろと設定できます。
本誌第11号と重複しますが、もう１度改めて詳しく説明します。
●水平方向への背景画像の指定
body { background-image: url("kabe.png");
background-repeat: repeat-x }
背景画像が、左上から水平方向に１列だけ表示されます。
CSS: background-repeat: repeat-x サンプル
http://www.scollabo.com/banban/magazine/sample/mmsample_053.html
●垂直方向１列の背景画像の指定
body { background-image: url("kabe.png");
background-repeat: repeat-y }
背景画像が、左上から垂直方向に１列だけ表示されます。
CSS: background-repeat: repeat-y サンプル
http://www.scollabo.com/banban/magazine/sample/mmsample_054.html
●背景画像を１つだけ表示させる
body { background-image: url("kabe.png");
background-repeart: no-repeat }
背景画像が、左上にひとつだけ表示されます。
CSS: background-repeat: none サンプル
http://www.scollabo.com/banban/magazine/sample/mmsample_055.html
●背景画像の位置を指定する その１
body { background-image: url("kabe.png");
background-repeat: repeat-y;
background-position: 50% }
背景画像をブラウザの左側から50％の位置で、垂直方向に１列表示されます。
なお、％のほかに、ピクセル単位でも指定できます。
その他に、left（左）、right（右）、top（上）、bottom（下）、
center（中央）などを使って指定することもできます。
CSS: background-position: 50% サンプル
http://www.scollabo.com/banban/magazine/sample/mmsample_056.html
●背景画像を１つだけ固定して表示する
body { background-image: url("kabe.png");
background-repeat: no-repeat;
background-attachment: fixed }
背景を固定する background-attachment を指定する場合は、背景画像を繰り
返表示をさせない background-repeat: no-repeat を併用して指定しなければ
なりません。
固定された背景画像は、スクロールさせてもその位置にとどまり、一緒には
スクロールしません。
CSS: background-attachment: fixed サンプル
http://www.scollabo.com/banban/magazine/sample/mmsample_057.html
●背景画像の位置を指定する その２
body { background-image: url("kabe.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 50% 50% }
背景画像をブラウザの左側から50％、上側から50％の位置で、１つだけ表示し
ます。なお、％のほかに、ピクセル単位でも指定できます。
CSS: background-position: 50% 50% サンプル
http://www.scollabo.com/banban/magazine/sample/mmsample_058.html
スタイルシートの背景画像を表示させる応用は、幾らでもあります。いろいろ
と設定を変えてお試しください。
◆背景画像を用いる場合の注意点
先週もお伝えした通り、画像ファイルは重いのです。背景画像を選ぶ場合には、
なるべく容量の少ないものにしましょう。
背景画像は、10ピクセル四方の小さなものでも、画面いっぱいに表示できる特
性を利用して、できる限り容量を軽くすることがコツです。小さい容量の画像は
サラッと表示され気持ちのよいものです。
また、背景画像に凝り過ぎて、コンテンツの邪魔になってしまうのも困りもの
です。複雑な模様はどうしてもコンテンツが読みにくくなってしまう傾向にあり
ます。コンテンツが背景画像に負けてしまったら、何の意味もありません。主は
あくまでコンテンツであり、背景画像は背景の一部でしか過ぎません。
シンプルでさりげない、それでいて気の利いたものを用意しましょう。
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
◆背景色と背景画像を同時に指定する
背景色と背景画像を同時に指定することも可能です。
背景画像を指定したら背景色を指定しても意味ないのでは、ということもある
かも知れませんが、画像の余白部分を透明化したものを用意することによって、
面白い効果を演出できます。
■HTMLによる背景色と背景画像の指定
bgcolor属性と、background属性を同時に設定する（非推奨）
利用できる要素 body、table、td、th
構文
<body bgcolor="#ffffcc" background="kabe.png">
２つの属性を並べることで簡単に設定できます。
bgcolor属性と background属性の併用サンプル
http://www.scollabo.com/banban/magazine/sample/mmsample_059.html
■CSSによる背景色と背景画像の指定
同じように背景色の指定 background-color属性と background-image属性の２
つを使って指定しますが、先ほど述べたように、１つだけの背景画像を指定す
る方法を記述します。
構文
body { background-color: #ffc;
background-image: url("hana.png");
background-attachment: fixed;
background-repeat: no-repeat;
background-position: right bottom }
CSSによる背景色と背景画像の指定サンプル
http://www.scollabo.com/banban/magazine/sample/mmsample_060.html
◆おまけ：インラインレベル要素の背景色の指定
テキストのポイントとなる部分に、背景色と文字色を指定するスタイルシートの
応用をサンプルにしました。
CSS構文
span.rd { background-color: #f00; color: #fff }
span.gr { background-color: #090; color: #fff }
HTML構文
<div>
背景色を指定する場合、HTMLでは <span class="rd">bgcolor</span>属性を
用います。また、スタイルシートでは <span class="gr">background-color
</span>属性を用います。
</div>
インラインレベル要素の背景色の表示サンプル
http://www.scollabo.com/banban/magazine/sample/mmsample_061.html
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
◆HTMLで使える汎用属性
HTMLのほとんどのタグに使用できる汎用属性（はんようぞくせい）について解説
します。
■汎用属性とは何か
タグには属性とその値で成り立つものが多く存在しています。
例えば、
<a href="index.html">Home</a>
この中の、href が属性で、"index.html" がその値（属性値）になります。
属性には、使用されるタグによって一意であったりさまざまですが、汎用属性
は多くのタグに一様に利用できることから、汎用性が高いので汎用属性と呼び
ます。
■汎用属性の種類と機能
id属性 id="名前"
要素に対して名前を付けます。ただし同一文書内で同じ名前を重複して使うこ
とはできません。
スタイルシートのセレクタ、リンクの対象、スクリプトからの参照、オブジ
ェクトの指定などに利用されます。
<div id="sample">
class属性 class="クラス名"
要素に対してクラス名をつけます。同一文書で複数の要素に対して同じ名前を
重複して利用することが可能です。スタイルシートのセレクタなどに利用され
ます。
<div class="sample">
title属性 title="補足情報"
要素に対して補足的な説明を加えることができます。多くは非視覚系ブラウザ
に対して補足的な説明を提供することに用いられます。特に音声ブラウザでは
この属性値を読んでもらえることが期待されます。
<a href="index.html" title="ホームページに戻ります">Home</a>
style属性 style="CSS"
要素に直接スタイルシートを設定します。
これをスタイルシートのインライン方式と呼びます。
<div style="background-color: #ffc">
lang属性 lang="言語コード"
要素の属性値やテキストの内容の言語を指定します。日本語のページに他の言
語が混在するような場合に有効です。また、音声ブラウザでは、正しい発音を
提供することができる場合があります。
<abbr lang="en">Cascading Style Sheet</abbr>
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
今回はここまで、ではでは・・
今週のおさらいは Webページにも掲載しましたので、是非見ておいてください。
Webページでは HTML文の実行結果のサンプルもあり、より分かりやすく説明して
います。あわせて過去の記事のおさらいも掲載しています。
（今週のおさらい）
http://www.scollabo.com/banban/magazine/backnm_032.html
次回は、JavaScript講座 第４回を予定しています。
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
◆バックナンバー配布のお知らせ
本誌バックナンバー、21〜30号までのアーカイブ（圧縮）ファイルが当サイトよ
りダウンロードできます。新たに読者となられた方には、オフラインでゆっくり
読むことができますので、是非ご利用ください。
なお、第１号から20号までは、既にアーカイブファイルを提供していますので
あわせてご利用ください。
バックナンバー・アーカイブ・ダウンロード
http://www.scollabo.com/banban/daf/archive.html
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
質問・ご意見ははこちらまで→ 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://www.scollabo.com/banban/daf/archive.html
講座教材 http://www.scollabo.com/banban/daf/material.html
まぐまぐの過去記事 http://backno.mag2.com/reader/Back?id=0000090196
配信の変更・中止はこちらです。
個別の手続きは受け付けていませんので、ご面倒でも各自でお願いできれば助か
ります。
当サイトにて http://www.scollabo.com/banban/magazine/top.html
まぐまぐにて http://www.mag2.com/m/0000090196.htm
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
◆Webブラウザ関連ニュース
■ Opera7.0ベータ版リリース
ノルウェーのOpera Software ASAは、Webページの表示速度に定評があるWebブラ
ウザー「Opera」v7.0 Beta 2のWindows用英語版をリリースしました。
主な変更点は、ツールバーに杖の絵が描かれた「Wand」ボタンが追加されたこ
とで、ログイン認証が必要な Webページで入力したユーザー名やパスワードなど
のテキスト情報を同ソフトで記録しておき、別の機会に同じ Webページを開いて
再び認証用テキストの入力を求められたときに、ツールバー上の「Wand」ボタン
を一度押すだけで自動的にログイン認証を行うことができる特徴をもっています。
シェアウェアソフトです。
Opera Software
http://www.opera.com/
■ Netscape7.01正式版リリース
タブ切り替え型 Webブラウザーやメールクライアント、２種類のメッセンジャー
などを含むインターネット関連ソフト群 Netscape 7.01をリリースしました。
現在、Windows 95/98/Me/NT 4.0/2000/XPに対応するWindows版については、日
本語、英語、ドイツ語などの各言語版を同社の Webサイトから無償でダウンロー
ドできます。なお、MacintoshOS 8/9/X対応の日本語版と英語版や、Linux版の英
語版も入手可能となっています。今のところ変更箇所の詳細は不明です。フリー
ソフト。
Netscape Japan
http://wp.netscape.com/ja/
■「Sleipnir」v1.40の正式版がリリース
「Sleipnir」は、IEコンポーネントを利用したタブ切り替え型のWebブラウザー。
今回公開されたv1.40の正式版では、任意のWebページをお気に入りに追加する
ときに、そのWebページでJavaScriptやActiveXの実行を不許可にしたり、画像を
非表示にするなどのセキュリティ設定を個別に指定できる機能などが追加されて
います。
また、ステータスバーにSSLの有効・無効を表示する鍵型アイコンや、MSIE6の
プライバシーレポート機能を使用するための目玉型アイコンなども追加されてい
ます。
目玉型アイコンをクリックすると、閲覧中 のWebページでブロックしたCookie
や、 Webページ上で使用されているコンテンツの一覧を表示することが可能にな
っています。フリーソフト。
Sleipnir Support Page
http://www20.pos.to/~sleipnir/
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
＜えでぃた〜ず・るーむ＞
先週末からひどく悪性な風邪にやられてずっとダウンしていました。そのため読
者の方からの質問に遅れが出たことをお詫びいたします。
体調が悪いと満足な回答もできず返って迷惑をかけたのではないかと反省して
います。
それでもこのご時世、会社を休むことははばかれます。かなり体調の悪い時で
も休めないのがサラリーマンの辛いところです。常にリストラの罠が待っている
現実に、何故世の中がこんなに変わってしまったのかと嘆くばかりです。
日毎に寒さが増してきます。皆様も風邪を引かぬようお気をつけください。
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
◆著作権について
個人がご自分のＰＣに保存して利用する以外の記事の転載、引用は基本的に応じ
ておりません。記事中の内容について、無断で使用することを固く禁じます。
なお、記事中のスタイルシート、HTMLをご自分のページ作成に自由に使ってい
ただいても差し支えありません。
Copyright(C) 2002 www.scollabo.com/banban/
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
Copyright(C) 2002-3003 banban@scollabo.com