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

                 隔週金曜日配信 What's New 2005年4月22日
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□

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

                        <第114号>

              banban@scollabo.com

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

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

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

   今週のコンテンツ
    ■ やさしいHTML (第7回) --- インラインレベル要素
    ■ Tips --- 名前の原則

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

◆やさしいHTML --- インラインレベル要素

 今回は文字列と同等に扱われるインラインレベル要素について解説します。そ
 の前に「タグ」と「要素 (Element) 」について説明しましょう。

 ■タグと要素
 タグとはあるコンテンツの前後にマークアップするときに利用します。タグを
 「コマンド」とか「命令文」と言う人がいますが決してそうではありません。
 HTMLとは「Hyper Text Markup Language」の略で、テキスト形式で作成される
 マークアップ文書です。 (詳細は第106号を参照してください。) 

 マークアップとは、文書全体を論理的な構造としてタグで囲まれることを指し
 タグは、そのコンテンツの要素に応じて適切に選ばれます。それが「見出し」
 であるならば「見出しタグ」を使うといったようにマークアップします。

 要素とは、コンテンツの中の「ひとかたまり」を指し、例えば「見出し」とか
 「段落」、あるいは「表組」とか「リスト」などを要素と呼びます。
  例えば、「見出し」をマークアップしたとき、そのタグを含めて「見出し要
 素 (Heading Element) 」と呼びます。

 ■インラインレベル要素
 HTMLドキュメントの基本構造を形成するのがブロックレベル要素ですが、イン
 ラインレベル要素は、直接コンテンツ内に配置して使われます。
  「インラインレベル要素」は、その名が示すとおりごく普通の文字列と同格
 に扱われ、前後に改行や余白を持ちません。

 インラインレベル要素は多岐にわたっており、文字の形状や入力欄の提供、画
 像の表示などに用いられ、ページ作成上かなり重要な役目を担っています。
  なお、インラインレベル要素は原則的にブロックレベル要素の中で利用され
 ることになります。body要素に直接配置するのは好ましくありません。

 ■テキストで使われるインラインレベル要素
 主にテキスト (文字列) コンテンツの中で利用されるインラインレベル要素の
 一覧を以下に掲げました。

  要素名   終了タグ   意味      機能
  --------------------------------------------------------------------
  a      必須    アンカー   リンク元やリンク先の設定
  abbr    必須    省略語    発音できない省略語 (W3Cなど)
  acronym   必須    頭字語    発音できる省略語 (LANなど)
  b      必須    ボールド   太字にする
  big     必須    大きい    文字を一回り大きくする
  bdo     必須    文字並び   右方向、左方向を指定する
  br     必要なし  強制改行   このタグのところで改行させる
  code    必須    コード    プログラムコードの表示
  del     必須    削除     この範囲の文字列に抹消線を表示
  dfn     必須    定義用語   用語を定義して説明する
  dir     必須    階層リスト  ディレクトリをリストにする
  em      必須    文字強調   強調・重要視する文字の指定
  font    必須    フォント   フォントの装飾に用いる
  i      必須    斜体文字   文字を斜体にする
  img     必要なし  画像     画像を表示する場合に用いる
  ins     必須    追加テキスト 文字列を追加したい場合に用いる
  kbd     必須    キーボード  ユーザの入力した文字列
  q      必須    引用     短文の引用に利用する
  s      必須    抹消線    文字に抹消線を表示する
  samp    必須    サンプル   サンプルとなる文字列に利用する
  small    必須    小さい    文字を一回り小さくする
  span    必須    汎用インラインレベル要素
  strike   必須    抹消線    文字に抹消線を表示する
  strong   必須    文字強調   最も強い意味を持つ文字強調
  sub     必須    下付き文字  文字を小さく下側に表示
  sup     必須    上付き文字  文字を小さく上側に表示
  var     必須    変数     プログラムコードの変数の意味
 ---------------------------------------------------------------------

 □ a要素
 アンカー (錨) を意味し、他からの移動先として name属性で設定したり、URL
 を示してリンク先を設定したりします。ハイパーテキストたる代表的な要素と
 なっています。属性によってリンク元かリンク先を指定します。

  リンク元 <a name="point">リンク元</a>   他から参照する場所の設定
  リンク先 <a href="index.html">Home</a>  他に移動する所在を設定

 リンク元を設定する場合には、属性を name とし任意の名前を付けます。他の
 場所から直接リンクできるアンカーとなって機能します。

 他の場所にリンクする場合には、href属性の値にその URLを明示します。
   URLは絶対アドレス (絶対パス) か、相対アドレス (相対パス) で示される
 ことが前提となります。

 なお、ほとんどの Webブラウザではリンク元となる埋め込みアンカーの場合に
 は表示に変化はありませんが、リンク先を示す a要素では下線がつき文字色も
 他の文字と異なって表示され、そこがリンクであると差別化します。

 □ abbr要素
 省略語を用いたときに利用します。 (必ずしも絶対に使うべきということでは
 ありません。) このタグで囲まれる省略語とは、一言で発音できないものに限
 られます。
  例えば、HTML (えっちてぃーえむえる) とか、W3C (だぶりゅーさんしー) 
 などがそれに当たります。このタグを使う場合には title属性で正式な意味を
 明記します。

  例:
   <abbr title="Hyper Text Markup Language">HTML</abbr>

  一般的な視覚系ブラウザでは特に表示に変化はありませんが、音声やテキス
 トを中心とした非視覚系ブラウザでは略語とともに正式な字句が表示されます。

 □ acronym要素
 abbr要素と同様に省略語を扱いますが、このタグの場合には発音できる「頭字
 語」と呼ばれる省略語の場合に利用します。
  例えば、LAN (らん:Local Area Network) とか、GIF (じふ、あるいはぎふ
 、アメリカでは「ぎふ」と読んでいる:Graphic Interchange Format) などが
 それに当たります。このタグを使う場合には title属性で正式な意味を明記し
 ます。

  例:
   <acronym title="Local Area Network">LAN</acronym>

 多くの視覚系ブラウザでは、このタグを範囲にマウス・ポインタを当てると属
 性で示した正式な字句を伴うツールチップが表示されます。非視覚系ブラウザ
 では、abbr要素と同じ働きをします。

 □ b
 b要素は「Bold」を意味し、このタグで囲まれた範囲の文字列を太字にします。
 タグにはほとんど意味がなく、単純に文字を物理的に太字にするだけです。
  不思議なことにこのタグは物理タグであるにもかかわらず「非推奨」扱いに
 はなっていません。もっと不思議なのことに XHTML1.1 でも非推奨になってい
 ないのには驚かされます。 (XHTML2.0 では廃止の方向)
  マークアップは物理的なレイアウトを排除している観点を考えると、このタ
 グの使用は控えたいところです。

 □ big
 このタグで囲まれた文字列の文字を大きくします。これも非推奨とはなってい
 ません。

  例:
   この部分の文字を <big>大きく</big> します。

 □ bdo
 通常、デフォルト (初期値) では、文字は左から右方向で表示されます。アラ
 ビア語などのように右から左方向へ表示したい場合などに設定したい場合に有
 効なタグです。
  属性は dirを使います。属性値は左方向 ltr、右方向 rtl です。

   例:
    <bdo dir="rtl">アラビア語</bdo>

 □ br
 文字列などを強制的に改行します。コンテンツのある場面でどうしても改行さ
 せたいときに利用します。なお、このタグは空タグなので終了タグは不要です。

   例:
    ここで改行します。<br>

  このタグを連発して余白を作ったり段落に見せるのは厳密には文法違反とな
 ります。初心者が好んで使う場面をよく見かけます。

 □ code
 コンピュータのプログラム・コードなどを表す場合に使われるタグです。一般
 的な視覚系ブラウザでは、このタグで囲まれた範囲を固定ピッチフォント (等
 副フォント) で表示します。
  なお、必ずしもプログラム・コードだけで使わなければならないということ
 ではありません。

   例:
    JavaScriptにおける関数は <code>function</code> を用います。

 □ del
 削除 (Delete) の語源を持つタグで、その名のとおり削除したことを意味しま
 す。一般的な視覚系ブラウザでは、このタグで囲まれる範囲の文字列に抹消線
 を表示します。
  何らかの理由で、文字列を抹消させたい場合に利用します。決して抹消線を
 表示させるためだけで用いるのではありません。「意味のある抹消線」である
 ことが好もしいものです。
  datetime属性を使って抹消した日付を添えることができます。

   例:
    <del datetime="2004-04-22T06:48:30+09:00">この記事は本日
    抹消しました。</del>

 □ dfn
 専門的な技術用語を定義して囲むタグです。特に文書中、最初に登場した専門
 的な用語を説明する場合に用いられます。一般的な視覚系ブラウザでは斜体で
 表示されます。ただし、斜体にするために用いるものではありません。
  

  例:
   <dfn>W3C</dfn>とは、ネットワーク上の標準仕様・・ (以下省略)

 □ dir
 ディレクトリ階層を表示するリストタグで、現在は「非推奨」となっています。
 リストは構造上ブロックレベルであるべきとの判断から、現在では番号つきタ
 グである ol、あるいは番号なしリストの ulタグを使うことが望まれています。

  リスト項目は基本的に liタグを使います。

   例:
    <dir>
     <li>HTML講座</li>
     <li>CSS講座</li>
     <li>JavaScript講座</li>
    </dir>

 □ em
 ある特定の文字を強調・重要視 (Emphasis) するという意味を持つタグで、一
 般的な視覚系ブラウザではこのタグに囲まれた文字列を斜体で表示します。
  他の文字列よりもそのフレーズを強調させるという意味でマークアップしま
 すが、斜体表示のためだけで利用するのは文法違反となります。

   例:
    W3Cの統括責任者は <em>バーナース・リー氏</em>です。

 □ font
 フォント装飾用に用いられるタグで特別の意味はありません。フォントの大き
 さや文字色、字体などを指定するときに用いられる物理タグです。
  HTML4.01では「非推奨」扱いとし、フォントの装飾はスタイルシートで設定
 することを求めています。XHTML1.1では廃止されました。

   例:
    <font color="#ff0000">赤い文字</font>

 □ i
 文字を斜体 (イタリック体) にするための物理タグです。非推奨扱いとはなっ
 ていませんが、意味を持たないタグであるため、このタグの使用は極力控えた
 いところです。

   例:
    文字を <i>斜体</i> にします。

 □ img
 写真やイラストなどのイメージ (画像) を貼り付けるときに利用するタグで、
 終了タグのいらない空タグです。基本的に画像も文字列と同じに扱われるイン
 ライン要素であることに注意してください。
  画像の表示は src属性で画像ファイルの所在 (URL)を指定します。また、画
 像ファイルのサイズ (横幅と高さ) を指定することで、体感的に速い表示が可
 能となっています。
  画像が表示できない非視覚系ブラウザのために、代替となるテキストを alt
 属性で設定しておくことが望まれています。

   例:
    <img src="sample.jpg" width="100" height="50" alt="代替文字列">

 □ ins
  何らかの都合により後から追加するテキストを挿入するときに用います。いわ
 ば del要素と逆の意味になります。一般的な視覚系ブラウザでは、このタグに
 囲まれたテキストに下線 (アンダーライン) を表示させますが、下線を表示す
 るためだけに使うのは厳密には文法違反となります。
  datetime属性を使って追加した日付などを指定することが可能です。

   例:
    <ins  datetime=="2004-04-22T06:48:30+09:00">記事の追加</ins>

 □ kbd
 ユーザの入力よって表示される文字列という意味を持ち、一般的な視覚系ブラ
 ウザでは固定ピッチフォントで表示されます。フォームの入力結果などを表示
 する場合に使われますが、あまり一般的ではありません。

 □ q
 短文の引用文を表示する場合に用いられます。なお、長文の引用文はブロック
 レベルの blockquote要素を用います。
  引用する際の参照先として cite属性が用意され、その URLを明示します。

  例:
  W3Cの q要素の説明によれば 
  <q cite="http://www.w3.org/TR/html401/struct/text.html#edef-Q">短文
  の場合に使う</q> とされています。

 □ s
 抹消線を表示します。このタグに特に意味はなく、また物理的なレイアウトを
 持つもので、HTML4.01では非推奨扱いとなっています。抹消線を表示させるの
 は、それなりの意味があるわけで del要素を使うようにしましょう。

 □ samp
 コンピュータ・プログラムなどのソースコードをサンプルとして表示させたい
 場合に利用されます。基本的には code要素と同じ役割をします。
  やはり一般的な視覚系ブラウザでは固定ピッチフォントで表示します。

  例:
  JavaScriptにおける関数は <samp>fonction</samp> を宣言します。

 □ small
 通常よりも一回り小さなサイズの文字列を表示します。このタグに意味はなく
 文字総称くはスタイルシートを使いましょう。なお、HTML4.01では非推奨扱い
 とはなっていません。

  例:
   <small>小さい文字</small>

 □ span
 汎用インラインレベル要素で、このタグ自体に意味はありません。基本的には
 スタイルシートを利用して文字列を装飾する場合などに用いられるもので、閲
 覧者のブラウザではサポートしていない場合もあります。

 □ strike
 抹消線を表示します。 s要素同様に非推奨扱いの物理タグとなっています。基
 本的には s要素と同じ役割と記述法となります。

 □ strong
 文字を強調する場合に用います。文字の強調は em要素もありますが strongの
 場合は最も強い強調という意味となります。
  他の文脈よりもより強調したい場合に strongを用います。

  例:
   strong要素は <strong>最も強い強調</strong> という意味を持ちます。

 □ sub
 下つき文字を表示します。化学式のように小さい文字を表示する場合、例えば
 水の化学式 (H2O) のような場合 2 を小さく下側の表示する場合にこの要素を
 用います。

  例:
   水の化学式は、H<sub>2</sub>O です。

 □ sup
 上付き文字を表示します。例えば数学に用いられる乗数を表示したいときに
 便利に使うことができます。

  例:
   1ギガバイトとは、2<sup>10</sup> で示されます。 (2の10乗)

 □ var
 変数を意味し、プログラムコードの変数あるいは引数などを表示するときに利
 用します。一般的な視覚系ブラウザでは斜体で表示されます。

  例:
   JavaScriptにおける関数は、<var>function</var> で示されます。

