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

                   毎週金曜日配信 What's New 2003/5/23
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
       初心者のためのホームページ作り/Web for beginner
           http://www.scollabo.com/banban/

                <第52号>

             banban@scollabo.com

〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓

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

 当講座ではHTML4.01及び XHTML1.1 を中心とした文法が主体となっています。
なお、このマガジンは等幅フォントでお読みいただくと快適に読めるようになり
ます。
  等幅フォントに関しては、「まぐまぐ」の http://www.mag2.com/faq/mua.htm
を参考にするといいでしょう。

  今週のコンテンツ
      ■ Webデザイン 第2回 --- 設計のすすめ
   ■ HTML講座  第2回 --- HTMLの文書構造
   ■ XHTML講座 その14 --- ページの印刷
    ■ タグの解説 --- del要素
    ■ バックナンバーの配布のお知らせ

〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓

◆Webデザイン 第2回 設計のすすめ

 ホームページを作成するにあたって、設計という最初に行う作業があります。
しっかりした設計基盤の上で作成される Webページはメンテナンス性の容易さだ
けを追求するわけではなく、ユーザが使いやすいページを構築することにも大き
く寄与します。
 同時に、サイト内のリンク切れや、画像の表示ミスなどのエラーを防止し、正
しいナビゲーションを設定する上でも欠かすことができません。

 現在、当講座の Webサイトには、約1000以上のファイルが置かれています。
もし、設計がまったくされていなかったら、どうやってメンテナンスしたらいい
でしょう。雲をつかむようなことになってしまいます。

 プロの制作現場では、設計にあたってフローチャートを作成し、設計そのもの
に矛盾がないか、あるいはサイト全体の整合性の可否などを判断します。

 ■フローチャートの作成では、主に次の点を考慮します。
  ディレクトリ構造の設計
  ナビゲーションの設計
  サイトマップの作成

 ディレクトリ(フォルダ)構造の設計は、公開されるものと非公開、あるいは
会員制のディレクトリを先に設定し、各カテゴリ別に分類された情報に基づいて
ディレクトリを設計します。

 制作現場では、グループに分けて作成される関係で、このディレクトリの設計
は重要な意味があります。
 例えば、「猫」の情報を持つページには、「猫」のディレクトリに配置されま
す。「猫」に分類された作業チームは「猫」に集中して作成される関係で、その
作業のほとんどを「猫」のディレクトリ内で行われます。
 決してこの中では「犬」や「猿」を取り上げることはありません。ただし、関
連する項目の場合には、それに準じたリンクを貼る必要が出てきます。これも、
設計段階で検討されます。

 ナビゲーションは、どのようにユーザを各ディレクトリ、各ページに誘導する
のかを練り上げて設計します。ナビゲーションがいい加減ですと、ユーザを迷子
にさせたり、目的のページにいけなくなる場合があります。
 サイト内のコンテンツを台本として、一種のストーリー(物語)が描けたら、
そのサイト全体が使いやすく有意義なものになる可能性が高いでしょう。

 プロの現場では、一番先にサイトマップを設計することがあります。
つまり、フローチャートの段階である程度マップやナビゲーションが決まってき
ますので、マップが先にできることが多いのです。サイトマップが先に出来上が
ると作業が楽になってきます。
 ここでは別に、HTMLで書く必要はありません。あくまでも設計の段階です。

                 (第3回:ディレクトリの設計につづく)

〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓

◆HTML講座  第2回

 HTMLを作成する上で、どうしてもお断りしておかなければならないことがあり
ます。当講座では、HTML4.01Strict(厳格仕様)に基づいて解説します。

 HTML4.01Strictは、ある意味では簡単ではないかもしれません。皆さんの中に
今まで Webページ作りをされていた方は戸惑うことが多々あると思います。

 今回は、何故そうなのか、どんな決まりがあるのか、を含めて、HTML作成上の
