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

                  毎週金曜日配信 What's New 2002/11/29
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
           初心者のためのホームページ作り
           http://www.scollabo.com/banban/
                <第29号>

             banban@scollabo.com
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

この講座はタグを覚えてテキストエディタだけでホームページを作るという、ど
ちらかというとやや専門的な作業が中心になります。

 時には専門的で難解な言葉も出てきますが、なるべく初心者にも分かりやすく
解説していきます。どうぞ、気軽な気持ちでお付き合いください。講座をすすめ
る中で分からない点がありましたら、ご遠慮なくメールください。

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

 今週の課題 ■ ボックス応用
       ■ 擬似要素のCSS

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

◆ボックス
既に本誌第5号で、ボックスについて解説しましたが、今回はその応用について
詳しく解説します。

テキストブロック、画像、位置を指定されたコンテナ、スタイルシートを施され
た各要素は、ボックス化された四角い領域を生成します。
 つまり、どのような要素でも、画面に表示させた時には、四角い領域を持って
表示することになります。

 例えば、見出し要素では、横に長い四角い領域を持ち、ブラウザによっては余
白を与えられます。段落も、テーブルも、リストも基本的には、四角い領域であ
るわけです。それらすべてをボックスという概念に当てはめられます。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

◆ボックスの見え方を指定する
ボックス全体を非表示にしたり、ある1部分だけを表示させたり、またスクロー
ルバーを設けたりさせることが、スタイルシートで設定可能です。

 clip属性の値と機能(CSS Level 2)
  要素の一部を切り取って表示する設定
 なお、この設定をする上で、position属性を absolute に指定ないと、効果が
 ありません。

  rect 指定した矩形領域を切り取って表示します。
     ピクセル単位で、上、右、下、左の順で表示領域を切り抜きます。
      ・上:上辺から表示位置上端までの間隔
      ・右:左辺から表示位置右端までの間隔
      ・下:上辺から表示位置下側までの間隔
      ・左:左辺から表示位置左側までの間隔

  auto 全体を表示(デフォルト値)

 では、この属性を使った表示をしてみましょう。
  テキストエディタを起動してHTML文を作ります。下記のようにタイプしてく
 ださい。なお、コロン「:」、セミコロン「;」を間違えないように。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//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">
<!--
h1 { clip: rect(auto,auto,25px,auto);
     position: absolute;
     left: 200px;
     background-color: #f0c;
     color: white }

img { position: absolute;
      top: 100px }

img#smp1 { clip: rect(40px,200px,125px,55px);
           left: 300px }

img#smp2 { clip: rect(90px,250px,180px,128px);
           left: 500px }
-->
</style>
</head>

<body>
<h1>画像の切り抜き</h1>
<div>
<img src="images/sakura.jpg" width="250" height="180" alt="京都の桜">
<img id="smp1" src="images/sakura.jpg" alt="京都の桜">
<img id="smp2" src="images/sakura.jpg" alt="京都の桜">
</div>

</body>
</html>

 入力が終わりましたらHTML文書として保存します。そのためには必ず拡張子を
つけて保存します。ここでは、test_31.html としておきます。「.html」を忘れ
ずに保存してください。なお、保存の際の文書名は任意の名前をつけていただい
ても差し支えありません。

 サンプルHTML実行結果URL
  http://www.scollabo.com/banban/magazine/sample/mmsample_045.html

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

◆解説

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 本来ならば、Strictを使用したいのですが、Windows版 MSIEでは、clip属性の
 表示に効果が出ないため、あえてこの DTDを採用しました。
  (MSIEのバグと思われます。)

