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

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

                <第56号>

             banban@scollabo.com

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

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

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

  今週のコンテンツ
      ■ Webデザイン 第5回 --- ユーザビリティ/ユニバーサル・デザイン
   ■ HTML講座  第5回 --- コンテンツの表現 / 文字コード
   ■ XHTML講座 第17回 --- コンテンツの配置 その2
    ■ タグの解説 --- ul、ol要素
      ■ 告知 --- メールマガジンの今後の方針

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

◆Webデザイン 第5回

 何度か、当講座で説明してきました「ユーザビリティ」について、別の視点か
ら説明します。
 ご存知のように「ユーザビリティ」とは Webサイト上で、訪れるユーザが使い
やすく、気持ちよくさせるという、いわば「顧客満足度」を図るための Webペー
ジ作成における1つの指針です。

 ユーザビリティを無視すると、このようなページになってしまいます。

 ・ナビゲーションが滅茶苦茶で目的のページに辿り着けない、迷子になる
 ・断りもなく音声や映像が再生され、あわてる場合がある
 ・工事中のページに行き当たってしまい、目的が達成されない
 ・Flashムービーの再生が終わらないとナビゲーションが出てこない
 ・文字がやたら動き回ったり点滅して読みにくい
 ・情報が整理されていないので、目的を達することができない
 ・自分のブラウザでは、適切にレンダリング(描画)しない
 ・配色に問題があり、色弱障害者は色を判断できない
 ・配色のコントラスが不適切で、文字が背景色に埋もれてしまう
 ・画像などマルチメディアの容量が大きすぎて表示まで時間がかかる
 ・JavaScriptを「オフ」にしているユーザに対して、代替コンテンツがない
 ・フレームがレンダリングできないユーザに対して、代替コンテンツがない
 ・画像の表示を「オフ」にしているユーザに対して、代替テキストがない

 このようなサイトに出会ったことがあると思います。早い話が、設計段階での
失敗、あるいは何も設計されていない、ということに気がつきます。

 制作者は常に訪れるユーザの立場を考えなければなりません。特に、初心者は
自己満足に陥る傾向が高いので、十分注意する必要があります。

 「見せる意識」と、「見られる意識」をうまい具合にバランスさせるためにも
ユーザビリティという考え方は大変大きな意味があります。

■ユニバーサル・デザイン
 ユーザビリティはユニバーサル・デザインを実現するための1つの指針です。
ユーザの環境、目的意識、訪問の時間帯などを知ることが、ユーザビリティ達成
の早道です。

 ユニバーサル・デザインとは、すべての人々が同じように利用できる、という
意味を持ち、身体障害者でも健常者と同じようにすべてを利用できる設計を指針
としたものをユニバーサル・デザインと呼び、公共の建物や駅、歩道などに広く
盛り込まれています。

 ユニバーサル・デザインを達成するもう1つの指針に、「アクセシビリティ」
というきわめて大切な要素があります。
 ユーザビリティと同様に、ユーザ環境に依存することのないバリアフリーなペ
ージを構築するための指針です。

 ユニバーサル・デザインを正しき認識し学び取ることは、より広範な人々から
の容易なアクセス向上を約束するものです。決して制作者自身の環境だけを標準
としたページ作りになってはいけないわけです。

                                     (第6回 文字と情報につづく)

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

◆HTML講座 第5回

 実際のコンテンツを配置するのが、<body> 〜 </body> で囲まれた範囲です。
この中で、配置されたコンテンツが Webブラウザの画面で表示されるものです。
この bodyタグは、前回述べましたヘッダとともに、htmlタグの中で「構造」を
構成しています。

                              html
         ┏━━━━━━━━━┻━━━━━━━━━┓
       ┃                                      ┃
      head                                    body

 こうした構造図を見れば、htmlタグがHTML文書全体のの頂点に立っていること
が理解できるでしょう。
 つまり、htmlタグの中で、head と body が配置されているのです。

 もっと厳格に述べると、headタグや、bodyタグの親となるタグが、htmlタグと
いうことができ、こうした親子関係を築いています。
 bodyタグは、コンテンツを表現するすべてのタグの頂点に立つ「親」であるこ