基本的な「お約束」について説明します。(少し頭が痛くなるかも・・)

 ■マークアップとは?
 マークアップ(しるし付け)とは、一般的な普通の文書を、ある約束に基づい
 て、HTML文書を作成するための一連の作業を指します。

  HTML文書とは、そうした約束の上で、文書上にある意味構造を示す要素を、
 明示的に区別して HTMLの仕様書で定義されたタグ(tag)といわれるものを使
  ってマークアップされた文書を指します。

  要素とは、文書中のある部分に、意図を持って区別し、タグによって、他と
 は違うことを明示した内容を指します。

 例えば、以下の文書(テキスト)を参照してください。

 ---------------------------------------------------------------------
  初心者のためのホームページ作り

  HTMLは難しい?
  多くの専門書や Webサイト上で「HTML」は簡単である、という記述がある
  があれは、全部ウソである。HTMLは簡単なんかじゃないのだ。

   概して、そのように言う人たちこそ、間違った文法のHTMLしか書けない
  のが実情だろう。HTMLは、実は大変難しいのである。

                             作者:ばんばん
 ---------------------------------------------------------------------

  この文書にある「初心者のためのホームページ作り」という1行目の文章は
 誰が見ても「題名」であることに気がつきます。

  そして「HTMLは難しい?」と書かれたものが「見出し」であると理解できる
 でしょう。

  本文が2つの「段落」を持って書かれています。そして、「作者:ばんばん」
 は、文書を作った「作成者」であることもお分かりになるでしょう。

  どんな文書でも、それがワープロソフトで書かれたものや、単なるテキスト
 エディタ(メモ帳やSimpleTextなど)で書かれたものであっても、必ず「見出
 し」や「段落」が存在します。そうしなければ第三者が読んだとき、文書内容
 を理解できないからです。

 整理してみましょう。
  「題名」「見出し」「段落」「作者」という4つの「要素」があります。
 つまり、この文書を論理的な構造に分けて、4つの要素があることが理解でき
 ます。

  これを、HTMLのタグを使ってマークアップすると、

  <title>初心者のためのホームページ作り</title>

  <h1>HTMLは難しい?</h1>

    <p>多くの専門書や Webサイト上で「HTML」は 〜 省略 〜 </p>
    <p>概して、そのように言う人たちこそ 〜 省略 〜 </p>

   <address>作者:ばんばん</address>

 このように、各要素ごとに区別してマークアップすることができます。
 (ここではタグの説明は、あえていたしません。いずれ講座の中でイヤという
  ほど深く解説していきます。)

 ■文書の論理構造
 前回、SGMLの原則について説明しました。つまり、

 ・マークアップは物理的なレイアウトではなく、文書の構造を反映したもので
  なければならない。
 ・マークアップはコンピューターと人間の両方が理解可能な形式でなければな
  らない。

  HTML4.01Strictとは、この原則を忠実に具現化したものです。先に挙げた文
 書の要素にマークアップした構造は、まさにこれを示しています。

 何故か?
  HTMLは、SGMLのサブセットとして定義された、SGMLのアプリケーションだか
 らです。

 次の2つのページを参照してください。
  物理的なレイアウトのページ
  http://www.scollabo.com/banban/magazine/mmsample/sample_52-1.html

  論理的な文書構造のページ
  http://www.scollabo.com/banban/magazine/mmsample/sample_52-2.html

  両者とも同じように見えますが、実はまったくの別物です。前者は、その要
 素内容が存在せず、ユーザの中には、文書が何を示しているのか理解できない
 場合があります。
  後者の場合、要素内容が「見出し」「段落」「作者」と区別され、現存する
 すべての Webブラウザで正しく認識されます。
  その理由は・・・?

  現在、 Webブラウザの中には大きく分けて、健常者(身体に何も障害のない
 健康な状態の人のこと)の方が利用する視覚系ブラウザ(注1)と呼ばれるも
 のや、身体障害者の方が利用する非視覚系ブラウザ(注2)と呼ばれるものが
 あります。
  視覚系ブラウザでは同じに見えても、非視覚系ブラウザでは同じに見えない
 のです。

  HTMLも、人間やコンピューターが理解可能でなければなりません。つまり、
 どのような環境の人間でも、どのようなプラットフォームでも理解可能でなけ
 ればならないのです。
  HTMLの表示の結果は、訪問してくれるユーザの環境や、利用しているブラウ
 ザによって異なるのです。

  論理的な構造を持つHTML文書とは、まさに様々な環境の人々に、その情報を
 確実に届けられることを意味しています。

 ■物理的なレイアウトとは
  「物理的」という意味は、ユーザの環境に依存するという意味を持っていま
 す。つまり、記述された要素タイプ(タグセット)によってレンダリングでき
 る環境では表現できますが、その環境にない場合は残念な結果に終わります。

  また、ある特定のベンダー会社によってリリースしている Webブラウザでは
 そのベンダー特有の独自タグや、独自の属性(タグの役割情報)についても、
 同じことが当てはまります。
  それによって、ある特定の Webブラウザでは表現できても、違う銘柄の Web
 ブラウザでは表現できない作られ方をしているページが、悲しいことに世界中
 の Webサイトにたくさんあります。

  元々マークアップ言語とは、文書の要素を構造的に区別して記述することが
 前提となっており、レイアウト(見栄え)を表現するものではありません。
  レイアウトは別の手段で実現するのが本来の姿であり、文書構造から物理的
 レイアウトの表現を分離しなければなりません。
  (レイアウトを表現する方法については、詳しく解説する予定です。)

  正しい文法で記述されたHTML文書は、ユーザ環境に依存することなく、その
 内容、つまり作成者が渾身の思いで作り上げたコンテンツを、訪れるすべての
 人に、より正確に伝えることができます。

  本講座では、物理的なレイアウトや、ブラウザ独自仕様に関するタグやその
 属性については、一切説明しません。むしろ否定的な姿勢を持っています。
  ただし、比較サンプルとして記述する場合があります。

  本講座では、マークアップ本来の使命を前提に、正しい知識と、正しい文法
 を学ぶことに終始します。
  そのため安易に、HTMLは「簡単です」とは口が裂けても言えません。とても
 難しいのです。その点を覚悟してください。
  ただし、初心者の方にも十分に理解できるよう、できるだけ噛み砕いてやさ
 しく説明します。

 ■W3C --- World Wide Web Consortium
  世界中の技術者や、Netscape、IBM、Microsoft、Adobe などの各ベンダー会
  社などが集まっている非営利組織の W3C という機関があります、
  その他、主要会員には MIT(マサチューセッツ工科大学)や慶応大学なども
 含まれております。

  この機関の主な目的は、HTMLや最新のマークアップ言語である XHTML、XML、
 あるいはスタイルシート、MashML、SVG その他技術的なものも含めた Web標準
  仕様を統括し制定、および勧告しています。

  この機関で決められた仕様は、すべての Webページ作成者に義務付けられ、
 同時に、すべてのユーザエージェント(注3)に組み込まれます。

  W3Cでは、仕様に関する技術的な資料の全部を Webサイト上で公開しており、
 誰もが自由にその文書をダウンロードすることができます。

  また、W3Cに完全に準拠した Webブラウザ「Amaya」を各プラットフォームご
 とに無償で提供しています。(英語版ですが設定によって日本語が可能です)

  当講座では、この W3Cの仕様書に則って解説します。

 ■HTML4.01
   Web上の国際標準仕様を制定する W3Cによって、1998年12月に、HTML4.01の
 仕様書が勧告されました。
  実は、この仕様がリリースされる以前の HTML3.2は、物理的なレイアウトを
 表示させる幾つかの要素タイプを中心とした、いわば失敗作でした。

  W3Cには、Webブラウザを作るソフトウェアメーカーたちの会員がおり、何と
 か魅力的な表現ができる仕様書を作るように圧力をかけていました。
  同時に、世界中の Web制作者たちからも同じ要望が相次ぎ W3Cの策定の遅さ
 にイライラがピークに達していたときでもありました。

  やむを得ず HTML3.2をリリースしましたが、その時には既にスタイルシート
 の仕様書が発表されており、制作者たちにスタイルシートを利用するよう呼び
 かけました。残念ながらその声は届かず HTML3.2は多くの制作者たちから歓迎
 されました。

  HTML3.2から数ヵ月後に、HTML3.2の反省を踏まえて HTML4.0が発表されまし
 た。新しい機能を盛り込んだ HTML4.0でしたが、なかなか制作者たちは、新し
 い仕様に移行してくれませんでした。

  HTML4.0が発表された翌年、W3Cはより論理的な文書構造を作成するための、
 より洗練されたHTML4.01を発表しました。
  ユーザ環境に配慮し、SGMLが望んだ本来の姿に引き戻しました。

  特に、Strict(厳格仕様)は、すべての物理的な要素、及び属性を排除し、
 マークアップ言語の王道を行く正しい文法に規定したものとなっています。
  確かに HTML3.2と比較すると、その文法は大変難しいものですが、物理的な
 仕様を排除した点は、多くのユーザから歓迎される姿になっています。

  当講座では、HTML4.01厳格仕様を中心として解説します。


 W3C Webサイト
 http://www.w3.org/

 Amaya Homepage
 http://www.w3.org/Amaya/

 次回は、HTML4.01の規則である「文書型定義」について詳しく解説します。

