毎週金曜日配信 What's New 2004年3月26日
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
┏┏┏┏ 初心者のためのホームページ作り/Web for beginner
┏┏┏ http://www.scollabo.com/banban/
┏┏
┏ ＜第90号＞
banban@scollabo.com
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
当講座は、初心者や中級者が正しい文法と作法を身につけて、プロ級の本格
的な Webページ作成に役立つことを目的に配信されております。
当講座では HTML4.01、XHTML1.1、XML1.0 を中心とした文法が主体となって
います。なお、このマガジンは等幅フォントでお読みいただくと快適に読める
ようになります。
今週のコンテンツ
■ Webデザイン (第32回) --- SEO対策
■ HTML講座 (第32回) --- アクセシブルなテキスト
■ CSS講座 (第11回) --- 背景画像の扱い
■ 属性の解説 (第15回) --- size属性
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
◆Webデザイン (第32回) SEO対策
SEOとは、Search Engine Optimization の頭文字を取ったもので一般に「検索
エンジン最適化」と呼ばれる技法のことです。
■検索エンジン
一般的に検索エンジンと呼ばれるものは、Yahoo などのディレクトリ登録型と
は異なり、サーチロボット (実体はソフトウェア) が、世界中の Wabサイトを
巡って、各ページの情報を集めデータベースに格納する仕組みを指します。
検索サイトで利用者は、何らかのキーワードを入力して、データベースから
その情報を取出すことで、目的のページを探し出します。
こうしたサーチロボット型の検索エンジンは、Google や AlltheWeb などが
有名です。
検索結果から自分にとって必要と思われるサイトを探すとき、利用者は検索結
果の何ページまで探す作業をするでしょうか？
■SEOの必要性
数ある SEO対策を講じるメリットとは、検索サイトで自分のサイトに関連する
キーワードによってサーチしたとき、その結果の一覧で最初のページに現れる
ようにすることです。
それによって検索した閲覧者が自分のサイトにクリックすることを期待でき
るわけです。特に、商用サイトを運営する制作者にとって、検索結果は非常に
気になるところではないでしょうか。
■検索結果
通常、閲覧者が検索サイトで行う検索結果で、80％以上の人が検索結果のタイ
トルや説明文を読み、自分の要求するサイトを訪問するといわれています。
そして、そのほとんどで検索結果の２ページまでから選んでクリックしてい
る事実があります。検索結果の最後まで読む人はいないようです。
しかし、例え検索結果の１ページ目の１番上に表示されたとしても、それが
閲覧者の要求を満たす情報を提供しているサイトであるとは限りません。
サーチロボットは各ページのタイトルや強調された文字列、あるいは本文中の
キーワードとなる「単語」を拾い集めてデータベースに格納します。それは、
ブログなどの日記や掲示板からも収集されます。
そのため、閲覧者が要求するキーワードと一致すれば、コンテンツとは関係
なく検索結果に表示します。このため、閲覧者は何度も検索結果から探し出さ
なければならないのが実情でしょう。
■コンテンツこそが人を寄せ集める
確かに検索結果は大切です。一番最後よりも一番先のほうがよいに決まってい
ます。しかし SEO対策に情熱を傾けるよりもコンテンツを充実させた方が結果
として重要であることに変りありません。
適切なページタイトルや見出し、それに伴った内容の濃いコンテンツを作成
することで検索結果に影響します。また、閲覧者の要求を満たす内容であれば
あるほど、そのページにリンクを貼ってくれることも期待できます。いわゆる
被リンクの数が増え、それも検索結果に好影響を与えます。
せっかく訪れてくれる閲覧者を失望させないためにも、コンテンツの充実は
最重要課題です。それこそが最高の SEOなのではないかと考えます。
なお、各サーチ型検索サイトでは、これまでの検索アルゴリズムを変更する
新しい技法を模索しています。そうなれば従来の SEO対策はまったく無駄にな
るかもしれません。
（第33回 オーサリングソフトにつづく）
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
◆HTML講座 （第32回） アクセシブルなテキスト
コンテンツを作成する上で、テキスト (文字列) は、簡単に情報を伝えられる
非常に有効な手段です。画像や動画よりもはるかに容量が小さく、かつ詳細な
情報を詰め込むことができます。
しかし、視覚系ブラウザで閲覧する場合には問題なくても、非視覚系ブラウ
ザでテキストをレンダリングしたとき、作者の意に反して思わぬ落とし穴があ
ります。今回は、そうしたテキストの悪例を挙げ、その理由と対策について、
私自身の反省を込めて解説します。
■不用意な記号
テキストの中で、※、○、●、■、□、◆、〒、♪ などの記号は、音声ブラ
ウザではどのように読むでしょうか。非常に難しいところです。なかなか作者
の意図に沿った形で読んでくれません。
例えば、
■不用意な記号 これは「しかくふよういなきごう」と読み上げます。
このように、様々な記号文字が含まれていた場合、適切に情報を伝えるとい
う作業が困難になります。
では、そうした環境に対する対策は？
方法は２つあります。１つは、記号を画像化し alt属性の中身を空にするこ
とです。具体的な構文は、
<img scr="mark.gif" width="12" height="12" alt="">不用意な記号
ご存知のように画像の代替テキストを提供する alt属性は、音声ブラウザで
読み上げる工夫があります。その内容を空にすることで、記号そのものを読み
上げることがなくなり、閲覧者はテキストの内容のみに集中できます。
もう１つの方法は、音声ブラウザ向けのスタイルシートを利用して、記号だ
けを発声させないようにします。当メールマガジンの Webサイトではこの方法
を採用しています。 (まだ全部修正していませんが・・・)
具体的なスタイルシートと、HTML構文は以下のとおりです。
@media aural, braille, embossed {
.mark { speak: none; volume: silent; visibility: hidden }
}
<h1><strong class="mark">■</strong>不用意な記号</h1>
スタイルシートでは、その出力先を音声ブラウザ、点字ディスプレイ、およ
び点字プリンタに限定し、指定されたクラスの読み上げや音量、表示をさせな
い設定になっています。当然ですが、視覚系ブラウザでは影響がありません。
HTML構文では、記号部分にクラス名を strong要素に設定しています。
これによって、■部分のレンダリングをさせないようにします。
■その他の記号
価格を示す \ や $ の場合、音声ブラウザでは「えんまーく」「どるまーく」
と読み上げます。例えば、\1000 としたときは「えんまーくせん」と読み上げ
られます。正しくは 1000円とすべきでしょう。
私も良く使うのが「〜」という記号です。音声ブラウザは「から」と読み上
げます。「お〜そうだったのか！」という表現では「おからそうだったのか」
と読み上げ、何が何だかわかりません。
この場合は、「おー、そうっだったのか！」と、長音に変換し、句読点をつ
けるといいでしょう。なお、感嘆符は読まれることがありません。
■年月日と数字の表現
日付を表現する場合、例えば、2004/3/26 とした場合、音声ブラウザでは「に
せんよんぶんのさんぶんのにゅじゅうろく」と読み上げます。まるで割り算を
レンダリングしているように聞こえ、閲覧者はそれが日付であることが理解で
きません。
また、2004.3.26 とした場合でも「にせんよんてんさんてんにゅじゅうろく」
と読み上げてしまいます。2004-3-26 のばあいは引き算としてレンダリングし
ます。なかなか厄介なものです。
正しくは、「2004年3月26日」とすべきでしょう。(当サイトでも、すべての
ページで修正中です。)
数字を表現する場合、例えば 「1千万円」で半角数字と全角の漢字を取り合
わせるのも正しく伝わらないことがあります。「いちせんまんえん」と発声す
るので何となく意味は伝わりますが、正しい発音ではありません。
この場合は全部全角の漢字にするか、あるいは「10000000円」と記述するよ
うに心がけましょう。
■単語のスペースを入れる表現
単語にスペースとは、例えば、「場 所」、「日 時」などのような表現です。
この場合、音声ブラウザは、「ば、ところ」「にち、とき」と発声します。
つまり、音声ブラウザは単語にスペースがあった場合、それを独立した１つ
の言葉として理解してしまうためです。
視覚系ブラウザでは直感的に判読できても、音声や点字を利用する環境では
作者の意図と異なる理解をすることがあります。こうした文字間にスペースを
入れる場合、スタイルシートを利用するようにしましょう。
スタイルシートと HTMLでは、以下の方法を使います。
.separation { letter-spacing: 1em }
<p><span class="sparation">場所</span></p>
■絵文字の扱い
メールなどで頻繁に利用される絵文字を Webページで表現する場合には、以下
の点に注意してください。
絵文字の中にアルファベットがある場合や記号がある場合、音声ブラウザで
はそのまま出力されることがあり、点字装置もそのまま出力され、結果的に何
を表現しているのか分からなくなります。
例えば、「申し訳ございません。ｍ(_)ｍ 」としたとき、絵文字は「えむえ
む」と出力します。絵文字を使いたいときに注意してください。
絵文字の変わりに、画像を利用した方がスマートです。 (その必要があるか
どうかは別問題ですが)
■実体参照
不用意な実体参照文字は、閲覧環境に重大な影響を与えます。
例えば、< や > 、あるいは & などは実体参照として定義され、利用する場
合には実体参照符号を使わなければなりません。特に CGI の URI に使われる
実体参照文字 & は、必ず & としなければなりません。
また、実体参照符号をそのまま出力したい場合、例えば、& を出力する
ときには &amp; と記述します。
■まとめ
ごく普通にコンテンツとして提供するテキストですが、案外環境によっては作
者の意図とは違う意味で解釈される「落とし穴」があることは意外と思われる
方もいると思います。
身体に障害のある方のインターネット利用は日毎に増加しています。独り善
がりに陥りやすい Webページ作成ですが、全方位的な見方を身につけて、誰に
でも歓迎されるコンテンツを提供していきたいものです。
次回も引き続きアクセシブルなテキストについて解説します。
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
◆CSS講座（第10回） 背景画像の扱い
スタイルシートでは、コンテンツを作成する要素のほとんどで背景画像を指定
することができます。それが例えインラインレベル要素であっても、背景画像
を表示させることが可能です。
■背景画像を指定する
スタイルシートで背景画像を指定する場合は、background-image属性を利用し
ます。具体的な書式は以下のとおりです。
p { background-image: url("backimage.gif") }
この書式では、段落要素に GIF形式の背景画像を指定しています。これによっ
て、ページ内のすべての p要素に同じ背景画像が表示されます。
■背景画像指定の注意点 (パスの指定)
スタイルシートで背景画像の URIを指定する場合には、スタイルシートから見
たパスを指定しなければなりません。
例えば、スタイルシートを外部に置くリンキング方式を採用した場合、スタ
イルシートを適用するページからのパスではなく、スタイルシートそのものか
らのパスで指定します。
例えば、以下のようなディレクトリ構成だったとします。
index.html
┃
┣━━━━ /imageディレクトリ (各種画像ファイル)
┃
┗━━━━ /cssディレクトリ (スタイルシート)
この場合 index.html という文書から見た imageディレクトリ内の画像ファ
イルにアクセスする場合は「image/画像ファイル名」というパスになります。
ところが cssディレクトリ内にあるスタイルシートから見た画像ファイルへ
のアクセスは「../image/画像ファイル名」というパスになります。
このディレクトリ構成における外部スタイルシートを利用する場合、背景画像
を指定するパス (URI) の書式は以下のとおりです。
p { background-image: url("../image/backimage.gif") }
意外な「落とし穴」になりますので、パスに関する知識が必要となります。
■背景画像の表示方法
スタイルシートでは、背景画像の位置や繰り返し表示などを同時に指定するこ
とができます。
通常、単純に背景画像を指定した場合には、要素の領域で左上から右方向、
下方向へと繰り返して表示します。
１つの画像を要素中で繰り返して表示するサンプル
http://www.scollabo.com/banban/magazine/mm/sample_90-1.html
□背景画像の並び方のコントロール
背景画像は初期値では上記サンプルのように縦横に表示されますが、スタイル
シートでは、背景画像の並びをコントロールできる機能が備わっています。
背景画像のコントロールは、backgroun-repeat属性で行います。
この属性では４つの値が用意され画像の並びを指定します。
repert 通常どおり縦横に表示します。(デフォルト値)
repeat-x 横方向のみ繰り返して表示します。
repeat-y 縦方向のみ繰り返して表示します。
no-repeat 繰り返しを行わず１回だけ表示されます。
なお、この属性を利用する場合は、あらかじめ背景画像を指定する必要があ
ります。具体的な書式は以下のとおりです。
p { background-image: url("backimage.gif");
background-repeat: repeat-x }
background-repeat属性のサンプル
http://www.scollabo.com/banban/magazine/mm/sample_90-2.html
□背景画像の位置指定
背景画像を特定の位置に指定することも可能です。
スタイルシートでは background-position属性を使うことで、様々な位置に
背景画像を配置することができます。
ただしこの場合、あらかじめ background-repeat属性で、何らかの値を指定
しておく必要があります。
位置を指定する属性値は次のようなものがあります。位置指定をする場合、
横方向と縦方向の２つの値を半角スペースで区切って指定することも可能です。
top 要素の上側に配置する
left 要素の左側に配置する
right 要素の右側に配置する
bottom 要素の下側に配置する
center 要素の中央に配置する
% (パーセント) 画面サイズの相対的な比率で指定する
パーセントで指定するとき、100% 100% とした場合には right bottom と同
じ位置で配置したことと同じ結果になります。それを基準とした比率で指定し
ます。
具体的な書式は以下のとおりです。
body { background-image: url("backimage.gif");
background-repeat: no-repeat;
background-position: top right }
background-position属性のサンプル
http://www.scollabo.com/banban/magazine/mm/sample_90-3.html
□背景画像を固定する
スタイルシートでは、背景画像を画面の中で固定し、閲覧者がスクロールして
もそのままの位置で表示させることも可能です。
背景画像を固定するには、background-attachment属性を使います。
ただしこの属性を使う場合には、あらかじめ背景画像を指定し、なおかつ背
景画像の位置を指定する必要があります。
背景画像を固定する属性の値は以下の２つが定義されています。
fixed 背景画像を固定します。
scroll 他の要素と一緒にスクロールします。(デフォルト値)
具体的な書式は、
body { background-image: url("backimage.gif");
background-repeat: no-repeat;
background-position: top left;
background-attachment: fixed }
background-attachment属性のサンプル (擬似フレームを利用しています)
http://www.scollabo.com/banban/magazine/mm/sample_90-4.html
□背景画像の一括指定
スタイルシートでは、背景画像に関するすべての設定を一括で行う方法があり
ます。設定できる内容は、背景色、背景画像、背景画像の並び、背景画像の位
置、背景画像の固定などの指定をまとめます。
背景画像を一括指定するために、background属性を用います。この属性で利
用できる他の属性は以下のとおりです。
background-color 背景色を指定する
background-image 背景画像の URI を指定する
background-repeat 背景画像の並びを指定する
background-position 背景画像の位置を指定する
background-attachment 背景画像の固定を指定する
なお、これらの属性値の中で特に必要がないものは省略することができます。
また、属性値の順序は特に規定されていないため、自由に設定できます。各属
性値は半角スペースで区切って指定します。
background属性の具体的な書式は以下のとおりです。
body { background: #fff url("backimage.gif") left reperat-x }
この設定は、背景色を白色、背景画像は backimage.gif、背景画像を左に位
置指定して、縦方向のみ繰り返して表示させています。画像は固定しないため
background-attachment属性の値は指定していません。
background属性のサンプル
http://www.scollabo.com/banban/magazine/mm/sample_90-5.html
■まとめ
何よりも Webページの主体はコンテンツであり、背景画像ではありません。背
景となるものは基本的に添え物に過ぎません。
ゴチャゴチャした画像を背景に貼り込むと、コンテンツを邪魔する可能性が
あります。あくまでもシンプルな画像を用意するようにしてください。さりげ
ない、それでいてキラリと光るようなセンスの良い背景画像を貼ることができ
れば、立派な Webデザイナーとなるでしょう。
(私は到底無理なので、背景画像を使うことはありませんが・・・)
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
◆HTML、XHTML属性の解説 --- size属性
要素の大きさや幅、、あるいは表示桁数などを指定するために用います。
■size属性 大きさや幅などを指定する
DTD： すべての DTDで利用可能
属性値： 数値
記述法： <input type="text" size="20" value="入力欄">
関連要素： input、select、basefont、font、hr
(input、select要素を除いて非推奨扱い)
XHTMLの制限： input、select要素のみで利用可能
input要素では type属性で text が指定された場合に利用でき、入力フィー
ルドの文字数を指定します。ただし、入力する文字数が制限されるわけではあ
りません。
select要素では、利用可能なメニューの表示桁数を指定します。
font、及び fontbase要素では、利用する文字の大きさを指定します。 ただ
し、文書型定義を Transitional に指定する必要があります。
罫線を表示させる hr要素では、罫線の太さを指定しますが、これも非推奨
扱いとなっていますので、同様に文書型定義を Transitional に指定する必要
があります。
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
今回はここまで。
今週のおさらいは Webページにも掲載しましたので、是非参考までに見ておい
てください。
Webページでは HTML文の実行結果のサンプルもあり、より分かりやすく説明
しています。あわせて過去の記事のおさらいも掲載しています。
（今週のおさらい）
http://www.scollabo.com/banban/magazine/review_090.html
次回は、4月2日に配信を予定しています。(場合によっては休刊します。)
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
◆質問・ご意見ははこちらまで→ 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年3月30日
Copyright(C) 2002-2004 banban@scollabo.com