隔週金曜日配信 What's New 2004年12月10日
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
初心者のためのホームページ作り/Web for beginner
http://www.scollabo.com/banban/
＜第106号＞
banban@scollabo.com
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
当講座は、初心者が正しい文法と作法を身につけて、魅力的な Webページ作
成に役立つことを目的に配信されております。
当講座では HTML4.01、XHTML1.1 を中心とした文法が主体となっています。
なお、このマガジンは等幅フォントでお読みいただくと快適に読めます。
今週のコンテンツ
■ やさしいHTML入門 (第１回) --- マークアップとは
■ Tips --- Webページ作成便利ツール
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
◆やさしいHTML入門 --- マークアップとは
HTMLとは Hyper Text Markup Language の略で、日本語で直訳すると「飛んで
るしるし付け言語」となるでしょう。ここで示す「飛んでる」の意味は、他の
ドキュメントを参照する、あるいはそのドキュメントに移動すること (リンク
すること) を指し、これがハイパー・テキストに当たります。
（テキストとは、文字列の集合をあらわします。このマガジンもテキスト。)
しるし付けとは、あらかじめ用意されている「タグ」によって、ある情報を囲
みます。つまり、情報の前後にタグでしるしを付けることを指します。このこ
とを「マークアップ」といいます。
基本的な情報は、テキスト形式 (文字列で示される情報) で成立します。ある
文字列をマークアップすることによって Web上で誰でも自由に閲覧可能となり
ます。
つまり、HTMLの主だった役目は情報を発信することにほかなりません。した
がって閲覧者の操作に応じた動的な変化 (インタラクティブと呼ぶ) には対応
していません。
■要素 (タグで囲まれる情報)
あるテキスト形式の情報をタグで囲むとき、その情報の中身を考えます。その
一部分は見出しであったり、リスト (箇条書き) であったり、表組だったりす
る場合もあるでしょう。もしかしたら図画像もあるかもしれません。
そうしたひとつひとつの情報内容を「要素：Element」と呼びます。
情報が持つある特定の要素をタグで囲むとき、それに見合ったタグを選びマー
クアップします。
そうした集合が「HTMLドキュメント」となり、それを Webサーバに設置する
ことで世界中に情報を発信することが可能となります。
■HTMLの作成方法
HTMLを作成する方法は、大きく分けて２つの方法があります。１つは Webペー
ジ作成ソフト、いわゆるオーサリング・ソフトを利用する方法です。
この場合、面倒なタグを覚えなくても、文字や画像などを配置するだけで簡
単に作成することができます。特に最近のソフトは非常に高機能で、プロの現
場でも使用していることさえあります。
もう１つが、自分でHTMLのタグを覚えて入力する方法です。文法やタグの機能
などを覚えなくてはならず大変面倒ですが、作り込むことで自由で独自の表現
が可能となります。
相当に細かい部分にまでアレンジが可能となり、作成することの楽しみも味
わうことができるでしょう。
当講座では、後者のタグや文法などを覚えた上でホームページを作成すること
を主眼としています。
■HTML入力の作業
あるテキスト、つまり情報のある部分をタグで囲む場合、その範囲を「要素」
と呼びます。例えば見出し要素とか、段落要素とか。逆な言い方をすれば、情
報の要素ごとにタグでマークアップするということになります。
これが基本的なHTML作成の作業となります。タグでマークアップするために
は、最低限のタグの機能と、そのための文法を知る必要があります。講座では
タグの機能や目的、使用する際の注意や文法について詳しく説明します。
■HTML作成のための準備
HTMLそのものを作成するためには、それほど大掛かりなソフトやハード環境は
必要としません。HTMLは、あくまでテキストであるため簡単なテキスト作成の
ためのソフトウェアがあれば誰にでも作成することができます。
テキストエディタは大抵、OSに標準でバンドルされています。
Macintoshの場合、SimpleText か、または TextEdit
Windowsの場合、メモ帳など
そのほか、高機能なテキストエディタがフリーソフトとして多数配布されてい
ますので手に入れておくのも方法です。
また、作成したHTMLドキュメントを確認するための Web閲覧ソフトも必要です
が、これもほとんどのコンピュータには標準でインストールされていますので
あえて他のソフトを手に入れる必要はないでしょう。
■タグの入力に際する注意点
基本的にタグは半角英文字で入力します。文字は大文字でも小文字でもかまい
ません。また、両方が混在しても問題ありません。当講座では将来を見越して
すべて小文字にて解説します。
なお、タグで囲まれる各情報については、日本語入力が主体となります。
作成したドキュメントを保存する際の識別子 (Windowsでは、拡張子と呼ぶ)
は基本的に当講座では .html を使います。
HTMLドキュメントを、.htm、.txt、.shtml、.xhtml など実に様々な識別子
を利用することができますが、当講座では一般的な識別子を使うことにします。
ただし、作成するドキュメントの種類によっては、他の識別子を使うこともあ
りますので、その際には改めてご案内いたします。
■まとめ
のっけから「やさしい」と題しましたが、決してHTMLそのものがやさしいとい
うわけではなく、あくまで難しい文法や決まりごとを「やさしく解説」した上
で、誰にでも確実に理解できることを主題としています。
なるべく専門用語には注釈をつけ、「なるほど」とうなづけるように進行し
ていきたいと思います。
疑問点や分からない場合には、遠慮なくメールにて質問してください。
※次回は、HTMLの基本的な知識について解説します。
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
◆Tips--- Webページ作成便利ツール
HTMLを作成して Webサイトを構築するための道具のそのほとんどがソフトウェ
アであることは言うまでもありません。ここでは Webページ作成のための便利
なツールを紹介します。
■テキストエディタ
使い勝手の良いインターフェイスを兼ね備えたテキストエディタは、制作現場
では欠かせません。
○ TeraPad (Windows用、フリーソフト)
寺尾進氏が提供する強力なエディタ機能を持った秀逸ソフト。各種文字コー
ドにも対応し、HTMLタグや、Perl言語の色分け表示、矩形選択、ドラッグ＆
ドロップ編集などの機能も備えています。
これほどの高機能でありながらフリー (無料) というのが凄い！
TeraPada公式サイト
http://www5f.biglobe.ne.jp/~t-susumu/
○ Jedit (MacOS、シュアウェア 2625円)
Macintoshでは大変人気のある定番エディタ。MacOSの対応も幅広いので、環
境に応じてインストールすることができます。
フォント、文字サイズ、スタイル、文字色、行揃えなどを、ツールバーか
らワンタッチで指定可能な便利なインターフェイスを用意し、誰でも戸惑う
ことなく使いこなせるのが特徴です。
Jedit公式サイト
http://www.artman21.net/
○ StyleNote (Windows用、フリーソフト)
このエディタは、HTMLタグ挿入型の Webページ作成専用のソフトです。直接
タグを入力する際には、開始タグ名を入力した時点でスペースキーを押すと
自動的に終了タグが入力されます。なおかつ、そのタグに対応した属性一覧
がカーソル位置にプルダウンメニューで表示されるので、そこから選択して
スムーズに属性を入力できる特徴を持っています。
また、作成時には自動的に文書型定義も選択できる便利さも持っています。
StyleNote
http://www.wht.mmtr.or.jp/~riki/
■リンクチェッカー
Webサイトとは、複数のHTMLドキュメントが互いにリンクの関係を持ったペー
ジの集合体です。ページが増えるほどに心配なのがリンク切れです。
ここで紹介するソフトウェアは、そうしたサイト内のリンクを検証する便利
なツールです。
○ HTMLクイックチェッカ (Windows用、フリーソフト）
松本要氏の非常に優れた機能を持ったリンクチェッカーです。単純なリンク
切れだけでなく、画像の URLのチェックや文法上の警告もあわせて行います。
Webサーバに転送する前のチェックとしてお勧めです。
HTMLリンクチェッカ公式サイト
http://www.tcp-ip.or.jp/~mt2knm/etc/HTMLChecker.html
○ LinkChecker (Windows、Macintosh用、フリーソフト)
Macintosh版では、OS p.x 用と OS X に対応しています。検証結果は色別に
表示されるので分かりやすい特徴があります。リンクチェッカーの老舗。
LinkChecker公式サイト (英語版のみ)
http://linkchecker.sourceforge.net/
■HTML解析サイト
作成したHTMLドキュメントの文法などをチェックしてくれる大変ありがたいサ
イトがあります。チェックを受けた後でもう一度構文を見直しましょう。
W3C Markup Validation Service (W3Cによる文法チェック 英語版)
http://validator.w3.org/
Another HTML-lint gateway (日本語による文法チェック)
http://openlab.ring.gr.jp/k16/htmllint/htmllint.html
W3C CSS 検証サービス(日本語による W3Cのスタイルシートチェック)
http://jigsaw.w3.org/css-validator/
■閲覧ソフト (ブラウザ)
ブラウザは Webページを閲覧するためには必要なソフトです。ほとんどの場合
購入したコンピュータには付属でインストールされていますので、あえて他の
ブラウザは必要ないものですが、作成したページを他の環境でチェックする場
合には重宝するものです。
ここでは代表的な Webブラウザをご紹介いたします。
○ Mozilla ＆ Firefox (いずれもフリーソフト)
世界で最初のグラフィカルなブラウザ Mosic (モザイク) を開発した技術者
が Netscape Communicationsを設立し、その後新たな組織を立ち上げたのが
Mozilla です。
名前の由来は Mosic に Godzilla (ゴジラ) を掛け合わせたものとされて
います。また、メール機能を持たない非常に軽量でサクサクとした Firefox
も合わせてリリースされています。タブ切り替え機能、および RSSリーダー
の機能も備わっています。Windows、Macintosh、Linux、UNIXなどに対応。
最近はマイクロソフト社の Internet Explorer離れが加速し、ユーザの多く
がこの Firefoxに乗り換えているといわれてます。
Firefoxは、もともと Phoenix (不死鳥) と命名されていましたが、商標の
関係から Firebird (火の鳥) と改名しましたが、その後現在の名前に付け替
えられた経緯があります。
Firefox (炎の狐？) がどのような意味か分かりません。なお、Mozilla は
多くの方の寄付によって運営されています。
Mozila公式サイト
http://www.mozillazine.org/
もじら組 (Mozila日本語版)
http://www.mozilla.gr.jp/
○ Opera (シェアウエア)
北欧ノルウェー発の軽量ブラウザで、すべてのぷらとフォームに対応した新
進気鋭のソフトです。基本的にはシェアウェア (6279円) ですが、無料版も
リリースされています。ただし無料版には広告表示があります。
スタイルシートの実装が充実し、何よりも表示速度の速いのが特徴です。
Opera公式サイト
http://www.opera.com/ (英語)
Livedoor Opera (ライブドアにて販売中)
http://opera.livedoor.com/
○ Netscape (フリーソフト)
ネスケの愛称と共にかつてはブラウザ市場を席巻していた老舗ソフトでした
た、マイクロソフト社との覇権争いに惨敗して以降、米国通信会社に買収さ
れ、ほとんどの技術者が辞めてしまった状況となっています。
2003年に Mozilla 1.4をベースとした現在のバージョンがリリースされて
以来、その後主だった活動もなく、いずれは消えていく運命とも言われてい
ます。バージョン４の失敗が致命的だった (？) 。
なお、つい最近新しいバージョンを発表しました。MSIEと Mozillaのいい
とこ取りをしたようなバージョンです。Windows、Macintosh、UNIX系などの
プラットフォームに対応しています。
Netscape公式サイト (日本語版)
http://wp.netscape.com/ja/
○ Lynk (フリーソフト)
テキストブラウザの定番として超有名です。各種プラットフォームに対応し
た文字表現だけのブラウザで愛好家も非常に多いブラウザです。
なお「Lynk」とは「山猫」という語源です。
Lynk公式サイト
http://lynx.browser.org/
○ ホームページリーダー (音声ブラウザ：有料)
IBM社の Windows向け音声ブラウザで、エンジンは MSIEを使います。有料で
すが「お試し版」もダウンロードできます。
IBMホームページリーダー
http://www-6.ibm.com/jp/accessibility/soft/hpr.html
○ Microsoft Internet Explorer (MSIE:Windows標準)
Windows95 から標準搭載されて以来、その基本ソフトの普及に伴ってブラウ
ザ市場の90％以上を占めるに至り、同時に多くの商用サイトでは、MSIEを適
正ブラウザとしてのページの作り込みをしているほどです。
MSIEを標準のブラウザとしてご用されている方が多いと思いますが、たっ
た１つのソフトウェアが市場を席巻するのは Webの発展を考えたときに、決
して好ましいとは思えません。それにしてもマイクロソフト恐るべし。
現在のバージョンは 6.0 ですが、これ以上のバージョンアップは、次期OS
からになるといわれています。なお、Macintosh版 MSIEではバージョン５が
ダウンロードできますが、現在は Macintosh向けには開発を行っていません。
MSIE Macintosh版
http://www.microsoft.com/japan/mac/products/ie/
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
今回はここまで。
今週のおさらいは Webページにも掲載しましたので、是非参考までに見ておい
てください。
Webページでは HTML文の実行結果のサンプルもあり、より分かりやすく説明
しています。あわせて過去の記事のおさらいも掲載しています
（今週のおさらい）
http://www.scollabo.com/banban/magazine/review_106.html
次回は、12月24日に配信を予定しています。
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
◆質問・ご意見ははこちらまで→ banban@scollabo.com
なお、ご質問の際には、あなたがお使いのOS、ブラウザ、テキストエディタな
ど、なるべく分かりやすく制作環境を明記していただけると回答しやすくなる
と思います。
ただし、個人的な事由により返事が遅れることがあります。ご了承ください。
お急ぎの場合には、当サイト内の掲示板をご利用ください。きっと誰かが答え
てくれると思います。
発行者 ばんばん
協力 スズキ・コラボレーション http://www.scollabo.com/
配信エンジン まぐまぐ http://www.mag2.com/ （ID 0000090196）
誤字・脱字・変換ミス・表現欠乏などには、平にご容赦願います。
■バックナンバー こちらで公開しています。
プレーンテキスト http://www.scollabo.com/banban/magazine.html
各号のおさらい http://www.scollabo.com/banban/magazine/
アーカイブ http://www.scollabo.com/banban/daf/archive.html
まぐまぐ http://backno.mag2.com/reader/Back?id=0000090196
■配信の変更・中止はこちらです。
個別の手続きは受け付けていませんので、ご面倒でも各自でお願いできれば助
かります。
当サイトにて http://www.scollabo.com/banban/magazine/top.html
まぐまぐにて http://www.mag2.com/m/0000090196.htm
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
＜えでぃた〜ず・る〜む＞
久しぶりに当メールマガジンを配信しました。約１ヶ月あまり休刊していまし
たが、この間すっかりリフレッシュすることができました。原稿の締め切りを
気にしなくともよいというのは、精神衛生上かなり楽でした。
新たなシリーズで再出発しましたが、私自身もう一度原点に返って勉強し直
すつもりで発行していきたいと考えています。簡単なように見えて、それでも
奥の深いマークアップ言語HTMLを初心者にも分かりやすく、かつアカデミック
に説明していきます。また、HTMLを学ぶにつれてブログでおなじみの XHTMLも
講座の中で取り上げていこうと考えています。なお次回は、今年最後の配信と
なります。１年がもうすぐ終わろうとしているのですねぇ・・
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
◆著作権について
個人がご自分のＰＣに保存して利用する以外の記事の転載、引用は基本的に応
じておりません。記事中の内容について、無断で使用することを固く禁じます。
なお、記事中のスタイルシート、スクリプト、HTMLをご自分のページ作成に
自由に使っていただいても差し支えありません。
Copyright(C) 2002-2004 www.scollabo.com/banban/
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
最新公開日 2005年7月26日
Copyright(C) 2002-2004 banban@scollabo.com