(注釈用語解説)

 ○注1:視覚系ブラウザ
 Microsoft Internaet Explorer、Netscape、Mozilla、Opre など、画像や映像
 や音声などを実際に見たり聞いたりできる Webブラウザ。

 ○注2:非視覚系ブラウザ
 音声、点字、テキストなどが主体の Webブラウザ。実際に色や文字の大きさや
 画像や音声などを無視してレンダリングする身体障害者向けのソフトです。
  音声は「聞く」、点字は「触る」ということが主体になっています。

 ○注3:ユーザ・エージェント
 Webブラウザや HTTPサーバ、あるいはプロクシ(プロキシ)などを総称して呼
 びます。HTMLなどのマークアップ言語が解釈できるソフトウェアやハードウェ
 アなどが含まれます。
  講座でこの用語を使う場合には、主に Webブラウザを対象としています。

〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓

◆XHTML講座 --- ページの印刷

 Web で公開されている論文などを印刷したとき、見出しや段落の途中で改ペー
ジされてしまったり、あるいは上下左右の余白が中途半端というような経験があ
ると思います。
 もし、あなたのページを印刷する場合、狙ったとうりの印刷ができれば訪問者
にとってもありがたいことになるでしょう。

 今回はスタイルシートのレベル2「 CSS Level 2」で制定されている印刷の設
