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

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

  誰でもすぐ分かるHTMLタグを丁寧に解説しながら勉強していく講座です。
  講座をすすめる中で分からない点があったらメールください。

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

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

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

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

 当講座ではHTML4.01を中心とした文法が主体となっています。なお、このマガ
ジンは等幅・等長フォントでお読みください。

 今週の課題■テキストと段落

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

◆テキストを中心としたホームページを作る・・スタイルシート活用

 今回は実戦的にページを作りたいと思います。テキストを中心にページを見栄
えよく表現します。そのためにも段落を設定したスタイルシートは欠かせません。

 今回のスタイルシートの実装は外部にスタイルシートを置いてページに読み込
ませる方法を取ります。

 まず最初にスタイルシート文書を作成します。テキストエディタ(メモ帳など)
を立ち上げて下記のようにタイプします。コロン「:」、セミコロン「;」を間
違えないように入力してください。
 間違えるとスタイルシートがページに反映されません。すべて英字半角小文字
です。以前にも述べましたが、コピーするという手もありますが、ここは慣れる
ためにもしっかりとタイプして作りましょう。

body     { background-color: #ffffcc; font-size: 12pt; color: #000000 }
div.test { color: #000066; line-height: 135% }
span     { color: #cc3300 }
h2       { font-size: 20pt; font-weight: bold; text-align: center }

 ここまで入力が終わったら保存します。今まで使っていたフォルダに小文字で
test_01.css と必ず拡張子 .css をつけて保存してください。なお、記述中の空
白はブラウザは無視しますので、見やすいように適当に入れています。

 アンダーバーの入力の仕方は分かりますよね。キーボード右下の「ろ」という
ひらがながあるキーを、シフトキーを押しながらタイプします。もちろん英字半
角で行ってください。

 アンダーバーの代わりに test-01.cssでもかまいません。ただし、下記にある
HTML文書の <link> 内のスタイルシートには必ず test-01.css とタイプしてく
ださい。

 これで外部スタイルシートであるCSS文書が完成しました。
よく勘違いをされる方がおりますが、CSS文書だけでは何も起きません。CSS文書
をダブルクリックしてもブラウザが立ち上がるわけではありません。この文書は
あくまで、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">
<link rel="stylesheet" href="test_01.css" type="text/css">
<title>テキストページ</title>
</head>

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

</body>
</html>

<div>〜</div> 内のテキストは改行なしで入力します。

 入力が終わったらHTML文書として保存します。さきほど作った CSS文書と同じ
フォルダに保存します。必ず、英字半角小文字でtest_01.html と拡張子 .html
を忘れないようにしてください。

 保存できたらHTML文書 test_01.html をダブルクリックしてブラウザを立ち上
げます。うまくできたかな?

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

◆解説……スタイルシートの構造

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

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

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

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

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

◆解説……スタイルシートの記述内容

body { background-color: #ffffcc; color: #000000 }

 これは、body要素(表現するすべて)に対して、背景を薄いクリーム色、文字
を黒で表示することを設定しています。なお、ひとつのセレクタにスタイルを複
数設定する場合は、「;」とセミコロンで区切って行います。

div.test  { font-size: 12pt; color: #000033; line-height: 135% }

 div要素はブロックレベル要素ですがこのタグだけでは何もしないので属性やス
タイルシートで表現を設定します。ブロックレベル要素ですが、div だけでは前
後に改行を持つことはありませんが、ひとつの段落を意味します。ブロックレベ
ルというのは、大きな段落のかたまりを形成すると思ってください。 div要素に
対しては、好きな名前をつけてセレクタに置きます。

 ここでは、フォントサイズを12ポイント、文字の色を濃い青 #000033、文字の
行間line-height を文字の大きさの135%で、つまり、文字の大きさの35%分の空
白を設定しました。

span { color: #cc3300 }

span要素はインラインレベル要素で、上下前後に空白はありません。また<span>
タグだけでは何もしないので、スタイルシートで表現を記述します。ここでは、
文字の色をオレンジ色 #cc3300に設定しました。

h2 { font-size: 20pt; font-weight: bold; text-align: center }

 h要素(見出し要素)はブロックレベル要素で上下に空白を持っています。
このタグに数字の1〜6まで使え、<h1>が一番大きなフォントサイズで表示しま
す。ここではフォントサイズを20ポイント、フォントの字体 font-weightで太字
に、また位置関係 align を中央揃え center に設定しました。

ブロックレベル、インラインレベルについては次回の講座で説明します。

………………………………………………………………………………………………
◆汎用属性・・class(クラス)属性とID(アイディー)属性
スタイルシートでピリオド「. 」を入れて書く場合、(この場合 div.test)HTML
文書の記述は、クラス属性(class= )を用います。これが div#testの場合はID
属性(id= )で示します。

 例 CSS文書  div.test { margin: 20px; padding: 10px; border: …… }
     HTML文書  <div class="test">〜</div>

   CSS文書  div#test { margin: 20px; padding: 10px; border: …… }
     HTML文書  <div id="test">〜</div>

 ただしID属性については、同じIDは1ページ当たり1回しか使えませんので注
意が必要です。これを無視すると、表示が極端に遅くなったり、表現が無視され
る場合があります。クラス属性は何度も使えます。

………………………………………………………………………………………………
◆継承

body要素で設定した背景色は、すべての要素で通用していますね。つまり<h2>や
<div> のような他の要素に対しても背景色が同じになっています。これを「継承」
といって、親の要素であるbodyで設定された背景色、文字色、フォントサイズが
他の要素にも通じるということです。(ただし特定の要素についてはそうでない
場合があり、これも講座を進めていく中で解説します。)

 しかし、他の要素がその属性で設定してある場合は、そちらが優先されます。
<span>では、オレンジ色に設定しましたから、親要素(この場合は div要素の濃
い青)ではなくオレンジ色で表現されるわけです。 
 でも<h2>では文字色を設定していないので、親要素の色が適用されるというわ
けです。(この場合はbody要素の黒色になります。)

詳しくはこの講座のサイト内にある「要素の親子関係」
 http://www.scollabo.com/banban/lectur/ht6.html 
を参照してください。

………………………………………………………………………………………………
◆タグに記述する属性や値とスタイルシートに記述する属性や値の違い

 第1号で<center>タグや<font>は廃止予定と述べました。これは要素として廃
止予定ということで、スタイルシートにおける属性までは廃止されません。同様
に、<h1 algin="center">というふうに h1の属性として記述する align属性と
centerという値は廃止予定ですがスタイルシートにおける属性と値は廃止されま
せん。

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

 今度はスタイルシート文書(test_01.css) はそのままにしてHTMLを変えてみ
ましょう。新たに <p>という要素を使います。この要素もブロックレベル要素で
段落を表現します。前後に改行が入ります。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_Jis">
<link rel="stylesheet" href="test.css" type="text/css">
<title>テキストページ</title>
</head>

<body>
<h2>これはテキストのページです</h2>
<div class="test">
初心者のためのホームページ作りの勉強をしています。今週はテキストを中心と
したページの勉強をしています。だんだん<span>本格的</span>になりました。
</div>
<p>講座は、だんだん難しくなりますが、踏ん張り時です。</p>
<div class="test">
この講座で勉強して、必ずプロ並みの表現力を身に付けて素晴らしいホームペー
ジを作りたいと思っています。
</div>

</body>
</html>

上記のHTMLを使って自分で好きな文章に書き換えてください。Webページ作りの
楽しさが少しづつ実感できると思います。

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

さて、ここまで無事にできましたか?
時間をかけてゆっくり、ひとつづつ理解しながら作業してください。どうしても
分からない場合は、Webページの掲示板を利用するなり、直接メールください。

 次に、今度はスタイルシートだけを変更してみましょう。
テキストエディタでtest_01.cssを開いてください。
下記の通りにタイプしてください。入力できたら上書き保存してください。

body     { background-color: #cff; font-size: 12pt; color: #000 }
div.test { background-color: #6ff; color: #006; line-height: 135% }
span     { color: #c30 }
h2       { font-size: 20pt; font-weight: bold; color: #096; 
           text-align: center }
p        {font-weight: bold }

 spanはそのままで、それ以外を変えました。色の16進法の記述が3桁になって
いますが、問題ありません。
 これについては講座を進めていく中で説明します。保存できたらHTML文書をブ
ラウザで立ち上げるか、立ち上がっていたら「再読込み」もしくは「更新」ボタ
ンを押してください。

 HTML文書は変わらないのに、表現がだいぶ変わりました。外部にスタイルシー
トを置くと、CSS文書の中身を少し変えるだけでWebページの雰囲気が大きく変わ
るものです。
 このテクニックをマスターすると楽しさがグンと広がります。

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

◆解説

body { background-color: #cff; font-size: 12pt; color: #000 }
 全体の背景色を薄い青緑に、フォントのサイズを12ポイント、文字色を黒に設
 定しました。ここに記述された属性と値は、他の要素にも使えるものです。

div.test { background-color: #6ff; color: #006; line-height: 135% }
 段落を表示する div要素に背景色をやや濃い青緑に、文字色を濃い青に、文字
 の行間を135%に設定しました。ここに記述された属性と値も、他の要素にも使
 えるものです。

h2 { font-size: 20pt; font-weight: bold; color: #096; text-align: center}
 見出し要素の h2 の文字の大きさを20ポイント、字体を太字、文字色を濃い緑、
 位置揃えをセンタリングしました。

p {font-weight: bold }
 段落をあらわす p要素の字体を太字に設定しました。この要素はブロックレベ
 ル要素で前後に改行が入ります。これも段落のひとつです。

………………………………………………………………………………………………

 もし、スタイルシートがなかったらどうやってこれをHTML文書で記述するんで
しょう。もちろん可能ですが、大変な作業になりますし、文章全体が複雑になり
後で訂正や変更があったときには探すのも面倒になってきます。

 スタイルシートの利用は、文書全体がすっきりして、後々の作業性の効率が上
がり、短時間で編集できる利点があります。何回も繰り返して使う場合など本当
に便利な機能ですね。

 テキストに関するスタイルシートのリファレンスは、
 http://www.scollabo.com/banban/ref/refcss_03.html
 をご覧ください。サンプルもそれなりに用意しています。

 HTMLで文章を記述する上で、段落は読む人に読みやすい環境を提供します。し
かしながら、多くの Webページでは、段落を勘違いして、やたら強制改行の <br> 
を連発して段落を作っていますが、文法的には誤りです。

 今回講座で勉強した段落の取り方と次回予定しているボックス、その総称とし
てブロックレベルというものをマスターして正しい文法を身につけてください。

今回はここまで、ではでは・・

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

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

 次回は、段落をもう少しパワーアップしたボックスを予定しています。

今後の予定
ボックス、色、位置と表示形式、アンカー(リンク)、画像、リスト、テーブル、
フォーム、CGI、JavaScriptなどなど

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

◆ホームページ作りのポイント

 ユーザが見るディスプレイサイズを意識することも大切です。最近ではめった
に見られなくなりましたが、昔は600X400という非常に狭い画面でパソコンを使
っていたものでした。
 最近はノートパソコンでは、800X600が多く、デスクトップでは17インチCR
Tディスプレイ、あるいは 15インチ液晶ディスプレイが主流となり、1028X768
サイズが多くなっています。(800は800ピクセルの意味)

 制作者の環境だけで全体の幅を決めてしまうのは危険です。最低でもノートパ
ソコンの800X600でも十分に見られるようなサイズにしましょう。

 特別の意図がない限りユーザに横スクロールを強要してしまうページ作りは避
けたいものです。

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

質問・ご意見ははこちらまで→ banban@scollabo.com
なお、ご質問の際には、お使いのOS、通常使っているブラウザ、また他に持って
いるブラウザ、使っているテキストエディタなど、なるべく分かりやすく制作環
境を明記していただけると回答しやすくなると思います。

発行者 ばんばん
協 力 スズキ・コラボレーション http://www.scollabo.com/
配信エンジン まぐまぐ http://www.mag2.com/  (ID 0000090196)

バックナンバー こちらで公開しています。
プレーンテキスト  http://www.scollabo.com/banban/magazine/magazine.html

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

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

 総務庁の発表によると、ブロードバンドの普及率が4月末で 426万7215回線に
達したようで、すごい数字だなと実感しています。昨年11月末時点では、まだ 
200万人にも満たなかったのに、加速度的な勢いで普及しています。

 ブロードバンド本命のFTTH(光ファイバー)でも3万5000回線に迫っているし
ホームページ制作者にとってもいい傾向にあります。重たいページもサラリと表
示できるのはうれしいものです。

 とはいえ、全体の数値ではまだまだです。特に過疎地域ではADSLですら回線が
いきわたっておらず、その見通しすら立っていないのが実情です。相変わらずの
ダイヤルアップで、遅い速度で我慢しているわけです。

 政府の「e-Japan重点計画」 というプロジェクトでは、今年年末までに 900万
所帯のブロードバンド化を進めているけれど、全国の住宅都市整備公団や住宅供
給公社の団地では、すぐそばまで回線が来ているのに、「団地」というだけでブ
ロードバンドを諦めているようです。古いマンションなんかも同様みたいです。

 日本全体がブロードバンド化するのは、まだまだ先のようです。その点をしっ
かり認識してHP制作の工夫を考えましょう。

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

◆著作権について

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

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



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