毎週金曜日配信　What's New 2002/5/17 ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ 　　　　　　　　　　初心者のためのホームページ作り 　　　　　　　　　　　　　　＜第１号＞ 　　誰でもすぐ分かるHTMLタグを丁寧に解説しながら勉強していく講座です。 　　　　講座をすすめる中で分からない点があったらメールくださいね。 ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ この講座はタグを覚えてテキストだけでホームページを作るという、どちらかと いうとやや専門的な作業が中心になります。マイクロソフトの FrontPageやＩＢ Ｍのホームページ・ビルダー等とは一線を画して、思い通りのＨＰを作ることが 出来ます。時には専門的な難解な言葉も出てきますが、なるべく初心者にも分か りやすく解説していきます。どうぞ、気軽な気持ちでお付き合いください。なお ご意見やご質問はメールにて受け付けております。 　　　　　　このマガジンは等幅・等長フォントでお読みください。 ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ タグでHTMLで作る----HTML（えっち・てー・えむ・える） 何のこっちゃ、と思われるかもしれませんね。 HTMLとはHyper Text Markup Languageの略で、これはタグと呼ばれるものから成 り立っているＨＰ制作用の言語です。この言語にも文法というようなものがあっ て、Ｗ３Ｃ（World Wide Web Consortium ）というところで管理されています。 詳しくはこちら　http://www.w3.org/　全部英語です、念のため。 その昔、Ｗｅｂを利用するときに、コマンドラインで情報を取り寄せていました。 しかし、特別なＯＳの特別なソフトでなければ見ることが出来ない、ということ でSGML（Standard Generalized Markup Language）という文書データを共有する ための言語が注目され、政府公文書の記述などに用いられました。 　しかし、SGMLは言語的に難しく、誰もが簡単に使えるものではありませんでし た。そこで、SGMLを簡素化して、ハイパーリンクなどＷｅｂ特有の機能を盛り込 んだHTMLが生まれ、Ｗｅｂの理念を満たす言語として採用されることになったの です。現在のHTMLバージョンは4.01となっており、文法が従来よりも制限という か定義づけというか規則というか、難しくなっています。当講座も4.01に従って 進めていきます。 ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ 制作のための準備 ま、あんまり難しいことはこの際こっちに置いといて・・ まず、皆さんに用意してほしいものがあります。ＨＰ作りに欠かせないものとし てメモ帳などのテキストエディタが必要になります。それとブラウザ・ソフトで すね。マイクロソフトでもネットスケープでもオペラ、モジラでもかまいません。 ただし日本語環境で動くようにしておいてください。（パソコンにあらかじめイ ンストールされているものや日本語版では問題ありません。） 　なお、各ブラウザのバージョンは最新のものを入手してください。古いもので はスタイルシートなどをサポートしていないものがあります。ただし、できれば 古いものは残しておきたいものです。インストールの際カスタムインストールを 選んで、古いものは残してください。 （ちなみに私が持っているものは、Windows環境でIE3,4.5 5.5 6.2 NS4.05 4.07 6.2 Opera 6.01 Mozilla 0.9.8　Macintoshは IE5 NS6 LinuxはNS4.5） 　何故かって？Ｗｅｂ制作者にとってユーザ環境を配慮しなければならないから です。ユーザはどんな種類のどんなＯＳのどんなブラウザを使っているか分から ないわけですね。自分の作ったＷｅｂページをいろんなブラウザで確認するため にも、新旧の数種類のブラウザを持っていることが望まれるのはそういった理由 があるからなのです。 　そして画像を制作するためには、デジタルカメラやスキャナー、そして当然そ れらを加工するためのソフトウェアが必要になってきますよ。 　テキストエディタはなるべく軽い（容量が小さい）ものがいいですね。Windows ではメモ帳、アップルなら SimpleTextでかまいません。フリーでもいいソフトが あるのでダウンロードしておくといいかも。ちなみに筆者は「秀丸エディタ」と いうシェアウェアのソフトを使っています。軽くて機能が豊富で非常に使いやす い特徴を持っており、長いこと利用しています。お奨めのエディタですよ。価格 は安くてうれしい4000円です。 ダウンロードはこちら　http://hide.maruo.co.jp/ なお、フリー（無料）ソフトウェアはこちらにあります。 Windows用　窓の杜　http://www.forest.impress.co.jp/ Macintosh用　新らしもの好きダウンロード　http://mac.page.ne.jp/ それでは早速はじめましょう！ ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ 決まりごと・・使う文字 HTMLを書く上で絶対に半角のカタカナを使ってはダメだということです。これは 常識ですから必ず守りましょう。文字化けを起こしてしまいます。全角であれば カナも漢字も表示できます。また、英数字は半角でも大丈夫です。 The HTML Coded Character Setでは、様々な制御コードがあり、ここにコードが 重なると制御記号として解釈され、まともでない動作になってしまう可能性があ るわけです。 　半角カナを表わすための１バイト目のコード番号とHTMLの制御記号を表わすた めのコード番号がもろにぶつかってしまい、障害の原因となってしまいます。 ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ 　当講座ではHTML文はすべて小文字で記述します。HTMLの次期バージョンでは、 おそらく XHTML（現在Ver1.1が勧告されている）になることがほぼ間違いないと ころで、タグはすべて小文字と規定されているからです。今のうちから小文字に 慣れておくことは重要な意味を持っているからです。 　ホームページを作った経験のある方には、最初のうちはつまらないかも知れま せんが、もう一度原点に返って誤った文法を見直すチャンスにしましょう。 とりあえず（というのは、HTMLを書く上での決まり事を無視して）・・ まず下記のタグをエディタにタイプします。不精な人はコピーなんていう手もあ りますが、近い将来自分のＨＰを立ち上げようと思うなら、せっせと打ち込みま しょう。慣れることが肝心です。漢字以外は半角です。 初心者のためのホームページ作り タグは必ず半角で入力してくださいね。大文字でもかまいませんが、講座は小文 字を使用します。皆さんも出来る限り小文字を使用してください。 講座のサンプルは、 　　大文字＝A B C D E F G H I J K L M N O P Q R S T U V W X Y Z 　　小文字＝a b c d e f g h i j k l m n o p q r s t u v w x y z 　さて、ここまで入力したら保存します。適当なフォルダをあらかじめ作ってお き、そこに　index.html　とか test.html という名前で必ず小文字で保存します。 .html とは拡張子でHTML文書になります。 .htmでもかまいませんがブラウザは htmlとhtm をしっかり区別しますので、必ず統一した使い方を心がけましょう。 .htmはUNIXで使われる拡張子です。とにかく忘れずに必ずこの拡張子を小文字で 入力してください。 　保存後にフォルダを見てください。お使いのブラウザのアイコンが表示されて いるはずです。そのindex.htmlをダブルクリックして開いてください。するとブ ラウザが立ち上がって何も表示されない状態になります。 　ここで開いたブラウザの一番上のバーを見てください。ちゃんと「初心者のた めのホームページ作り」と表示されているでしょう。（ブラウザによっては文字 化けしているものがあります。いずれ解決方法を講座で示します。） ◆解説 　これからHTMLが始まるという宣言のようなものです。が、しかし忘れて 　　　　はいけないタグです。この要素（タグのことを要素あるいはエレメント 　　　　と読んだりします。覚えてください。）はオプションで、階層構造で言 　　　　うと、最も上に位置するものです。HTML文書全体を囲みます。 　まさに頭の部分です。この要素の中にさまざまな情報を仕込んでおくこ 　　　　とによってブラウザを制御したり、ページに色々な定義づけをします。 　　　　これについては、講座の中で説明していきます。 その名の通りタイトルです。これがＨＰの題名になるわけですね。必ず 　　　　名前をつけておきましょう。もちろん、日本語が使えますが、そのため 　　　　には、ある「定義」を宣言しなけらばいけないのですが、詳しいことは 　　　　講座をを進めていく中で説明します。「お気に入り」にブック・マーク 　　　　すると、このタイトルが挿入されます。 　終わりを示します。お行儀の悪いHTMLですと、つい忘 　　　れがちになりますが、順番を間違えないように終わりの印をつけます。 　　　コンテナタグといい必ず対になっています。改行を指示する
などのよ 　　　うな空タグには必要ありません。これについては講座をすすめていくうち 　　　に説明します。 順番とは、たとえば というタグが出てきたら と終わらせます。 決して ではありません。入れ子の順番を守らなければいけ ないのです。（注：というタグは存在しません、念のため） タグにはちゃんと順番があります。上記のように文章全体の始まりをさす は、文章の一番終わりに入力します。は、頭の部分ですから本体の 前で終わらせます。これも決まりごとですからしっかり覚えましょう。つまり、 文書全体の構造を配記することが規定されていることの意味です。 　ブラウザによっては終わりタグを省略しても動くものがありますが、将来を見 据えて必ず終了タグを入れることを心がけましょう。 それでは、今まで作ったＨＴＭＬのなかで、からの間を入力しま す。ここからブラウザに表現をつけていくのです。 初心者のためのホームページ作り ◆解説 同じように index.html と上書き保存してください。保存できたらブラウザで見 てみましょう。ダブルクリックで開きます。 　どうです、画面全体が緑色で表現されていますね。ブラウザのバックグラウン ド（背景）を緑に塗れと指示したのです。= bgcolor="#00ff00" これは　 と一行で書くようにします。#00FF00はＲＧ Ｂの16進法で指示されており、いろいろと変えてみるといいでしょう。 　なお、ダブルコーテーションは入れなくても大丈夫ですが、正統派を目指すに は省略しないほうがいいと思います。このＲＧＢ16進法は、また詳しく解説しま す。 Tips：body（要素）bgcolor（属性）"#00ff00"（値） 　　　今後講座に出てくる言葉の意味を理解しておきましょう。 まさに身体であり、様々な情報の表示の仕組みを仕込んでおくところです。 も、コンテナタグですから、最後にが必要です。 なお、という表現は今後スタイルシートに置き換わる ことになっています。現在もあまり奨められない表現です。スタイルシートにつ いては講座を進めていく中で詳しく解説いたします。 　Sample　body {background-color:#00ff00}　または 　　　　　 冒頭に述べましたHTMLの決まり事に関しては、講座を進めていく中できちんと説 明していきます。 今回はここで終わりです。ではでは・・ 講座の中でどうしても理解できない点があったら遠慮なくメールください。 今週のおさらいはＷｅｂページにも掲載しましたので、是非見ておいてください。 Ｗｅｂページは画像が使えるので、より分かりやすく説明しています。 （今週のおさらい） http://www.scollabo.com/banban/magazine/ 今後の講座予定（順不同、あくまでも予定です） スタイルシート、テキスト、フォント、段落、表、色の表現、画像の表示、フレ ーム、CGI,JavaScriptなどなど。 またXHTMLについてもいずれ触れていきたいと考えています。 ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ ◆ホームページ作りのポイント ホームページ（ＨＰ）は情報の発信メディアです。私たちが手軽に利用でき、24 時間世界中に届けることが出来るのです。 　大切なのは何を発信するかということです。個人のＨＰを拝見すると、ただ単 に家族のことだけに終始するものも多々あります。これでは多くの人が訪問する ことにはなりません。しっかりとしたコンセプトを持ち、何を伝えたいのかを明 確にしておくことです。そうすればおのずと構成やデザインが沸いてきます。 ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ この講座は等副・等長フォントでお読みください。 質問・ご意見ははこちらまで→　banban@scollabo.com 発行者 ばんばん　http://www.scollabo.com/banban/ 協　力　スズキ・コラボレーション 配信エンジン　まぐまぐ　http://www.mag2.com/ ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ ◆＜えでぃた〜ず・る〜む＞ このマガジンの配信のきっかけは、ホームページ講座というＷｅｂ制作から始ま りました。その中で、多くの専門家や造詣の深い方から協力をいただきました。 紙面を借りて御礼申し上げます。 　単にタグでホームページを作るといっても、その奥行きは深く、知れば知る程 感心させられます。それらをすべて頭の中に収めることはできないと考えて制作 を開始したのです。多くのＨＰが誤った文法や解釈で作られている現実には衝撃 を受けるほどです。かく言う私でさえ、つい最近まではひどいページを書いてい たものです。Ｗｅｂの進歩は矢のように早く、ついていくのが大変ですが皆さん と共に勉強していきたいと思っています。 ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ ◆著作権について 個人がご自分のＰＣに保存して利用する以外の記事の転載、引用は基本的に応じ ておりません。記事中のすべての内容についての著作権は放棄していません。 無断で使用することを禁じます。 　　Copyright(C) 2002 www.scollabo.com/banban/ ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■