h1 { clip: rect(auto,auto,25px,auto); position: absolute; left: 200px;
     background-color: #f0c; color: white }
 見出し要素の見え方を設定しました。白字に背景色をピンクにしてあります。
 この設定では、見出しの下側25ピクセル分を切り抜きました。

img { position: absolute; top: 100px }
 すべての画像の絶対位置を上から 100ピクセル分に指定しました。この設定が
 ないと、切抜きの効果がありません。

img#smp1 { clip: rect(40px,200px,125px,55px); left: 300px }
 桜の画像を切り抜いて表示します。画像の上側から40ピクセル、左側から、200
 ピクセル、上から125ピクセル、左側から55ピクセルを切り抜きました。
  この設定は、id属性を用いています。
 (切抜きのイメージ図)
  ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
  ┃ (画像)    ↑             ↑         ┃
  ┃      40px             │         ┃
  ┃             ↓             │         ┃
  ┃        ┌─────────────+─────┐    ┃
  ┃         │(切り抜き部分)     │     │   ┃
  ┃← 55px→│                         125px        │   ┃
  ┃         │                          │          │   ┃
  ┃←─── +────  200px   ────+────→│   ┃
    ┃         │                          ↓          │   ┃
  ┃         └───────────────────┘   ┃
  ┃                                                      ┃
    ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛

<img id="smp1" src="images/sakura.jpg" alt="京都の桜">
 スタイルシートの img#smp1 を呼び出す id属性を用いています。
 width、height属性を省略しましたが、既に最初の画像で設定していますので、
あえて省略しました。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

◆overflow
ボックスの領域を、widthや heightを使って、幅や高さを指定した場合、コンテ
ンツによっては、収まりきれない場合が生じます。
 溢れてしまったコンテンツの表示方法を指定するのが、overflow属性です。

 overflow属性の値と機能(CSS Level 2)
  visible  領域指定を無視して高さや幅を自動調節し、すべてのコンテンツ
       を表示させます。
  scroll  縦横にスクロールバーを設けて、ユーザの操作によりコンテンツ
       を見せる方法です。
  hidden  領域指定に従って、収まりきれないコンテンツを表示しません。
  auto   ブラウザが自動処理します。

 これらの方法を使った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>overflow</title>
<style type="text/css">
<!--
div { margin-bottom: 1em;
      width: 150px;
      height: 100px }

div#samp1 { overflow: visible }

div#samp2 { overflow: scroll }

div#samp3 { overflow: hidden }

div#samp4 { overflow: auto }
-->
</style>
</head>

<body>
<div id="samp1">
<img src="images/sakura.jpg" width="250" height="180" alt="京都の桜">
</div>

<div id="samp2">
<img src="images/sakura.jpg" width="250" height="180" alt="京都の桜">
</div>

<div id="samp3">
<img src="images/sakura.jpg" width="250" height="180" alt="京都の桜">
</div>

<div id="samp4">
<img src="images/sakura.jpg" width="250" height="180" alt="京都の桜">
</div>


</body>
</html>

 入力が終わりましたらHTML文書として保存します。ここでは、test_32.html 
としておきます。

 サンプルHTML実行結果URL
  http://www.scollabo.com/banban/magazine/sample/mmsample_046.html

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

◆解説

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
 HTML4.01Strictの文書型宣言です。この仕様は、非推奨になっている要素や属
 性は、一切使うことができません。

div { margin-bottom: 1em; width: 150px; height: 100px }
 汎用ブロックレベル要素の、横幅を 150ピクセル、高さを 100ピクセルとしま
 した。また、下側の余白を1文字分に設定しました。

div#samp1 { overflow: visible }
 汎用ブロックレベル要素内のコンテンツをすべて見えるように設定しました。
 このため、横幅や高さの設定の制限を受けずに、コンテンツ全体を見せること
 ができます。id属性による記述です。

div#samp2 { overflow: scroll }
 汎用ブロックレベル要素にスクロールバーを設定し、収まりきれないコンテン
 ツをスクロールすることによって見えるようにします。

div#samp3 { overflow: hidden }
 汎用ブロックレベル要素の中の収まりきれない部分のコンテンツを非表示にし
 ます。溢れてしまったコンテンツは切り捨てられる形になります。

div#samp4 { overflow: auto }
 表示方法は、samp2(scroll)と同じ形になります。
 コンテンツによっては、微妙に異なる場合があります。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

◆擬似要素
スタイルシートのレベル2で実装されている擬似要素について説明します。
 このスタイルシートは、ブロックレベル要素内でのみ効果があります。

 要素名:first-letter   要素の先頭の文字に適用
 要素名:first-line     要素の最初の行のみ適用
 要素名:befor           要素の直前に適用
 要素名:after           要素の直後に適用

 ■サポート状況
 :befor、:after について MSIEはサポートされていません。
 また、Macintosh版 MSIE 5.0以降で、first-letterの表示にバグがあります。
  本来、ブラウザ側でサポートされない場合は、設定を無視されますが、何故か
 Mac版 MSIEでは、文字化けなどの「症状」が発生します。
  これはつまり、サポートしているけど、バグがあるというわけです。
   (マイクロソフトさん、何とかしてください!)

  Netscapeでは、6.0以降ですべてサポートされております。Mozillaも同様。
 (ネットスケープ、えらい!)

 Operaでは、Netscape同様サポートしています。
 (オペラ、えらい!)

 Macintosh用ブラウザ iCab ではCSS Level 2 は未だ対応が遅れています。
 なお、非視覚系ブラウザでは、見栄えを設定するスタイルシートそのものが、
 非対応です。

それでは、これらの擬似要素を使ったHTML分を作ります。
 テキストエディタを起動して、下記のようにタイプしてください。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-2022-JP">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>初心者のためのホームページ作り</title>
<style type="text/css">
<!--
h1:first-letter { color: #090}

h1 { font-size: large; 
     border-top: thin #009 solid; 
     border-bottom: thin #009 solid; 
     background-color: #ffc }

h2:first-letter { font-size: x-large; 
                  color: #f00 }

h2 { font-size: medium }

p:first-line { background-color: yellow }

h3:before { content: "【";
            color: #00f }

h3:after  { content: "】"; 
            color: #00f }

div { margin: 10px 100px }

span:first-child { font-weight: bold; 
                   color: purple; 
                   border-bottom: medium purple dotted }
-->
</style>
</head>

<body>
<div>
<h1>■ 擬似要素</h1>
<p>
擬似要素とは、要素内の特定の個所にスタイルを設定します。最初の文字の色を
変えたり、最初の行だけの表示方法を設定できます。ここでは、黄色の背景色を
設定しました。
</p>

<h2>設定する要素</h2>
設定する要素は、ブロックレベル要素の限られています。インラインレベル要素
では無視されてしまいますので、注意しましょう。

<h3>サポート</h3>
残念ながら、すべてのブラウザでサポートされているわけではありません。
<p>
Macintosh版 MSIEではバグがあります。今のところ、Netscape 6.0以上ですべて
表示可能です。
</p>
</div>
<div>
擬似要素をうまく使って、<span>ホームページ</span> に彩りを与えます。
</div>

</body>
</html>

 入力が終わりましたらHTML文書として保存します。ここでは、test_33.html 
としておきます。くれぐれも拡張子を忘れないようにしましょう。

 サンプルHTML実行結果URL
  http://www.scollabo.com/banban/magazine/sample/mmsample_047.html

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

◆解説

h1:first-letter { color: #090}
 第1見出し要素の最初の文字の色を緑に設定しました。
 Macintosh版 MSIEでは文字化けの可能性があります。最初の文字が「。」と表
 示することがあります。

h1 { font-size: large; border-top: thin #009 solid; 
     border-bottom: thin #009 solid; background-color: #ffc }
 第1見出し要素の文字の大きさを large、文字色は緑とし、上下に細い緑の枠
 線を設定しました。また、要素の背景色は薄いクリーム色です。本誌サイトで
 度々登場する設定です。

h2:first-letter { font-size: x-large; color: #f00 }
 第2見出し要素の最初の文字色を赤に、フォントの大きさを x-largeに設定し
 ました。これも Macintosh版 MSIE では文字化けの可能性があります。

h2 { font-size: medium }
 第2見出し要素の文字の大きさを、medium としました。

p:first-line { background-color: yellow }
 段落を表わす p要素の最初の行のみ、背景色を黄色としました。改行されると
 この設定が無効になります。(強制改行含む)

h3:before { content: "【"; color: #00f }
 第3見出し要素の直前に青色の括弧(【 )を表示させます。

h3:after  { content: "】"; color: #00f }
 第3見出し要素の直後に青色の括弧( 】)を表示させます。

div { margin: 10px 100px }
 汎用ブロックレベル要素の上下の余白を10ピクセル、左右に 100ピクセル設定
 しました。

span:first-child { font-weight: bold; color: purple; 
                   border-bottom: medium purple dotted }
 ブロックレベル要素の中で、最初に現れるspan要素のみに適用します。これは
 擬似クラスと呼ぶスタイルシートの設定です。
  ここでの内容は、紫色の文字を強調させ、紫色の点線を下側に設けています。
 Windows、Macintosh両方の MSIE および Operaではサポートされていないので
 この表示は無視されます。Netscapeは対応しています。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

◆Tips --- ブラウザの対比(MSIE vs Netscape)
1994年、設立されたばかりの Netscape Communications社は、無償で Webブラウ
ザをインターネット上で配布し、瞬く間にシェアトップ(90%以上!)にのし上
がり、業界標準になりました。
 この頃、HTMLはバージョンが 2.0になり、制作者の多くがNetscapeで表示する
HTMLを作っていました。(ある意味、平和な時期でしたが・・)

 1995年、マイクロソフト社が新しい OSである、Windows95を発売し、標準でバ
ンドルされた、Microsoft Internet Explorer(以下 MSIE)がジワリと普及し始
めました。ブラウザ戦争の勃発です。

 消費者(あるいはユーザ)にとっては性能を競う争いは歓迎でしたが、マイク
ロソフト社の戦略である WindowsOSの標準装備が効を奏し、Netscapeのシェアは
徐々に奪われ、ついに逆転してしまいました。
(最近では、Macintoshにもバンドルされている唯一のブラウザが、MSIEです。)

 1998年、W3CよりHTML4.0が勧告されて、NetscapeもMSIEもそれぞれ新しいバー
ジョンを発表しました。
 この時のNetscape Navigator 4.0はひどいものでした。スタイルシート対応で
ありながらその実装状態は極めて貧弱で、MSIEの優位性は疑いようもありません
でした。もうバグだらけ。
 その後、Netscapeは小規模の改良を加え、4.78までに改変されましたが、MSIE
とは性能差が縮まることがありませんでした。

 この時期、D-HTML(ダイナミックHTML)なる言葉が登場し、両ブラウザで独自
の仕様が装備されたことで、制作者にとっては大変な時期でもあったのです。
 D-HTMLはJavaScriptとスタイルシートを利用した動きのあるページの制作に大
きく寄与しましたが、Netscape用、MSIE用と2つのページを作ることを強いられ
ました。(制作現場は大混乱でしたが・・)

 一方、MSIEは順調にシェアを伸ばし、70%を超えるまでになりました。MSIEの
大きな特徴として、多少の記述ミスを許してくれる寛容さがあります。加えて、
同社の ActiveXとの親和性も高く、マルチメディアを扱う上で、重宝なブラウザ
でもあります。ただし、独自仕様が多いのも困りものですが・・

 Netscape社は、2000年アメリカ最大手のプロバイダ AOLに買収され、その後に
新しいバージョン 6.0 を発表し、4.78から大きく変わりました。
 Navigator4.xでの失敗から、MSIE同様、オープンソースのMozillaをエンジン
とした仕様に大きく変貌したものです。
 6.0では独自仕様を廃止し、W3Cに従った仕様となり、スタイルシートの実装も
満足のいく状態になりました。しかし、容量が大きくなり重くなってしまったこ
とは、大きな欠点でもあります。
 (Netscapeには、バージョン5は存在していません。)

 現在、MSIEの世界的シェアは、93%に達し、業界標準となった感があります。
もはやアメリカでは、MSIEの表示がよければそれで良い、という風潮になってい
ます。(実際、そのような依頼で制作したことがあります。)

 話は変わりますが、先週、「電子政府、脱ウィンドウズ」という新聞記事が大
きく扱われていました。要は、日本の行政のネットワークシステムをオープンOS
にしようという試みで、Linux あたりを採用する動きが見られます。
 既に、イギリス、ドイツなどの政府では脱ウィンドウズとして Linuxを採用し
中国では、個人のパソコンは、ほとんどが Linuxになっています。
 (オープンで無償という利点があります。)

 Linuxで使われるブラウザというと Netscapeか Mozillaか Operaに代表されま
す。決してマイクロソフト社は MSIEを Linux向けは作らないでしょう。

 Windowsが業界標準となっているのは、決して MSIEが搭載されていたからでは
ありません。主な理由は、企業で用いられる代表的なソフト「Office」というア
プリケーション・ソフトです。互換性を重要視する企業では、業界の標準までに
なった「Office」が必須のソフトになっています。

 もし、「Word」や「Excel」に替わるキラー・アプリケーションがLinuxで登場
したら、その普及は加速度的に増大するでしょうし、当然、ブラウザのシェアも
入れ替わります。
 (現在、MS Office のデータが扱える OpenOffice 1.1 が、サンマイクロシス
  テム社から無償でリリースされている。非常に秀逸なソフト。)

 MSIEが、同社の WindowsOSの標準装備であったからこそ、今日の隆盛を極めて
いるのであって、決して優れていたからではありません。案外「普通の人」は、
他のブラウザをダウンロードし、インストールするなんてことはしないようです。
そしてそれが「普通」なんでしょう。

 今後、Mozillaや Operaのように高機能でありながら、軽いという特徴を持った
ブラウザの登場は続くでしょう。(まだ MSIEからみれば満足ではないが・・)
 現在、大小60あまりのブラウザが存在する今日、次を担うのは、MSIEではない
かも知れません。何かのきっかけでどのようにも変わってしまうのが、コンピュ
ーターの世界なのですから。

  参考URL:ブラウザの歴史
 http://www.scollabo.com/banban/tips/browser.html

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

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

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

次回は、JavaScript講座 第3回を予定しています。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

質問・ご意見ははこちらまで→ banban@scollabo.com
なお、ご質問の際には、お使いのOS、通常使っているブラウザ、使っているテキ
ストエディタなど、なるべく分かりやすく制作環境を明記していただけると回答
しやすくなると思います。
 ただし、平日の昼間は会社勤めなので、返事が遅れることがあります。ご了承
ください。

発行者 ばんばん
協 力 スズキ・コラボレーション http://www.scollabo.com/
配信エンジン まぐまぐ http://www.mag2.com/  (ID 0000090196)

誤字・脱字・変換ミス・表現欠乏などには平にご容赦願います。なお、マガジン
のすべての記述に誤りや重大なスペルミスがある場合、叱咤と罵声と共に私まで
突きつけていただくと幸いに思います。

バックナンバー こちらで公開しています。
プレーンテキスト  http://www.scollabo.com/banban/magazine/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

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

<えでぃた〜ず・るーむ>
先週初めから、「まぐまぐ」の原稿容量が、30KBから50KBに引き上げられました。
この50KBと言うのは、全角の文字で約25,000文字分に当たります。でもねー、そ
んなに書けねーよ、というのが本音です。それでも文字数を意識せずに編集でき
るのはいいことだ。

 私の自転車の通勤路には銀杏の並木道があり、今の季節には落ち葉が大量に降
り注ぎ、道路を枯葉で埋めてしまいます。見た目にはロマンチックで綺麗なので
すが、この「黄色い道路」は滑りやすく、自転車の細いタイヤでは危なくて仕方
ありません。今日も通学途中の女子学生さんが2人、「見事な転倒」を披露して
すごく痛そうでした。これで怪我したらやっぱり行政の責任かなぁ・・

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

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

              Copyright(C) 2002  www.scollabo.com/banban/
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■



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