定に関して解説します。

 ■HTML初心者の方へ
 XHTML1.1は、初心者の方には難解で訳が分からないと思います。ですので、こ
 の講座は読み飛ばしてかまいません。
  いずれ、HTML講座をマスターすることによって、「なるほどね」と理解可能
 になるハズです。今は分からなくても、必ず分かるときが来ます。


◆ブラウザの実装状況

 残念ながら印刷に関するスタイルシートを実装しているブラウザは、現状では
非常に少ないのが難点です。というより、CSS Level 2 に対応しているブラウザ
が少ないといったほうが、当てはまるでしょう。

 以下は、現在のブラウザのサポートを表しています。

   印刷機能              サポートしているブラウザ
 -----------------------------------------------------------------------
 ページのサイズ・向き    なし
 ページ名          なし
 要素の指定で改ページ指定  MSIE4.0以降、Netscape 7.0以降、Opera6.0以降
 要素の内容中で改ページ   MSIE4.0以降、Netscape 7.0以降、Opera6.0以降
 用紙サイズ指定       なし
 余白(トンボ)の設定    なし
 ページ番号設定       なし
 改ページに残す行数     Opera6.0以降
 -----------------------------------------------------------------------
(注:いずれも Macintosh版には対応しておりません、あしからず。)

   検証したブラウザは、MSIE 4.0以降、Netscape 4.0以降、Opera 5.8以降
  Mozilla 0.9以降、iCab 2.2以降)これ以外は検証しておりません。
     なお、Netscape 7.0 は、Mozilla 1.2 を含めます。

       また、Macintosh の最新ブラウザである Safari については、その環境
  を持っていないため検証しておりません。どなたかご存知の方、ご一報くだ
  さい。
     (MSIEとは、Microsoft Internet Explorer の略です。)

  今回は、このような状況のため、改ページを指定するスタイルシートについ
 て解説します。
  特に、プリンター向けに記述する方法は幾つかありますので、その点を含め
 て説明します。


◆印刷用スタイルシートの設定

 XHTML1.1では、外部スタイルシートを利用します。通常のスクリーン向けの記
述とは、少しその方法が異なります。

 link要素で読み込む外部スタイルシートは、メディアタイプが指定されていな
い場合、それは通常、スクリーン(モニター画面)に適応されます。

 メディアタイプには、プリンターに対する指定、音声ブラウザに対する指定な
どがあり、これらに適応させるためには、要素内でメディアタイプを指定しなけ
ればなりません。

  <link rel="stylesheet" href="style.css" type="text/css" media="print">

 また、1つのスタイルシートで、各メディアタイプに対応するためには、それ
ぞれのメディアタイプを記述します。

  ■メディアタイプの種類
 all        すべてのメディア
 screen      一般のコンピューターの画面
 tty         文字幅が固定の通信機器
 tv          テレビ
 projection  プロジェクター
 handheld     携帯用端末(PDAなど)
 print        プリンター
 braille      点字用ディスプレイ
 embossed     点字用プリンター
 aural        音声出力用

 実際にこれらのメディアタイプをサポートしている Webブラウザは、非常に少
ないのが現状です。
 今回は、これらメディアタイプの中から、プリンターへの指示を示すスタイル
