毎週金曜日配信 What's New 2004年5月7日
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
┏┏┏┏ 初心者のためのホームページ作り/Web for beginner
┏┏┏ http://www.scollabo.com/banban/
┏┏
┏ ＜第92号＞
banban@scollabo.com
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
当講座は、初心者や中級者が正しい文法と作法を身につけて、プロ級の本格
的な Webページ作成に役立つことを目的に配信されております。
当講座では HTML4.01、XHTML1.1、XML1.0 を中心とした文法が主体となって
います。なお、このマガジンは等幅フォントでお読みいただくと快適に読める
ようになります。
今週のコンテンツ
■ Webデザイン 最終回 --- トップページの役割
■ HTML講座 第34回 --- アクセシブルな画像表示
■ CSS講座 第14回 --- 要素の表現形式
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
◆Webデザイン（最終回） トップページの役割
このコラムで何度かお伝えしてきたとおり、トップページとは正真正銘「サイ
トの顔」です。その意味では閲覧者が最初に訪問したときのトップページの印
象は極めて重要になります。
閲覧者は、トップページを瞬間的に見るだけでそのサイトの性格や出来栄え
などを判断し、自分にとって有益で有用であれば次のページに進んでくれるこ
とが期待できます。
いわゆる「ホームページ」とは、サイトのトップページを表す言葉として使
われることが一般的に知られています。
通常トップページは、そのサイトが提供するコンテンツ (情報) の主体的な
テーマなどを表し、閲覧者の要求する情報にアクセスできるナビゲーションな
どを配置します。言い換えれば、トップページだけでコンテンツすべてを完結
することは稀なことなのかもしれません。(絶対にないとは言い切れませんが)
その意味でも、トップページの印象は非常に重要だということになります。
トップページには、そのサイトが提供する各コンテンツのナビゲーションが
配置するようにしましょう、訪れた閲覧者はそのナビゲーションに従ってほと
んどのコンテンツに直接アクセスできる工夫はしておくと、閲覧者が迷子にな
らずに済みます。それが「ホーム」という言葉が当てはまる所以でしょう。
各ページにはトップページに戻れるよう「ホーム」へのナビゲーションを示
すことで、閲覧者に快適な環境を提供できます。何よりもトップページの文書
名が indexという「索引」を表す言葉が使われることでも分かるように、まさ
に、サイトの「目次」を表しています。
■スプラッシュページ
トップページにスプラッシュを表示するサイトがたくさんあります。スプラッ
シュページとは、一番最初に見せる「ジングル」みたいなもので、動画やアニ
メーションを見せ、次いで本来のトップページに誘導するものです。
一見すると格好いいように見えますが、私には無駄に思えます。閲覧者に余
計な時間と通信費とリソースを消費させるだけで意味がありません。
延々とロールする動画やアニメーションを見終わらなければ次に進めないよ
うでは、とてもアクセシブルとは言いがたいものです。そのくせ、肝心のコン
テンツが貧弱ならば、もうガックリきます。
■トップページは軽く作ろう
有益で非常に有用なコンテンツを提供していても、せっかく訪れた閲覧者に余
計なストレスを感じさせてはマイナスになります。特に、利用頻度の高いトッ
プページは容量を軽くすることが大切です。
トップページの容量は、HTMLや CSSファイル、他の画像ファイルなどの合計
が40KBを超えないように工夫しましょう。40KB以下ならば、ダイヤルアップの
ナローバンド環境でも比較的早く受信できます。ブロードバンドならば一瞬の
うちに表示が終わるでしょう。サクサクとして気持ちのよい閲覧環境を提供す
ることは決して難しいことではありません。
よりアクセスアップを望むのであれば、こうした努力を惜しまず、内容の濃
いコンテンツと共に、軽量化を図るようにしましょう。
■Webデザイン最終回にあたって
Webサイトを構築する際のデザイン (設計) について 30数回にわたってこのコ
ラムをお届けしてきました。ページ作成の技術やHTMLを知ることも、ある程度
大切なことですが、最も重要視することはサイトのコンセプトにあります。
コンセプト (理念) なき Webページはすぐに廃れてしまいます。コンセプト
をもう一度見直し、それに沿った設計を心がけることは実に重要なことです。
あなたが作成するページは誰が閲覧するのか、誰に見てもらいたいのかを考え
ると、自ずと設計すべき中身が分かってきます。
決して自己満足にとらわれず、ターゲットとなるべき閲覧者の立場を考え、
誰にでも親しまれるページを作ってください。
ページを作るということは、ページを閲覧する側の立場で考えないと、大き
な思い違いをしてしまいます。
今日のインターネットの普及は、制作者側ではなく、閲覧する多くのユーザ
によって育まれたと言えるでしょう。見る人がいるからこそ、制作側で様々な
模索と苦悩によって今日の隆盛を迎えています。
決して現状に満足せず、いろいろな工夫を試みることも大切なことです。そ
して何より、閲覧者とのつながりを大事にしてください。成長に限界はありま
せん。誰でもプロ級の、いやそれ以上のページを作れる可能性を持っているの
ですから・・・
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
◆HTML講座 （第34回） アクセシブルな画像表示
ページを彩る要素として画像は１つの表現方法です。視覚的な訴求効果が高く
写真や図形などを用いた説明などに多く利用されています。
ただし、画像を表現する欠点も幾つかあるということを知ってください。画
像ファイルは、テキストベースのHTMLや CSSファイルよりもはるかに容量が大
きく、閲覧者の環境によってはダウンロードまで、それなりに時間が必要にな
ります。画像サイズが大きいと容量も大きくなる傾向にあります。
また、たとえ小さい容量の画像ファイルであっても、何枚もあれば相対的に
容量も増大します。
■適切な容量を計算する
例えば 64Kbpsの ISDN回線では、40KBを受信するのにおよそ５秒ほど必要に
なります。５秒という時間が短いか長いか判断の分かれるところですが、それ
以上になると、閲覧者にストレスを与えることになります。画像を利用する場
合には、その点に十分留意してください。
閲覧者のブラウザが Webサーバに要求したとき、サーバはHTMLファイルを送
出します。受け取ったHTMLをブラウザが解釈して表示を開始しますが、その中
に画像を表示する構文に出会ったとき、改めてサーバに画像を要求します。
画像を受信してから、またHTML解釈と表示を続けます。つまり、画像な他の
ファイルを埋め込んだ場合には、それなりに受信時間が長くなるということを
覚えてください。だからこそ、画像ファイルの容量には十分に配慮する必要が
あります。
■写真画像形式
デジタルカメラの普及は目覚しく、誰でも１台くらいは持っていることでしょ
う。デジタルカメラはその名のとおり、レンズから通した被写体をデジタル形
式でメモリーに取り込みます。
カメラから映し出した画像は通常、JPEG(Joint Picture Experts Group) と
いう形式で取り込まれます。また、高級機では RAW (Read After Write）形式
でも取り込み可能となっています。
JPEG形式とは、フルカラーをサポートする「圧縮形式」で比較的用量が小さ
く Webページで写真を表示するときに多く利用される形式です。ただし、せっ
かく圧縮されても、ダウンロード時に解凍する時間も必要なことから、受信時
間の短さを相殺する傾向にあります。
一方 RAW形式は、カメラ内部で何の処理もしてない画像データ、つまり CCD
などの撮像素子から得られた電気信号を単純にデジタル化したものです。これ
を表示するためにはそれなりのソフトウェアが必要となり、また、容量も非常
に大きく Webには適していません。あくまで編集用データとお考えください。
JPEG形式は非可逆的圧縮となりますので、編集済みの画像をさらに編集する
と、画質が荒くなってしまいます。色数が多ければ多いほど容量が上がり、ま
た、画像サイズを大きくすると、これも容量が上がります。
Webページで表示する場合には１枚の容量を 10KB前後に抑えたいところです。
画像枚数を多くする場合には、サムネール形式（小さい画像）にして、閲覧者
がクリックしたときに、別のページで大きく表示させる方法もあります。
■イラスト画像
作者が自分で画像を創作するときの画像形式は、そのほとんどが GIF、あるい
は PNG形式です。これらは 256色を使ったベタ塗りの画像形式に極めて適した
形式です。
GIF（Graphic Interchange Format）形式は、ベタな画像を効率的に圧縮し
その容量が小さいことから多くのサイトで利用されています。イラストは色数
が少ないので、うってつけの形式といえるでしょう。
ただし、現在この形式は特許で保護されているため GIF形式を抽出するソフ
トウェアによっては、面倒な問題に巻き込まれる可能性があります。しかしな
がら、今年６月には特許権が喪失するので、それ以降は問題がないと思います。
この特許を持つユニシス社は、同特許の継続を放棄すると発表していますの
で、今後はますます利用が広がると予想します。（米国では既に特許喪失）
GIF形式の大きな特徴は、背景となる部分を透明化できることと、アニメー
ションを作成できる点にあります。
PNG（Portable Network Graphics）形式の大きな特徴は、元の画像を広げて
表示しても、シャギー（キザキザ）などが発生せず、常に高画質を維持する点
にあります。また GIF形式同様に背景を透明化でき、しかも、24ビットフルカ
ラーをサポートしている点が上げられます。
特許権という問題もなく、誰でも自由に利用できることも大きな特徴です。
ただし、古いブラウザ（MSIE3.0以前、Netscape3.0以前）では PNG形式を実装
していない点があります。
256色のイラスト画像を、JPEG形式に変換すると飛躍的の容量が上がります。
利用する画像形式を顧慮して、適切な画像形式を選択することが大切です。な
お、各画像形式の変換や作成は、利用するソフトウェアに依存します。
■画像を表示できない環境のために
画像を表示する要素として img要素を使うのが一般的です。この要素には、画
像を表示できない環境のために代替テキストを示す alt属性が定義されていま
す。この alt属性の値に、画像の代替となる簡単な説明文を設定します。
<img src="logo.png" width=100" height="25" alt="ばんばん株式会社">
代替テキストは、画像を的確に説明した文章を簡潔に述べるようにします。
簡単そうに思うのですが、それなりに難しいものです。つまり、画像を表示さ
せない環境で、その代替テキストだけで内容を伝えるのは簡単ではありません。
言い換えれば、画像に頼ったコンテンツでは、すべての閲覧者に内容を伝え
ることが困難であるといえるでしょう。
画像の表示は魅力的に思えますが、画像がなくても的確に情報を伝えられる
文章力をつけるようにしましょう。その上で、補足的に画像を利用する手法が
スマートで、誰にでも理解を得ることができます。
最近はノートパソコンの利用者が増え、モバイルを楽しんでいます。しかし
ながら、その通信環境は決して早いものではありません。わたしも携帯電話を
利用してノートパソコンで Webページを閲覧することがありますが、その際に
は、利用するブラウザで画像表示を「オフ」にしています。
特に画像を利用したナビゲーション（イマージマップ）では、画像が表示さ
れなくても、代替テキストでナビゲーションできるようにすることは、ある意
味では、制作者の義務ともいえるのではないでしょうか。
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
◆Tips 画像のサイズを明記する
画像を表示する際、あらかじめ画像サイズを明示しておくと、体感的に早くレ
ンダリングされます。
これは、あらかじめ画像を表示する領域を確保できるため、ブラウザが計算
する必要がないからです。その意味でも width、height属性で画像サイズをし
っかりと明記するようにしましょう。
○ <img src="logo.png" width=100" height="25" alt="ばんばん株式会社">
× <img src="logo.png" alt="ばんばん株式会社">
なお、明記するサイズはピクセル単位となっています。
◆Tips デジタルカメラの画素数と画質
最近のデジタルカメラは非常に高性能になっており 800万画素という機種も登
場しています。携帯電話のカメラでも 100万という画素数を超えるほどです。
この画素数とは、画像を形成する１つの点の集まりを意味しており、画素数
が大きいほど高精度な画質を提供することが可能となっています。何と今では
フィルム形式の写真よりも画質が向上しているほどです。
しかし、これほどの高精度な画質をそのままコンピュータで再現することが
できません。例えば、私が使っている17インチの液晶ディスプレイでは、残念
ながらフル画面（1280×1040）でも、133万画素を超える程度です。
そう考えると Webで表示する画像を作成するのに、30万画素ほどのビギナー
向けのデジタルカメラでも十分であることが考えられます。
なお、画素＝ピクセル、として置き換えて計算することができます。
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
◆CSS講座（第14回） 要素の表現形式
今回のスタイルシートは、要素の表現方法を中心に解説します。
ここで言う表現方法とは、要素の表現性質を変化させたり、見え方の形式を
指定したりします。スタイルシートでは、レベル２という仕様によって定義さ
れているものです。そのため、ブラウザ銘柄によってはサポートされていない
ものがあります。
■要素の表示形式を変更する
要素には大きく分けて２つの「型」があります。１つは、文書構造を形成する
ブロックレベル要素で一般的なブラウザでは、前後に改行を持たせて出力しま
す。もう１つがインラインレベル要素と呼ばれるもので、これは通常の文字列
と同様に扱われ、前後に改行や余白は持っていません。
こうした２つの要素型をスタイルシートを使って逆転させた上で表示するこ
とができます。スタイルシートは display属性を使います。
■要素の非表示 その１
ある特定の要素全部を非表示に設定することができます。これも display属性
で指定しますが、この場合、要素領域そのものも非表示として他の要素に影響
を与えません。
□ display属性の利用法
指定されたようその表示方法を指定するために利用します。具体的な値とその
機能は次のとおりです。
display属性の値と機能
none 要素を非表示とする (領域は確保されない)
block 要素をブロックレベル要素として表示する
inline 要素をインラインレベル要素として表示する
list-item 要素をリスト項目として表示する
run-in ブロックレベル要素の先頭にインラインで表示する
compact ブロックレベル要素の左の余白内にインラインで表示する
marker ブロックレベルの擬似要素のみに適応、リストマーカーを示す
これらの属性値の中で、run-in、compact、marker の３つは、MSIEでは実装
されていません。(MSIE＝Microsoft Internet Explorer)
具体的な書式は、以下のとおりです。
□インラインレベル要素をブロックレベルで表示する
インラインレベル要素をブロックレベル要素として表示させるためには、イン
ラインレベル要素に対して指定しなければなりません。
strong { display: block }
文字を強調させる strong要素をブロックレベルとして表示します。
なお、リスト項目を示す li要素も同様に表示させることが可能です。その場
合、リストマーカーは表示されません。
□ブロックレベル要素をインラインとして表示する
ブロックレベル要素をインラインとして表示させるためには、指定する要素が
ブロックレベル要素でなくてはなりません。
h1 { display: inline }
第一見出しを普通の文字列と同じインラインとして表示します。
□要素を非表示にする
指定した要素を非表示にした場合、その領域は確保されることがありません。
img { display: none }
画像を表示する img要素を非表示にし、ブラウザ画面に出力されません。
□リスト項目として表示する
指定した要素を、リスト項目を示す li要素と同様に表示します。
span { display: list-item }
この場合、汎用的に利用するインラインレベルの span要素を li要素と同じ
ように出力しますが、マーカーは表示されません。
display属性の表示サンプル
http://www.scollabo.com/banban/magazine/ms/sample_92-1.html
(サンプルでは、スタイルシートの ON/OFF ができるようにしています。)
■要素の非表示 その２
visibility属性を使うと、要素を非表示にしてもその領域を維持したまま設定
することができます。具体的な値と機能は以下のとおりです。
visibility属性の値と機能
hidden 要素内容を非表示にしますが、領域を維持します。
visible 要素内容をそのまま表示します。(デフォルト値)
collapse テーブルの列や行、またはグループ化したセルに対してその範囲
を取り除いて表示します。
他の要素に適用した場合は、hidden と同じ結果になります。
具体的な書式は以下のとおりです。
□要素内容を非表示にする
p { visibility: hidden }
段落を示す p要素全体を非表示にしますが、その領域は確保されて表示され
ます。display属性の none とは異なることになります。
visibility属性の表示サンプル
http://www.scollabo.com/banban/magazine/ms/sample_92-2.html
■要素の表現方法を指定する注意点
インラインレベル要素をブロックレベルとして表現したとしても、それは表現
方法の変更に過ぎません。つまり、基本的にインラインはインラインレベル要
素であるということです。
スタイルシートでどのような表現方法を指定しても、HTMLの基本的な構文は
論理構造を保たなければなりません。
論理構造とは、各要素が常にツリー (階層) 構造を構成し、インラインレベ
ル要素はブロックレベル要素の中に配置します。構造は、見出し、段落、リス
ト、表組などの文書を構成する基本構造の中にコンテンツに置きます。
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
今回はここまで。
「今週のおさらい」はまだ完成していません。２〜３日中にはアップできると
思います。ご迷惑をおかけします。
(今週のおさらいトップページ)
http://www.scollabo.com/banban/magazine/
次回は、5月14日に配信を予定しています。
主なコンテンツは、JabaScript講座の location 及び historyオブジェクト
です。
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
◆質問・ご意見ははこちらまで→ 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
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
＜えでぃた〜ず・る〜む＞
先月は結局１回しか配信できませんでした。理由はいろいろありましたが、何
よりも制作意欲がまったく湧かなかったことです。
コンピュータの前に座り、原稿を開いても１文字もタイプできず、「今日は
やめよう」の連続でした。このメールマガジンを配信して２年ほどでになりま
すが、こんなにも文章が出ないことはありませんでした。これは一種のスラン
プなのでしょうか？
テーマや内容はあらかじめ決まっているにもかかわらず、まったく文章が思
い浮かびませんでした。考えるのがひどく面倒で、それだけで疲れてしまい、
質問のメールすら返答できない日が続きました。そのうちコンピュータの起動
さえもわずらわしく感じていました。
そんな日々の中で、「もう廃刊しよう」とまで考え、悶々としていました。
それが突然、２日前からやっと我に戻り、無事原稿を書くことができました。
いったいどうしたことでしょうか、こんな経験は初めてです。
もう一度原点に戻り、新鮮な気持ちを忘れずに取り組むことが大切だと知り
ました。そのように考えると、たまにはスランプもありがたいものなのかもし
れません。
そんなこともあってか今週の文面は、非常におかしいものとなってしまいま
した。何卒、ご容赦のほどを。
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
◆著作権について
個人がご自分のＰＣに保存して利用する以外の記事の転載、引用は基本的に応
じておりません。記事中の内容について、無断で使用することを固く禁じます。
なお、記事中のスタイルシート、スクリプト、HTMLをご自分のページ作成に
自由に使っていただいても差し支えありません。
Copyright(C) 2002-2004 www.scollabo.com/banban/
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
最新公開日 2004年5月13日
Copyright(C) 2002-2004 banban@scollabo.com