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

                 隔週金曜日配信 What's New 2005年2月25日
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□

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

                        <第111号>

              banban@scollabo.com

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

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

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

   今週のコンテンツ
    ■ やさしいHTML (第5回) --- 見出しと段落 その2
    ■ Tips --- XHTMLとブログ

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

◆やさしいHTML --- 見出しと段落 その2

 今回は見出しタグや段落タグを使わない異なる手法について解説します。平た
 く言えば「リスト」を使うもので、私が個人的に最も好むスタイルです。

 ■定義済みリスト
 前回説明したとおり段落を定義する pタグはブロックレベルに分類され、この
 タグの範囲に他のブロックレベルは配置できません。表やリストなどのブロッ
 クレベルを使う場合には、いったん段落を終了させる必要があります。

 私のような「ものぐさ」には面倒なので「定義済みリスト」を使うことで作業
 効率を上げるようにしました。

 定義済みリストとは「定義する用語」と「その用語の詳細」に分かれたリスト
 です。何だか難しい言葉が並びますが、要は「見出し」と「段落」と解釈する
 ことができます。
  定義済みリストを使う場合には、あらかじめ「定義リスト」を定義すること
 から始めます。以下は定義リストで利用するタグ群です。

   dl --- 定義リストの定義 (終了タグ必須)
   dt --- 定義用語を定義する (終了タグ省略可)
   dd --- dtタグで定義した用語の詳細 (終了タグ省略可)

 dlタグの中には最低1つ以上の dt、あるいは ddタグを配置しなければなりま
 せん。また、dd、および dtタグは必ず dlタグの中で配置されるべきで、他の
 タグ内や単独で利用することは許されていません。

 dtタグの中に他のブロックレベルは配置できませんが、ddタグ内にはほとんど
 のタグを配置でき、定義リストをネスト (繰り返し) することも可能です。

 サンプル例示
 <dl>
  <dt>定義済みリスト</dt>
   <dd>定義済みリストとは、定義した用語とその詳細で成立します。</dd>
 </dl>

 一般的な視覚系ブラウザでは、dlタグの前後に1行分の余白が表示される場合
 があります。また、ddタグではインデント (字下げ) されて表示します。
  これらの表示方法は特に指定されていませんが、スタイルシートを利用する
 ことで作者の任意の表示方法が設定できます。

 見出しと段落は対で利用されますが、このように定義リストを使うことで、見
 出しや段落タグを使わない方法もあることを覚えてください。

 ■スタイルシートを使って定義リストを工夫する
 冒頭にも述べたとおり、私は好んで定義リストを使っています。そのほとんど
 が「見出しと段落」という使い方です。
  今回もスタイルシートはヘッダに埋め込む「エンベッド方式」を採用します。

 <!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>定義リスト/初心者のためのホームページ作り</title>
 <style type="text/css">
 <!--
 body { 
      margin-right: 5%;
      margin-left: 5% }

 dl {
      margin-top: 0;
      margin-bottom: 1ex }

 dt {
      font-size: 1.2em;
      font-weight: bold;
      text-indent: 0.5em;
      background: #069;
      color: #fff;
      padding: 2px }

 dd {
      margin-left: 0;
      margin-bottom: 1em;
      letter-spacing: 1px;
      line-height: 130% }
 -->
 </style>
 </head>

 <body>
 <dl>
 <dt>定義リストの利用</dt>
 <dd>定義する用語とその詳細から構成される「定義リスト」は、用語集などに
   利用されることを想定して定義されたタグです。</dd>
 <dd>定義リストをこのように「見出しと段落」として利用されることが期待で
   きます。定義リストの各タグをスタイルシートで整形することで、見出し
   タグや段落タグを使わない方法もあることを覚えてください。</dd>
 </dl>

 </body>
 </html>

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

 <注意>
 上記構文をそのままコピーして利用する場合、各行頭の余白部分を削除してか
 らお使いください。行頭には全角のスペースがあり、全角スペースは「文字」
 として扱われますので注意が必要です。

