毎週金曜日配信 What's New 2002/9/6
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
初心者のためのホームページ作り
http://www.scollabo.com/banban/
＜第17号＞
banban@scollabo.com
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
この講座はタグを覚えてテキストエディタだけでホームページを作るという、ど
ちらかというとやや専門的な作業が中心になります。各種の専用のオーサリング
ソフトとは一線を画して、思い通りのプロ並みのＨＰを作ることが出来ます。
時には専門的で難解な言葉も出てきますが、なるべく初心者にも分かりやすく
解説していきます。どうぞ、気軽な気持ちでお付き合いください。講座をすすめ
る中で分からない点がありましたら、ご遠慮なくメールください。
当講座ではHTML4.01を中心とした文法が主体となっています。なお、このマガ
ジンは等幅フォントでお読みいただくと快適に読めるようになります。
今週の課題 ■ 配置のコントロール その２
センタリングと絶対位置の重ね順
ブルックレベルとインラインレベル要素の変換
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
◆画像を中央に配置する
ページのタイトルなどを画像にして表示させる時にはセンタリングして目立つよ
うにしたいものです。
昔は、<center> とすればよかったのですが、いずれ廃止される要素です。
また、<div align="center"> とすれば同じように中央に配置されますが、この
align属性も廃止に向かっています。じゃあ、どうする？
やはり、スタイルシートが欠かせません。非常に簡単にできるので試してみて
ください。
■ スタイルシート（CSS）
div { text-align: center }
■ HTML
<body>
<div>
<img src="images/hana.png" width="200" height="175" alt="花の絵">
</div>
</body>
img要素はインラインレベル要素ですので、文字列と同じ扱いとなり、中央に配
置されます。
（Tips）
文字列はあまりセンタリングして使うことは少ないと思いますが、変にセンタ
リングさせると、妙におかしな表示になる場合があります。ただし、見出し要
素は使いやすいかもしれません。
ブロックレベル要素を配置するのには、状況が少し異なります。
文字列を扱うブルックレベル要素はスタイルシートで簡単に設定できますが、
テーブルはちょっとややこしいようです。
文字列を扱うブロックレベル要素のセンタリング
h1 { text-align: center }
p { text-align: center }
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
◆テーブルの配置
厄介なのがテーブルの配置です。すんなりと左寄せだけなら問題ありませんが、
これを中央に寄せるのは少し工夫が必要です。
上記の div要素のスタイルシートでは、MSIE（Microsoft Internet Explorer）
のみ中央に配置できますが、Operaや、Netscape、Mozilla では無視されてしまい
ます。
（Tips： Netscapeは昔から文法に厳しく、MSIEは寛容です。）
■ CSS
div { text-align: center }
■ HTML
<body>
<div>
<table summary="テーブルです">
<tr><td>セル</td><td>セル</td><td>セル</td></tr>
<tr><td>セル</td><td>セル</td><td>セル</td></tr>
<tr><td>セル</td><td>セル</td><td>セル</td></tr>
</table>
</body>
（セル内のデータもセンタリングされます。あくまで、MSIEのみ対応した記述
法で、使わないほうが安全です。）
本誌サイトの各リファレンスではテーブルを多用していますが、見事にセンタ
リングされています。
決して <table align="center"> は使っていません。この構文の属性は非推奨
でやがて廃止されてしまうからです。上記の CSSも使っていません。
■ 余白をつっかえ棒にして表示させる
実はテーブルの左右に同じ値の余白を設定することでテーブルは中央に表示さ
れます。私がこれに気づくまで、何度悩んだことでしょう。何度も諦めて、文書
型宣言に、Transitionalを選ぶしか方法がなかったのです。どうしても厳密な文
法で書くには、この方法しか見出せませんでした。
なお、この場合はテーブルの横幅指定を行い、単位は％で記述します。
さっそく、簡単なテーブルを作ってセンタリングさせてみましょう。スタイルシ
ートを使いますので、入力の際にコロン「：」、セミコロン「；」を間違えない
ように。
テキストエディタ（SimpleTextやメモ帳など）を起動して下記のようにタイプ
してください。
<!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 { margin: 0px;
padding: 0px }
table { margin-left: 30%;
margin-right: 30%;
width: 40% }
td.gr { background-color: #090;
color: #fff }
h1 { text-align: center;
color: #009 }
-->
</style>
</head>
<body>
<h1>テーブルのセンタリング</h1>
<table border="1" cellpadding="3" cellspacing="0" summary="テーブルのサンプル">
<tr><td colspan="4" class="gr">テーブルのセンタリング</td></tr>
<tr><td>セル</td><td>セル</td><td>セル</td><td>セル</td></tr>
<tr><td>セル</td><td>セル</td><td>セル</td><td>セル</td></tr>
<tr><td>セル</td><td>セル</td><td>セル</td><td>セル</td></tr>
<tr><td>セル</td><td>セル</td><td>セル</td><td>セル</td></tr>
</table>
</body>
</html>
入力が終わりましたらいつものように半角小文字で、
test_21.html と必ず拡張子「.html」を忘れないようにして保存します。
保存後、ダブルクリックしてブラウザで見てください。
（保存するHTML文書名は、ご自分で好きな名前をつけてもかまいません。）
HTML実行結果URL
http://www.scollabo.com/banban/magazine/backnm_017.html#sample_01
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
◆解説
body { margin: 0px; padding: 0px }
ブラウザが持っている余白をすべて取り除きます。ブラウザの余白は、ブラウ
ザにより異なりますが、この設定ですべて０とします。
table { margin-left: 30%; margin-right: 30%; width: 40% }
テーブルの左右の余白をブラウザの横幅の30％として、テーブルの横幅を40％
に設定しました。これにより、テーブルコンテンツがブラウザでセンタリング
されて表示します。余白と横幅の合計は必ず100％とします。
なお、コンテンツによっては、余白の設定、テーブルの横幅の設定を調整して
ください。私なりに考えたセンタリング表示です。つまり、
＜−− 余白30％ −−＞＜−−ー table 40％ −ー−＞＜−− 余白30％ −−＞
このように設定したわけです。これで見た目のセンタリングとなるはずです。
この手法は、ボックスなどにも使えるでしょう。
td.gr { background-color: #090; color: #fff }
セル内の背景色を緑色、文字色を白色に設定しました。
h1 { text-align: center; color: #009 }
見出し要素 h1 の位置をセンタリングにして、文字色を赤色に設定しました。
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
◆コンテンツをレイヤーとして重ねて表示させる
レイヤーとは透明な用紙に何かを書きます。その上にまた透明な用紙を重ねて何
かを書きます。一見すると１枚の用紙に何かが書かれているように見えます。こ
れをレイヤー（層状）と呼びます。
画像生成ソフトに良く用いられる手法です。先週述べました「絶対位置」の指
定に加えてレイヤーとするスタイルシートを解説しましょう。
レイヤーのように見せる場合、必ず「絶対位置」を指定することが条件です。
そして重ね順を設定することで、１つのコンテンツのように見せることができま
ます。説明が難しくなってしまうので、とりあえずHTMLを作って見ましょう。
テキストエディタ（SimpleTextやメモ帳など）を起動して下記のようにタイプ
してください。 CSSを多用しますので、コロン「：」、セミコロン「；」を間違
えないようにしてください。終わりの「 ｝」や「 " 」も忘れないように。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-2022-JP">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>レイヤー</title>
<style type="text/css">
<!--
body { margin: 0px;
padding: 0px }
div { padding: 5px;
font-size: xx-large;
font-weight: bold }
div.box1 { position: absolute;
top: 20px;
left: 50px;
z-index: 1;
background: #fcc;
color: #009 }
div.box2 { position: absolute;
top: 40px;
left: 180px;
color: #f00;
z-index: 4 }
div.box3 { position: absolute;
top: 50px;
left: 90px;
z-index: 2;
background: #ffc;
color: #090 }
div.box4 { position: absolute;
top: 10px;
left: 140px;
z-index: 3;
background: #cff;
color: #099 }
-->
</style>
</head>
<body>
<div class="box1">HTML</div>
<div class="box2">Web For Beginner</div>
<div class="box3">CSS</div>
<div class="box4">JavaScript</div>
</body>
</html>
入力が終わりましたら、いつものように保存します。
ここでは、test_22.html としておきます。
保存後ダブルクリックして、ブラウザで見てみます。うまく表示されない場合
は、ほとんどがタイプミスです。もう一度見直しましょう。特にダブルコーテー
ションの閉じ忘れが多いようです。
サンプルHTML実行結果URL
http://www.scollabo.com/banban/magazine/sample/mmsample_024.html
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
◆解説
body { margin: 0px; padding: 0px }
視覚系ブラウザが初期値で持っている一切の余白をなくしてしまいます。
div { padding: 5px; font-size: xx-large; font-weight: bold }
すべての div要素のコンテンツ内の余白を５ピクセル、フォントの大きさを１
番大きく、そして文字を強調させました。このページの div要素全部に適用さ
れます。
div.box1 { position: absolute; top: 14px; left: 50px; z-index: 1;
background-color: #fcc; color: #009 }
ボックスの絶対位置を上から14ピクセル、左から50ピクセルの座標に指定して
表示の重ね順 z-index: 1 で一番目としました。この数値はマイナスも設定で
きます。数値が大きいほど重ね順の一番上に表示すれます。
なお、position: absolute だけではあまり意味が無く、必ず top、left、
right、bottomなどを値と共に設定します。値の単位はピクセル、％です。
％を指定した場合、ブラウザの幅や高さに対して相対的に位置します。
このボックスの背景色はピンク色に、文字色は濃い青に設定しました。
div.box2 { position: absolute; top: 10px; left: 130px; color: #00f;
z-index: 4 }
ボックスの絶対位置を上から10ピクセル、左から130ピクセルの位置に、また
表示の重ね順は３として、ここでは１番上のレイヤーとなって表示します。
文字色は赤色に設定しました。
div.box3 { position: absolute; top: 14px; left: 425px; z-index: 2;
background-color: #ffc; color: #090 }
ボックスの絶対位置を上から14ピクセル、左から425ピクセルの位置に、また
表示の重ね順は２として、ここでは２番目のレイヤーとなって表示します。
背景色は薄いクリーム色、文字色は緑色に設定しました。
div.box4 { position: absolute; top: 10px; left: 140px; z-index: 3;
background: #cff; color: #099 }
ボックスの絶対位置を上から10ピクセル、左から140ピクセルの位置に、また
表示の重ね順は３として、ここでは上から２番目のレイヤーとなって表示しま
す。背景色は薄い水色、文字色は濃い水色に設定しました。
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
◆レイヤーの重ね順を変化させる----イベントハンドラを使う
JavaScriptで定義されているイベントハンドラを使って、レイヤーの重ね順を変
化させます。どちらかと言えばあまり意味がありませんのでイベントハンドラの
勉強のつもりとお考え下さい。
テキストエディタを起動させて下記のようにタイプしてください。コロンやセ
ミコロンを間違えないように注意してください。
<!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">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>レイヤー</title>
<style type="text/css">
<!--
body { margin: 0px; padding: 0px }
div { margin: 0px }
img.st1 { position: absolute;
top: 0px;
left: 0px;
z-index: 1 }
img.st2 { position: absolute;
top: 180px;
left: 60px;
z-index: 2 }
-->
</style>
</head>
<body>
<div>
<img class="st1" src="images/shoki.jpg" width="225" height="315"
alt="鍾馗像" onMouseover="this.style.zIndex=3"
onMouseout="this.style.zIndex=1"> <!-- １行で記述してください -->
<img class="st2" src="images/hana.png" width="200" height="175"
alt="花の絵"> <!-- １行で記述してください -->
</div>
</body>
</html>
入力が終わりましたらいつものように半角小文字で、
test_21.html と必ず拡張子「.html」を忘れないようにして保存します。
保存後、ダブルクリックしてブラウザで見てください。
（保存するHTML文書名は、ご自分で好きな名前をつけてもかまいません。）
サンプルHTML実行結果URL
http://www.scollabo.com/banban/magazine/sample/mmsample_025.html
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
◆解説
<meta http-equiv="Content-Script-Type" content="text/javascript">
HTML文書内にスクリプトが記述されていることをHTTPサーバに伝えます。スク
リプトを完全に動かすために、必ず記述するように心がけましょう。
なお、スクリプトはこの他に、VBScriptもあります。
div { margin: 0px }
１つのボックスです。すべての余白を除きます。この中にインラインレベル要
素を書き込みますので、あえて設定しました。
img.st1 { position: absolute; top: 0px; left: 0px; z-index: 1 }
画像を表示させる要素を絶対位置で指定しました。また、表示の重ね順は一番
下のレイヤーとしました。
img.st2 { position: absolute; top: 180px; left: 60px; z-index: 2 }
画像を表示させる要素を絶対位置で、レイヤーの重ね順を上に設定しました。
位置は、上から 180ピクセル、左から60ピクセルとして、最初の画像より少し
オフセットさせています。
onMouseover="this.style.zIndex=3" onMouseout="this.style.zIndex=1"
JavaScriptで利用できるイベントハンドラ。マウスが重なった時、マウスが外
れた時に発生する動きを利用しています。しばしば使われるイベントハンドラ
です。
イベントハンドラとは、ユーザがマウスをクリックしたり、動かしたりする
瞬間に発生させるもので、ブラウザはこれを監視しています。JavaScriptでは
これらのイベントをハンドリング（動かす）させるためのものとして、イベン
トハンドラを数種用意しています。
（詳しくはこちら http://www.scollabo.com/banban/java/jvs_004.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">
<!--
div { margin: 10px 50px }
h1 { display: inline;
color: #f00 }
span { display: block;
color: #090;
font-size: x-large }
-->
</style>
</head>
<body>
<div>
<h1>見出し要素</h1>
通常、見出し要素は前後に改行を持っていますが、ここではインラインレベル要
素として働いています。
<p>
<span>インラインレベル要素</span>
インラインレベル要素は、通常前後に改行も空白がありませんが、ここではブロ
ックレベルとして働いています。</p>
</div>
</body>
</html>
入力が終わりましたらいつものように半角小文字で、
test_22.html と必ず拡張子「.html」を忘れないようにして保存します。
保存後、ダブルクリックしてブラウザで見てください。
（保存するHTML文書名は、ご自分で好きな名前をつけてもかまいません。）
サンプルHTML実行結果URL
http://www.scollabo.com/banban/magazine/sample/mmsample_027.html
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
◆解説
div { margin: 10px 50px }
１つのボックスを設定しました。上下に10ピクセル、左右に50ピクセルの余白
を持たせ、この中にコンテンツを配置しました。
h1 { display: inline; color: #f00 }
見出し要素をインラインレベルと同じ表示にさせるように設定したものです。
当たり前のことですが、この機能はブロックレベル要素に適用されます。
文字色は赤色にしました。
span { display: block; color: #090; font-size: x-large }
インラインレベル要素をブルックレベルと同じ表示に設定したものです。
当たり前のことですが、この機能はインラインレベル要素に適用されます。
文字色は緑色色に、文字の大きさをかなり大きく設定しました。
display属性の値はこの他に、
list-item リストアイテム要素に変換される。li要素と同じ働きをします。
none 指定された要素は表示しませんが、その分の領域は余白として確
保されます。
あまり使う機会はないと思いますが、ブロックレベル要素やインラインレベル要
素をそれぞれ転換させて配置させる方法があることを覚えておくといいでしょう。
配置のコントロールに関する方法は他にもありますが、いずれ応用編の中で説明
していきます。
今回はここまで、ではでは・・
今週のおさらいはＷｅｂページにも掲載しましたので、是非見ておいてください。
ＷｅｂページはHTML分の実行結果のサンプルもあり、より分かりやすく説明して
います。あわせて過去の記事のおさらいも掲載しています。
（今週のおさらい）
http://www.scollabo.com/banban/magazine/backnm_017.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
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
＜えでぃた〜ず・るーむ＞
先週、アメリカの調査会社 Stat Market社が発表した世界中のブラウザの市場シ
ェアで、MSIEが何と、96％に達したと報じられました。
なお、欧州、中東、アジア地域では、アメリカの３倍くらいのNetscapeユーザ
がいることも報じています。
世界で利用されているウエブ・ブラウザの市場シェア（2002年8月26日現在）
Microsoft: 95.97 %
Netscape: 3.39 %
その他: 0.64 %
４〜５年前には、Netscapeのシェアは７割を大きく超えていたのでしたが、最
近ＡＯＬに買収されて以来シェアを落とし、また、容量が重くなってしまったの
も、嫌われる要因になったのだと思います。今後はＡＯＬユーザのみのブラウザ
となってしまうのかもしれません。ブラウザの老舗なのに、寂しいものです。
MSIEの強みは、Windowsや Mac OSに標準でバンドルされているのが大きな要因
でしょう。ある意味ではブラウザ戦争の終焉を迎え、MSIEが事実上の標準になっ
てしまった感すらあります。
しかし、１社の寡占状態は危険だなとも感じています。
StatMarket http://www.statmarket.com （英文）
Netscape http://wp.netscape.com/ja/ （Version7.0 日本語版正式公開）
Opera http://jp.opera.com/ （Version6.05 日本語版公開）
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
◆著作権について
個人がご自分のＰＣに保存して利用する以外の記事の転載、引用は基本的に応じ
ておりません。記事中の内容について、無断で使用することを固く禁じます。
なお、記事中のスタイルシート、HTMLをご自分のページ作成にご自由に使って
いただいても差し支えありません。
Copyright(C) 2002 www.scollabo.com/banban/
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
Copyright(C) 2002-3003 banban@scollabo.com