とを覚えてください。構造はこうした親子関係、いわばツリー構造として成立し
ています。

 ■ 論理的文書構造の作成

  コンテンツを Webブラウザの画面にレンダリングさせるための body という
 タグの中に配置するタグの記述にも、実は構造があります。bodyタグは、コン
 テンツを配置するタグの「親」となるタグです。

  構造を示す文書中の要素とは、見出し要素、段落要素、リスト要素、表組要
 素などが存在し、コンテンツは、すべてそれらの要素によって成り立っている
 わけです。

  要素とは、文書を構成している特定の範囲の区別を示します。

  つまり、見出しや題名、段落などの構造から、文書が成り立っているのです。
 また、ここで言う「文書」とは、ごく普通に利用されるワープロソフトやテキ
 ストエディタなどで作られた一般的な文書を指します。
  HTMLのタグは、そうした要素に区切りをつけて記述し、マークアップするの
 です。

  ここにサンプルとして、1つの文書を示します。この文書を例としてマーク
 アップしてみましょう。

  -------------------------------------------------------------------
  Microsoft Office System 2003

    2003年秋に発売が予定されている次期マイクロソフト社のオフィス・アプ
  リケーションは、「System」という名がつけられ、従来とはまったく異な
  る構成で作られています。

   特に、オフィス・アプリのすべてに完全に XML対応として、オフィスで
  作成されたそれぞれの文書を、他のアプリケーションにも再利用可能だと
  いう。それは本当なのか、検証してみよう。
  -------------------------------------------------------------------

  さてこの文書を、body内で配置される構造に照らし合わせて、どのように具
 現化するのでしょうか。

 これを、HTMLで記述すると、(文書型宣言、ヘッダ部を省略しています)

   <body>
    <h1>Microsoft Office System 2003</h1>
    <p>
  2003年秋に発売が予定されている次期マイクロソフト社のオフィス・アプ
  リケーションは、「System」という名がつけられ、従来とはまったく異な
  る構成で作られています。
  </p>

    <p>
    特に、オフィス・アプリのすべてに完全に XML対応として、オフィスで
  作成されたそれぞれの文書を、他のアプリケーションにも再利用可能だと
  いう。それは本当なのか、検証してみよう。
    </p>
    </body>
      (タグの説明はこの章の一番下で解説しています。)

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


  例えば、見出しと段落で構成された文書をマークアップする場合、

                              body
         ┏━━━━━━━━━┻━━━━━━━━━┓
       ┃                                      ┃
      h1  見出し                              p  段落

  このような構造を持ったコンテンツの配置が考えられます。つまり、コンテ
 ンツを表現するタグは、必ずこのような論理的な構造を持たなければならない
 とされています。

  しかし、構造を示すタグは、すべてに適用するわけではありません。
 例えば、以下のHTMLを見てください。

  <body>
    <strong>Microsoft Office System 2003</storng><br>
    2003年秋に発売が予定されている次期マイクロソフト社のオフィス・アプ
  リケーションは、「System」という名がつけられ、〜 以下省略 〜
  </body>

  このHTMLでは、構造がありません。従ってこの記述は文法違反となります。
 何故?

  先ほども述べたとおり、構造を示す要素は、見出し要素、段落要素、リスト
 や表組など、「構造を示す要素」でなければならないわけです。
  では、構造を示すタグとは一体どんなものがあるのでしょう?

  少し難しくなります。

 ■ブロックレベル要素

  HTML4.01Strict(厳格仕様)では、コンテンツはすべて構造を示すブロック
 レベル要素中で配置しなければならない、と定義されています。

   ぶっろくれべるようそ? な、何じゃそりゃ?

  同じことを繰り返しますが、ブロックレベル要素とは、見出し要素、段落要
 素、リスト要素、表組(テーブル)要素、などで定義されています。
  bodyタグの直接の「子」となるのが、ブロックレベル要素として定義された
 タグなのです。
  これは大変重要なことなので、必ず覚えてください。

  通常ブロックレベルとは、1つのブロックを持った「かたまり」(ボックス
 とでも言うべきか)を表わし、前後に改行を持っています。
  ブロックレベルとして定義されているタグを使うと、一部のタグを除いて、
 ブラウザ画面の左から右までの領域を持っています。

  HTML4.01Strictでは、すべてのコンテンツは、このブロックレベルと呼ばれ
 るタグの中で配置することになっています。

  注意しなければならないのが、ブロックレベル要素に配置できるタグには、
 ブロックレベル要素のタグと、インラインレベル要素のタグと、あるいはどち
 らかしか配置できないタグがあります。これについての詳細は、講座を進める
 中で適時、解説いたします。

 ■インラインレベル要素
 インラインとは、その名が示すとおり通常の文字列と同じに表現される要素で
 前後に改行や余白を持っていません。

  注意しなければならないのが、インラインレベル要素として分類されるタグ
 の中に、ブロックレベル要素のタグを配置することができません。また、イン
 ラインレベル要素は、必ずブロックレベル要素の中で配置されなければなりま
 せん。bodyタグに、直接インラインレベル要素のタグを記述することができな
 いのです。

  次回のHTML講座第6回は、今回提示したテキスト文書を基にしてマークアップ
 するプレゼンテーション(見栄え)について解説します。

 ■今回サンプルに記述したタグの解説

  h1(見出し要素:ブロックレベル要素)
    第1見出しを示すタグで、見出しを作る上でこれを利用します。
    見出しには、第1〜第6まで、h1〜h6と定義されています。
     最初に登場する見出しは、必ず h1 でなければなりません。
    終了タグは省略することができません。他のブロックレベル要素を配置
    することができません。

  p(段落要素:ブロックレベル要素)
    段落を示すタグです。一般的な視覚系ブラウザでは前後に1行分の余白
    を持って表示されますが、実際にはそのように定義されておりません。
    ブラウザ側で勝手に余白をレンダリングしているだけです。
     古いHTML参考書では、改行+改行、と解説していますがウソです。
    その気になれば、制作者で余白を削除したり、何行分でも余白を設定す
    ることができます。
     終了タグを省略することができますが、正しい HTMLコーディングを
    目指すうえでも、きちんと終了タグを記述するようにしましょう。
     また、他のブロックレベル要素を配置することができません。

  strong(文字強調要素:インラインレベル要素)
    このタグに囲まれたテキスト(文字列)を強調します。一般的な視覚系
    ブラウザでは「太字」で表示されますが、決して太字にするタグではあ
    りません。他のインラインレベル要素を配置することができます。
     インラインレベル要素のタグは、基本的な親となるタグはブロックレ
    ベル要素として定義されたタグになります。

  br(強制改行要素:インラインレベル要素)
   強制改行をさせるためのエンプティタグ(終了タグのないタグ)です。
   テキストの途中で改行させたい場合に利用します。
    なお、文脈の途中で改行するのを避けるようにしましょう。

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

