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

                毎週金曜日配信 What's New 2004年8月20日
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□

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

                banban@scollabo.com

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

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

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

   今週のコンテンツ
    ■ 正しい文法のために  第3回 --- 属性
    ■ Tips --- 文書型定義 (DTD)
    ■ CSS講座 第18回 --- アンカー (擬似要素)

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

◆正しい文法のために --- 属性 (Attributes)

 属性とは要素の性質や付加的な機能を提供することにあります。
  例えば、「小泉純一郎」の属性は、内閣総理大臣であり、神奈川選出の衆議
 院議員でもあります。「小泉純一郎」だけでは何の変哲もありませんが、日本
 の首相であるという「属性」は大きな意味があります。

 リンクを示す a要素は、hrefという属性などが追記されて初めてその意味を持
 ちます。HTMLの各種の要素タイプには、こうした属性があらかじめ定義され、
 ある要素を囲むときに、その要素の性質や意味付けをします。

 要素タイプに「非推奨扱い」という型がありますが、属性にも同様に非推奨扱
 いがあります。ただし、利用する「文書型定義」の宣言によっては非推奨扱い
 の要素とともに非推奨属性が利用できます。
  当講座では、あくまで厳格仕様 (Strict) に基づいて説明していますので、
 非推奨属性を使わない文法に終始しています。

 ■属性の型による非推奨と推奨属性
 例えば、位置を示す align属性は非推奨とされていますが、テーブルのセルを
 定義する要素には非推奨属性として扱われることがありません。

  例文:
  <table>
    <tr><td aligh="right">右寄せ</td></tr>

  このように、利用する要素型によっては厳格仕様でも使える属性があります。
 利用できない属性は、そのほとんどでスタイルシートを代替として設定するこ
 とが可能です。

  厳格仕様で利用できない属性の一覧はこちら
  http://www.scollabo.com/banban/dep/dep_02.html

 ■属性の値
 属性値 (ぞくせいち) は、タグと同様に大文字と小文字を区別しません。ただ
 し、他のファイルを指定する (URI) 場合や、ID などを指定する場合には、厳
 密に大文字と小文字を区別しますので注意してください。
  ローカル (あなたのパソコン) では、大文字と小文字を区別しなくても大丈
 夫な場合がありますが、サーバにアップデートした場合には、必ずしも正常に
 機能するとは限りません。

  属性値で利用できる文字は全角や半角文字を除いてほとんどの場合で利用可
 能ですが、文字参照符号については変換が必要です。
  属性値に & などを用いる場合には、&amp; としなくてはなりません。

 属性値は基本的に引用符で囲むようにします。ただし例外的に値が数値やアル
 ファベットの場合には省略することができます。

  例文 width="100"  → width=100
     id="name"    → id=name

  必ず引用符を使う場合があります。ハイフンやアンダーバー、スラッシュな
 どの記号を値に用いた場合には、引用符で囲まなければなりません。

  例文 × href=images/sample.gif    この場合には引用符は省略不可
     ○ href="images/sample.gif"  必ず引用符を使うこと

 なお、XML、XHTML では引用符の省略は認められておりません。今のうちから
 属性値がどのような型であっても囲むようにクセをつけましょう。

 ■値がない属性
 HTMLでは値のない属性がいくつか存在します。こうした属性を「最小モデルの
 ない属性」と呼び、単に属性を記述するだけで機能します。

  □ 属性地のない属性の一覧 (順不同)

  属性名     機能                関連要素
 ---------------------------------------------------------------------
  declare   オブジェクトの実行を禁止する       object
  defer   スクリプトに文書の表示を生成する要素を    script
        含まないことを宣言する
  ismap   サーバサイドイメージマップを利用する   img
  multiple  メニュー項目を複数選択可能にする     select
  nohref   リンク先がないことを示す         area
  noresize  フレームサイズの変更禁止 (非推奨)     frame
  noshade  平面的な罫線 (非推奨)           hr
  nowrap   改行の禁止 (非推奨)            td、th
  disabled  入力フィールドの選択を禁止する      input
  readonly   入力フィールドの選択を禁止する      input
  checked  入力ボックスが選択されていることを示す  input
  selected  メニュー項目が選択されている       option
  compact  リスト項目のコンパクト化 (非推奨)     dt、ul、ol

 なお XHTMLでは、最小モデルのない属性については、以下のように記述しなけ
 ればなりません。

  <input type="text" value="入力禁止" disabled="disabled" />

 つまり、属性がそのまま値となります。

 ■汎用属性
 各要素には共通した属性があり、これを「汎用属性」と呼びます。ほとんどの
 要素型で利用することができます。ただし、一部の属性では「ヘッダ部」に使
 う要素には利用できません。

 □ 汎用属性一覧
 以下は、汎用属性と呼ばれる一覧です。

 属性名     機能
 --------------------------------------------------------------------
 dir      文字の表記方向を指定 (初期値は ltr、右からの表記は rtl)
 lang     言語コードを指定 (日本語は ja、英語は en、仏語は fr、など)
 style    インライン・スタイルシートの設定
 title    要素内容の補足説明をテキストで示す
 class  クラス属性 (参照先の分類名を指定する)
 id     ID属性 (参照先の識別子を指定する)

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