シートを説明します。

 ■プリンターへのスタイルシート記述
   @media print {
        h1 { page-break-before: avoid }
      }

   このように、@media print {  } の範囲の中で指定する必要があります。
 この指定は、ブラウザ画面ではなく、プリンターに対する指示です。

〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓

◆XHTMLの作成

 さて、ページを印刷するスタイルシートを組み込んで、作ってみましょう。

 と、言っても改ページをして印刷するページを作成するとなると大変です。ス
クロール量が多いページでないと印刷設定の実感が湧きません。
 そんなコンテンツ量の多いサンプルページを作るのは現実的ではないので、当
方で用意しました。

 http://www.scollabo.com/banban/magazine/mmsample/sample_52-3.html

 上記 URIにて印刷していただければ、その結果が実感できると思います。モニ
ター画面では、一切の見栄えを設定しておりません。単純な構造のみで表示され
ています。
 ただし、印刷の際には、見出しに色がついたり、文字の大きさが指定されてい
たり、余白の設定が施されています。(印刷プレビューで確認できます。)

  印刷の際、印刷の初期設定で、余白の設定は上下左右とも10mm(1cm)、ある
いは 0.1インチ、また、ヘッダとフッターおよびページ番号と URLを印刷しない
というような設定をしてください。

 なお、ページ内で、CSS、XHTMLの2つの文書をダウンロードできるようにして
いますので、ご利用ください。
 (ただし、印刷スタイルシートに対応していないブラウザの場合、思うような
印刷結果を得ることができません。あしからず。)

 印刷のスタイルシートに対応している MSIE 4.0以降、Opera 5.0以降では、
「Netscape Communicator 4.0」の見出しの直前で改ページされるハズです。

 おおよその骨組みを以下のソースから、参照してください。

■スタイルシートより

 p.idt { page-break-before: avoid } 
  この段落要素に囲まれている範囲は、改ページを禁止しています。

 h2#pgbefore { page-break-before: always }
  この見出し要素の直前で改ページを指定しています。


◆その他の印刷用スタイルシート

 今回は、改ページの禁止と、改ページの指定について作成しましたが、印刷に
関わるスタイルシートは、以下の通りです。多くのブラウザでサポートされてい
ないのが残念です。

 属性            機能             値
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 size        用紙サイズと方向  auto = 出力先のデフォルトに依存
                     portrait = 縦向きに設定
                     landscape = 横向きに設定
------------------------------------------------------------------------
 page        用紙設定の適用      auto = 出力先のデフォルトに依存
                                         名前 = 指定した名前のボックスの
                                                設定を適用
------------------------------------------------------------------------
 page-break-before 直前に改ページ      auto = 何も制御しない
                                         always = その位置で必ず改ページ
                                         avoid = 改ページの禁止
                                         left = 左のページになる改ページ
                                         lright =右のページになる改ページ
------------------------------------------------------------------------
  page-break-after   直後に改ページ      auto = 何も制御しない
                                         always = その位置で必ず改ページ
                                         avoid = 改ページの禁止
                                         left = 左のページになる改ページ
                                         lright =右のページになる改ページ
------------------------------------------------------------------------
  page-break-inside  要素内での改ページの禁止 auto = 何も制御しない
                        avoid = 改ページの禁止
------------------------------------------------------------------------
  widows             最初の余白の最低行数   整数値 = 行数の指定
------------------------------------------------------------------------
  orphans            最後の余白の最低行数   整数値 = 行数の指定
------------------------------------------------------------------------
  mark               トンボの設定    crop = コーナートンボの設定
                     cross = センタートンボの設定
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

 今後開発が期待されるブラウザのバージョンアップによって、これらのスタイ
ルシート属性がサポートされるであろうと、予想されています。
 音声、点字向けブラウザのスタイルシートについては、機会がありましたら改
めて解説いたします。

〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓

◆Tips --- スタイルシートで記述する URI(URL)

 読者からの質問で、HTML内で記述したスタイルシートで、背景画像の設定をし
た場合には、ちゃんと表示されるけど、外部スタイルシートで設定した場合には
背景画像が表示されない。これはどうしてなのか? というのがありました。

 講座では、スタイルシート内で記述する URI(相対パス)について解説したこ
とがなかったので、ここで詳しく解説します。

 例えば、背景画像が images という名のディレクトリ(フォルダ)に格納され
ていた場合、そのディレクトリの外にある文書から見た相対パスは、

 images/kabe.gif という具合になります。これをスタイルシートで背景画像に