◆解説 (スタイルシートのみ説明)

 ■ body { margin-right: 5%; margin-left: 5% }
 コンテンツを表示させるブラウザの画面 (body部) の左右の余白を相対的な比
 率としての5%を設定しています。閲覧者の環境に比例した比率です。

 ■ dl { margin-top: 0; maegin-bottom: 1ex }
 定義済みリスト本体の上側の余白を無くしました。一般的な視覚系ブラウザで
 は概ね1文字分の余白が表示されるようです。

 ■ dt { font-size: 1.2em; font-weight: bold; text-indent: 0.5em;
          background: #069; color: #fff; padding: 2px }
 見出しの部分となるタグ (dt) の背景色をくすんだ青色に、文字色を白色とし
 ました。文字サイズは閲覧者が設定している氷人の大きさの2割り増しとし、
 文字を強調 (一般的には太字で表示) させ、1文字の半分の字下げを設定して
 います。内側の余白 (背景色の部分) を2ピクセル取って文字を見やすくさせ
 ています。

 ■ dd { margin-left: 0; margin-bottom: 1em; letter-spacing: 1px;
          line-height: 130% }
 見出して定義した内容を記述するタグ (dd) の左側の余白を無くし、下側の余
 白を1文字分としました。一般的な視覚系ブラウザでは左部分に数文字分の余
 白があります。
  文字と文字の間隔を1ピクセル分、行間を1文字の30%分に設定し読みやす
 くしました。


 提示したサンプルを実行すればお分かりのように、見出しと段落という1つの
 「組」を見出しや段落タグを使わない手法として「定義済みリスト」を説明し
 ました。タグの役割や性格を熟知すると、いろいろな手法があるということを
 覚えることも、ページ作成の「ツボ」になるでしょう。

  ※次回はサンプルにもある文書型定義について解説します。

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

◆Tips --- XHTMLとブログ

 アメリカの 911同時多発テロ以後、急速に発展した「ブログ」が昨年から日本
 でもすっかり定着してきました。難しい構文の作成を必要とせず日記形式で誰
 でも簡単に導入できる利点があります。

 ブログでは自動的にコンテンツの概要を示すメタデータが作成されます。つま
 りコンピュータが理解できるデータが XML (eXtensible Markup Language) 形
 式で生成されます。これを RSS (RDF Site Summary) と呼ばれるもので、メタ
 データを解釈するソフトウェア (RSSリーダーなど) に提供されます。

 HTMLでは XMLを扱うことができません。そこで XMLによって再定義された次世
 代のマークアップ言語である XHTML(eXtensible Hyper Text Markup Language)
 を利用しているのです。

 ブログ作者にとって難解な XHTMLを意識せずに構築できるところにブログツー
 ルである CMS (Content Management System) が人気となっています。
  ただし CMSを使うだけならほとんど全員が同じ体裁になってしまうため、ス
 タイルシートによってレイアウトや画面デザインを処理します。
  逆に言うならば、XHTMLは HTMLで使えるタグや属性が使えなくなり、レイア
 ウト処理にはスタイルシートに頼るしかないわけです。

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

今回はここまで。

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

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

 次回は、3月11日に配信を予定しています。

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

◆質問・ご意見ははこちらまで→ 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時前、体調を考えて仕事を早き切り上げ外に出てみるとまだ明るいのに
 驚きました。陽の落ちるのが遅くなっていることに気がつかなかったというこ
 とは、自分の中で季節感を失っていることなのでしょうか。考えてみれば来週
 にはもう3月になるのですねぇ。

 最近は本誌サイトの更新がすっかり手がかかっていません。やりたいことはた
 くさんあるのですが時間に追われて何もできない状態です。何とかしなくちゃ
 とは思っているのですが・・・

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

◆著作権について
 個人がご自分の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