◆HTMLで利用する文字コード

 HTMLはどのような種類のコンピューターにも共通するマークアップ言語です。
そのため、大切なことは文書の共通性です。
 共通性を実現するために、SGMLは、HTMLを含むアプリケーションに文書の文字
符号セット(コードセット)を特定するよう要求しています。

 ■日本語のための文字コード
 HTMLでは、文書のMIMEタイプとともに、HTMLが記述された文字コードを、meta
 タグの charset属性で、そのパラメータを記述しなければなりません。

 <mata http-equiv="Content-Type" content="text/html; charset=Sfift_Jis">

  これは、テキスト形式で作成された文字種が「シフト JIS」であることを明
 示しています。何故このような必要があるのでしょう?

  通常、Webブラウザは、WebサーバからHTML文書を受け取り、ヘッダで記述さ
 れているメタデータを理解してHTML全体のレンダリング(描画)を始めます。
 メタデータとは、コンピューターへの非常に重要な指示書の役目があるます。

  コンピューターは、0 と 1 の2進数(バイナリ)で演算して、プログラムが
 動いたり、データを扱ったりします。
  そのため、各種のプログラムはコンピューターの演算装置(CPU、MPU)が理
 解できるよう、バイナリ形式になっています。

  テキストを形成する「文字」も同様にコンピューターが文字のバイナリを理
 解して画面に「文字」として表示します。
  この文字のバイナリコードが「文字コード」として扱われるのです。

  ところが、日本語を扱う文字コードにはコンピューターごとに違う種類が搭
 載されているので混乱を起します。例えば、UNIX系のコンピューターでは、日
 本語の文字コードに「ECU-JP」という符号が使われ、Windowsでは「Shift_Jis」
 が利用されています。
  もし、ECU-JP で、Shift_Jisを読むと、完全に文字化けを起して読むことが
 できません。これは、文字コードにおけるバイナリの違いにあります。
  文字コードは16進数で作成され、コンピューターはそれを2進数にして判読
 し、無事に画面に表示します。

  HTMLは共通性をもったマークアップ言語という大前提を考えると、文字化け
 では共通性も何もあったもんじゃありません。そこで Web上の日本語文字コー
 ドを3種類に規格化し、ブラウザはこれを解釈するように作られています。

 ■Shift_Jis
  日本のパソコンで広く使われている8ビットコードです。 JISコードは、基本
 的に7ビット+7ビットの構成になっていますが、この Shift_JISは半角カナ
 文字などを収めるため、8ビット+8ビットの構成に振り直しています。
 「JISコードの表上の位置をずらしてつくったコード」という意味が由来して、
 シフトJIS の名があります。
  Windowsのメモ帳や、Macintoshの SimpleTextなどは、Shift_Jis です。

  ■ECU-JP
 UNIX上で日本語を扱うために開発された8ビットコードです。
  Webサーバの多くは、UNIXで動いているので、CGIプログラム等で日本語を処
 理する際にこれが使われます。 
  ちなみに、Linux のテキストエディタは、ECU-JPとなっています。

 ■ISO-2022-JP(JIS)
 通信に使用するため ASCIIコードと同等の7ビットコードとして設計されてい
 ます。ただし、ISO-2022-JP は JISそのものではなく、ASCIIと JIS X 0201の
 ローマ字と JIS X 0208の1978年版と JIS X 0208の1983年版を切り替えて使う
 方法を指しています。(ちょっと難しくてすみません。)
  HTML 2.0で定義された The HTML Coded Character SetはISO-8859-1 が基に
 なっています。
  同時に ISO-10646を扱うようにすることが推薦されており、ISO-2022-JPは 
 ISO-10646 のサブセットとして、HTMLにおいて使用可能であることが明言され
 ています。
  多くの電子メールで利用されている文字コードです。


 通常、1つの言語で使われる文字が 256種(1バイト)より多いか少ないかで