◆Tips --- 文書型定義 (付記)

 文書型定義については何度かこのマガジンで取り上げてきたとおりですので、
 あえてその役割については申し上げませんが、基本的には、HTMLのどのような
 形式であっても、その冒頭で文書型を定義する宣言が必要です。
   (なお、文書型定義の役割については、第53号を参照してください。)

  文書型定義の様式についての各ブラウザ銘柄による微妙な違いもあり、必ず
 しもブラウザが文書型定義に準拠するかどうか疑わしいところです。

 ■文書型定義の標準型と互換型
 以下は、HTML4.01Strict (厳格仕様) の文書型定義です。

  標準型
  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
      "http://www.w3c.org/TR/html4/strict.dtd">   (改行なしで記述)

  互換型
  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

 この2つの大きな違いは、文書型を参照する URI が有無です。
  本来ならばブラウザは、文書型定義で示される URI先を参照すべきですが、
 ブラウザ自身が W3C に準拠して作られているため、URI 先を見に行くことが
 ない場合が多いものです。

 ■ Webブラウザの振る舞い
 制作者にとって問題なのが、文書型定義によるブラウザの振る舞いです。厳格
 な Strict では問題がなくても標準型と互換型では、閲覧者の環境によって表
 示される内容が異なる場合があります。
  特に、Windows環境で制作した場合と、Macintoshの場合では顕著に現れます。

 当サイトでは、ほとんど厳格仕様の互換型で作っていますが、若干文字サイズ
 の相違があるほかは大きな問題にはなっていません。ただし、テーブルにおけ
 る文字サイズには少々注意が必要です。

 ■標準型か互換型か
 結論から申し上げれば標準型になるでしょう。閲覧環境に左右されないという
 理由によります。決してブラウザは W3Cの HTML仕様を参照するわけではあり
 ませんが、不用意な表示の違いに対処するうえでは解決策になるでしょう。
  特に過渡期仕様 (Transitional) の場合には顕著に現れます。

  文書型定義の明示的な宣言は必須ですが、宣言を省略した場合に厳密には、
 HTML2.0 で扱われることになりますが、実情は HTML4.01Transitional として
 扱われています。だからといって省略することを推奨しているわけではありま
 せん、念のため。

  記述されている HTML の全体の仕様を考慮して文書型定義を選択し、文書の
 冒頭で宣言してください。

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