◆まとめ

 インラインで利用される各タグの中で、特に意味のある要素を「フレーズ要素」
 と呼びます。逆に意味を持たない物理タグは閲覧者環境に依存することが多い
 ため、できる限り使用することを控えたいところです。
  何度もお伝えしているとおり、マークアップとは物理レイアウトを記述する
 ものではなく、あくまで論理構造を構築することから始まります。

 インラインレベル要素は文字列コンテンツの表現に欠かせないものです。今一
 度、それぞれのタグの意味を十分に理解し、適切に使うことを望みます。

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

◆Tips --- 名前の原則

 HTMLドキュメントや画像などの外部ファイル、あるいは埋め込みアンカーなど
 で利用する「名前」は自由に任意につけることができます。
  しかしながら Webという共通の利用空間では、最低限守らなければならない
 ルールもあることを忘れてはいけません。

 ■名前の規則
 半角英数字が基本となっており、全角の日本語などは使うことができません。
 インターネットはそのリソースを世界中で共有するため、他の国では認識でき
 ない言語を使えないのです。

 名前は、a〜z、A〜Z、1〜0 まででつけることが最低限のマナーです。また、ハ
 イフンやアンダーバーなども利用可能です。

 ファイル名など URLに必要な名前は、厳密に大文字と小文字を区別します。つ
 まり a と A は違うものとして区別されます。間違えやすいので十分注意して
 ください。

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

今回はここまで。

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

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

  次回は、5月中旬に配信を予定しています。

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

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

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

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

 アドビ社 (Adobe) がマクロメディア社 (Macromedia) を突然買収したという
 報道に驚きました。画像処理や Webオーサリングでライバル関係にあった2社
 の合併の最大の目的は、やはりマイクロソフト社への対抗意識の現われなので
 はないかと想像しています。
  アドビの PDF作成ソフト (Acrobat) やフォトショップ (Photoshop) などは
 ある意味で業界のスタンダードになっており、一方のマクロメディアの FLASH
 も Webデザインの定番でもあります。2社の合併によるシナジー効果が、これ
 から先どのような形で具現化されるのか、非常に興味のあるところです。

 一方で、ソフトウエアの適切な競争が失われるのは、私たちエンドユーザにし
 てみれば、若干の不安も懸念されます。両者とも高価なソフトをリリースして
 きただけに、大幅な価格上昇は遠慮願いたいものです。

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

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

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


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