分けられ、世界のほとんどの言語は1バイト(注2)で表示します。

 西ヨーロッパ系の言語はラテン 1 という文字コードセットですべて記述でき、
その前半 128種のコードは ASCIIコード(注2)と一致します。

 1文字を表すのに2バイトが必要なのは、中国語(簡体字,繁体字共に)や、
朝鮮語(漢字・ハングル共に)、日本語(漢字,ひらがな,全角カタカナ)、ベ
トナム語(共産化以前北部で北部で用いられていた漢字)のみです。全角といわ
れる文字が2バイトコードとなっており、1バイトの半角英数字よりも横に2倍
大きく表示されます。(1と1、AとA)


 ■半角カタカナの利用
 どういうわけか Web上では半角カタカナが嫌われています。半角カタカナは、
 Shift_Jisや、ECU-JPでもサポートされているのに、何故でしょう?
  電子メールで利用されている ISO-2022-JPでは、半角カタカナがサポートさ
 れていません。そのため、半角カタカナの最初のコードが実行されると、文字
 化けを起してしまいます。

  Webでは、ISO-2022-JPも利用されているため、半角カタカナはタブー視され
 てきました。しかし、ほとんどの Webブラウザでは Shift_Jisがサポートされ
 ているので、文字化けしたらエンコードを適切に変換することで、ほとんどの
 ブラウザでも表示可能ということになります。
  ただし、安全を見込んで半角カタカナを使わない、ということが一般化して
 いるので、よほど理由がない限り使わないほうがいいと思います。


