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

                隔週金曜日配信 What's New 2004年12月24日
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□

       初心者のためのホームページ作り/Web for beginner
           http://www.scollabo.com/banban/

                        <第107号>

              banban@scollabo.com

□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□

  当講座は、初心者が正しい文法と作法を身につけて、魅力的な Webページ作
 成に役立つことを目的に配信されております。

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

   今週のコンテンツ
    ■ やさしいHTML入門 (第2回) --- HTMLの基本

□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□

◆やさしいHTML入門 --- HTMLの基本

 専門的に言えば「HTML基本データ形式」となりますが、難しい話は横に置き、
 ここでは最低限知っておく必要のある基本的な作法について述べます。

 ■タグの書き方
 HTMLであらかじめ決められているタグは  < と > で括って半角英文字でタイプ
 します。文字は大文字でも小文字でもかまいません。当講座では将来を見越し
 て小文字で説明します。

 タグとは「荷札」の訳がありますが、ある情報を荷札で囲んで閲覧ソフトに運
 ぶという考え方から「タグ」と呼ばれた経緯があります。

  マークアップするということは、情報をタグで囲むことにほかなりません。
 正しくマークアップされたHTMLドキュメントは、どのような環境でも正しく情
 報が伝わることができます。

 正しいマークアップとは、標準に照らし合わせて「妥当なマークアップ」であ
 るということです。この「標準」については講座の中で適時取り上げます。

 なお、将来を見越すとは、次世代マークアップ言語である XHTMLや XMLなどが
 小文字で記述することが求められているためです。

 タグは不平等記号を使ってタグ名を囲みます。
  例えば、 <タグ> というような感じです。タグはマークアップすべき要素に
 対して適切なタグを選んで記述します。要素とは情報が持つ「あるまとまった
 内容」をあらわします。要素ごとのタグに関しては講座を進める中で詳しく解
 説します。

 ■タグとその属性
 タグには属性 (Attribute) を持つものがほとんどです。属性とはタグの機能
 を補ったり拡張する働きがあり、属性のあるなしではまったく異なる機能を有
 します。
  例えば、以下のリンクを示す構文について解説しましょう。

    <a href="index.html">目次 </a>  「目次」というページに移動する
    <a name="index">目次 </a>    「目次」という文字にアンカーを設定

   aタグでも属性が違うと、その働きが変わります。前者では単純に指定され
 たページにジャンプしますが、そのとき、ごく普通のブラウザでは下線が引か
 れ文字色も変化します。一歩、後者ではその部分にアンカーを設定し、他の箇
 所から参照できる印をつけるだけで、表示にはまったく影響がありません。

 通常、属性のないタグはそのままの機能で表示させますが、属性がないとまっ
 たく機能しないタグもあります。サンプルに用いた aタグはその代表です。

 属性はその値が数値やアルファベットだけのものなら引用符で囲む必要はあり
 ません。ただし、全角文字や記号などを用いた場合には、必ず引用符で囲まな
 ければなりません。

   <img src="image/sample.gif" width=100 height=50 alt="サンプル">
                   ↑         ↑       ↑    ↑
         引用符必要     不必要  不必要  必要

  なお XMLや XHTMLでは、すべての属性値は引用符で囲まなければならないと
 決められているので、当講座では将来を踏まえてすべての属性値を引用符で囲
 むように強くお勧めします。

  タグと属性の間には必ず半角スペースを置いてください。続けて記述すると
 コンピュータが正しく判断できません。また、全角のスペースは文字扱いとな
 りますので厳禁です。

 ■ブロックレベルとインラインレベル
 タグには大きく分けて2つの要素を囲みます。この点は非常に重要なので是非
 覚えていただきたいところです。

 ○ブロックレベル
 あるまとまった情報で括られるものをブロックと呼びます。例えば表組やリス
 ト、見出しや段落などそれぞれが単独で完結するかたまりと思ってください。

  ブロックレベルは基本的に前後に改行を持ちます。またブロックレベルの中
 にブロックレベルを配置できる場合とできない場合があります。すべてのイン
 ラインレベルは、必ずこのブロックレベルの中で配置されなければなりません。

 現在定義されているブロックレベルを表すタグは以下のとおりです。

  adress   作者の所在情報をあらわす
  blockquote 長文の引用文をあらわす
  div     汎用ブロック要素
  dl     定義済みリストを定義する
  fieldset  入力フィールドのグループ化
  form    入力フォームを定義する
  h1〜h6   見出しをあらわす (数値の低いものから優先される)
  hr     罫線をあらわす
  ol     番号つきリストを定義する
  p      段落をあらわす
  pre     整形済みテキストをあらわす
  table    表組をあらわす
  ul     番号なしリストを定義する

 ○インラインレベル
 インラインとは「線の中にある」と直訳できますが、要するに普通の文字列と
 同等にあります。つまり文字列の中で利用するタグをインラインと称します。
  例えばある文字列の中で、文字を強調したい場合や抹消線を表示させたい場
 合など、ある種の意味を持たせる場合に利用します。

  またインラインであるため、前後に改行や空白は持っていません。すべての
 インラインレベルのタグは、必ずブロックレベルの中で配置されなければなり
 ません。

  インラインレベルとして定義されているタグは以下のとおりです。

  a     ハイパーリンクを定義する
  abbr   発音できない略語を表す
  acronym  発音できる略語を表す
  b     文字を強調する (一般的に太字にする)
  bdo    文字の方向 (右から、あるいは左から) を定義する
  big    通常より大きな文字に表現する
  br    強制改行
  button  ボタンをあらわす

  cite   参照先の URL をあらわす
  code   コンピュータ・プログラムコードとして表示する
  dfn    追加のテキストとしてあらわす
  em    文字を強調する
  img    画像の表示
  input   入力フィールドを形成する
  kbd    ユーザからの入力文字をあらわす
  label   入力フィールドのラベルをあらわす

  map    イメージマップを定義する
  object  静止画、動画などのオブジェクトを定義する
  q     短文の引用を表す
  samp   コンピュータのサンプルデータとして表示させる
  select  選択可能な入力フィールドを定義する
  small   通常より小さい文字に表現する
  span   汎用インライン要素

  strong  文字を強調する (最も強い表現)
  sub    下付文字として表示する
  sup    上付文字として表示する
  texteare テキストの入力フィールドを定義する
  tt    テレタイプ文字として表示する
  var    文字が変数として表示する

 ■コンテナタグとエンプティ (空) タグ
 通常、タグは開始タグと終了タグとで構成される「コンテナタグ」で表されま
 す。終了タグはそのタグ名の冒頭でスラッシュ「/」を用います。

   <開始タグ> 要素  </終了タグ>
  具体的には、
   <h1>第一見出し要素 </h1>

 ブロックレベルで用いられるタグのすべてがコンテナタグです。また、インラ
 インで使われる「置き換え要素 (後述) 」は終了タグがありません。ただし、
 コンテナタグの中には終了タグを省略できるものがありますが、将来を踏まえ
 て、省略することがないよう強くお勧めします。
   (ブロックレベルである罫線表示の hr は例外的に終了タグを持っていませ
 ん。これなども置き換え要素の1つでもあるでしょう。)

 エンプティタグは最初から終了タグが定義されていないタグで、別名「置き換
 え要素」とも呼ばれます。画像や入力フィールドなどがこれに当たります。

  具体的な例として
    <img src="画像のURL" width="100" height="80" alt="サンプル画像">

 ■非推奨と呼ばれるタグ
 現在の最新の HTMLバージョンは 4.01です。HTMLの仕様は様々な改良を重ねて
 バージョンアップしてきました。HTML4.01では大きく分けて3つのタイプがあ
 ります。これに関してはいずれ詳しく説明しますので省きますが、過去のバー
 ジョンで利用されていたタグなどを使う場合と、HTML4.01だけで定義されてい
 るタグだけを使う場合、そしてフレームを使う場合に分かれます。

 HTML4.01は過去のバージョンから飛躍的な改正がありました。その大きな目的
 はマークアップの理念に直結するために工夫が凝らされています。誰でも、ど
 んな環境でも閲覧可能なマークアップとするために、使うことが「好ましくな
 いタグ」を選択し、それを「非推奨タグ」としました。

  つまり、非推奨と呼ばれるタグを使った場合、環境によっては作者の情報が
 正しく伝わらない可能性があるわけです。特定の環境、特定のソフトを使わな
 ければならないということは、広く公開されたインターネットの世界では、非
 常に不便なことです。

 非推奨と呼ばれるタグ (実は非推奨属性もあります) は、閲覧環境に大きく左
 右し、必ずしも作者が提供する情報を適切にレンダリング (理解可能な表現) 
 できない可能性があります。
  また、閲覧者の利用するソフトウェアでは対応していないものも決して少な
 くありません。以前のバージョンでは当たり前のように利用していたタグも、
 HTML4.01では「好ましくない」タグになっていることに注意してください。

 ○非推奨タグ一覧
  apllet     外部のJava言語で作成されたアプレットの表示
  basefont  ページ上の基本フォント (大きさや色、字体など) を指定する
  center   コンテンツを中央に配置する
  dir     番号なしリスト (ディレクトリリストなどの表示)
  font    フォント (大きさや色、字体など) を指定する
  isindex   文書内で検索可能なインデックスを作成する (CGIと関連)
  menu    メニューを表示するリスト (番号なしリスト)
  s、strike  抹消線を表示する
  u      アンダーライン (下線) を表示する

  これたのタグの代替手段については講座の中で適時説明します。

 Webの標準仕様を制定する W3C (World Wide Web Consortium) という機関が決
 定したHTML4.01ではそうした広範囲なアクセス性を確保する (これをアクセシ
 ビリティと呼ぶ) 仕様が取り込まれ
 た画期的なバージョンです。
  当講座では、HTML4.01を中心としたアクセシブルで正確な文法に沿った内容
 で解説します。

 ■倫理的な構造
 HTMLは物理的なレイアウトを求めるのではなく、論理的な構造を求めるという
 大前提があります。これは HTMLに限らず、XMLなど他のマークアップ言語すべ
 てについて同じことが言えます。

 論理的な構造を求めるといっても、ちょっとピンとこないかもしれません。と
 ても難しいように思えます。しかし、HTMLの文法を学ぶと「なるほど」とうな
 ずける点が出てきます。
  簡単に説明することがなかなか困難ですが、論理構造はツリー構造であるこ
 とから説明しましょう。

 ○ツリー構造
 ツリー (木) を説明すると、ちょうど親子兄弟などの家族関係を想像できます。
 親がいて子がいて孫がいる、あるいは兄弟もいるという関係を図に表すと以下
 のようになります。(等副フォントでお読みください。)

                            ┏━━━┓
              ┃ 親 ┃
              ┗━┳━┛
         ┏━━━━━━┻━━━━━━┓
       ┏━┻━┓         ┏━┻━┓
       ┃ 子 ┃         ┃ 子 ┃
       ┗━┳━┛         ┗━┳━┛
      ┏━━┻━━┓       ┏━━┻━━┓
    ┏━┻━┓ ┏━┻━┓   ┏━┻━┓ ┏━┻━┓
    ┃ 孫 ┃ ┃ 孫 ┃   ┃ 孫 ┃ ┃ 孫 ┃
    ┗━━━┛ ┗━━━┛   ┗━━━┛ ┗━┳━┛
                        ┏━┻━┓
                        ┃ ひ孫 ┃
                        ┗━━━┛

  平たく言えば、これがツリー構造です。それぞれに「階層」があることが理
 解できると思います。最下層の「ひ孫」から「親」を見たとき、「孫」「子」
 という2つの階層より上であることがわかります。

  これをタグに当てはめると以下のようになります。 (各タグについては講座
 を進める中で説明します。)

                            ┏━━━┓
              ┃ html ┃
              ┗━┳━┛
         ┏━━━━━━┻━━━━━━┓
       ┏━┻━┓         ┏━┻━┓
       ┃ head ┃         ┃ body ┃
       ┗━┳━┛         ┗━┳━┛
      ┏━━┻━━┓       ┏━━┻━━┓
    ┏━┻━┓ ┏━┻━┓   ┏━┻━┓ ┏━┻━┓
    ┃ meta ┃ ┃title ┃   ┃ h1 ┃ ┃ p  ┃
    ┗━━━┛ ┗━━━┛   ┗━━━┛ ┗━┳━┛
                        ┏━┻━┓
                        ┃  em  ┃
                        ┗━━━┛

 このツリー構造から判断すると、以下の構文が考えられます。

  <html>                                ← 親
   <head>                 ← 子
   <meta ---------- >           ← 孫
   <title>○△□ </title>          ← 孫
   </head>

  <body>                 ← 子
   <h1>見出し </h1>             ← 孫
  <p>段落になります。           ← 孫
    <em>文字の強調になります。 </em>   ← ひ孫
   </p>
   </body>
   </html>

 htmlタグが最上位となり、その下位層に head と bodyがあるのがわかります。
 つまり、親となるタグは html のひとつだけです。その直接の子タグが head
 と body というわけです。
  headタグの子タグ、つまり html から見た場合の孫が meta と titleです。
 逆に言えば、meta と titleの親は head になるわけです。

 同様に htmlの子タグである body には h1、p という子タグがあり、p の子タ
 グには em が配置されています。
  このように、あるタグ内に囲まれたタグには親子関係が成立します。先ほど
 インラインタグについて解説しましたが、インラインタグは必ずブロックレベ
 ルタグの子、あるいは孫にならなければなりません。

 論理的な構造とは、ある情報の要素をタグで囲むとき、それが「意味を成すブ
 ロック」で囲まれていることが前提となります。HTMLドキュメントでは、最上
 位に htmlタグがあり、その子タグとして head と body があります。
  まず、このことをしっかりと覚えてください。

 ■Tips --- head と body
 head (ヘッダ部) では、HTMLドキュメントが独自に持っている各種の情報を、
 Webサーバやユーザエージェント (http を解釈するソフトウェア群、ブラウザ
 やプロキシなども含まれる) に伝えるために記述されます。
  titleタグ以外は、ブラウザに表示されるものはありません。

 body(コンテンツ本体) は、実際にユーザエージェントで表現されるコンテン
 ツを配置します。文字 (テキスト) や画像、フォーム、表組、リストなど、作
 者が閲覧者に伝える情報は、すべてこのタグ内に配置されます。

  具体的な head やコンテンツ表現につきましては、講座を進行する中で詳し
 くお伝えします。

  ※ 次回は実際の HTML 作成に伴うヘッダについて解説する予定です。