設定する場合、

   body { background-image: url("images/kabe.gif") }

 このように記述します。

 ところが、外部スタイルシートで記述する場合、もしHTML文書と同じ場所にあ
るのなら、このままの設定で問題ありませんが、スタイルシートが他のディレク
トリにある場合には、少し設定が異なります。

 つまり、HTML文書内で記述する場合には、画像の相対パスはHTMLから見た画像
の位置を指定すればいいのですが、外部スタイルシートの場合には、スタイルシ
ートから見た画像の位置を指定しなければなりません。

   body { background-image: url("../images/kabe.gif") }

 これが、他のディレクトリにあるスタイルシートから見た images ディレクト
リの画像を背景として設定している記述法です。なお、画像とスタイルシートが
同じディレクトリにある場合は、一切のパスの指定は必要ありません。

〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓

◆HTML タグの解説 --- del要素

 視覚系ブラウザでは、この要素にはさまれた範囲のテキストに、抹消線を表示
します。

 要素分類:インラインレベル、ブロックレベル要素(同時使用は不可)
 DTD仕様 :HTML4.01Strict
 終了タグ:必須
 属性  :cite、datetime、汎用属性(id、class、title、lang)
 属性値 :cite="URI 削除理由を示した文書の URI"
       datetime="日時:削除した日時(ISO-8601形式)"
 子要素として持てる要素:ほとんどの要素(ヘッダ部を除く)

 この要素は、既に削除された部分であることを示します。視覚系ブラウザでは
抹消線が表示されますが、特にその方法が決まっているわけではありません。

 この要素は、指定する範囲によっては、ブロックレベル要素になる場合と、イ
ンラインレベル要素になる場合がありますが、インラインレベル要素として使用
した場合には、子要素としてブロックレベル要素を配置することができません。

 日時に利用する ISO-8601方式とは、以下のように記述します。

  datetime="2003-05-23T09:30:25+09:00"
  (日本時間2003年5月23日午後6時30分25秒となります。)
  つまり、標準時間(UTC)より9時間足した時間が日本時間となります。

〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓

今回はここまで。

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

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

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

 予定しているコンテンツ
      ■ Webデザイン 第3回 --- 情報の扱い
   ■ HTML講座  第3回 --- HTMLの構成
   ■ XHTML講座 その15 --- スクリプトの扱い
    ■ HTML タグの解説 --- ins要素

〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓

◆バックナンバー配布のお知らせ

 本誌バックナンバー、41〜50号までのアーカイブ(圧縮)ファイルをアップし
ましたので、当サイトよりダウンロードできます。
 新たに読者となられた方には、オフラインでゆっくり読むことができますので
是非ご利用ください。

 第1号から40号までは、既にアーカイブファイルを提供していますので、あわ
せてご利用ください。

 なお、アーカイブファイルは、プラットフォーム別に用意しましたので、あな
たの環境に合わせたアーカイブをお選びください。

(Macintoshでは、解凍したファイルのタイトルが文字化けするかもしれませんが
中身については問題ありません、念のため。)

 バックナンバー・アーカイブ・ダウンロード
  http://www.scollabo.com/banban/daf/archive.html

〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓

質問・ご意見ははこちらまで→ 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://www.scollabo.com/banban/daf/material.html
まぐまぐの過去記事 http://backno.mag2.com/reader/Back?id=0000090196

配信の変更・中止はこちらです。
個別の手続きは受け付けていませんので、ご面倒でも各自でお願いできれば助か
ります。
当サイトにて http://www.scollabo.com/banban/magazine/top.html
まぐまぐにて http://www.mag2.com/m/0000090196.htm

〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓

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

 久しぶりにサイトのアクセスログをチェックしました。そこで驚いたのは、多
くの Webサイトで、当方へリンクを貼っていただいていることです。

 いずれ、そのお礼の意味を兼ねて月替わりになりますが、リンクを貼っていた
だいているページのリンク集を作ろうかなと思っています。

 リンクとは、お互いの知るべき、あるいは知りたい情報の領域を広げ、知らず
知らずにコミニケーションできる利点があります。
 リンクを貼ってくれた方に、紙面よりお礼申し上げます。

 それにしても、ウィークデー(土日を除く日)の午後1時から3時までの間に
一番アクセスが集中するのは、どうしてだろう?
 きっと、学校や会社で見ているのかなと想像しています。

〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓

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

            Copyright(C) 2002-2003  www.scollabo.com/banban/
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓



Copyright(C) 2002-3003 banban@scollabo.com