(注釈用語解説)
 注1:バイト(Byte)
 アルバイトのことではありません、念のため。
  コンピューターの情報量を示す基本的な量は、ビットで表されます。1ビッ
 トでは、0と1、真と偽、オンとオフなどの2つの状態を示します。
  2ビットでは2の2乗で4通り(00、01、10、11)の状態を区別できます。
 1バイトは、8ビットを持ち、基本バイトと呼ばれ 256通りの区別をします。
 つまり、8ビットから構成されたマス目に表現できる文字を、1バイトコード
 と呼びます。(16X16のマス目)

 注2:ASCIIコード
  (American Standard Code for Information Interchange)
  米国情報交換用標準コードの略で、A〜Z、a〜z の大小の英文字、0〜9 の数
  字、+-*/$&! などの特殊記号のほか、制御情報のためのコードなど 128種類
  の文字が、内容を7ビット、これにパリティの1ビットを加えて合計8ビッ
  トの構成で表すように決められています。
   これは1963年に、ANSI(米国規格協会)が規格化し、その後ISO(国際標
  準化機構)がこれを包含する形で「ISOコード」を規格化したものです。


 ■Unicode(ユニコード)
 Unicodeは、Apple、IBM、Microsoftなどが共同で開発し啓蒙している文字コー
 ドで、世界標準を狙っています。
  基本的にほとんどの言語をサポートしているため、Unicode がインストール
 されているパソコンでは、外国の OS でも、日本語表示が可能です。わざわざ
 フォントをインストールしていなくても多くの国で共通して利用できることは
 ある意味、非常に歓迎されることでしょう。

  Windows や MacOS など内部コードとして Unicode をサポートするという環
 境が整い、サン・マイクロシステムズ社では、Javaを Unicodeを初期設定のデ
 ータ型として定義しました。Webの世界でも、HTML 4.0では基本文字セットを
 ISO/IEC 10646とするなど、徐々に Unicodeが普及しつつあります。


 ■HTML記述上の注意点
 日本語文字コードを示す charset属性のパラメータを設定する場合、日本語文
 字が出現する前に設定しなければなりません。

  例えば、

 <head>
  <title>初心者のためのホームページ作り</title>
  <meta http-equiv="Content-Type" content="text/html; charset=Sfift_Jis">
  </head>

  この場合、「初心者の 〜 」という非アスキー文字(日本語)が先に記述さ
 れています。コンピューターは、HTMLの記述の上から順に解釈していくため、
 文字コードが宣言される前の文字が「文字化け」を起こす可能性があります。
  そのため、日本語が出現する前に、文字コードを設定しなくてはいけないの
 です。初心者が犯しやすいミスなので、気をつけましょう。

  正しくは、

 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=Sfift_Jis">
  <title>初心者のためのホームページ作り</title>
  </head>

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

◆XHTML1.1 第17回

 この講座の第50号で解説した「コンテンツの配置」の続編です。特に前回では