□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□

今回はここまで。

 今週のおさらいは Webページにも掲載しましたので、是非参考までに見ておい
 てください。
  Webページでは HTML文の実行結果のサンプルもあり、より分かりやすく説明
 しています。あわせて過去の記事のおさらいも掲載しています

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

 次回は、2005年1月7日に配信を予定しています。

□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□

◆質問・ご意見ははこちらまで→ 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

□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□

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

 今年もあとわずかとなりました。振り返ってみれば今年は例年になく休刊した
 ことがあり、また毎週配信から隔週配信となりました。マガジンを作る側の都
 合ばかりで申し訳ないと思いますが、長く続けていくためにも配信間隔を持た
 せることは、ある意味で大切なことだと思っております。

 プライベートなところでは会社を設立したり、数年ぶりにバイクを購入したり
 何だか駆け足の1年だったような気がします。来年はもう少し腰を落ち着けて
 すべてに対してじっくりと構えていきたいところです。

 猛暑と災害が印象に残りますが、来年は明るく楽しい話題の連続でありたいと
 願っています。皆様にとって良い年がくることを心よりお祈りいたします。

□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□

◆著作権について
 個人がご自分のPCに保存して利用する以外の記事の転載、引用は基本的に応
 じておりません。記事中の内容について、無断で使用することを固く禁じます。
  なお、記事中のスタイルシート、スクリプト、HTMLをご自分のページ作成に
 自由に使っていただいても差し支えありません。

            Copyright(C) 2002-2004  www.scollabo.com/banban/
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□


This page is Valid HTML 4.01! 最新公開日 2005年7月28日
Copyright(C) 2002-2004 banban@scollabo.com