◆CSS講座 --- アンカー (擬似要素)

 今回は擬似要素に対する説明ではなく、シーンに応じたアンカーリンクの表示
 方法について解説します。擬似要素に関するの詳しい説明は、「第75号、およ
 び、第76号」をお読みください。

 ■同一ページの異なるリンクの表示方法
 視覚系ブラウザのほとんどでデフォルト (初期設定) は、アンカーリンクに下
 線が表示されます。これは、他のテキストとリンクのテキストとを差別化し、
 閲覧者にそこがリンクであることを示すためです。
  その意味で、アンカーリンクはデフォルトのままが推奨されています。

 しかし、ある部分のアンカーリンクには下線の表示をしたくない場合が出てき
 ます。そこがリンクであることを閲覧者に理解してもらえるということを前提
 に、リンクの異なる表示方法を設定します。

 ■クラス、ID別の擬似要素の設定
 通常、アンカーリンクの擬似要素に対しては以下のように設定します。

  a:link    { color: #03f; text-decoration: underline }
  a:visited { color: #90c; text-decoration: underline }

 前者は身訪問のリンクの文字色 (青色) と下線を表示します。後者は訪問済み
 の文字色 (紫色) と下線を示しています。これによってすべてのアンカーリン
 クにはこの設定で表示されます。
  では、以下のスタイルシートではいかがでしょうか。

  #visit a:link    { color: #03f; text-decoration: none }
  #visit a:visited { color: #90c; text-decoration: none }

 このスタイルシートは、ある要素に id を設定し、その要素内にあるアンカー
 リンクのみ適用させるもので、他のアンカーには適用しません。ここでは単に
 下線を非表示にしているだけです。
  何度か説明してきたとおり、IDとなるスタイルシートは、同一ページで1回
 しか使うことができません。IDとは、基本的に識別子をあらわすものであり、
 識別するものが複数あってはならないためです。

 一方、クラス設定は何度でも使うことができます。同じ設定を同一ページで複
 数使う場合、クラスを指定します。
  以下はクラス属性を使ったスタイルシートです。

  .visit a:link    { color: #03f; text-decoration: none }
  .visit a:visited { color: #90c; text-decoration: none }

 IDではハッシュマーク # を使いますが、クラスはピリオド . を使います。

  以下は ID と、クラス属性を使った HTML文書です。今まで講座で解説した
 スタイルシートもあわせて使っています。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_Jis">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>アンカーリンクの CSS</title>
<style type="text/css">
<!--
body { 
       margin-left: 6%; 
       margin-right: 6% }
h1   { 
       font-size: 1.2em; 
       background: #069; 
       padding: 2px; 
       color: #fff; 
       margin-top: 0 }

#visit a:link    { 
                   color: #03f; 
                   text-decoration: none }
#visit a:visited  { 
                    color: #90c; 
                    text-decoration: none }

#visit  { 
          font-size: small; 
          text-align: right; 
          margin-bottom: 0 }
-->
</style>
</head>

<body>
<p id="visit"><a href="../../index.html">Home</a></p>

<h1>アンカーリンクのスタイルシート</h1>

<p>上記のパンくずリストとするアンカーには下線がありません。
しかしここでは、<a href="../../index.html">Home</a> という具合に下線が
表示されます。</p>

</body>
</html>

 サンプルの実行結果
 http://www.scollabo.com/banban/magazine/ms/sample_99-1.html


◆解説 (スタイルシートに関する記述のみ解説します。)

□ <meta http-equiv="Content-Style-Type" content="text/css">

 スタイルシートを利用するため、ユーザエージェント (HTTPを解釈するソフト
 ウェア) に対して、その MIMEタイプを明示します。CSSスタイルシート利用の
 必須条件となります。

□<style type="text/css"> 〜 </style>

 style要素は 非HTMLデータであるスタイルシートをこの範囲に記述して設定し
 ます。基本的にヘッダ部で配置しなくてはなりません。
  なお、実際のスタイルシートを記述するために、コメント <!-- 〜 --> の
 中で配置します。これは、スタイルシートに対応していないユーザエージェン
 トへの配慮となります。コメントがない場合には、最悪スタイルシートの記述
 がそのまま出力されてしまう危険があります。

□ body { margin-left: 6%; margin-right: 6% }

 body要素 (コンテンツを配置するための要素) の左右の余白をブラウザ画面比
 率の6パーセントとしています。

□ h1 { font-size: 1.2em; background: #069; padding: 2px; 
        color: #fff; margin-top: 0 }

 見出し要素の文字サイズ、色、背景色などを設定しています。文字サイズは通
 常の2割大、色は白色、背景色はややくすんだ青色で、内側の余白を上下左右
 とも2ピクセル、乱し全体の上側の余白をなくしています。

□ #visit a:link { color: #03f; text-decoration: none }

 visit という識別子 (ID) の未訪問のリンクに対して文字色を青、下線なしと
 しています。他の未訪問リンクには適用されません。

□ #visit a:visited  { color: #90c; text-decoration: none }

 visit という識別子の訪問済みのリンクに対して文字色を紫色、下線なしとし
 ています。他の訪問済みリンクには適用されません。

□ #visit { font-size: small; text-align: right; margin-bottom: 0 }

 visit という識別子を持つ要素の文字サイズを小さく、配置を右寄せにし、下
 側の余白をなくしています。なお、text-align属性はブロックレベル要素のみ
 適用されますので注意してください。

 ■Tips
 リンクを示すアンカーでは、ポインティング・デバイス (マウスなど) が触れ
 ると表示を変える a:hover や、クリックされたときの a:active というスタ
 イルシートがあります。

 例:
  a:hover { background: #ff0; color: #000; text-decoration: none }
   リンクに触れたとき、文字色を黒、その背景色を黄色、下線なしとします。

   a:active { color: #f00; text-decoration: none }
   リンクをクリックしたときに、その文字色を赤、下線なしとします。

  a:link、a:visited などの疑似要素と組み合わせて面白い効果を演出するこ
 とができます。お試しください。

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

今回はここまで。

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

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

 次回は記念すべき第100号です。9月3日に配信を予定しています。

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

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

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

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

 アテネ・オリンピックが始まって以来、寝不足が続いています。6時間の時差
 はどうしようもありません。リアルタイムの感動は得がたいもので、ついつい
 朝方までテレビに見入ってしまいます。
  深夜に「いけーっ!」とか、「やったーっ!」などと叫んでおりますが、あ
 と1週間はこんな状態が続くのでしょう。それにしても日本選手の活躍は目を
 見張るばかりです。がんばれニッポン!チャチャチャ!

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

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

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


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