コンテンツの絶対位置について軽く解説しましたが、今回はかなり突っ込んで、
絶対位置をスタイルシートを交えて述べていきます。

 ■絶対位置
 コンテンツの表示は XHTML(HTMLも含む)の記述順にレンダリングされます。
 これを相対的な配置と呼びます。

  例えば XHTMLで最初に見出し、次いで段落、そして画像と順番に記述すれば
 当たり前のことですが、ユーザエージェントは、最初に見出しが表示され、段
 落そして画像の順に表示されます。これがデフォルトの配置です。

  しかし、スタイルシートによって絶対位置を指定すれば、HTMLの記述順にか
 かわらず、条件付きながら指定した位置で表示させることができます。
       ̄ ̄ ̄ ̄
  CSS設定  div#first { position: absolute; top: 100px; left: 50px }

  この記述は、この範囲に囲まれたコンテンツが、1つ外側のボックスの指定
 した位置で表示させるというものです。
  1つ外側とは、body要素であったりします。つまり、あるボックスの中で指
 定されたボックスで記述することを示しています。
  これを実現させる XHTML記述は以下のようになります。

  <body>
  <div>
  <p>産婦理を示します。</p>
  <div id="first">
  <img src="hana.png" width="250" height="280" alt="花の絵" />
  </div>
  <p>花のイラストを絶対位置で表示しています。</p>
  </div>
  </body>

  div要素の中で、もう1つの div要素に絶対位置が設定されている場合、最初
 の div要素の外側、この場合は、body要素になります。そのbody内で、画像が
 絶対位置として表示されます。


 ■位置を指定する position属性の使い方
 位置を指定する position属性の使い方を以下にまとめました。一部ブラウザ
 がサポートしていないものもあります。

 position属性
   absolute   絶対位置の指定。ただし、これだけでは配置が明確ではないの
                で、必ず top、left と共に利用します。
   static   相対位置の指定。(デフォルト値)HTMLの記述順にコンテンツ
        を配置します。
   fixed      指定した位置に固定してコンテンツを表示します。スクロール
        してもその位置にとどまって動くことがありません。
         この指定も top、left と共に利用します。

 top属性
   数値+px   位置を画面の上側からピクセル単位で指定します。この属性を
        使用するためには、position属性と共に利用します、

 left属性
   数値+px   位置を画面の左側からピクセル単位で指定します。この属性を
        使用するためには同様に、position属性と共に利用します、

 position属性を使ったサンプル
 http://www.scollabo.com/banban/magazine/mmsample/sample_56-2.html

 ■ブラウザ実装状況

  属性/値   MSIE6.0  Nescape7.0  Opera7.0  Mozilla1.3
 -------------------------------------------------------------------
  position       ○      ○      ○      ○
   absolute   ○           ○            ○            ○
     static       ○           ○            ○            ○
     fixed        △           ○            ○            ○

   top      ○           ○            ○            ○
   bottom         ○           ○            ○            ○
   left      ○           ○            ○            ○
   right          ○           ○            ○            ○
  -------------------------------------------------------------------
  Windows/Macintosh含む:なお、Apple Safari は検証しておりません。
  △ Macintosh版 MSIE 5.2 ではサポートされています。Windows版は不可


 ■画像の指定した部分のみの表示 --- clip属性

 1枚の画像の中で、ある1部分を何種類か用意して、詳しい説明をしたい場合
 その数の画像を用意しなければなりません。画像は容量が大きいので、数が増
 えると、ナローバンド環境では表示まで時間がかかってしまいます。

  そういう場合には非常に便利なスタイルシートの使い方があるので、制作者
 はたった1枚の画像を用意すればいいのです。
  この属性を利用するためには、position属性で absolute が指定されていな
 ければなりません。       ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄

 clip属性
 指定した範囲の画像を抜き取って表示します。範囲を指定する場合には、その
 値に rect を指定します。

  img { clip: rect(10px,10px,20px,15px) }

  rectに続くカッコ内の値はピクセル単位で、上、右、下、左の順で、画像の
 各辺から内側への距離の見える部分を指定します。

  上記の設定では、以下のような画像の抜き取りを行います。

        ┏━━━━━━━━━━━━━━━┓
        ┃(画像)    A        ┃
        ┃  ┌─────────┐   ┃
        ┃ D │         │ B  ┃
        ┃  │  抜き取り部分  │   ┃
        ┃  │         │   ┃
        ┃  └─────────┘   ┃
        ┃       C        ┃
        ┗━━━━━━━━━━━━━━━┛

   A: 画像の上側からの距離(ピクセル単位)
   B: 画像の右側からの距離(   〃   )
   C: 画像の下側からの距離(   〃   )
   D: 画像の左側からの距離(   〃   )

 参考ページ
 http://www.scollabo.com/banban/ref/refcss_05.html#clip

  現在の仕様では、各辺から内側への距離を指定するように求められていますが
既存の視覚系ブラウザでは左上を基準とした位置を指定するようになっています。
そのため W3Cのワーキンググループでは、既存のブラウザにあわせた仕様を基準
とするよう変更を計画しています。

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

◆HTML タグの解説 ol、ul要素

 番号付き、番号なしリストを構成する要素

 要素分類:ブロックレベル要素
 DTD仕様 :HTML4.01Strict
 終了タグ:必須
 属性  :汎用属性(id、class、title、lang)、type(非推奨)
 属性値 := disc    黒丸(ul要素のみ:非推奨)
            = circle  白丸(ul要素のみ:非推奨)
            = square  四角(ul要素のみ:非推奨)
      = A  大文字英字(ol要素のみ:非推奨)
         = a  小文字英字(ol要素のみ:非推奨)
            = I  大文字ローマ数字(ol要素のみ:非推奨)
            = i  小文字ローマ数字(ol要素のみ:非推奨)
            = 1  数字(ol要素のみ:非推奨)
 子要素として持てる要素:li要素のみ

 (非推奨とは、4.01Strictでは使えないという意味で、Transitionalでは利用
 することができます。)

 ol要素は番号を表記してリストを構成します。通常は1から始まります。
 ul要素は番号ではなく、初期値として黒丸のリストマーカーを表記します。

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

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

 (今週のおさらい)
  当分の間、「今週のおさらい」は休止させていただきます。詳しくは、下記の
