初心者のためのホームページ作り:第5号

                  毎週金曜日配信 What's New 2002/6/14
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
            初心者のためのホームページ作り
            http://www.scollabo.com/banban/
                <第5号>

 当講座はタグを覚えてテキストだけでホームページを作るという、どちらかと
いうとやや専門的な作業が中心になります。

 マイクロソフトの FrontPageや IBMのホームページ・ビルダーとは一線を画し
て、思い通りのHPを作ることが出来ます。

 時には専門的な難解な言葉も出てきますが、なるべく初心者にも分かりやすく
解説していきます。どうぞ、気軽な気持ちでお付き合いください。

 当講座ではHTML4.01を中心とした文法が主体となっています。講座をすすめる
中で分からない点があったら遠慮なく質問のメールをください。

 なお、このマガジンは等幅・等長フォントでお読みください。

 今週の課題■今までのおさらい
      ■ボックスを作る

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

◆このマガジンについて

 当マガジンではHTML4.01に基づいて講座を進めています。この意味だけでも他
の数ある同様のメールマガジンとは一線を画しております。

 それはW3C(World Wide Web Consortium)という非営利団体が現在勧告、推奨
している HTML4.01バージョンによる文法を中心としているからです。
(W3Cとは、HTMLのすべての文法の管理やWebに関するさまざまな手続きを総合的
に管理している組織で、多くのブラウザメーカー、ソフトウェアメーカーが会員
になり、日々、開発をしています。)

 HTML4.01の作法では、使ってはいけないタグや属性があります。今まで使い慣
れていたものが突然使えないというのは戸惑うばかりですが、 W3Cでは、現在が
その移行期間として捉え、多くの Web制作者たちに一刻も早くHTML4.01に則った
文法を取得するよう奨めています。
(実は、ホームページ制作会社ですら、誤った文法で商売をしているのです。ま
ったく情けない話です。でも、それが現実でもあります。)

 この講座では、そうした現実に目を向けながら、HTML4.01の文法を踏襲して、
進めていきたいと考えております。

 当講座の中身について、初心者にとって、ややもすると難解で高度な内容にな
る場合もあります。出来るだけ噛み砕いて分かりやすいように解説を加えており
ますが、もしかしたら私の独断による思い上がりにより、チンプンカンプンにな
ってしまう場面もあると思います。

 分からないことを分からないで終わらせることは、精神衛生上よろしくありま
せん。どのようなことでもかまいません、質問してください。「こんなことを聞
くのは、ちょっと・・」なんて思わないで下さい。

 どんな人でも必ずプロ並みの表現力を持てます。確かに WebMasterへの道のり
は決して安易なものではないですが、最初は真似事からはじめてください。そし
て、たくさんミスをしてください。ミスしなければ上達しません。ミスの積み重
ねが WebMasterの近道ですから。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

◆ここまでのおさらい

 講座が進むにつれ、だんだんと難しくなってきます。特にHTML4.01では文法的
に制約がたくさんあって困惑することが多いと思います。

 そこで、過去4回にわたって配信してきた講座の中で、ポイントとなるものを
もう一度おさらいをしておきましょう。

■HTML文書の構造

 HTML文書は通常下記の通り、大きく2つの分かれて記述されます。

ヘッダ部 <head>〜</head>  ここにHTTPサーバーやブラウザに対してHTML文書
          の持つさまざまな情報を埋め込みます。唯一ここで記述されている中
     でブラウザに表現できるのは、<title>〜</title> に書くHTML文書の
     タイトル名だけです。

body部  <body>〜</body> ここで記述されたものがブラウザに表現できるすべ
     てです。ここの中に表示したい内容(コンテンツ)をタグで囲って書
     き込みます。

 なお、最上位として<html>タグがあり、文書全体をこれで囲みます。また、そ
れぞれの終了タグは省略できません。

 <html>
 <head>
  HTML文書の情報や定義づけを行う
  </head>

  <body>
  コンテンツを記述する
  </body>
  </html>

