毎週金曜日配信 What's New 2002/8/30
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
初心者のためのホームページ作り
http://www.scollabo.com/banban/
＜第16号＞
banban@scollabo.com
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
この講座はタグを覚えてテキストエディタだけでホームページを作るという、ど
ちらかというとやや専門的な作業が中心になります。各種の専用のオーサリング
ソフトとは一線を画して、思い通りのプロ並みのＨＰを作ることが出来ます。
時には専門的で難解な言葉も出てきますが、なるべく初心者にも分かりやすく
解説していきます。どうぞ、気軽な気持ちでお付き合いください。講座をすすめ
る中で分からない点があったら遠慮なくメールください。
当講座ではHTML4.01を中心とした文法が主体となっています。なお、このマガ
ジンは等幅・等長フォントでお読みいただくと快適に読めるようになります。
今週の課題■ 配置のコントロール その１
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
◆HTML4.01Strict における配置の指定
数年前、正確には４年前まで、HTMLのバージョンは 3.2でした。この仕様のコン
テンツの配置を指定するのはとても楽でした。
<center>という要素がすべてを一律にセンタリングするものが使えて、センタ
リングを解除するのもたった１行 </center>で済んだものでした。
また、align属性でもいろいろなコンテンツに使え、簡単に位置指定ができまし
た。例えば、<table align="center"> というように。
しかし、HTML4.0が登場してから、W3Cはそれらの要素、属性は使わないように
しましょうと勧告したのです。文書を論理構造として記述するために、物理的な
タグや見栄えを指定する属性など（ビジュアルデザインに関する記述））を廃止
しようという動きが出てきたのです。
ただし文書型宣言を過渡期の仕様として、 Trasitionalと記述することで、今
までの要素と属性が使えるようになります。が、いずれそれも廃止されてしまう
ことが決定されている以上、いつまでも「古い」手法を使うわけにはいきません。
今回は、HTML4.01Strictの中で使える要素、属性を駆使し、なおかつスタイル
シートを利用して、私なりの手法で考えた配置のコントロールを２回にわたって
お伝えしようと思います。
今回の講座の中身は、ある意味で今まで学んだことの実戦的な応用や裏技的な
ところが多々あります。
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
まず最初に、まったく位置の指定やスタイル付けしていない素のHTML文書を作り
ましょう。そしていろいろな要素やスタイルシートを足して変化させていきます。
いつものようにテキストエディタ（SmpleTextやメモ帳など）を起動させて、
下記のように入力してください。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=SHIFT_JIS">
<title>初心者のためのホームページ作り</title>
</head>
<body>
<h1>初心者のためのホームページ作り</h1>
<p>
<img src="images/title.gif" width="250" height="88" alt="タイトル">
初心者がテキストエディタだけでプロ並みの表現力を目指して Webページを
作るための講座です。どなたでも専用のソフトウェアを使うことなくタグやスタ
イルシートを覚え、正しい文法と Web上の作法を身につけて、本格的な Webペー
ジを作ることができます。 <!-- １行で記述してください -->
</p>
<p><strong>ブラウザの種類</strong></p>
<dl>
<dt>Microsoft Internet Explorer</dt>
<dd>圧倒的なシェアを誇るマイクロソフト社のブラウザです。</dd>
<dt>Netscape</dt>
<dd>かつて、JavaScriptを開発した老舗のブラウザです。</dd>
<dt>Opera</dt>
<dd>新進気鋭のブラウザで、軽くて高機能な特徴を持っています。</dd>
<dt>Lynx</dt>
<dd>テキストブラウザの代表的な存在です。慣れないと操作が難しい。</dd>
</dl>
</body>
</html>
入力が終わりましたら、保存します。ブラウザで表示させる保存方は、半角小文
字で拡張子、「.html」を忘れないようにします。
ここでは、test_20.html としておきましょう。ただし、ご自分で好きな文書
名にしていただいても、まったく問題ありません。拡張子さえ忘れないようにし
てください。
保存後、HTML文書をダブルクリックしてブラウザで見てください。何となく締
りのないページになっているはずです。
でも、コンテンツさえ優れているならばこれでもかまわないと思います。
上記HTMLの実行結果URL
http://www.scollabo.com/banban/magazine/sample/sample_019.html
なお、HTML文中で使用した画像は本誌サイトの教材よりダウンロードしたもの
を使っています。まだダウンロードしていない方は、下記サイトより入手してく
ださい。
http://www/scollabo.com/banban/daf/material.html
画像は圧縮されています。解凍後にこの講座でいつも使用しているフォルダに
「images」という名のフォルダを作ってその中に移動して置いてください。つま
り、パスの関係があるための処置です。
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
◆解説・・今回はいままでのおさらいの意味を含めて詳しく説明します。
すっかり理解されている方は読み飛ばしていただいて結構です。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
文書型宣言です。HTMLを記述する上で、どのバージョンのHTMLを使用するのか
を必ず宣言しなくてはいけません。ここでは、HTML4.01のStrict型を使用して
います。（詳しくは第３号）
<html lang="ja">
HTMLがここから始まることを意味しています。終了タグは </html> です。
lang="ja" このHTMLがどのような言語でかかれているかを表わします。必須の
属性です。ja＝日本語、en＝西ヨーロッパ言語（英語）などがあります。
<head> 〜 </head>
ヘッダ部といってHTML文書の情報を記述し、HTTPサーバやブラウザにその情報
を受け渡します。通常、ヘッダ部では title要素以外にブラウザで表示するも
のは何もありません。詳しくは10月よりの応用編で解説します。
<meta http-equiv="Content-Type" content="text/html; charset=SHIFT_JIS">
HTML文書で使用する言語コードの設定です。この設定を忘れると文字化けする
可能性が非常に大きくなります。（詳しくは第３号）
設定できる日本語の言語コードは３つあります。
SHIFT-JIS WindowsやMacintoshでは初期設定がこの言語です。
ECU-JP UNIX系の日本語言語コードです。
ISO-2022-JP いわゆるJISの言語コードです。私はこれを使用しています。
記述は大文字でも小文字でもかまいません。
それぞれの言語では、改行コードが異なったりします。使用するテキストエデ
ィタの言語とマッチした言語コードをお使いください。SimpleTextやメモ帳で
は、SHIFT-JISをお使いください。他のコードでは文字化けします。
Conten-Type については10月からの応用編で解説します。
<title>初心者のためのホームページ作り</title>
HTML文書のタイトルとなります。これはブラウザの一番上のバーに表示され、
また、「お気に入り」に追加する際のキーワードにもなります。できれば文書
の内容が理解できるようなタイトルをつけたいものです。
なお、日本語でタイトルを書く場合は、言語コードを設定した後に記述しま
す。先に記述した場合、文字化けの可能性があります。
<body>
HTMLの本文に当たるもので、ここから </body>までがブラウザに表示されるコ
ンテンツとなります。この中にコンテンツに対して多様なマークアップを記述
してブラウザ上に表示させます。
<h1>初心者のためのホームページ作り</h1>
見出しを表わす要素が、h1です。h1からh6まであり、一般的にh1が一番大きな
フォントで表示されます。なお、フォントの大きさを変化させるために用いる
記述法は文法違反となります。あくまでも見出しとして使うようにします。
ブロックレベル要素で改行されて表示します。
<p> 〜 </p>
段落を表わすブロックレベル要素です。一般的に改行されて表示します。
<strong>ブラウザの種類</strong>
strong要素に囲まれたテキスト（文字列）は強調され、一般的に太字で表示さ
れます。インラインレベル要素。
<dl> 〜 </dl>
定義付きリストを表わすブロックレベル要素です。リスト項目に補足的な説明
を加える時には便利な要素です。
必ず、<dt> 〜 </dt>、<dd> 〜 </dd> と共に使用されます。
ブロックレベル要素とは、見出しや段落、ボックスやリスト、テーブルなど１つ
のかたまりを表わし、改行されて表示します。
インラインレベル要素とは、通常の文字列と同等に扱われ、前後に空白や改行は
発生しません。また、インラインレベル要素は、必ずブロックレベル要素の中で
記述しなければなりません。例えば、
<body> <body>
<strong>ブラウザの種類</strong> <p>
</body> <strong>ブラウザの種類</strong>
</p>
これは誤りです。 </body>
これが正解です。
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
それでは、先ほど作ったHTML文を変更させていきます。その前にどう変更させる
かを簡単に述べておきましょう。
◆ポイントとなるスタイルシート・・余白の設定
位置をきめ細かく指定するには、ブラウザの特質を理解する必要があります。
ブラウザの多くが４隅に少しばかりの余白（マージン）を持っています。これ
を無くさなければなりません。そのために、スタイルシートは必須アイテムにな
ります。
余白を無くす記述は、
body { margin: 0px } たったこれだけです。
しかし、面白いことに Operaというブラウザはマージンは持っていないけれど
パディング（コンテンツの内側の余白）を持っています。これも無くしておきま
す。記述法は、
body { margin: 0px; padding: 0px }
これですべての視覚系ブラウザの一切の余白を取り除いてしまいます。
■ 見出し要素の位置
まず、見出しとなっている、<h1>初心者のためのホームページ作り</h1> これ
をセンタリングで表示させたい場合、
h1 { text-align: center }
この１行だけで簡単にセンタリングできます。右寄せしたい場合は、right を
記述するだけです。左寄せの場合は何もしなくても左に寄ります。
■ 画像と文字の回りこみ
画像の周りに文字を回りこませて位置を整えたいと思います。画像を左に寄せて
その周りのテキスト（文字列）を回りこませるのは
img { float: left; margin-right; 10px }
画像を左に配置し、画像と文字の間の余白を10ピクセル設けて、画像と文字が
くっつき過ぎないようにします。もし、画像を右寄せにしたい場合は
img { float: right; margin-left; 10px } と書き直します。
■ リストの表示
リストアイテム要素を表示させる時、ブラウザは勝手に余白を表示してしまいま
す。これを打ち消して字下げをすることで引き締まってきます。
ついでに上側と左側に枠線を配して文字色を変えて１つの段落のように表示さ
せます。（第12号を参照してください。）
dl {margin: 0px }
dt { border-top: 3px double #fc0; border-left: 3px double #fc0;
color: #009; font-weight: bold; text-indent: 0.5em }
dd { margin: 0px; text-indent: 1em }
■ 全部を１つのボックスの中に入れてしまう。
上記のすべてを１つのボックスの中に入れてしまいます。ボックスには左右均等
の余白を設けて全部の要素が同じように配置できるよう表示させます。
div { margin-left: 15%; margin-right: 15% }
これでスタイルシートができました。とりあえずこれをヘッダ部に挿入してどの
ような表示になるかを確認してみましょう。
さきほどの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 { margin: 0px; padding: 0px }
div { margin-left: 15%;
margin-right: 15% }
h1 { text-align: center }
img { float: left;
margin-right; 10px }
dl { margin: 0px }
dt { border-top: 3px double #fc0;
border-left: 3px double #fc0;
color: #009;
font-weight: bold;
text-indent: 0.5em }
dd { margin: 0px;
text-indent: 1em }
-->
</style>
</head>
<body>
<div>
<h1>初心者のためのホームページ作り</h1>
<p>
<img src="images/title.gif" width="250" height="88" alt="タイトル">
初心者がテキストエディタだけでプロ並みの表現力を目指して Webページを
作るための講座です。どなたでも専用のソフトウェアを使うことなくタグやスタ
イルシートを覚え、正しい文法と Web上の作法を身につけて、本格的な Webペー
ジを作ることができます。 <!-- １行で記述してください -->
</p>
<p><strong>ブラウザの種類</strong></p>
<dl>
<dt>Microsoft Internet Explorer</dt>
<dd>圧倒的なシェアを誇るマイクロソフト社のブラウザです。</dd>
<dt>Netscape</dt>
<dd>かつて、JavaScriptを開発した老舗のブラウザです。</dd>
<dt>Opera</dt>
<dd>新進気鋭のブラウザで、軽くて高機能な特徴を持っています。</dd>
<dt>Lynx</dt>
<dd>テキストブラウザの代表的な存在です。慣れないと操作が難しい。</dd>
</dl>
</div>
</body>
</html>
入力が終わりましたら上書き保存してください。
HTML文は、<div> 〜 </div> を挿入しただけでまったく変わりません。単純にス
タイルシートをヘッダ部に記述しただけです。
これこそ、HTMLの文書構造（コンテクスト）から、ビジュアルデザインを分離
した記述となります。
このことによって、音声ブラウザでもテキストブラウザでも、あるいは点字ブ
ラウザでも制作者の意図が正しく伝えられます。HTMLをシンプルにすることによ
ってバリアフリーな心優しいWebページが構築できるのです。
また、スタイルシートを外部に置いて、HTMLに読み込ませる手法ですと、もっ
とHTML文はシンプルになります。これについては応用編で詳しく解説します。
上記HTMLの実行結果URL
http://www.scollabo.com/banban/magazine/sample/sample_020.html
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
◆絶対位置の指定
テキストやオブジェクトなどのコンテンツを初めから位置を指定してしまう方法
があります。
この方法を「絶対位置」といって、やはりスタイルシートで記述します。
構文 { position: absolute } （このままでは意味がありません）
位置指定 { position: absolute; top: 0px; left: 0px }
コンテンツの位置を絶対位置と指定してから、左から０ピクセル、上から０ピ
クセルと座標位置を設定する構文です。数値はピクセル単位となります。
なお、position: absolute だけではあまり意味が無いので、必ず位置を指
定して使います。
ただし、この方法で位置を指定してしまうと、他のコンテンツとダブってしま
う場合が多々あります。
つまり、通常、コンテンツはブラウザの上から下へ順に表示されます。絶対位
置の指定は、決められた位置で表示するのですが、他のコンテンツに指定がない
場合、絶対位置で指定されたコンテンツの位置を無視して、上から順に表示しコ
ンテンツが重なってしまいます。
その点を考慮しながら、文書構造を設計する必要があります。
参考HTML
http://www.scollabo.com/banban/magazine/sample/mmsample_021.html
コンテンツを絶対位置で指定する状況はどんな場合があるでしょうか？
例えば、画像に画像を重ねる、画像に文字列を重ねるという時には重宝なスタイ
ルシートです。
簡単な位置指定をするHTMLを作って確かめてみましょう。テキストエディタを
起動して新たに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.header { position: absolute;
top: 0px;
left: 50px }
div.sub { position: absolute;
top: 25px;
left: 150px }
div.body { margin-top: 120px;
margin-left: 50px;
margin-left: 50px }
h1 { color: #f00 }
-->
</style>
</head>
<body>
<div class="header">
<img src="images/title.gif" width="250" height="88" alt="タイトル">
</div>
<div class="sub">
<h1>初心者のためのホームページ作り</h1>
</div>
<div class="body">
初心者がテキストエディタだけでプロ並みの表現力を目指して Webページを
作るための講座です。どなたでも専用のソフトウェアを使うことなくタグやスタ
イルシートを覚え、正しい文法と Web上の作法を身につけて、本格的な Webペー
ジを作ることができます。 <!-- １行で記述してください -->
</div>
</body>
</html>
入力が終わりましたら、保存します。ここでは、test_20.html としておきます。
何度も同じことでしつこいようですが、絶対に拡張子を忘れないで下さい。
上記HTMLの実行結果URL
http://www.scollabo.com/banban/magazine/sample/sample_022.html
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
◆解説
div.header { position: absolute; top: 0px; left: 50px }
ボックス header を上から０ピクセル、左から50ピクセルの座標に絶対位置を
指定しました。この中にコンテンツを記述します。
div.sub { position: absolute; top: 25px; left: 150px }
同じくボックス sub を上から25ピクセル、左から150ピクセルの座標に絶対位
置を指定しました。同様にこの中にコンテンツを記述します。
div.body { margin-top: 120px; margin-left: 50px; margin-left: 50px }
ボックス body の余白を設定しました。上からの余白は、絶対位置を指定して
いるコンテンツと重ならないように十分な高さを設定しています。
左右の余白は、50ピクセルに設定し、全体の位置のバランスを取りました。
h1 { color: #f00 }
見出し要素 h1 の文字色を赤に設定しました。
<!-- １行で記述してください -->
何故、１行で記述するのかは、ブラウザによってテキスト（文字列）をHTMLの
途中で改行させると不意なスペースが発生する場合があります。本来、ブラウ
ザは改行はまったく無視しなければならないのですが、このような現象が発生
してしまうブラウザが存在します。そのために１行改行なしで記述します。
テキストエディタでHTMLを記述する場合、テキストエディタが自動改行する
のは問題ありません。ブラウザ側で改行なしの１行と判断してくれます。
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
（Tips）マージン（余白）の指定方法 ---- CSS
margin（マージン・コンテンツの外側の余白）の指定方法はいくつかあります。
覚えておくと大変便利です。
■ マージンの指定は、数値＋単位で行います。
構文 div { margin: 10px } あるいは、 div { margin: 10% }
単位はピクセル、％、そして文字の大きさ（em、ex）が使えます。文字の大き
さとは、em＝英大文字Ｍの大きさ、ex＝英小文字ｘの大きさなどが適用されます。
構文 div { margin: 2em } あるいは、 div { margin: 10ex }
（文字の大きさはこのほかに、パイカ、ポイント、ミリ、センチ、インチなどが
あり、それぞれ適用されます。詳しくは第６号をお読みください。）
■ マージンをどこに指定するかという記述もいくつかあります。
構文 div { margin-left: 30px }
（ n は数値＋単位）
margin-top: n コンテンツの上側の余白の設定。
margin-bottom: n コンテンツの下側の余白設定。
margin-left: n コンテンツの左側の余白の設定。
margin-right: n コンテンツの右側の余白の設定。
また、まとめて設定する方法もあります。
margin: n コンテンツの余白の上下左右を一括で設定
margin: n n コンテンツの上下、左右の順で余白を同時に設定
margin: n n n コンテンツの上、左右、下の順で余白を個別に設定
margin: n n n n コンテンツの上、右、下、左の順で余白を個別に設定
（数値＋単位間は半角スペースです。）
例： div { margin: 1em 10% 15px }
これは、上側の余白を１文字分、左右を一括で10％分、下側の余白を15ピクセ
ル分と設定した構文です。
■ paddingの設定
上記の設定は、padding（コンテンツの内側の余白）の設定にも使えます。
数値＋単位、構文もまったく同じです。
例： padding-top: n あるいは、 padding: n n n
マージンとパディングの違い
マージンはコンテンツの外側に指定されるために、指定された背景色などは適
用外となり、表示されません。コンテンツとは別の存在です。
しかし、パディングはコンテンツの１部なので、指定された背景色などが適用
され表示されます。詳しくは第５号のボックス編をお読みください。
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
今回はここまで、ではでは・・
今週のおさらいはＷｅｂページにも掲載しましたので、是非見ておいてください。
ＷｅｂページはHTML分の実行結果のサンプルもあり、より分かりやすく説明して
います。あわせて過去の記事のおさらいも掲載しています。
（今週のおさらい）
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/daf/archive.html
講座教材の配布 http://www.scollabo.com/banban/daf/material.html
配信の変更・中止はこちらです。
個別の手続きは受け付けていませんので、ご面倒でも各自でお願いできれば助か
ります。
当サイトにて http://www.scollabo.com/banban/magazine/magazine.html
まぐまぐにて http://www.mag2.com/m/0000090196.htm
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
＜えでぃた〜ず・るーむ＞
先日、フランスに住む読者から質問のメールがありました。海外に住む読者は、
私が知る限りでは、アメリカと韓国にもそれぞれ１人おります。
マガジンを通したコミニケーションの輪が世界中に広がっていることは、非常
にうれしく感じます。そして何より距離を感じないのがいいですね。まるでお隣
に居るような感覚になります。
話によると、フランスでは、企業のホームページは多いようですが、個人で作
るページは非常に少ないそうで、本誌のようなメールマガジンも無いということ
らしいようです。
と、言っても日本でも個人のホームページが出現し始めたのは、まだたったの
６年位前あたりからだと記憶しています。メールマガジンも皆無に等しい状態で
したが、インターネットの普及が数年前から加速して、今日の隆盛に至っていま
す。アメリカや韓国と比較するとまだまだですが・・
質問のメールは非常にたくさんお寄せいただいております。なるべく早めに返
答を出すように努力していますが、平日の昼間は会社勤めなので遅れる場合があ
りますので、その点をご了承ください。
また、各質問に対して、できる限り分かりやすいように説明していますが、時
には説明不足があるかと思います。できましたら、その説明が理解できたのかど
うかを返信していただけると助かります。
中には、返答を出しても何もレスポンスが無く、本当に理解できたのか心配に
なります。多くの読者は、必ずレスを返していただいています、これもある意味
では、ネチケット（ネット上のマナー）ではないかと思います。
この講座が始まった当初、多分若い女性だと思うのですが、何回か質問と答の
やり取りをした後、最後に１行だけ「できました。ありがとうございます。」と
返ってきたときには、本当にホッとして「よかった、よかった」と私もうれしく
なりました。
なお、質問に際して、メールアドレスを知られるのが嫌という方は本誌サイト
の BBS掲示板をご利用ください。メールアドレスの入力は任意になっています。
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
◆著作権について
個人がご自分のＰＣに保存して利用する以外の記事の転載、引用は基本的に応じ
ておりません。記事中の内容について、無断で使用することを固く禁じます。
なお、記事中のスタイルシート、HTMLをご自分のページ作成に自由に使ってい
ただいても差し支えありません。
Copyright(C) 2002 www.scollabo.com/banban/
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
Copyright(C) 2002-3003 banban@scollabo.com