毎週金曜日配信　What's New 2002/5/24 ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ 　　　　　　　　　　初心者のためのホームページ作り 　　　　　　　　　　　　　　　＜第２号＞ http://www.scollabo.com/banban/ 　　誰でもすぐ分かるHTMLタグを丁寧に解説しながら勉強していく講座です。 　　　　講座をすすめる中で分からない点があったらメールくださいね。 ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ この講座はタグを覚えてテキストだけでホームページを作るという、どちらかと いうとやや専門的な作業が中心になります。マイクロソフトの FrontPageやＩＢ Ｍのホームページ・ビルダー等とは一線を画して、思い通りのＨＰを作ることが 出来ます。時には専門的な難解な言葉も出てきますが、なるべく初心者にも分か りやすく解説していきます。どうぞ、気軽な気持ちでお付き合いください。なお ご意見やご質問はメールにて受け付けております。 　　　　　　このマガジンは等幅・等長フォントでお読みください。 ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ 決まりごと・・スタイルシート HTMLを書く上でＷ３Ｃから勧告されている決まり事がたくさんあります。 最近ではスタイルシートを使って表現を定義するようにされていますが、講座を すすめていく中でスタイルシートを解説します。非常に便利な機能ですので是非 利用してください。スタイルシートは（Cascading Stylesheet）カスケーディン グ・スタイルシートの略で、テキストの段落やフォントの各種の設定など、体裁 全体を定義して表現できるものです。 　例えば、ワープロソフトでは、フォントの大きさ、色、書体の種類を簡単に変 えられますよね。段落や位置の設定もクリックひとつです。枠線の太さや色づけ も楽チンです。これらはすべてワープロソフトの持っているスタイルシートで行 っているのです。この機能がＷｅｂでも使えるのです。 　スタイルシートが使えなかったときには、すべての要素で見栄えを属性として 書いたものでした。もう面倒くさくて大変でしたが、スタイルシートの登場は制 作者にとって福音になったことでしょうね。 詳しくは当講座のサイトをご覧ください。 スタイルシート http://www.scollabo.com/banban/style.html CSS　　　　　 http://www.scollabo.com/banban/term/css.html ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ スタイルシートを書く前に、 を作る（つまり、ブラウザに表示するすべてを作ることです） 前回はについて簡単に説明しました。今回は本体の表現を体験しましょう。 まず、下記のタグをエディタで入力しましょう。 初心者のためのホームページ作り 初心者のためのホームページ作り 入力したら前回同様に index.htmlと小文字で拡張子をつけて保存します。保存 後 index.htmlをダブルクリックしましょう。するとブラウザの左上方に「初心 者のためのホームページ作り」と表現されているはずです。 それでは、少し体裁を変えてみましょう。 初心者のためのホームページ作り 初心者のためのホームページ作り と、内容を少し変化させて見ました。入力したら上書き保存をして、ダブルクリ ック。黄色の画面にすこし大きく青色で表現されましたね。今度は位置を変えて みましょう。bodyタグの後に
と入力します。 初心者のためのホームページ作り
初心者のためのホームページ作り
同じように上書き保存、ダブルクリックで開きます。文字が中央に表現されたと 思います。面白いでしょ？ ◆解説 〜文字を太くするタグです。 bold からきているのでしょうね。ただし このタグは物理タグなので使わないほうがいいとされています。できれば、 〜を使いましょう。同じ結果になります。 〜文字通りフォントを指定するタグです。属性として、color やface　size　などがあり、色やフォントの種類を指定できます。サイズ指定は 1〜7までで、数字が大きいほど字体が大きくなります。 　残念なことに、この便利なタグは廃止が決定しています。今後はスタイルシー トに置き換わることになります。 ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ スタイルシート　その１ さて、上記のタグですが、Ｗ３Ｃでは近い将来 font、centerなどのタグが廃止 することを決定しています。便利なタグでしたが、今後はスタイルシートで表現 するように勧めています。では、上記のタグをスタイルシートで書くとどうなる でしょう。これからが本格的になります。 初心者のためのホームページ作り

初心者のためのホームページ作り

となります。の中にスタイルシートを書くことをエンベッド方式（埋め込 み方式とでも呼ぶのかなと思う）といい、そのほかに外部からスタイルシートを 読み込むリンク方式、適応したい要素に直接書き込むインライン方式があります。 全ページにわたって統一した表現するときにはリンク方式が便利ですね。 コロン「：」とセミコロン「；」を間違えないように注意してくださいね。 ちなみにインライン方式では 初心者のためのホームページ作り　を

初心者のためのホームページ作り

と変えます。結果は同じですが、 要素は見出しタグと呼び、ブロックレベル エレメントなので、上下に空白が入ります。ブロックレベルエレメントについて は講座「段落」で取り上げます。 　インライン方式はほとんど使うことがないような場合に使います。（日本語に なっているのかいな？）つまり、〜 に置くエンベッド方式や外部 スタイル方式は、ページ全体の各要素に対してはじめから定義して、繰り返し使 うようにします。例えば、たまにどうしてもある部分のテキストを赤にしたい場 合、最初から定義してしまうよりも、そこの部分だけインラインで書いた方がス タイルシート自体を管理する上でも後々楽になってきます。 　まぁ、このへんはそれぞれのセンスだと思いますので強要はしませんが・・ ◆解説 headの中で定義されたスタイルシートは、そのページすべてにわたって定義され ます。上記の場合は、「h3」がそれに当たり、そのページですべての「h3」は同 様に表現されます。非常に便利ですが時には不便なときもあります。そのために 細かく定義する必要が出てきます。