■タグと要素の構造の復習

<p class="test1">初心者のためのホームページ作り</p> の場合、

p =要素 class =属性 "test1" =値 と呼びます。

要素という言葉はよく出てきます。通常、要素とは<p> のようにタグそのものを
呼ぶ場合と <p class="test1">までの属性と値まで指して言う場合が多いようで
す。また、<p>〜</p>まで、コンテンツを含んで指す場合もあります。

 タグは単に<p> とか<body>というように要素そのものだけを指します。属性と
は、要素そのものに対してどのような表現をするのかを指示し、また、値は属性
の指示に対して具体的な形式や数値等をあらわします。

例えば、
 <body bgcolor="#00ff00"> という場合、
body要素に対して、背景色の指示(bgcolor)は、緑("#00ff00")という具合で
す。
(注:<body bgcolor="#00ff00"> という記述は、HTML4.01では非推奨とされて
います。)

■スタイルシートの基本的な構造の復習

 スタイルシートの構造はセレクタ(選択部)と宣言部により構成され、宣言部
は属性(プロパティあるいはアトリビュート)と値で構成されています。

body { background-color: #ffffcc; color: #000000 } の場合、

body(セレクタ)、{ background-color 〜 #000000 }(宣言部)

そして宣言部に
background-color(属性)、#ffffcc(値)
color(属性)、      #000000(値)となります。

宣言部は { } で囲みます。

また、要素中にスタイルを記述する場合は、
 <body style="background-color: #00ff00">
となって、style=属性、"background-color: #00ff00"=値となります。

なお、将来の XHTML、XMLに向けて、値はダブルコーテーション「 " 」で囲む癖
を、つけるようにしましょう。(私も反省…)

■汎用属性…id属性とclass属性

id="固有の名前"
id属性は、要素に対して固有の名前(拡張子)をつけるための属性です。ひとつ
のHTML文書中の複数の要素に対して、同じ名前を付けることは出来ません。つま
り、ひとつのHTML文書中に1回しか使えません。
 この属性はスタイルシートのセレクタやスクリプトからの参照、リンク先とし
て使用しますが、ここでつける名前には、大文字と小文字が区別されるので、注
意が必要です。

(記述方法)
 スタイルシート #test { cokor: #ff0000 }  (注: #をつける)
  HTML文書    <p id="test">こんにちは</p>

clsaa="分類名"
class 属性は、要素に対して分類上の名前を付けるための属性です。id属性と異
なり、同一のHTML文書中で複数の要素に同じクラス名を持つことが出来ます。つ
まり、何度も使えます。ここでもつける名前には、大文字と小文字が区別される
ので、注意が必要です。

(記述方法)
 スタイルシート .test { cokor: #ff0000 }  (注:ピリオドをつける)
  HTML文書    <p class="test">こんにちは</p>
         <div class="test">こんばんは</div>

■DTD(文書型宣言)における記述

 第3号で文書型宣言について述べました。多くの読者から
Strictを宣言すると何故、<body bgcolor="#00ff00"> が使えないのかと質問が
ありました。

 HTML4.01Strictの文書宣言は、廃止予定のものは一切使えません。したがって
この場合、属性の bgcolorが使えないのです。非常に厳格な文法しか認められて
いません。
 つまり、Strictから見た bgcolor属性は「非推奨」として扱われます。

 Strictの宣言ではスタイルシートに記述するよう求めており、上記の記述を使
う場合は、Transitionalを宣言する必要があります。
 Transitional宣言では、今後廃止される要素や属性が記述できる過渡的な宣言
です。いずれこの宣言も廃止される予定ですが、個人的な感想としては、かなり
先になると思われます。1年や2年といったレベルではないと思います。

■継承…要素の親子関係

 例として下記のHTML文書で説明します。

<html>
<head>
<title>サンプル</title>
</head>

<body style="bacground-color: #ffc; color: #000; font-size: 12pt">
<p style="color: #00f">初心者のための<strong>ホームページ作り</strong>の
講座です。</p>
</body>
</html>

 これをツリー(木)構造で説明すると

      <head>――<title>
<html>――――|
      <body>――<p>――<strong>
と、なります。

 <body>で設定された背景色、文字のサイズは <p>に受け継がれます。
これは <p>の親になるのが、<body>になります。ただし文字色の設定が <p>でさ
れているため、これだけは継承されません。
<strong>は <p>の中で使われるため <p>で設定された文字色が、受け継がれます。
つまり、<strong>の親は <p>であることが分かります。
 これらを「継承」と呼び、要素に親子関係が成立します。

◆ポイント

 body要素で設定した背景色や文字の大きさ、文字色などは他の要素にも「継承」
します。ただし他の要素が個別にそれらを設定した場合は、そちらが優先して表
示するようになります。

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
「ここまでのおさらい」は今後、適時設けるようにします。特に質問の多いもの
に対しては積極的に掲載します。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

今週の講座の前の基礎知識として

◆ブロックレベル要素(ブロックレベルエレメント)
ブロックレベル要素としては、下記の要素があります。
address、blockquote、dir、div、dl、fieldset、form、h1〜h6、hr、isindex、
menu、noframes、ol、p、pre、table、ul

これらのほとんどに前後に改行が入ります。この要素をうまく使い分けて段落を
構成します。div に関してはスタイルシートで様々にアレンジを施して、自分な
りの段落を作り上げることができます。私のサイトでは、ほとんどがこのdiv 要
素を使って、段落を設定しています。

◆インラインレベル要素(インラインエレメント)
インラインは通常の文字と同じで、何も余白や改行はありません。インラインレ
ベル要素の場合、パディング、マージンという概念がありません。そのためタグ
で囲った周囲にスペースはありません。

インラインレベル要素として下記の要素があります。
a、abbr、acronym、applet、b、basefont、bdo、big、br、button、cite、code、
dfn、em、i、iframe、img、input、kbd、label、map、object、q、s、samp、
select、small、span、strike、strong、sub、sup、textarea、tt、u、var

それぞれの働きについて詳しく述べていますのでご覧ください。

HTML4.01リファレンス http://www.scollabo.com/banban/ref/tag.html

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

◆ボックスを使ったホームページを作る

 ボックス(領域)とはまさに四角の領域のことであり、ページ全体がひとつの
ボックスで形成されています。

 ボックス領域はマージン、パディング、ボーダー(枠線)とコンテンツから成
り立っています。これらは通常あまり見られないので意識することがないと思い
ますが、今回はスタイルシートを<head>〜</head>内に用いて様々な箱を作ります。
もちろんはこの中にはコンテンツが入ります。

 ボックスという概念はスタイルシートの登場で初めて具現化したものだと思い
ます。ボックスをスタイルシートなしで表現するのは少し無理がありそうです。

 メモ帳とか 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     { background-color: #ffc; 
      font-size: 12pt; 
           color: #000 }
div.test  { border: 2px solid #f00; 
            color: #006; 
            line-height: 135%;
      padding: 10px }
span     { color: #c30 }
h2       { font-size: 20pt; 
           font-weight: bold; 
           text-align: center }
-->
</style>
</head>

<body>
<h2>これはボックスを使ったページです</h2>
<div class="test">
初心者のためのホームページ作りの勉強をしています。今週はボックスを中心と
したページの勉強をしています。だんだん<span>本格的</span>になりました。
</div>
</body>
</html>

「Shift_Jis」のアンダーバー「 _ 」は キーボード右下のひらがな「ろ」です。
このキーをシフトキーを押しながらタイプします。<div>〜</div> 内のテキスト
は改行なしで入力します。

入力が終わったらHTML文書として保存します。小文字で
test_02.html と拡張子 .htmlを忘れないようにしてください。
保存できたら HTML文書test_02.html をダブルクリックしてブラウザを立ち上げ
ます。うまくできたかな?

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

◆解説

スタイルシートでボックスを設定しました。ヘッダ部 <head>〜</head>の中でス
タイルシートを記述する場合、<!-- と --> と書くのはスタイルシートに対応
していないブラウザのための配慮になり、安全策のためです。

body  { background-color: #ffc; font-size: 12pt; color: #000 }
 body要素の設定で、背景色を薄いクリーム色、文字のサイズを12ポイント、文
 字色は黒としています。body要素も立派なひとつのボックスです。

div.test  { border: 2px solid #f00; color: #006; line-height: 135%;
      padding:10px }
 枠線を直線にし、色を赤としました。枠線とコンテンツの間に padding属性に
 よってコンテンツに対して、余白を10ピクセル分設定しました。またこの中の
 文字の行間を135%として読みやすい環境に、あわせて文字色は濃い青に設定し
 ています。
  なお、<div> というタグはこれだけでは何もしません。ひとつのブロックレ
 ベルを表すに過ぎない要素で、スタイルシートによって具体化します。

span { color: #c30 }
 span要素は、これだけでは何もしないのですが、スタイルシートによってこの
 要素に囲まれた文字色を赤に設定しています。span要素はインラインレベル要
 素で、通常の文字と同じように扱われ、前後に改行も余白もありません。

h2 { font-size: 20pt; font-weight: bold; text-align: center }
 h2要素は見出し要素で、ひとつの段落です。これをブロックレベル要素と呼び
 前後に改行が入ります。h2は h要素の2番目に文字サイズが大きい見出しで、
 ここでは20ポイント、太字そして位置をセンタリングに設定しました。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

◆解説……ボックスの構造

 言葉で説明するのは少し難しいですが、ボックスはマージンという目に見えな
い四角の余白があり、その内側にコンテンツを配置します。外側の余白とコンテ
ンツの間にはパディングという余白を配置することができます。また枠線を設定
できて外側の余白と内側の余白の間に配置します。

 外側の余白は親要素の色で表示されますが、内側の余白と枠線とコンテンツは
自由に色を設定できます。

マージンの設定をしてみましょう。先ほどのHTMLのスタイルシート部分を変更し
ます。
 テキストエディタで test_02.html を開いて、下記のように<head>〜</head> 
内の div.test の部分を書き直します。

div.test { margin: 20px 60px 10px 60px; 
      padding: 10px;
      background-color: #cff; 
           border: 2px solid #f00; 
           color: #006; 
           line-height: 135% }

入力が終わったら上書き保存し、ブラウザで確認してみてください。 
 div 要素で囲まれたコンテンツが、薄い青の背景色で、枠線の外の左右に60ピ
クセル分の余白があり、上側からは20ピクセル、下側からは10ピクセルの余白も
取りました。これがマージンmarginです。

 また、パディングは枠線の内側に余白をとって文字が窮屈にならないようにし
ましたが、パディングの余白は薄い青の背景色になります。

 先ほども述べたとおり、マージンは見えません。色が付かないのです。言い換
えればマージンの色は親要素であるbodyの設定した色を継承しているのです。
もし枠線が要らなかったら、border属性とその値を削除するだけです。また、マ
ージンのサイズも自由に設定できます。色々といじってみてください。

■マージンとパディングの違い
マージンはコンテンツの外側、パディングはコンテンツの一部と考えると分かり
やすいでしょう。例えば、ボックスの背景色を指定した場合、パディングには色
がつきますが、マージンには色はつきません。罫線もパディングの範囲の周りに
つきますが、マージンの外側にはつけることができません。

 ボックスは通常目に見えるものではありませんが、スタイルシートの記述によ
ってはマージン以外は見えるようになります。

 body要素もひとつのボックスです。普段意識はしていませんが、ちゃんとマー
ジンがあるのです。このマージンを消したければ

body { margin: 0px }

 とすればいいのです。これもいろいろ試してみてください。ボックスをマスタ
ーすることにより、Webデザインに大いに役立ちます。

ボックスについて詳しく説明してあるのでご覧ください。

 ボックス
 http://www.scollabo.com/banban/ht8.html

 CSSリファレンス…ボックス
 http://www.scollabo.com/banban/ref/refcss_04.html

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

◆ポイント……マージンの不思議

 ブロックレベル要素が連続した場合、マージンはどうなるでしょう。上段のマ
ージンの下側を20ピクセル取ったとして、下段の上側のマージンが30ピクセルな
ら上段と下段の間には50ピクセルのマージンがある計算になります。
 ですが、実際には30ピクセル分しか表示されません。二つのマージンが重なっ
た場合はどちらか大きい数値を優先して、ひとつだけのマージンを表示します。
覚えておいておくといいです。

今回はここまで、ではでは・・
今週のおさらいはWebページにも掲載しましたので、是非見ておいてください。
Webページは画像が使えるので、より分かりやすく説明しています。あわせて
過去の記事のおさらいも掲載しています。

(今週のおさらい)
http://www.scollabo.com/banban/magazine/

次回は、厄介なフォントについて詳しく解説します。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

◆Macintoshユーザの皆様へ

 Macintoshで、Microsoft社のInternet Explorer Ver.5.1 をお使いのユーザの
皆さんが、この講座のサイトへアクセスしたときのバグを解消しました。
 特に、HTMLコードを記載した時に、異常に長いスペースが空いてしまうことに
対処しました。

 はじめは、単なるユーザ環境の違いか、ブラウザによるものと思いそのままに
していましたが、読者からの指摘で調査してみたら、Macintosh環境の IE.5.1だ
けに発生するIEのバグであると判明し、すべてをどのブラウザで見ても同じ表示
になるように改善しました。

 原因は、ブロックレベル要素の中で、<pre> を実行する時に発生するもので、
この要素をブロックレベルから逃してやると正常になるという明らかなマイクロ
ソフト側のバグでした。同じバージョンでもWindows環境ではまったく問題なく、
その他のブラウザでも正常に表示します。
 今まで分からなかったといえ、ご迷惑をおかけしたことをお詫びいたします。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

質問・ご意見ははこちらまで→ 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

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

<えでぃた〜ず・るーむ>

 先月末に、Adobe Photoshop Ver7.0が届きました。アップグレード版なので、
比較的安く2万5000円で済んだのでしたが、新規に買うとエントリークラスのパ
ソコン(それもかなりのスペックで)が買えてしまう位高価なものです。

 早速インストールしてどう変わったか見てみると、インターフェイスの大きな
変化はなく、むしろフィルターが増え、画像のレタッチに変化を加えるツールが
多くなったのかなぁという感じですが、イメージマップやアニメーションの制作
にはさらに効果的になったような気がします。

 さすがにプロと呼ぶ人たちが使っているソフトだけあって、相当な機能を持っ
たものには違いないのですが、やっぱり高いですね。ソフトメーカーはこうやっ
てアップグレードを繰り返しながら儲けているんですね。以前のバージョンすら
完璧に使えこなせていないのにすぐにアップグレードが出てしまう現実に、少々
怒りを覚えます。
 そんなくらいなら買わなきゃいいのに、という声が聞こえそうですが、やっぱ
新しい物好きというか、欲しくなっちゃうんだよねぇ・・・

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

◆著作権について

個人がご自分のPCに保存して利用する以外の記事の転載、引用は基本的に応じ
ておりません。記事中のすべての内容についての著作権は放棄していません。
無断で使用することを固く禁じます。

      Copyright(C) 2002  www.scollabo.com/banban/
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■



Copyright(C) 2002-3003 banban@scollabo.com