「告知」をお読みください。

 次回の配信は、7月4日を予定しています。

  予定しているコンテンツ(変更する場合もあります。)
      ■ Webデザイン 第6回 --- アクセシビリティ
   ■ HTML講座  第6回 --- プレゼンテーション(見栄え)・言語コード
   ■ XHTML講座 その18 --- コンテンツの配置 その3
    ■ タグの解説

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

質問・ご意見ははこちらまで→ wfb-org@jcom.home.ne.jp

 なお、ご質問の際には、あなたがお使いの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

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

◆告知 --- メールマガジンの今後の方針

 このメールマガジンの発行者である「ばんばん氏」は、先週17日夜、突然意識
を失い重篤な脳障害により入院しました。現在は集中治療室で懸命に病魔と戦っ
ております。

 彼の同僚の1人にメールマガジンと WEBサイトの運営を任されましたが、その
同僚から病院に駆けつけた関係者に説明があり、自然発生的に支援グループ設立
の声が上がり、何度かの話し合いの結果「臨時作成委員会」を発足させ、なんと
かマガジンの発行と WEBサイトの運営および維持を計画しています。
 これは、ばんばん氏が戻ってくることを前提とした「つなぎ」組織です。

 委員会のメンバーは、ばんばん氏が勤める会社の同じ部署全員、彼が個人的に
付き合っている身体障害者グループ、そして WEBサイトの運営にお世話になって
いるスズキ・コラボレーションのスタッフなど総勢12名によって運営されます。

 ばんばん氏のパソコンには膨大な量の資料が収められており、幸いにも未完成
ながら向こう6週分の原稿や、マガジン作成のための独自の規則者やノウハウな
どがあります。
 また、サイト運営に当たっては詳細で多岐に渡る設計書やテンプレート、更新
記録などありますので、すぐにでも作業に取り掛かれるほどです。
 同時に、過去の読者からのメールはすべて印刷されて分厚いファイルとなって
残されているので、今後の委員会の活動にも大いに役立つことになります。

 今後、彼の残された原稿や資料をベースに「委員会」でも独自に作成していく
予定です。それぞれ分野の違う専門家もおりますので何かの役に立つことがある
と思います。ただし、週に1度の配信がかなわない場合も予想されます。色々と
不備な点が目立つと思いますが、「愛敬」として笑って済ませてください。

 また、「今週のおさらい」ページの作成は、ばんばん氏の指導により随時掲載
する方向で調整しております。もうしばらくお待ちください。
 未発表の WEBページもかなりの数がありますので、これも手を入れながら少し
ずつアップしていく予定です。

 懸かる状況をご理解いただき、ご了承していただくことを切にお願いいたしま
す。多くの読者の皆様にはご不自由をおかけいたしますが、現状といたしまして
は、メールマガジンの存続に全力を尽くし、ばんばん氏が元気に戻ることを祈り
ながら、留守を任されるようがんばる覚悟です。
 ご質問やお問い合わせに関するメール等は、当分の間委員会で返答させていた
だきます。

 なお、委員会やばんばん氏に寄せられたメールや掲示板の書き込み記事等すべ
て印刷し、彼の病室に届けられております。

 初心者のホームページ作り制作委員会  wfb-org@jcom.home.ne.jp
 スズキ・コラボレーション  webmaster@scollabo.com

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

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

 現在、病気で入院しております。病院内ではノートパソコンなどが禁止されて
いますので、この記事は会社の同僚や私の仲間などの手によって、紙に書いた原
稿をパソコンに入力してもっています。

 委員会の連中はそれなりに実力を持っていますので安心して任せられます。む
しろ私を全面的に支援していただいたことには感謝の言葉が見つかりません。

 何度か危険な前兆はあったのですが、忙しさを理由に誤魔化していました。今
は、とにかく治療に専念し1日も早く現場復帰したいと考えています。

                         2003年6月22日  ばんばん

 <追伸>
 たくさんのお見舞いメールありがとうございました。失礼ながら紙面より御礼
 申し上げます。

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

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

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



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