毎週金曜日配信 What's New 2002/5/24
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
初心者のためのホームページ作り
＜第２号＞
http://www.scollabo.com/banban/
誰でもすぐ分かるHTMLタグを丁寧に解説しながら勉強していく講座です。
講座をすすめる中で分からない点があったらメールください。
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
この講座はタグを覚えてテキストだけでホームページを作るという、どちらか
というとやや専門的な作業が中心になります。
マイクロソフトの FrontPageや IBMのホームページ・ビルダー等とは一線を画
して、思い通りのＨＰを作ることが出来ます。
時には専門的な難解な言葉も出てきますが、なるべく初心者にも分かりやすく
解説していきます。どうぞ、気軽な気持ちでお付き合いください。
なおご意見やご質問はメールにて受け付けております。
このマガジンは等幅・等長フォントでお読みください。
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
◆決まりごと・・スタイルシート
HTMLを書く上でＷ３Ｃから勧告されている決まり事がたくさんあります。
最近ではスタイルシートを使って表現を定義するようにされていますが、講座を
すすめていく中でスタイルシートを解説します。非常に便利な機能ですので是非
利用してください。スタイルシートは（Cascading Stylesheet）カスケーディン
グ・スタイルシートの略で、テキストの段落やフォントの各種の設定など、体裁
全体を定義して表現できるものです。
例えば、ワープロソフトでは、フォントの大きさ、色、書体の種類を簡単に変
えられます。段落や位置の設定もクリックひとつです。枠線の太さや色づけも楽
チンです。これらはすべてワープロソフトの持っているスタイルシートで行って
いるのです。この機能がＷｅｂでも使えるのです。
スタイルシートが使えなかったときには、すべての要素で見栄えを属性として
書いたものでした。もう面倒くさくて大変でしたが、スタイルシートの登場は制
作者にとって福音になったことでしょうね。
詳しくは当講座のサイトをご覧ください。
スタイルシート http://www.scollabo.com/banban/style.html
CSS http://www.scollabo.com/banban/term/css.html
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
スタイルシートを書く前に
、
<body>を作る（つまり、ブラウザに表示するすべてを作ることです）
前回は<head>について簡単に説明しました。今回は本体の表現を体験しましょう。
まず、下記のタグをエディタで入力しましょう。
<html>
<head>
<title>初心者のためのホームページ作り</title>
</head>
<body bgcolor="#ffffff">
初心者のためのホームページ作り
</body>
</html>
入力したら前回同様に index.htmlと小文字で拡張子をつけて保存します。保存
後 index.htmlをダブルクリックしましょう。するとブラウザの左上方に「初心
者のためのホームページ作り」と表現されているはずです。
それでは、少し体裁を変えてみましょう。
<html>
<head>
<title>初心者のためのホームページ作り</title>
</head>
<body bgcolor="#ffff00">
<font size="6" color="#0000ff"><b>初心者のためのホームページ作り</b>
</font>
</body>
</html>
と、内容を少し変化させて見ました。入力したら上書き保存をして、ダブルク
リック。黄色の画面にすこし大きく青色で表現されましたね。今度は位置を変え
てみましょう。bodyタグの後に<center>と入力します。
<html><head><title>初心者のためのホームページ作り</title></head>
<body bgcolor="#ffff00">
<center>
<font size=4 color="#0000ff"><b>初心者のためのホームページ作り</b>
</font>
</center>
</body>
</html>
同じように上書き保存、ダブルクリックで開きます。文字が中央に表現された
と思います。面白いでしょ？
◆解説
<b>〜</b>文字を太くするタグです。 bold からきているのでしょうね。ただ
しこのタグは物理タグなので使わないほうがいいとされています。できれば、
<strong>〜</strong>を使いましょう。同じ結果になります。
<font>〜</font>文字通りフォントを指定するタグです。属性として、color
やface size などがあり、色やフォントの種類を指定できます。サイズ指定は
1〜7までで、数字が大きいほど字体が大きくなります。
残念なことに、この便利なタグは廃止が決定しています。今後はスタイルシー
トに置き換わることになります。
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
◆スタイルシート その１
さて、上記のタグですが、Ｗ３Ｃでは近い将来 font、center などのタグが廃
止することを決定しています。便利なタグでしたが、今後はスタイルシートで表
現するように勧めています。
では、上記のタグをスタイルシートで書くとどうなるでしょう。これからが本
格的になります。
<html>
<head>
<title>初心者のためのホームページ作り</title>
<style type="text/css">
<!--
h3 { font-weight: bold; color: #0000ff; text-align: center }
body{ background-color: #ffff00 }
//-->
</style>
</head>
<body>
<h3>初心者のためのホームページ作り</h3>
</body>
</html>
となります。<head>の中にスタイルシートを書くことをエンベッド方式（埋め
込み方式とでも呼ぶのかなと思う）と呼びます。
そのほかに外部からスタイルシートを読み込むリンク方式、適応したい要素に
直接書き込むインライン方式があります。
全ページにわたって統一した表現するときにはリンク方式が便利です。コロ
ン「：」とセミコロン「；」を間違えないように注意してください。
ちなみにインライン方式では
<font size="6" color="blue"><b>初心者のためのホームページ作り</b> を
<h3 style="color:#0000ff;text-align:center">
初心者のためのホームページ作り</h3>
と変えます。結果は同じですが、<h> 要素は見出しタグと呼び、ブロックレベ
ルエレメントなので、上下に空白が入ります。ブロックレベルエレメントについ
ては講座「段落」で取り上げます。
インライン方式はほとんど使うことがないような場合に使います。（日本語に
なっているのかいな？）つまり、<head>〜</head> に置くエンベッド方式や外部
スタイル方式は、ページ全体の各要素に対してはじめから定義して、繰り返し使
うようにします。例えば、たまにどうしてもある部分のテキストを赤にしたい場
合、最初から定義してしまうよりも、そこの部分だけインラインで書いた方がス
タイルシート自体を管理する上でも後々楽になってきます。
まぁ、このへんはそれぞれのセンスだと思いますので強要はしませんが・・
◆解説
headの中で定義されたスタイルシートは、そのページすべてにわたって定義さ
れます。
上記の場合は、「h3」がそれに当たり、そのページですべての「h3」は同様に
表現されます。非常に便利ですが時には不便なときもあります。そのために細か
く定義する必要が出てきます。
<style> の後の囲み <!-- と //-->は、スタイルシートに対応していないブ
ラウザに対する配慮として記述します。この囲みはしておいた方が安全でしょう。
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
◆外部スタイルシートの作り方と実装方法
それでは今度は、スタイルシートを外部に作って、HTML文書に読み込ませまし
ょう。それほど難しくはありません。
まず、テキストエディタで次のようにタイプします。
body { background-color: #fff; color: #000}
h3 { font-weight: bold; color: #0000ff; text-align: center }
入力が終わったら保存します。保存方法はHTML文書と同じフォルダに小文字
でstylesheet.css と、必ず拡張子 css を忘れないようにします。
次に今作った css文書（スタイルシート・ドキュメント）をHTML文書に実装し
ます。今まで作った index.html を変更しましょう。下記のように変更します。
<html>
<head>
<link rel="stylesheet" href="stylesheet.cc" type="text/css">
<title>初心者のためのホームページ作り</title>
</head>
<body>
<h3>初心者のためのホームページ作り</h3>
</body>
</html>
入力が終わったら同じ名前で保存してください。→ index.html
HTML文書をダブルクリックでブラウザを立ち上げてください。見事に表示でき
たらスタイルシートが無事読み込まれた証明です。
なお、スタイルシートの名前は自由に設定できまので、色々とアレンジしてみ
てください。
（例 好きな名前.css で保存後 <head>内は
href="好きな名前.css" と書き換えてください。英字半角です、念のため。）
◆解説
<link>タグは<head>の中にのみ使われ、現在のページと他の文書または場所と
の関係を示すために使われます。この要素は複数用いることができます。
属性の rel は HTML文書から見た別の文書（この場合はスタイルシート）の関
係を示します。
同じく属性 href は別の文書が置いてある場所と文書名を指定して呼び出しま
す。難しい言葉で言うとＵＲＬや相対パスがそれに当たります。相対パスとか絶
対パスなどについては、講座を進めていく中で解説します。これは、覚えなくて
はならない必須のことです。
最後の属性 type はこれも難解ですが、呼び出す文書のMIME（マイムと呼びま
す）タイプの指定するものです。これも難解ですが同様に講座を進めていく中で
明らかにします。
それぞれ、<link>要素の属性は必須ですので忘れないようタイプします。外部
スタイルシートを作ると、別のページにも読み込ませて同じ表現ができ、サイト
全体のアイデンティティを訴求できます。たった一つ作るだけで、HTML内の各タ
グにいちいち定義したりする必要がなく、文書全体がすっきりして、後で書き直
すのも楽になってきます。
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
◆まとめ
スタイルシートは必須です。絶対に覚えてくださいね。今後の講座はスタイル
シートを前提として進めていきます。非常に奥が深く、覚えるとハマります。
次回はHTMLを書く上での大事な決まり事についてまとめます。少し難解な用語
が出てきますが、避けて通れない必須条件です。
今回はここまで、ではでは・・
そうそう、このマガジンのＷｅｂサイトで、掲示板を設けました。いろいろな
ご意見や、書き込みの中での質問に皆さんでコミニケーションを取りながらお答
えしたいと思っています。どんなことでも書き込んでください。お待ちしていま
す。
当サイトへはこちらから http://www.scollabo.com/banban/
（掲示板の書き込みの際して、公序良俗に反するものは管理者が削除します）
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
◆ホームページ作りのポイント
ブロードバンドが普及しております。高速で常時接続が比較的安価に提供され
ていますので、読者の中にも利用されている方が多いでしょう。
でも、まだまだ本格的にブロードバンドがいきわたっているわけではありませ
ん。ブロードバンドの普及率はまだ、たったの20％前後なのですから。
そこで注意しなければならないのが、画像などのファイルの大きさ、容量です。
これが大きいと、いわゆる重いページになってしまい、訪問者が「やめた！」と
よそのページに行ってしまいます。トップページは合計でおおよそ25KBくらいに
とどめたいものです。Yahoo なんか軽いですよね。ちなみに当マガジンのＷｅｂ
サイトのトップページは15.46KBです。<table>タグを使っているので、表示には
読み込みが完了してから表示されますが、かなり軽いので大丈夫と思っています
が、混み具合（トラフィック）では、時間がかかるかもしれません。
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
◆「Netscape」v6.2.3日本語版が公開されました。
変更点は明らかにされていません。同じく13日付けで公開されたv6.2.3英語版
も公開当時は変更点が明らかにされていませんでしたが、17日16時現在では製品
の品質向上を目指した“メンテナンス・リリース”と発表されています。
このため、今回公開された日本語版も同様の変更が加えられているものと思わ
れます。指摘されていたセキュリティの不具合も解消しています。
現在、Windows 95/98/Me/NT 4.0/2000/XPに対応するWindows版のほか、MacOS
X版とMacintosh PowerPC版、UNIX版が入手可能です。
Netscape 6.2 にアップグレード
http://home.netscape.com/ja/download/
◆Microsoft Internet Explorer累積的な修正プログラムのパッチが公開
この累積的な修正プログラムの利用により、Internet Explorer 5.01、Internet
Explorer 5.5 および Internet Explorer 6 用に以前にリリースしたすべての修
正プログラムの機能をすべてインストールすることが可能です。
Windows Updateでもすでに取得可能です。6 つの新しい脆弱性。最も深刻な脆
弱性については、攻撃者の選択したコードが実行される可能性があります。
修正プログラム (Q321232) (MS02-023)
http://www.microsoft.com/japan/technet/treeview/default.asp?url=/japan/
technet/security/bulletin/MS02-015.asp
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
◆ご注意！
このメールマガジンを Hotmailのような Webメールで受信している場合、記事
中のサンプルHTMLが実行される場合があります。極力、というより絶対にそのよ
うな受信環境を利用しないようお願いします。また、 Webメールで受信して障害
が発生したとしても当講座での責任を負いかねますのでご承知おきください。
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
質問・ご意見ははこちらまで→ banban@scollabo.com
なお、ご質問の際には、お使いのOS、通常使っているブラウザ、また他に持っ
ているブラウザ、使っているテキストエディタなど、なるべく分かりやすく制作
環境を明記していただけると回答しやすくなると思います。
発行者 ばんばん
協 力 スズキ・コラボレーション http://www.scollabo.com/
配信エンジン まぐまぐ http://www.mag2.com/
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
＜えでぃた〜ず・るーむ＞
先週、第１回目のマガジンを配信した後に、たくさんのご質問のメールが届き
ました。即刻返事が出来たものはいいのですが、なかなか回答が見いだせなくて
時間がかかったってしまい、改めて自分自身の知識のなさに愕然としました。
本箱から最新のものやすこし古いもの、各ＯＳの手引書などを引っ張り出して
悪戦苦闘しました。そんなことをしていて、「おおっ、そうだったのか」なんて
やっぱり毎日が勉強ですね。
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
◆著作権について
個人がご自分のＰＣに保存して利用する以外の記事の転載、引用は基本的に応じ
ておりません。記事中のすべての内容についての著作権は放棄していません。
無断で使用することを固く禁じます。
Copyright(C) 2002 www.scollabo.com/banban/
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
Copyright(C) 2002-3003 banban@scollabo.com