初心者のためのホームページ作り_91.txt100666 0 0 54677 10064311540 15710 　　　　　　　　　　　　　　　　毎週金曜日配信　What's New 2004年4月16日 □□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□ 　　┏┏┏┏　初心者のためのホームページ作り/Web for beginner 　　┏┏┏　　　　　http://www.scollabo.com/banban/ 　　┏┏ 　　┏　　　　　　　　　　　＜第91号＞ 　　　　　　 　 　　　banban@scollabo.com □□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□ 　　当講座は、初心者や中級者が正しい文法と作法を身につけて、プロ級の本格 　的な Webページ作成に役立つことを目的に配信されております。 　　当講座では HTML4.01、XHTML1.1、XML1.0 を中心とした文法が主体となって 　います。なお、このマガジンは等幅フォントでお読みいただくと快適に読める 　ようになります。 　　　今週のコンテンツ 　 ■ Webデザイン 第33回 --- オーサリングソフト 　　　　■ HTML講座 第33回 --- 略語・用語の扱い (アクセシブルなテキス) 　　　　■ CSS講座　第12回 --- 絶対位置指定の妙技 　　 　■ 属性の解説（第16回） --- □□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□ ◆Webデザイン（第33回）　オーサリングソフト 　いわゆる オーサリングソフト (Webページ作成ソフト、以下オーサソフト) と 　は、面倒なHTMLを記述しなくても立派なホームページが作れます。最近は高機 　能でアクセシブルなページを簡単に作成できるソフトが増えています。 　　当メールマガジンの質問の中に、こうしたオーサソフトの使い方に関するも 　のが多く寄せられています。残念ながら当方はオーサソフトを持っていないた 　め、返答に困ることがあります。 　■オーサリングソフトの振る舞い 　　オーサソフトの一部には独特のクセを持つものがあり、吐き出すHTMLに意味 　不明なものが多く、いい加減に作られているような気がします。そのため、オ 　ーサソフトを使いながらHTMLを学ぶ方には、時折混乱することが多々あること 　でしょう。特にバージョンの古いソフトでは、滅茶苦茶なHTMLコードを吐き出 　し、閲覧環境によっては見るに耐えない仕様となっています。 　　このコラムで何度もお伝えしているとおり Webページの生命線はコンテンツ 　です。HTMLとかスタイルシート、スクリプトなどは、コンテンツを表現するた 　めの手段でしか過ぎないのですから、オーサソフトを使うことにまったく異論 　はありません。 　　むしろ、テキストエディタを使って誤った解釈の文法でHTMLを作成するより 　も、オーサソフトを使ったほうがいい場合もあります。 　　知人から聞くところによると、オーサソフトのほとんどで文書型定義は過渡 　期仕様 (Transitional) を選択するようです。その構文を読めば「なるほど」 　とうなずけますが、それを手動で厳格仕様 (Strict) に変換するのは大変な作 　業が伴います。 　　また、出力先ブラウザの銘柄を指定した場合、他のブラウザで閲覧するとか 　なりおかしなレンダリングになります。これも「クセ」なのでしょう。つまり 　独自仕様や独自規格を盛り込まれていることが多々あります。 　　その意味では、ユニバーサルな Webページ作りをしようとするとき、ある程 　度の HTMLスキルを要求されることになります。 　■バージョンで異なる仕様 　ソフトウェアの宿命 (？) というべきなのでしょうか、いずれバージョンアッ 　プが待っています。従来の機能を継承しながら高性能になるのがソフトウェア 　の常道でしょう。 　　バージョンが上がることで、それまでの不具合や更なる機能の追加はありが 　たいことですが、ソフトの使い方をマスターするのは大変なことです。 　　今までの機能がなくなってしまうことや、代替の機能の使い方に苦労すると 　いうことは、どのソフトウェアでも同じことですが、それらをいちいち覚える 　ことには、いささか戸惑いを感じるものです。 　　本来ならば、HTMLの仕様が頻繁に変わることがないにもかかわらず、オーサ 　ソフト側での一方的な仕様変更には疑問を感じることもあります。しかしなが 　ら、ソフトウェアベンダーとは企業利益を優先するためには、仕方がないこと 　なのかもしれません。 　■アクセシビリティとオーサソフト (ATAG) 　World Wide Webに関する標準仕様を策定している非営利団体 W3Cでは、オーサ 　ソフトに対して一定のアクセシビリティを求めています。 　　オーサソフトによって仕上がった Webページが、どのような環境でも正しく 　情報が伝わるように ATAG (Authoring Tool Accessibility Guidelines) が策 　定されています。 　　ATAGでは、以下の活動を行っています。 　１． Webの核となる技術が、アクセシビリティに考慮したものとなるようにす 　　　 るための活動。 　２． Webページ作成やユーザエージェント、オーサリングツールに関するガイ 　　　 ドラインの策定。 　３． Webページの評価や Webページのアクセシビリティ向上のためのツールの 　　　 開発。 　４． Webのアクセシビリティに関する教育・啓蒙活動。 　５． 将来的にアクセシビリティに影響を与える可能性がある技術の研究及び 　　　 開発状況についての情報収集。 　　こうした ATAGの活動に賛同して、Webオーサを開発している主要なベンダー 　は以下のサイトでご覧になれます。 　　　現在、及び将来に渡って ATAGの実装を表明している主なベンダー 　　　　http://www.w3.org/WAI/References/#mainstreamdev 　　近年、アクセシビリティという考え方は主流になりつつあります。オーサソ 　フト側でも、こうした動向が顕著で、歓迎すべき事象でしょう。 　　オーサソフトを使う場合、ソフトウェアに付属する取扱説明書やヘルプを参 　照してその使い方をしっかりとマスターしてください。たいていのことはそれ 　らに詳しく記載されています。また、オーサソフトのベンダーの Webページで 　は、さまざまな情報や質問について掲載されていますので、一度じっくりとお 　読みすることをお勧めします。 　　　　　　　　　　　　　　　　　 (第34回　トップページの役割につづく) □□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□ ◆HTML講座 （第33回）　略語・専門用語の扱い (アクセシブルなテキスト) 　今回はページの中で示される略語や専門用語の扱いについて解説します。 　　数ある専門分野における Webページの中で、ともすれば初めて訪れる閲覧者 　には分かりにくい略語や専門用語が羅列してある場合、何となく敷居が高く見 　方によっては排他的になりかねません。 　　インターネット利用者は不特定多数で様々な思想や考え方を持っており、ま 　たスキルの違いがあります。専門分野のページであっても誰でも親しめるペー 　ジ作りができるなら、作者と閲覧者の距離を縮めることができるでしょう。 　■略語 　通常略語は、単語の頭文字をとって表現します。例えば、LAN といえば Local 　Area Network (ローカル・エリア・ネットワーク) を指します。ページの中で 　こうした略語を用いずにフルスペルで記述するのも大変なことですし、むしろ 　略語自体が通用する言葉もあることでしょう。 　　略語は英文字だけに限ったことではありません。例えば「安保理」という言 　葉を、新聞やニュースなどでお目にかかったことがあると思いますが、この略 　語の正式名称を知る人が意外に少ないのには驚かされます。 　　実に様々な略語が氾濫する中で、そうした情報に初めて接する閲覧者へ理解 　してもらうには少しばかり工夫が必要です。 　■略語のアクセシビリティ 　略語や専門用語を並べると、何となく高尚で学術的なイメージが高いように見 　受けられます。しかし、そう見えるだけであって、決して高尚でも学術的でも 　ないと、私は考えます。 　　むしろ、難解な用語を使いながらも、誰でも理解できるようやさしく述べて 　いる方がもっと洗練されており、高度でより高尚かつ学術的と思います。 　　HTML4.01では、こうした略語に注釈を表示させる機能を持った要素が用意さ 　れています。 　　□ abbr要素 　　　略語がそのまま発音できない場合に用います。視覚系ブラウザでは、ツー 　　　ルチップ (要素上にマウスを置くと現れるポップ画面) が表示されます。 　　　　残念ながら普及率の高い MSIE (Microsoft Internet Explorer) ではそ 　　　の機能を持っていません。 　　　書式 　　　W3C 　　　abbr要素には title属性でそのフルスペルを記述します。 　　□ acronym要素 　　　略語がそのまま発音できる「頭字語」として定義されているものを囲みま 　　　す。おそらく日本語の略語もこの範疇に入るのではないかと思います。 　　　ほとんどの視覚系ブラウザでツールチップが表示されます。 　　　書式 　　　LAN 　　　あるいは 　　　安保理 　　　abbr要素と同様に、acronym要素も略語のフルスペルを title属性で明示 　　　します。 　■専門用語のアクセシビリティ 　難解な専門用語を、どのようにして誰にでも理解できるように工夫したらよい 　のか、作者のセンスが試される課題です。 　　例え abbr、acronym要素でフルスペルを表現したところで、その意味が理解 　できなければ、情報コンテンツの意味がつかめません。 　　スクリプトを使ってポップアップを表示する方法もありますが、アクセシビ 　リティを考えた場合、スクリプトに対応していない環境ではそれを利用するこ 　とができません。 　　JavaScriptによるポップアップ 　　http://www.scollabo.com/banban/magazine/ms/sample_91-1.html 　　そこで専門用語の説明にアクセスする方法を幾つか考えました。 　　 　□ アンカーに説明を埋め込む 　最も簡単な方法で、書式は以下のとおりです。 　　W3C 　　このように title属性に説明を示すことで、ツールチップが表示され、同時 　に関連するサイトに誘導しています。 　□ 用語解説に導く 　ページの欄外に専門用語をまとめて設定し、アンカーを埋め込む方法が一般的 　に利用されています。 　　以下はその簡単な例です。 　 　

次世代マークアップ言語 　

W3C の勧告と 　なった 　XHTML は、素朴な文書構造記述言語として発展してきた HTMLに 　XML の持つ柔軟性 　拡張性を取り入れたものです。

　　　〜　中略　〜 　
　
W3C
　
Webで利用される技術の標準化をすすめる非営利団体。Web技術に関わりの 　深い企業、大学・研究所、個人などが集まって、　〜　以下省略
　
XHTML
　
W3Cより拡張可能なマークアップ言語として制定された Webページ作成のため 　の次世代言語です。　〜　以下省略
　
　　サンプルの実行結果 (スタイルシートを使っています) 　　http://www.scollabo.com/banban/magazine/ms/sample_91-2.html 　　　これは該当する要素にアンカーを埋め込み、その場所に 　　導く手法です。この場所に導く方法は href属性にハッシュマーク # を付記 　　してリンクさせます。 　　また、リンクを示すアンカーに title属性でそれぞれのフルスペルを設定し 　　リンクに触れると、その内容を表示させるようにしています。 　□ 用語解説のページに導く 　もう１つの方法は、用語を集めたページに誘導するリンクを専門用語に設定し 　ます。用語の意味を知りたい閲覧者が、その用語をクリックすることで、用語 　の詳細場所に誘導するものです。 　　あらかじめ「用語集」などのページを作成し、各用語のヘッダにアンカーを 　埋め込み、該当する項目にリンクさせます。アンカーの埋め込みは、上記の構 　文と同様 項目名 とします。 　　例えば、glossary という名の用語集の中で示される 「W3C」という用語解説 　にリンクするためには、以下のように記述して誘導します。 　　　HTTP 　　ファイル名の後のアンカーで埋め込まれた項目の位置で表示させることがで 　きます。 　　例えば、以下のリンクは用語解説のページのある特定の場所に誘導します。 　　HTTP用語解説 　　http://www.scollabo.com/banban/tips/diction.html#http 　■まとめ 　繰り返しますが、インターネット利用者は千差万別です。閲覧者は何らかの興 　味と動機があって各サイトを閲覧します。難解な略語や専門用語に対して、わ 　ずかなスキルの違いで理解できないとしたら、作者も閲覧者も不幸というもの 　です。 　　せっかく訪れた閲覧者に敷居を高くする必要はありません。誰にでも親しめ 　るよう分かりやすく解説しておくことで、よりアクセスが高まります。重要で 　有用なコンテンツであるのなら、なおさら略語や用語に対しての扱いに、十分 　配慮できるように心がけましょう。 □□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□ ◆CSS講座（第12回）　絶対位置指定の妙技 　見出しを定義する h1要素や、リストを定義する ul要素などのブロックレベル 　要素は基本的に改行されますので、横に並べることができません。 　　多くの Web開発者はこうしたジレンマのため、レイアウトを構築するために 　テーブルを使っているのが現状です。しかし、テーブルは様々な制約と閲覧環 　境に影響するため、レイアウトに用いるのはアクセシビリティの観点から好ま 　しくないといわれています。 　　テーブルの悪影響から回避するために、絶対位置を利用する手法を用いるこ 　とが最近のブログ (Weblog) などで多々見られます。今回は、レイアウトにも 　利用できる「絶対位置の妙技」について解説します。 　■絶対位置とは 　通常コンテンツは、HTMLの記述順に上から下へと順次表示されます。当然、最 　後に記述した要素内容は下に表示されます。こうしたレンダリングを「相対的 　な位置」と呼ばれます。 　一方、、絶対位置は要素の出現順位に関係なく、常にあらかじめ指定した位置 　で要素内容を表示させるものです。位置は「上」からと「左右」のいずれかを 　指定します。 　　絶対位置の指定はスタイルシートだけでしか実現することができません。 　■絶対位置指定の属性 　スタイルシートによって絶対位置を指定する場合には、以下の属性と属性値を 　使います。 　　属性　　　　　　　属性値　　　　　　意味 　　-------------------------------------------------------------------- 　　position　　　　　absolute　　　　絶対位置として指定する 　　top　　　　　　　 数値＋単位　　　上からの位置を指定する 　　left　　　　　　　数値＋単位　　　左からの位置を指定する 　　right　　　　　　 数値＋単位　　　右からの位置を指定する 　　単位はスタイルシートで利用できる単位 (本誌第84号にて解説) を用います。 　具体的な書式は以下のとおりです。 　　div { 　　　　　position: absolute; 　　　　　top: 100px; 　　　　　left: 50px } 　　このスタイルシートは、汎用ブロックレベル div要素を絶対位置として定義 　し、画面の上から 100ピクセル、左から 50ピクセルの位置で表示させます。 　　絶対位置といえども、スクロール時には他の要素と一緒にスクロールします。 　　これを応用して、要素の幅をあらかじめ定義し、ブロックレベル要素を横に 　並べるように指定します。以下はその書式です。 　　　div#first { 　　　　position: absolute; 　　　　top: 100px; 　　　　left: 10%; 　　　　width: 40% } 　　　div#second { 　　　　position: absolute; 　　　　top: 100px; 　　　　left: 52%; 　　　　width: 　　40% } 　　このスタイルシートは、２つの汎用ブロックレベル要素を絶対位置指定して 　います。それぞれに識別子を設定し、HTMLでは id属性を利用します。 　　２つとも画面の上から 100ピクセルの位置に指定しその横幅を画面の相対値 　であるパーセントで設定し、40％の幅にしています。 　　最初の識別子 fierst では、左側から20％の位置でレンダリングし、２番目 　の second は左から52％ととして、１番目の要素に重複しないように配慮して 　います。結果として２つのブロックレベル要素が横に並んで表現されます。 　　このスタイルシートを利用する HTML構文は以下のとおりです。 　　 　　

■ 絶対位置の妙技

ブロックレベル要素その１
　　ブロックレベル要素その２ 　　
　　 　　サンプルの実行結果 (分かりやすくするために背景色を設定しました) 　　http://www.scollabo.com/banban/magazine/ms/sample_91-3.html 　　このようにブロックレベルを横に並べることで、レイアウトの構築に利用す 　ることが可能で、テーブルよりもレンダリングが早くできることができます。 　　汎用的に使える div要素というブッロクレベルでは、ほとんどの要素を配置 　することが可能なので、この中に見出しやリスト、段落、あるいはテーブルな 　ども配置できますので、レイアウトを表現するのに都合がいいでしょう。 　■重複する絶対位置指定 　絶対位置として指定した場合、それぞれの要素は１つのレイヤーとして扱うこ 　とができます。 　　レイヤーとは、例えば透明な紙に文字や画像などを描き、その上に別の透明 　な紙を重ねて文字や画像などを描きます。見た目には１枚の紙の上にそれぞれ 　が描かれているように見えます。これが「レイヤー」の主体で、こうした手法 　を「レイヤーを重ねる」と呼びます。 　　絶対位置の要素に番号を設定し、どの要素が一番上に見せるのかを指定しま 　す。そうした順位を示す場合に z-index属性を用います。 　　z-index属性の値は 0 を基準とした数値を指定します。数値の値が大きいほ 　ど レイヤーの優先順位が高くなり、小さいほど一番下でレンダリングされます。 　　また、数値は負数も指定することができます。 　　具体的な書式は以下のとおりです。 　　div#image_1 { 　　　　position: absolute; 　　　　top: 7em; 　　　　left: 4em; 　　　　z-index: 0 }　　　一枚目の画像を表示する絶対位置 　　div#image_2 { 　　　position: absolute; 　　　　top: 14em; 　　　　left: 6em; 　　　　z-index: 1 }　　　二枚目の画像を表示する絶対位置 　　p#text_1 { 　　　position: absolute; 　　　　top: 9em; 　　　　left: 5em; 　　　　font-size: 1.2em; 　　　　z-index: 2 }　　　一枚目の画像にテキストを重ねる絶対位置 　　p#text_2 { 　　　　position: absolute; 　　　　top: 15em; 　　　　left: 7em; 　　　　font-size: 1.2em; 　　　　z-index: 3 }　　　二枚目の画像にテキストを重ねる絶対位置 　　このスタイルシートは、画像を２枚重ねて、それぞれにテキストを重ねてい 　ます。これを利用する HTML構文は以下のとおりです。 　

冬のナイアガラ

夏のナイアガラ

冬のナイアガラ
夏のナイアガラ

絶対位置を重ねる

画像に画像とテキストを重ねるために、絶対位置をレイヤーとして用いて います。

サンプルの実行結果 (画像内の文字に色をつけています) 　　http://www.scollabo.com/banban/magazine/ms/sample_91-4.html 　レイヤーを利用することで、意外な効果を持つレイアウトに利用することがで 　きるでしょう。いろいろと配置を変えてお試しください。 　■絶対位置指定の落とし穴 　スタイルシートで絶対位置を指定した場合、絶対位置を指定していない要素と 　重なる危険があります。 　　通常、各要素は出現順に相対的にレンダリングしますが、絶対位置はそうし 　た順序とは関係なく位置指定できるため、相対位置でレンダリングした他の要 　素内容と重複して出力します。そのため、要素の重なりでコンテンツが見にく 　くなる可能性があります。 　　絶対位置を指定した場合、他の要素との位置関係を十分に配慮した設計が必 　要となりますので、その点に留意してください。 　　次回は、要素の表現形式について解説します。 □□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□ ◆HTML、XHTML属性の解説 --- style属性 　要素にこの属性を使って、直接スタイルシートを指定します。 　■style属性　スタイルシートを設定する 　DTD：　　 XHTML1.1以外で利用可能 　属性値：　スタイルシート 　記述法：　

　関連要素： ヘッダで利用する要素を除いたすべての要素で利用可能 　XHTMLの制限： XHTML1.1では廃止されており利用することができません。 　　スタイルシートは通常、HTML文書のヘッダで記述するか、あるいは外部参照 　として置きます。しかしながら、コンテンツの内容によっては、その部分に臨 　時的なスタイルを指定しなければならない場合、この属性を利用します。 　　その属性を利用したスタイルシートは、他のスタイルシートよりも最も優先 　されます。仮にヘッダで指定したスタイルであっても style属性が優先され、 　他のスタイルを無視します。 　　ただし style属性で指定しないスタイルは、先に定義したスタイルが適用さ 　れます。例えば以下の場合、 　　ヘッダでのスタイルシート指定 　　　p { color: #000; font-size: 2em } 　　styele属性での指定 　　　

　　 　　 　 　■ basefont 　基準となるフォントの種類や大きさ、あるいは色などを指定するため、通常は 　ヘッダ部で配置します。このタグによって宣言された場合、そのページのすべ 　ての文字列は、これを基本として表示されます。 　　各要素ごとに細かなフォントを指定する場合には、basefontタグは適してい 　ませんので、スタイルシートを使うことにより、表示の多様性を拡張すること 　が可能です。代替としてはスタイルシートを利用しましょう。 　■ center 　このタグに囲まれたすべてのコンテンツは中央寄せとなります。物理的、およ 　び強制的に中央寄せで表示されます。 　　HTML3.2 が標準仕様であったときには、非常にポピュラーで多くの作成者が 　こぞって利用したものです。今ではいささか古典的な感もありますが、現在で 　も利用されています。 　　残念ながら centerタグは HTMLの文書において、構造的な意味を持っていま 　せん。同じ非推奨としての文書ならば

としたほうが、段 　落を中央寄せにするという意味がありマシでしょう。 　　代替の手段としては、やはりスタイルシートを利用するほうが賢明です。 　■ dir 　これも古典的なディレクトリリストを定義するリストタグです。通常は、ディ 　レクトリのリストとして用いますが、ごく普通のリストとして使用することが 　できます。 　　しかしながら現在では、ul (番号なしリスト) 、ol (番号付きリスト) など 　がブロックレベル要素として定義されていますので、今後はこれらのリストを 　代替として使うようにしましょう。 　■ font 　テキストで用いられるフォントの色やサイズ、フォント種などを指定するため 　に利用されるタグで、現在でも非常に人気があります。 　　しかし、厳密に文書からプレゼンテーション (見栄えやレイアウト) を分離 　するという意味からは、あまり使いたくないタグでもあります。 　　テキストの文字を大きくしたり、色をつけたりするということは、何らかの 　意図があるわけです。つまり「ある意味」があるからこそ設定するのではない 　でしょうか。何の意味もなく大きさを変えたり色をつけるのは、閲覧する側か 　ら見るとウザッたくなるものです。 　　意味があるのだとすれば、そのようにマークアップ (意味づけ) すべきで、 　そうしたフレーズには、ちゃんと意味づけするタグが存在しています。 　　また、fontタグを使った構文は非常に読みづらく、後々の編集や更新作業に 　は手間ります。 　　例えば、 　　

　　　赤く大きい文字 同じ大きさの青い文字
　　ここでは普通の大きさの黒い文字

　　これをスタイルシートを使った場合には以下のとおりになります。 　　　#red { cokor: #f00 } 　#blue { color: #00f } 　　

　　　　赤く大きい文字 　　　　同じ大きさの青い文字" 　　

　　

ここでは普通の大きさの黒い文字

　　後者は、見出しと段落に別れて構造的な構文となっています。しかし、前者 　は単に段落の中で文字の大きさを変えているに過ぎません。視覚的なブラウザ 　では同じように見えても、非視覚系ブラウザブラウザでは、全然違うものとし 　てレンダリングされます。コンテンツとしての意味づけが希薄となってしまい 　ますので、fontタグだけを使った構文には注意が必要でしょう。 　■ isindex 　isindex は、１行の入力フィールドを形成します。入力フィールドは inputタ 　グで代替とし、特に form要素内でなくても単独で利用できます。 　　サイト内の検索として定義されたタグですが CGIプログラムを使うというこ 　とであれば、form要素とともに input で十分対応できます。 　■ menu 　これもリストの一種で、メニューとしてのリストを定義します。リストとして 　の非推奨タグに dirがありますが、やはり ul、ol を代替として使うようにし 　ます。 　■ s、strike 　文字に抹消線をつける物理タグです。ある文字に抹消線をつけるという行為は 　何らかの意味があるわけです。通常は、記述された文字を後になって抹消線を 　つけます。本来ならば削除してしまえばいいのですが、「履歴」という形で残 　す場合には、その意味が閲覧者に分かるようにしたいものです。 　　単に抹消線をつけるよりも del要素を使って、抹消日や削除理由を示した文 　書にアクセスできるなどをマークアップできるようにします。 　　例文： 　　 　　ばんばん氏は病気で入院しました。 　　 　■ u 　文字に下線 (アンダーライン) をつけて表示する物理タグです。これも作者が 　何らかの意図を持っています。 　　リンクなどはそれと分かるように下線を表示しています。不用意な下線があ 　ると閲覧者は戸惑ってしまうことになりますので、下線を設定する場合には、 　十分に配慮する必要があります。 　下線をつけた文字は、ある種の「注意」や特別な「意味」があるものとして設 　定する場合があります。その意味では闇雲に下線を表示すべきではありません。 　どうしても下線を表示しなければならない場面では、その意味付けをはっきり 　とさせましょう。 　　文字を強調させたい場合には、strong要素で囲めば目的は達成されます。下 　線を表示するよりも効果的です。 　　文字が跡で追加された場合には ins要素を使います。これは del要素同様に 　追加された日付や理由を示す所在などを属性で示します。この ins要素は下線 　をつけて表示されます。 ◆まとめ 　何度も説明してきたとおり、HTMLは文書を論理的な構造によって示すものです。 　物理的なレイアウトを構造から排除し、それぞれの要素内容は、適切なタグに 　よってマークアップすべきです。 　　それによる弊害はまったくありません。むしろ、どのような環境でも多くの 　閲覧者から歓迎されることでしょう。 　　レイアウトや表示方法は、スタイルシート (CSS) によって行いましょう。 □□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□ ◆CSS講座 --- 外部スタイルシート 　スタイルシートを独立した１つの文書にして、HTML文書に読み込ませる方法を 　リンクング・スタイルシートと呼びます。 　　外部スタイルシートの利点として以下の点が挙げられます。 　　・複数の文書に利用することができる。 　　・メンテナンスや更新時の作業が効率よく行える。 　　・スタイルシート文書から他の外部スタイルシートを呼び出せる。 　HTMLでは、ヘッダ内に style要素を使ってスタイルシートを配置することがで 　きますが、次世代マークアップ言語である XHTMLでは、外部にスタイルシート 　を用意しなければなりません。特に XHTML1.1 では style要素が廃止されてい 　ます。今のうちから外部スタイルシートを準備することで、将来に備えるよう 　にしましょう。 　■外部スタイルシートの作成 　外部スタイルシートといっても、特に難しいわけではありません。単にスタイ 　ルシートの内容をタイプするだけです。 　　スタイルシート文書を保存する際の識別子 (Windows では拡張子と呼ぶ) さ 　え気をつければ、簡単に外部スタイルシートを作成することができます。 　　スタイルシート文書の識別子は「.css」となります。 　■外部スタイルシートの読み込み 　スタイルシート文書を作成したら、HTML文書に読み込ませます。ヘッダ部に以 　下のように記述します。 　　 　この構文は、sample と名付けた CSS (スタイルシート) 文書を読み込ませるも 　のです。なお、href属性で示される URI は、パス名があればそれも記述します。 　　 　この場合は、css というディレクトリ内にある sample.css を読み込ませてい 　ます。スタイルシート文書が、他のディレクトリ (フォルダ) にある場合には 　そのパス名が必要となります。 　■外部スタイルシートの注意点 　スタイルシート文書を作るテキストエディタと、HTML文書を作るエディタが同 　じであれば問題はありません。 　　もし、それぞれが異なるソフトウェアで作成する場合、文字コードに注意し 　てください。仮に、HTML文書を「Shift_Jis」で作ったとき、CSS文書をそれと 　は違う「EUC-JP」で作成した場合には、読み込み時にスタイル部分が文字化け 　を起こす可能性があります。 　　異なるソフトウェアの場合でも、文字コードが同じであれば文字化けは起こ 　しません。異なる文字コードを利用した場合には、carset属性を使って適切な 　文字コードをを指定します。 　　　 CSS文書が EUC の場合 　■他のスタイルシート文書の読み込み 　スタイルシート文書から他のスタイルシート文書を読み込みます。これによっ 　て１つの文書から複数のスタイルを HTML文書に取り込みます。 　他のスタイルシート文書を取り込むためには、文書の冒頭で明示しなければな 　りません。その際に、@import でスタイルシート文書を指定します。 　　具体的な構文は以下のとおりです。 　　　@import url("スタイルシート文書の URI") メディアタイプ; 　　つまり、 　　　@import url("aural.css") aural; 　　これは、外部スタイルシート aural.css を取り込むもので、そのメディア 　タイプは音声用 (aural) であることを示しています。 　□ CSSで扱うメディアタイプ 　スタイルシートでは、様々なメディアタイプに適用できます。通常は screen 　で、コンピュータのモニタ画面ですが、それ以外に印刷用、音声用、点字用な 　ど多岐にわたっています。 　　　screen　　　コンピュータのモニター画面 　　　aural　　　 音声出力用 　　　embossed　　点字用プリンタ 　　　braile　　　点字用出力メディア (点字用モニター) 　　　handheld　　携帯用通信端末機 (PDAなど) 　　　tty　　　 　テレタイプ (固定ピッチフォントを扱う機械) 　　　tv　　　　　テレビ 　　　print　　　 プリンタ 　　　projection　プロジェクター 　　　all　　　　　すべての出力メディア (デフォルト) 　　なお、メディアタイプを指定しなかった場合には「all」が適用されます。 　■外部スタイルシートを利用した HTMLの作成 　それでは、上記の解説を踏まえて、スタイルシート文書を２つ作り、スタイル 　シート文書からスタイルシートを読み込ませましょう。 　　まず先にスタイルシート文書を作ります。 　□ sample-1.css 　 @import url("sample_100-2.css"); 　 body { margin-left: 6%; margin-right: 6%; background-color: #ffc; color: #000 } 　 h1 { margin-bottom: 0; background: #069; color: #fff; font-size: 1.2em; padding: 2px; text-indent: 0.5em } 　　ここまでタイプできたら「sample-1.css」として適当なディレクトリ (フォ 　ルダ) 保存してください。 　　もう１つスタイルシート文書を作ります。 　□ sample-2.css ul { list-style-type: square; margin-left: 2em } p { letter-spacing: 1px; line-height: 130% } 　　ここまでタイプできたら「sample-2.css」として、先ほどの CSS文書と同じ 　ディレクトリに保存します。次は HTML文書を作成します。 　□ sample.html 外部スタイルシート/初心者のためのホームページ作り

外部スタイルシート

外部スタイルシートの利点は、複数のページに共通して利用できる点にあり、 メンテナンスや更新作業が容易になる。

スタイルシート文書は、他のスタイルシート文書も取り込め、複数のメディア に対して有効に作用できる特徴もある。外部スタイルシートの主な特徴は、

　サンプルの実行結果 　http://www.scollabo.com/banban/magazine/ms/sample_100-1.html ◆解説 (スタイルシートのみ解説) 　□ @import url("sample_100-2.css"); 　外部にあるスタイルシート文書を取り込みます。@import は、必ず冒頭で宣言 　しなければなりません。 　□ body { margin-left: 6%; margin-right: 6%; background-color: #ffc; color: #000 } 　コンテンツを配置するための要素の左右の余白をブラウザ画面の６％としてい 　ます。背景色はクリーム色、文字色は黒色としています。背景色を設定した場 　合には、必ず文字色も同時に指定するようにしましょう。 　□ h1 { margin-bottom: 0; background: #069; color: #fff; 　 font-size: 1.2em; padding: 2px; text-indent: 0.5em } 　第一見出し要素にスタイル付けしています。文字のサイズを標準の２割増し、 　背景色をくすんだ青色、文字色を白色、上側の余白を無くし、内側の余白は上 　下左右とも２ピクセル分とし、文字を１文字分インデント (字下げ) しました。 　□ ul { list-style-type: square; margin-left: 2em } 　番号なしリストのマーカー (行頭の印) を四角にし、全体の左側の余白を２文 　字分にしました。 　□ p { letter-spacing: 1px; line-height: 130% } 　段落要素内の文字間を１ピクセル、行間を１文字の30％として、読みやすい設 　定にしました。 　　スタイルシートの各設定はお好みに直して指定するのも面白いでしょう。い 　ろいろと変えながら楽しんでください。 □□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□ ◆HTML、XHTML属性の解説 --- datetime属性 　要素内容の変更や削除などがあった場合に、その日付を設定します。 　■datetime属性　要素の日付を設定する 　DTD：　　　 　すべての文書型定義に適用 　属性値：　　　日付 　記述法：　　　 　関連要素：　　del、ins 　XHTMLの制限： なし 　日付は世界協定時間を標準としているため、日本時間では９時間分足してやる 　必要があります。必ずしも必要な属性ではありませんが、変更などが生じた場 　合に利用できます。 　　日付の記法は以下のとおりです。なお、時間は24時間制です。 　　　西暦-月-日T時間:分:秒 （日本時間の場合には +09:00 とする) □□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□ 今回はここまで。 　今週のおさらいは Webページにも掲載しましたので、是非参考までに見ておい 　てください。 　　Webページでは HTML文の実行結果のサンプルもあり、より分かりやすく説明 　しています。あわせて過去の記事のおさらいも掲載しています 　（今週のおさらい） 　　http://www.scollabo.com/banban/magazine/review_100.html 　次回は、9月17日に配信を予定しています。 □□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□ ◆質問・ご意見ははこちらまで→　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://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/ □□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□ 初心者のためのホームページ作り_99.txt100666 0 0 40057 10116306036 15705 　　　　　　　　　　　　　　　　隔週金曜日配信　What's New 2004年8月20日 □□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□ 　　┏┏┏┏　初心者のためのホームページ作り/Web for beginner 　　┏┏┏　　　　　http://www.scollabo.com/banban/ 　　┏┏ 　　┏　　　　　　　　　　　＜第99号＞ 　　　　　　 　 　　　banban@scollabo.com □□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□ 　　当講座は、初心者や中級者が正しい文法と作法を身につけて、プロ級の本格 　的な Webページ作成に役立つことを目的に配信されております。 　　当講座では HTML4.01、XHTML1.1、XML1.0 を中心とした文法が主体となって 　います。なお、このマガジンは等幅フォントでお読みいただくと快適に読める 　ようになります。 　　　今週のコンテンツ 　　　　■ 正しい文法のために 第３回 --- 属性 　　　　■ Tips --- 文書型定義 (DTD) 　　　　■ CSS講座　第18回 --- アンカー (擬似要素) □□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□ ◆正しい文法のために --- 属性 (Attributes) 　属性とは要素の性質や付加的な機能を提供することにあります。 　　例えば、「小泉純一郎」の属性は、内閣総理大臣であり、神奈川選出の衆議 　院議員でもあります。「小泉純一郎」だけでは何の変哲もありませんが、日本 　の首相であるという「属性」は大きな意味があります。 　リンクを示す a要素は、hrefという属性などが追記されて初めてその意味を持 　ちます。HTMLの各種の要素タイプには、こうした属性があらかじめ定義され、 　ある要素を囲むときに、その要素の性質や意味付けをします。 　要素タイプに「非推奨扱い」という型がありますが、属性にも同様に非推奨扱 　いがあります。ただし、利用する「文書型定義」の宣言によっては非推奨扱い 　の要素とともに非推奨属性が利用できます。 　　当講座では、あくまで厳格仕様 (Strict) に基づいて説明していますので、 　非推奨属性を使わない文法に終始しています。 　■属性の型による非推奨と推奨属性 　例えば、位置を示す align属性は非推奨とされていますが、テーブルのセルを 　定義する要素には非推奨属性として扱われることがありません。 　　例文： 　　 　　このように、利用する要素型によっては厳格仕様でも使える属性があります。 　利用できない属性は、そのほとんどでスタイルシートを代替として設定するこ 　とが可能です。 　　厳格仕様で利用できない属性の一覧はこちら 　　http://www.scollabo.com/banban/dep/dep_02.html 　■属性の値 　属性値 (ぞくせいち) は、タグと同様に大文字と小文字を区別しません。ただ 　し、他のファイルを指定する (URI) 場合や、ID などを指定する場合には、厳 　密に大文字と小文字を区別しますので注意してください。 　　ローカル (あなたのパソコン) では、大文字と小文字を区別しなくても大丈 　夫な場合がありますが、サーバにアップデートした場合には、必ずしも正常に 　機能するとは限りません。 　　属性値で利用できる文字は全角や半角文字を除いてほとんどの場合で利用可 　能ですが、文字参照符号については変換が必要です。 　　属性値に & などを用いる場合には、& としなくてはなりません。 　属性値は基本的に引用符で囲むようにします。ただし例外的に値が数値やアル 　ファベットの場合には省略することができます。 　　例文　width="100" →　width=100 　　　　　id="name" →　id=name 　　必ず引用符を使う場合があります。ハイフンやアンダーバー、スラッシュな 　どの記号を値に用いた場合には、引用符で囲まなければなりません。 　　例文　×　href=images/sample.gif 　　この場合には引用符は省略不可 　　　　　○　href="images/sample.gif"　　必ず引用符を使うこと 　なお、XML、XHTML では引用符の省略は認められておりません。今のうちから 　属性値がどのような型であっても囲むようにクセをつけましょう。 　■値がない属性 　HTMLでは値のない属性がいくつか存在します。こうした属性を「最小モデルの 　ない属性」と呼び、単に属性を記述するだけで機能します。 　　□ 属性地のない属性の一覧 (順不同) 　　属性名　　　　　機能　　　　　　　　　　　　　　　　関連要素 　--------------------------------------------------------------------- 　　declare 　 オブジェクトの実行を禁止する　　　　　　　object 　　defer　　　スクリプトに文書の表示を生成する要素を script 　　　　　　　 含まないことを宣言する 　　ismap　　　サーバサイドイメージマップを利用する　　　img 　　multiple　 メニュー項目を複数選択可能にする　　　　　select 　　nohref 　　リンク先がないことを示す　　　　　　　　　area 　　noresize　 フレームサイズの変更禁止 (非推奨)　　　　 frame 　　noshade　　平面的な罫線 (非推奨)　　　　　　　　　　 hr 　　nowrap　　 改行の禁止 (非推奨)　　　　　　　　　　　 td、th 　　disabled　 入力フィールドの選択を禁止する　　　　　　input 　　readonly 入力フィールドの選択を禁止する　　　　　　input 　　checked　　入力ボックスが選択されていることを示す　　input 　　selected　 メニュー項目が選択されている　　　　　　　option 　　compact　　リスト項目のコンパクト化 (非推奨)　　　　 dt、ul、ol 　なお XHTMLでは、最小モデルのない属性については、以下のように記述しなけ 　ればなりません。 　　 　つまり、属性がそのまま値となります。 　■汎用属性 　各要素には共通した属性があり、これを「汎用属性」と呼びます。ほとんどの 　要素型で利用することができます。ただし、一部の属性では「ヘッダ部」に使 　う要素には利用できません。 　□ 汎用属性一覧 　以下は、汎用属性と呼ばれる一覧です。 　属性名　　　　　機能 　-------------------------------------------------------------------- 　dir 文字の表記方向を指定 (初期値は ltr、右からの表記は rtl) 　lang 言語コードを指定 (日本語は ja、英語は en、仏語は fr、など) 　style インライン・スタイルシートの設定 　title 要素内容の補足説明をテキストで示す 　class　　クラス属性 (参照先の分類名を指定する) 　id 　　ID属性 (参照先の識別子を指定する) □□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□ ◆Tips --- 文書型定義 (付記) 　文書型定義については何度かこのマガジンで取り上げてきたとおりですので、 　あえてその役割については申し上げませんが、基本的には、HTMLのどのような 　形式であっても、その冒頭で文書型を定義する宣言が必要です。 　 (なお、文書型定義の役割については、第53号を参照してください。) 　　文書型定義の様式についての各ブラウザ銘柄による微妙な違いもあり、必ず 　しもブラウザが文書型定義に準拠するかどうか疑わしいところです。 　■文書型定義の標準型と互換型 　以下は、HTML4.01Strict (厳格仕様) の文書型定義です。 　　標準型 　　 　(改行なしで記述) 　　互換型 　　 　この２つの大きな違いは、文書型を参照する URI が有無です。 　　本来ならばブラウザは、文書型定義で示される URI先を参照すべきですが、 　ブラウザ自身が W3C に準拠して作られているため、URI 先を見に行くことが 　ない場合が多いものです。 　■ Webブラウザの振る舞い 　制作者にとって問題なのが、文書型定義によるブラウザの振る舞いです。厳格 　な Strict では問題がなくても標準型と互換型では、閲覧者の環境によって表 　示される内容が異なる場合があります。 　　特に、Windows環境で制作した場合と、Macintoshの場合では顕著に現れます。 　当サイトでは、ほとんど厳格仕様の互換型で作っていますが、若干文字サイズ 　の相違があるほかは大きな問題にはなっていません。ただし、テーブルにおけ 　る文字サイズには少々注意が必要です。 　■標準型か互換型か 　結論から申し上げれば標準型になるでしょう。閲覧環境に左右されないという 　理由によります。決してブラウザは W3Cの HTML仕様を参照するわけではあり 　ませんが、不用意な表示の違いに対処するうえでは解決策になるでしょう。 　　特に過渡期仕様 (Transitional) の場合には顕著に現れます。 　　文書型定義の明示的な宣言は必須ですが、宣言を省略した場合に厳密には、 　HTML2.0 で扱われることになりますが、実情は HTML4.01Transitional として 　扱われています。だからといって省略することを推奨しているわけではありま 　せん、念のため。 　　記述されている HTML の全体の仕様を考慮して文書型定義を選択し、文書の 　冒頭で宣言してください。 □□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□ ◆CSS講座 --- アンカー (擬似要素) 　今回は擬似要素に対する説明ではなく、シーンに応じたアンカーリンクの表示 　方法について解説します。擬似要素に関するの詳しい説明は、「第75号、およ 　び、第76号」をお読みください。 　■同一ページの異なるリンクの表示方法 　視覚系ブラウザのほとんどでデフォルト (初期設定) は、アンカーリンクに下 　線が表示されます。これは、他のテキストとリンクのテキストとを差別化し、 　閲覧者にそこがリンクであることを示すためです。 　　その意味で、アンカーリンクはデフォルトのままが推奨されています。 　しかし、ある部分のアンカーリンクには下線の表示をしたくない場合が出てき 　ます。そこがリンクであることを閲覧者に理解してもらえるということを前提 　に、リンクの異なる表示方法を設定します。 　■クラス、ID別の擬似要素の設定 　通常、アンカーリンクの擬似要素に対しては以下のように設定します。 　　a:link { color: #03f; text-decoration: underline } 　　a:visited { color: #90c; text-decoration: underline } 　前者は身訪問のリンクの文字色 (青色) と下線を表示します。後者は訪問済み 　の文字色 (紫色) と下線を示しています。これによってすべてのアンカーリン 　クにはこの設定で表示されます。 　　では、以下のスタイルシートではいかがでしょうか。 　　#visit a:link { color: #03f; text-decoration: none } 　　#visit a:visited { color: #90c; text-decoration: none } 　このスタイルシートは、ある要素に id を設定し、その要素内にあるアンカー 　リンクのみ適用させるもので、他のアンカーには適用しません。ここでは単に 　下線を非表示にしているだけです。 　　何度か説明してきたとおり、IDとなるスタイルシートは、同一ページで１回 　しか使うことができません。IDとは、基本的に識別子をあらわすものであり、 　識別するものが複数あってはならないためです。 　一方、クラス設定は何度でも使うことができます。同じ設定を同一ページで複 　数使う場合、クラスを指定します。 　　以下はクラス属性を使ったスタイルシートです。 　　.visit a:link { color: #03f; text-decoration: none } 　　.visit a:visited { color: #90c; text-decoration: none } 　IDではハッシュマーク # を使いますが、クラスはピリオド . を使います。 　　以下は ID と、クラス属性を使った HTML文書です。今まで講座で解説した 　スタイルシートもあわせて使っています。 アンカーリンクの CSS

Home

アンカーリンクのスタイルシート

上記のパンくずリストとするアンカーには下線がありません。 しかしここでは、Home　という具合に下線が 表示されます。

　サンプルの実行結果 　http://www.scollabo.com/banban/magazine/ms/sample_99-1.html ◆解説 (スタイルシートに関する記述のみ解説します。) □ 　スタイルシートを利用するため、ユーザエージェント (HTTPを解釈するソフト 　ウェア) に対して、その MIMEタイプを明示します。CSSスタイルシート利用の 　必須条件となります。 □ 　style要素は 非HTMLデータであるスタイルシートをこの範囲に記述して設定し 　ます。基本的にヘッダ部で配置しなくてはなりません。 　　なお、実際のスタイルシートを記述するために、コメント の 　中で配置します。これは、スタイルシートに対応していないユーザエージェン 　トへの配慮となります。コメントがない場合には、最悪スタイルシートの記述 　がそのまま出力されてしまう危険があります。 □ body { margin-left: 6%; margin-right: 6% } 　body要素 (コンテンツを配置するための要素) の左右の余白をブラウザ画面比 　率の６パーセントとしています。 □ h1 { font-size: 1.2em; background: #069; padding: 2px; color: #fff; margin-top: 0 } 　見出し要素の文字サイズ、色、背景色などを設定しています。文字サイズは通 　常の２割大、色は白色、背景色はややくすんだ青色で、内側の余白を上下左右 　とも２ピクセル、乱し全体の上側の余白をなくしています。 □ #visit a:link { color: #03f; text-decoration: none } 　visit という識別子 (ID) の未訪問のリンクに対して文字色を青、下線なしと 　しています。他の未訪問リンクには適用されません。 □ #visit a:visited { color: #90c; text-decoration: none } 　visit という識別子の訪問済みのリンクに対して文字色を紫色、下線なしとし 　ています。他の訪問済みリンクには適用されません。 □ #visit { font-size: small; text-align: right; margin-bottom: 0 } 　visit という識別子を持つ要素の文字サイズを小さく、配置を右寄せにし、下 　側の余白をなくしています。なお、text-align属性はブロックレベル要素のみ 　適用されますので注意してください。 　■Tips 　リンクを示すアンカーでは、ポインティング・デバイス (マウスなど) が触れ 　ると表示を変える a:hover や、クリックされたときの a:active というスタ 　イルシートがあります。 　例： 　　a:hover { background: #ff0; color: #000; text-decoration: none } 　　　リンクに触れたとき、文字色を黒、その背景色を黄色、下線なしとします。 　 a:active { color: #f00; text-decoration: none } 　　　リンクをクリックしたときに、その文字色を赤、下線なしとします。 　 a:link、a:visited などの疑似要素と組み合わせて面白い効果を演出するこ 　とができます。お試しください。 □□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□ 今回はここまで。 　今週のおさらいは Webページにも掲載しましたので、是非参考までに見ておい 　てください。 　　Webページでは HTML文の実行結果のサンプルもあり、より分かりやすく説明 　しています。あわせて過去の記事のおさらいも掲載しています 　（今週のおさらい） 　　http://www.scollabo.com/banban/magazine/review_099.html 　次回は記念すべき第100号です。9月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://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/ □□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□ 初心者のためのホームページ作り_臨時号.txt100666 0 0 11204 10116306006 17363 　　　　　　　　　　　　　　　　 隔週金曜日配信　What's New 2004年8月6日 □□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□ 　　┏┏┏┏　初心者のためのホームページ作り/Web for beginner 　　┏┏┏　　　　　http://www.scollabo.com/banban/ 　　┏┏ 　　┏　　　　　　　　　　　＜臨時号＞ 　　　　　　 　 　　　banban@scollabo.com □□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□ ◆Windows XP Service Pack 2 への対応 　暑中お見舞い申し上げます。 　　今回の配信は、近日中に予定されている WindowsXP Service Pack 2 に関す 　る極めて重要な情報を含みます。Windows ユーザに限らず、サイトの点検が必 　要になるでしょう。 　■Windows XP SP-2 の問題点 　Windows XP Service Pack 2 は、数々のセキュリティに関する品質が向上して 　います。従来は初期設定でファイヤーウォールが「オフ」になっていましたが 　SP-2 では「オン」になります。初心者の方にはファイヤーウォールの設定に 　手間取っていましたが、その必要がなくなり、安全性が向上します。 　　Windows XPユーザは、「Windows Update」からインストールできます。 　大きな問題点は、MSIE (Microsoft Internet Explorer) の初期設定が変更さ 　れます。特にセキュリティに関してその振る舞いが向上します。 　　特に、ActiveX (MSIE特有の Web機能のソフトウェアの総称) は、初期設定 　で「オフ」となります。 　スパイウェアやウィルスなどの悪質なプログラムから遮断するための処置で、 　多くの Windowsユーザの安全性に寄与します。 　　しかしながら、通常の「JavaScript」や「VBScript」あるいは動画再生のた 　めのコンポーネントに多大な影響を受けます。 　各種のスクリプトや、ActiveXコンポーネントを動作させるページでは、「こ 　のページには未知の ActiveXが含まれ、あなたのコンピュータに重要な影響を 　与えます。この ActiveXを再生しますか？」という表示が必ず出されます。 　　スクリプトや ActiveXに依存したページは常にこうしたメッセージが出され 　ます。閲覧者によっては ActiveX を中断する可能性が高まるでしょう。 　■影響を受けるページ 　以下は、SP-2 による重要な影響を受けるページです。 　・Microsoft ActiveX コントロールを使用している Webページ 　・ユーザーによるファイルのダウンロードを許可している Webページ 　・ポップアップ ウィンドウを使用している Webページ 　・Microsoft Java 仮想マシン (MSJVM) に依存している Webページ 　・ブラウザ ウィンドウの制限 (スクリプトによるもの) 　・一般的なヒント 　特に、サイトのトップページでこれらの仕様があるページは、決定的なダメー 　ジを負う可能性があります。 　　なお、Windows95/98/98SE/Me/NT/2000 では従来どうりです。Windwos XP の 　ユーザ総数が増えている現状では、かなり大きな問題になりそうですが、今か 　らサイトの各ページの設計を見直す必要に迫られるでしょう。 　　なお、当サイトの各種スクリプト入門に関しては特に問題になる内容は含ん 　でおりませんので、閲覧の際には、「信頼済みサイト」に登録するか、あるい 　はメッセージが出た場合には ActiveX を許可してください。 　いずれ JavaScript講座でも取り上げ、JavaScriptの対処法を予定しています。 　　なお、次回配信は 8月20日を予定しています。 □□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□ ◆質問・ご意見ははこちらまで→　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://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/ □□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□ 初心者のためのホームページ作り_98.txt100666 0 0 43021 10116305742 15701 　　　　　　　　　　　　　　　　 週金曜日配信　What's New 2004年7月23日 □□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□ 　　┏┏┏┏　初心者のためのホームページ作り/Web for beginner 　　┏┏┏　　　　　http://www.scollabo.com/banban/ 　　┏┏ 　　┏　　　　　　　　　　　＜第98号＞ 　　　　　　 　 　　　banban@scollabo.com □□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□ 　　当講座は、初心者や中級者が正しい文法と作法を身につけて、プロ級の本格 　的な Webページ作成に役立つことを目的に配信されております。 　　当講座では HTML4.01、XHTML1.1、XML1.0 を中心とした文法が主体となって 　います。なお、このマガジンは等幅フォントでお読みいただくと快適に読める 　ようになります。 　　　今週のコンテンツ 　　　　■ JavaScript講座 (第19回) --- Dateオブジェクト、 　　　　■ JavaScript講座 (第20回) --- 制御構文 　　　　■インターネット用語解説 --- フィッシング □□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□ ◆JavaScript講座　--- Dateオブジェクト 　日付や時間を扱うことができるオブジェクトとしてあらかじめ定義されている 　のが Dateオブジェクトです。 　Dateオブジェクトを使って日付や時間を扱う場合、そのパラメータは以下のと 　おりとなっています。 　□パラメータなし 　newステートメント　Dateオブジェクトを扱うために必要な制御文です。この 　ステートメントは、新たにオブジェクトを生成するための制御命令となります 　ので、必ず覚えておきましょう。 　　　構文　　today = new Date(); 　□日付のパラメータ 　月、日、年、時、分、秒を表します。 　　(Month day,year hours:minutes:second) 　　例：today = new Date("July 30,2004 06:30:00"); 　□年、月、日を表す１組の整数パラメータ 　日付オブジェクトの引数に年月日を表わす場合 　　　例：today = new Date (04,7,30); 　□月のパラメータ 　JavaScriptでは、0 を１月とし、11 を 12月としますので、月を扱う場合には 　値に 1 を足すようにしなければなりません。 　　　例： tday = getDate() + 1 ; 　Dateオブジェクトで用意されているメソッドは以下のとおりです。なお、プロ 　パティは用意されておりません。 　■Dateオブジェクトのメソッド 　getDate　　　　　　 現在の日にちを参照する 　getDay　　　　　　　曜日を参照する（0〜6、日曜〜土曜） 　getFullYear　　　　 ４桁の西暦年を参照する 　getHours　　　　　　現在の時間を参照する 　getMilliseconds　　 ミリ秒（1000=1秒）を参照する 　getMinutes　　　　　分を参照する 　getMonth　　　　　　月を参照する（0〜11、1月〜12月） 　getSeconds　　　　　秒を参照する 　getTime 　　　　　　1970年1月1日午前0時からの経過時間（秒数）を参照する 　getTimezoneOffset 　世界協定時間との時差を参照する 　getUTCDate　　　　　世界協定時間の日にちを参照する 　getUTCDay 　　　　　世界協定時間の曜日を参照する (0〜6、日曜〜土曜) 　getUTCFullYear 　　 世界協定時間の４桁の西暦年を参照する 　getUTCHours 　　　　世界協定時間の現在の時間を参照する 　getUTCMilliseconds　世界協定時間のミリ秒（1000=1秒）を参照する 　getUTCMinutes　　　 世界協定時間の分を参照する 　getUTCMonth　　　　 世界協定時間の月を参照する（0〜11、1月〜12月） 　getUTCSeconds　　　 世界協定時間の秒を参照する 　getYear　　　　　　 年（西暦の下２桁）を参照する 　parse　　　　　　　 1970年1月1日午前0時から指定した日付までの経過秒数 　setDate　　　　　　 日にちを設定する 　setFullYear　　　　 ４桁の西暦年を設定する 　setHours　　　　　　現在の時間を設定する 　setMilliseconds　　 ミリ秒（1000=1秒）を設定する 　setMinutes　　　　　分を設定する 　setMonth　　　　　　月を設定する（0〜11、1月〜12月） 　setSeconds 　　　　 秒を設定する 　setTime　　　　　　 1970年1月1日午前0時からの経過時間（秒数）を設定する 　setUTCDate　　　　　世界協定時間の日にちを設定する 　setUTCFullYear　　　世界協定時間の４桁の西暦年を設定する 　setUTCHours　　　　 世界協定時間の現在の時間を設定する 　setUTCMilliseconds　世界協定時間のミリ秒（1000=1秒）を設定する 　setUTCMinutes　　　 世界協定時間の分を設定する 　setUTCMonth　　　　 世界協定時間の月を設定する（0〜11、1月〜12月） 　setUTCSeconds　　　 世界協定時間の秒を設定する 　setYear　　　　　　 年（西暦の下２桁）を設定する 　toGMTString　　　　 グリニッジ（GMT）標準時間を文字列として参照する 　toLocaleString　　　ローカル（地域別）時間を文字列として参照する 　toUTCString　　　　 世界協定（UTC）時間を文字列として参照する 　UTC 　　　　　1970年1月1日午前0時から指定した日付までの経過秒数を参照 　これに基づいてスクリプトを作成します。 　　例えば今日の日付を求めるには getDateメソッドを使い、現在の時間を求め 　る場合は getHours、getMinutesメソッドを利用します。 　　 　　こうすることで、簡単に現在に日付を表示することが可能です。 　なお、日付と時刻を表示する簡単な方法として toLocalStringメソッドがあり 　ます。このメソッドを使うと現在のローカル (日本時間) の年月日及び時刻を 　表示します。 　　 　　上記２つのサンプルの実行結果 　　http://www.scollabo.com/banban/magazine/ms/sample_98-1.html 　■日付の計算 　時間を計算することができれば、ある特定の時間までの残り時間を求めること 　や、ストップウォッチなどを作成することが可能です。 　　例えば来年のお正月までの時間と現在の時間の差数を求めれば、あと何日で 　お正月になるかといったスクリプトを作成することができます。 　具体的な式は、 　　お正月までの日数 = お正月の日付 - 現在の日付　となり、つまり 　　残り日数 = 2005年1月1日 - 現在の日付　となるわけです。 　　現在の日付は先ほど説明したスクリプトを使って参照し、目標となる日付は 　setYear、setMonth、setDateメソッドで設定します。 　　 　　サンプルの実行結果 　　http://www.scollabo.com/banban/magazine/ms/sample_98-2.html ◆解説 　□ y = 2005; m = 1; d = 1; 　　来年のお正月 (1月1日) を各変数に取り込んでいます。 　□ shogatsu = new Date(y,m,d); 　　変数 shogatsu を日付オブジェクトとして定義し、その日付を 2005年のお 　　正月に指定しています。 　□ today = new Date(); 　　現在の日付を得るために、あらかじめ変数today を日付オブジェクトに定義 　　します。日付を扱う場合には、日付オブジェクトが必須です。 　□ a = (shogatsu.getTime() - today.getTime()); 　　時間の計算を行っています。この式で得られる値はミリ秒となります。 　□ remain = Math.floor(a / (24 * 60 * 60 * 1000)); 　　得られたミリ秒を日数に変換しています。ここでの Math.floor は、得られ 　　た値の小数点以下を切り捨てるため、計算オブジェクト Math のメソッドを 　　使います。 　□ document.write("お正月まであと ", remain, "日です"); 　　計算して得られた結果を表示させます。 　このように、Dateオブジェクトは時間を任意にコントロールすることができま 　す。アイデアしだいでは、効果のあるスクリプトが作成できるでしょう。 □□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□ ◆JavaScript講座 --- 制御構文 　読者の皆様から特に質問の多かった内容として、JavaScriptで定義されている 　制御構文についてもう一度おさらいしておきます。 　JavaScriptはあらかじめ定義されている数々のオブジェクトを利用してスクリ 　プトを構成していることは何度かお伝えしたとおりです。 　　今回説明する制御文は、そうしたオブジェクトをよりコントロールできるこ 　とからオブジェクト以上に重要な役割を持っています。 　■ループ制御 　同じスクリプトを何度も繰り返して実行させることをループ (輪のように繰り 　返すの意) 制御と呼びます。 　　ループはいつまでも同じことを繰り返しますが、繰り返すばかりではプログ 　ラムが進みません。そこで、ある条件を設定して、条件が満たされればループ 　を抜けるようにしなくてはなりません。 　　ループを制御するのが for構文と while構文です。 　for構文は条件に基づいて同じ処理を繰り返し行い while構文は条件が満たさ 　れるまで繰り返します。 　□ for構文 　for構文は引数に論理式を指定します。 　　　for(論理式) { 処理内容 }; 　論理式には初期値、条件式、増減式をセミコロンで区切って指定します。 　　具体的な書式は以下のとおりです。 　　　for(初期値; 条件式; 増減式) { 処理内容 } 　論理式の初期値はループの最初に実行されそれ以降は無視されます。あくまで 　最初だけしか評価されません。条件式はループ中にある一定の条件が満たされ 　たときにループから脱出するための式を設定します。増減式は条件を満たすた 　めの一定の増減地を決める式を設定します。 　この書式を元に簡単なスクリプトを書くと、 　　a = 0; 　　for(a = 1; a < 101; a++) { 　　　document.write("JavaScript講座 第", a, "回目"); 　　 } 　　このスクリプトでは、最初に変数 aの値を 0 にしています。 　初期値の a=1; では、変数 a に 1 を代入します。この式はループの最初だけ 　実行されるものです。 　　条件式の a < 11; は、a が 101 に達したときにループから抜け出ます。 　増減式の a++ は ループを一度まわるたびに a に 1 を加えます。 　a++ は a = a + 1 と同じ式になります。 　□ while構文 　while構文とは、for構文に似ていますが、条件が満たされるまで同じ処理を繰 　り返します。しかし、最初から条件が満たされている場合には何もしません。 　そこで、最低限１度は処理させたい場合には、do構文を利用します。 　　　while(条件) 処理内容 --- 条件が満たすまで処理を繰り返す 　　　以下はその具体的な例文です。 　　　　while (a < = 10) { 　　　a++; 　　　document.write("JavaScript講座 第", a, "回目"); 　　 } 　　　　ここでは a の値が 10 になるまで同じ処理を繰り返します。 　　　もし、あらかじめ a の値が 10 以上であれば何もしません。 　　　do {処理内容} while(条件) --- 最低１度は処理を行う 　　　do構文を用いた場合、ブロック内の処理は必ず１度実行されます。それ以 　　　降は条件に基づいて実行します。 　　　　var a = 10; 　　　　do { 　　　　　document.write(a); } 　　　　　　while (a < = 10) { 　　　　n++; 　　　　document.write(a); 　　 　} 　　　　ここでは、do構文によりその処理内容を実行しますが while構文では、 　　　a の値が条件に一致しているため何も処理を行いません。 　■条件分岐 　制御構文には、ある一定の条件を判断して処理内容を決めます。JavaScriptで 　は、条件によって複数の処理に振り分ける switch構文と if構文という条件を 　判断して処理を振り分ける条件分岐があります。 　□ switch構文 　あらかじめ複数の条件を設定し、ある値によって処理する先を振り分けます。 　ただし、for、while、あるいは if構文と異なり、処理が終わったら構文から 　抜け出せるようにしなくてはなりません。 　　swicth(条件) { 　　　case 値１: 処理内容 　　　break; 構文を抜ける 　　　　case 値２: 処理内容 　　　　break;　構文を抜ける 　　　　　default: 　　　　　どれにも属さない場合の処理 　　　} 　　具体的な例文は以下のとおりです。 　　today = new Date(); 　　switch(today.getDay()){ 　　　case 0: 　　　document.write("本日は休み、日曜日です"); 　　　break; 　　　case 6: 　　　document.write("本日は休みかな？ 土曜日です"); 　　　break; 　　　default: 　　　document.write("本日は平日です、さて何曜日？"); 　　　} 　□ if構文 　if構文は、ある条件が満たされたときに処理を実行したり中止したりします。 　幾つかの入れ子を構文に盛り込むことが可能で、かなり細かい条件を設定する 　ことができます。 　　if構文とは、「もし…ならば…を処理する」という条件分岐の代表的な構文 　で、スクリプト作成には欠かせない制御構文となります。 　　また、if〜else を使うことで、「もし…ならば…を処理し、そうでない場合 　は△を処理する」といった処理の分岐を作成できます。 　　具体的な構文は以下のとおりです。 　　　if(条件式) 処理内容 　　　　　else 処理内容 　　この構文で、Dateオブジェクトを使って時間によってメッセージの内容を変 　えて表示させることができるでしょう。 　　today = new Date(); 　　nowDate = today.getHours(); 　　　if((nowDate > 4) && (nowDate <= 11)) 　　　document.write("おはようございます"); 　　　else if((nowDate > 11) && (nowDate <= 18)) 　　　document.write("こんにちは"); 　　　else if((nowDate > 18) && (nowDate <= 23)) 　　　document.write("こんばんは"); 　　　else 　　　document.write("もう寝ましょう""); 　■ 定義のための制御文 　制御文には構文のほかにある特定のオブジェクトを定義することができます。 　例えば、日付を扱う場合には newステートメントで定義しますが、これも制御 　文であり、命令文となります。 　　関数を宣言する場合には、functionステートメントで定義し、関数から抜け 　出た際の戻り値には returnステートメントがあります。 　　こうしたステートメントも制御文であることを覚えてください。今回登場し 　た breakも制御文の一種です。 　　JavaScriptを学ぶ中で、オブジェクトを学習することは大切ですが、同時に 　こうした制御文もあわせて覚えるようにしましょう。 □□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□ ◆インターネット用語 --- フィッシング 　昨今のウィルスやスパム (迷惑) メールは、ネットワークを利用して業務に当 　たる企業や人々にとって、その経済的損失は莫大な金額に達しています。 　　当たり前のことですが、企業や個人にとってネットワークを利用する前提と 　して、それなりのセキュリティに関する防御策を取ることは必須条件となって 　います。 　　しかし、そうしたセキュリティ・ソリューションをかいくぐる新たな脅威が 　報告されています。それが最近話題になっている「フィッシング」です。 　　フィッシングとは、まさに Fishing：魚釣りの意味で、ユーザを釣り上げる 　ことからそう呼ばれる手口のことで、危険なサイトに誘導するのが狙いです。 　そのほとんどが電子メールによる手法を使っています。 　　例えば、Windowsユーザならばマイクロソフト社からのメールに抵抗がない 　でしょう。そのメールに記載されている有益な情報の URL があれば、ためら 　いなくクリックするかもしれません。それがフィッシングの罠です。 　　つまり、マイクロソフト社を偽装したメールによって釣り上げるのです。 　　指定されたサイトでも、一見するとマイクロソフトの情報が掲載されていま 　す。訪問したユーザにとって疑うことがありません。しかしその陰で危険なス 　クリプト (トロイの木馬) を実行し、コンピュータ内の情報を盗み出し、クレ 　ジットカード番号や各種の ID やパスワードがごっそり持っていかれます。 　　こうした手口にワクチンソフトやファイヤーウォールなどはまったく役に立 　たないのです。つまり、身元詐称の新たな脅威をフィッシングと呼びます。 　　現在ではアメリカのサイトで猛威を撒き散らしているフィッシングですが、 　今月15日に、フィッシングを犯罪とする連邦法が成立しました。アメリカでは 　深刻な被害が相次いだのです。 　　まだ日本では被害が報告されていませんが、いずれ日本のサイトも偽装され 　るかもしれません。 　　なお、マイクロソフト社では今月の３日に、フィッシング問題に対処するた 　めのパッチを提供しています。 　　Windowsユーザは Windows Update を実行しておきましょう。 □□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□ 今回はここまで。 　今週のおさらいは Webページにも掲載しましたので、是非参考までに見ておい 　てください。 　　Webページでは HTML文の実行結果のサンプルもあり、より分かりやすく説明 　しています。あわせて過去の記事のおさらいも掲載しています 　（今週のおさらい） 　　http://www.scollabo.com/banban/magazine/review_098.html 　　次週より長期の休暇に入りますので、しばらく配信がありません。ご了承く 　ださい。次回は、8月20日に配信を予定しています。 □□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□ ◆質問・ご意見ははこちらまで→　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://backno.mag2.com/reader/Back?id=0000090196 　■配信の変更・中止はこちらです。 　個別の手続きは受け付けていませんので、ご面倒でも各自でお願いできれば助 　かります。 　　当サイトにて　http://www.scollabo.com/banban/magazine/top.html 　　まぐまぐにて　http://www.mag2.com/m/0000090196.htm □□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□ ＜えでぃた〜ず・る〜む＞ 　気が遠くなるような猛暑、相次ぐ台風の襲来、大雨と洪水、毎年のことながら 　おかしな夏が到来しました。今年の冬から「観測史上最高」という活字をどれ 　だけ新聞でお目にかかったことでしょうか。 　　こうした異常気象は、世界各地で姿を変えながら猛威を振るっている。さな 　がら「The Day After Tomorrow」ですなぁ・・・ 　　福井、新潟の被災地の皆様には、心よりお見舞い申し上げます。 □□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□ ◆著作権について 　個人がご自分のＰＣに保存して利用する以外の記事の転載、引用は基本的に応 　じておりません。記事中の内容について、無断で使用することを固く禁じます。 　　なお、記事中のスタイルシート、スクリプト、HTMLをご自分のページ作成に 　自由に使っていただいても差し支えありません。 　 Copyright(C) 2002-2004 www.scollabo.com/banban/ □□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□ 初心者のためのホームページ作り_97.txt100666 0 0 34344 10116305710 15703 　　　　　　　　　　　　　　　　 週金曜日配信　What's New 2004年7月9日 □□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□ 　　┏┏┏┏　初心者のためのホームページ作り/Web for beginner 　　┏┏┏　　　　　http://www.scollabo.com/banban/ 　　┏┏ 　　┏　　　　　　　　　　　＜第97号＞ 　　　　　　 　 　　　banban@scollabo.com □□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□ 　　当講座は、初心者や中級者が正しい文法と作法を身につけて、プロ級の本格 　的な Webページ作成に役立つことを目的に配信されております。 　　当講座では HTML4.01、XHTML1.1、XML1.0 を中心とした文法が主体となって 　います。なお、このマガジンは等幅フォントでお読みいただくと快適に読める 　ようになります。 　　　今週のコンテンツ 　　　　■ 正しい文法のために 第２回 --- 終了タグと子要素の扱い 　　　　■ CSS講座　第17回 --- 定義済みリスト 　　 　■ 属性の解説（第18回） --- border属性 □□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□ ◆正しい文法のために --- 終了タグと子要素の扱い 　今回は終了タグの扱いと、非常に重要な親要素と雇用その関係について解説し 　ます。ちょっとしたケアレスミスにつながることの可能性を秘めた重要な課題 　になります。 　■終了タグの扱い 　通常、HTMLのタグはあるコンテンツ要素を囲みますが、その際、開始タグと終 　了タグが対になった (コンテナタグと呼ばれる) ものが一般的です。 　　HTMLの標準仕様 (Tips参照) では、一部のタグで終了タグを省略することが 　可能になっています。 　　標準仕様では終了タグの省略を「Option：オプション」としており、すべて 　の Webブラウザはこれをサポートすることを明記しています。 　　つまり終了タグの省略は、ブラウザ側でそれを補完しているわけです。 　　終了タグの省略が許されているのは以下のとおりです。これ以外では終了タ 　グの省略は許されておりません。 　　　html　　　　HTML文書の最上位要素 (開始タグの省略も可) 　　　head　　　　ヘッダ情報を囲むタグ (開始タグの省略も可) 　　　body　　　　コンテンツを囲むタグ (開始タグの省略も可) 　　　p　　　　　 段落要素 　　　colgroup　　テーブルセルの縦方向の列を構造的にグループ化する要素 td　　　　　テーブルのデータセル要素 th　　　　　テーブルのヘッダセル要素 tr　　　　　テーブルの━列の行を定義する要素 tbody　　　 テーブルの本体を定義する要素 thead　　　 テーブルのヘッダを定義する要素 tfoot　　　 テーブルのフッタを定義する要素 li　　　　　リスト項目要素 　　　dt　　　　　定義リストの定義用語要素 dd　　　　　定義リストの定義した用語の詳細を囲む要素 　　　option　　　メニューリストの項目要素 　　では、終了タグの省略は本当に正しいのでしょうか？ 　実際に XML、あるいは XHTML的に解釈するならば、終了タグの省略は許されて 　いません。マークアップの本来の考え方を踏襲するならば、できるだけ終了タ 　グの省略は避けておきたいところです。 　　現在のところ、HTMLはこれ以上アップグレードする予定がありません。むし 　ろ、XHTMLや、XMLへ移行しようとしています。そうした現実を考慮し将来に向 　けた学習をしていくためにも、終了タグを記述するクセをつけておくことは、 　大変意味のあることです。 　　例えば段落をあらわす p要素の終了タグを省略した場合、厳密に考えると、 　その段落の終わりがないことになります。たとえブラウザ側で終了タグを補完 　するとはいえ、文法的に見たら「おかしい」ことに気づくでしょう。 　　ブラウザ側で補完することになっていますが、すべてのソフトウェアがそう 　であるとは限りません。 　　なお、終了タグを待たない (要素モデルがない) タグがありますが、これら 　を空タグ (Empty Element) と呼びます。空タグには以下のものが定義されてい 　ます。（非推奨要素を除く) 　　　area　　領域指定 (イメージマップなど) 　　　br　　　強制改行 　　　col　　 データセルのグループ化 　　　hr　　　罫線の表示 　　　img　　 静止画像の表現 　　　input　 入力フィールド 　　　link　　外部文書との関係を示す 　　　meta　　メタ情報を定義する 　　　param　 パラメータの指定 　■親要素と子要素の関係 　ある要素の中に別の要素が配置されていたとき、必然的に親子要素の関係が成 　り立ちます。 　　例えば、 　　 　　

Webの標準仕様を制定する W3C は、 　　マサチューセッツ工科大学、慶応大学、そして欧州情報処理数学研究コンソ 　　ーシアムがホストとなって組織されています。

　　 　　ここでの最上位要素は、body要素となります。body要素の直接の子要素とな 　るのが p要素です。そして p要素の直接の子要素が a要素です。 　　逆に見れば a要素の親要素が p要素となり、p要素の親要素は、body要素と 　なります。また、body要素の孫要素は a要素となります。 　　　body　最上位要素。p要素は子要素、a要素は孫要素となる。 　　　p 　　親要素は body、子要素は a要素となる。 　　　a 　　親要素は p要素、body要素は祖父要素となる。 　　これらから判断すると、各要素が親子の階層関係にあることが理解できます。 　■決められた親子関係 　要素の親子関係では、タグによっては子要素が限定されるものがあります。 　　以下は、子要素が限定される親要素の一覧です。 　　親要素　　　　最低限配置されるべき子要素 　　-------------------------------------------------------- 　　table　 　　tr 　　tr　　　　　td、th 　　ul　　　　　li 　　ol　　　　　li 　　dl　　　　　dd、dt 　　body　　　　ブロックレベル要素 　　form　　　　ブロックレベル要素 　　blockquote　ブロックレベル要素 　　noscript　　ブロックレベル要素 　　これらの要素関係は、親要素に子要素として必ず配置されなければならない 　制約があることを覚えてください。 　　同時に、決められている子要素 (td、th、li、dd、dt) などは単独で利用す 　ることができません。必ず親要素と組にならなければなりません。 　　body要素の子要素としてブロックレベル要素が配置されなければなりません 　が、言い換えればインラインレベル要素は単独で利用することができないとい 　うことになります。つまり、インラインレベル要素は、何らかのブロックレベ 　ル要素の中で配置されなければならないということです。 　　例えば、 　　　 　　　　W3C 　　　 　　とした場合、厳密には文法違反となります。bosy要素直下にはインラインレ 　ベル要素である aタグは配置できないのです。正確には、 　　 　　　

W3C

　　 　　というように、ブロックレベル要素内で配置します。 　　　※ 次回は文書型定義について解説します。 □□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□ ◆Tips　HTMLの標準仕様 　HTMLの標準仕様を定めているのは、世界中のソフトやハードウェアのベンダー 　や団体、技術者、個人で組織されている W3C (World Wide Web Consortium) 　という非営利組織によって討議され、様々の実験を経て決定されています。 　　私が特に W3C信奉者というわけではありませんが、通常 Webブラウザや通信 　ソフトの仕様は、すべて W3C仕様に則って作られています。 　　もし、こうした標準仕様がなかったとしたら、今日の Webの隆盛はありえな 　かったことと思います。すべてのブラウザの振る舞いは標準仕様に準拠してい 　ると断言できるでしょう。そう考えると W3Cの標準仕様を学ぶということは、 　制作者にとっては、大変意味のあることではないでしょうか。 □□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□ ◆CSS講座 --- 定義済みリスト 　私が最も好んで使っているリストの一種である「定義済みリスト」のスタイル 　付けについて解説します。 　■定義済みリストとは 　定義する用語とその説明という形で成り立つリストですが、かた苦しく「定義 　する用語」というよりも、ある項目に対する「見出し」とその「説明」という 　スタイルで利用することが多いものです。 　　定義リストは、dl要素でリストであることを定義し、定義用語 (私流に言え 　ば見出し) には dt要素、その説明に dd要素を使います。 　　書式 　　　
　　　　
定義する用語 (見出し)
　　　　
用語の説明文
　　　
　　一般的なブラウザでは、dd要素内容が幾分かインデント (字下げ) して表現 　されます。どれくらいインデントされるかはブラウザ銘柄によって異なります 　が、スタイルシートを利用することでインデントを任意にコントロールするこ 　とができます。 (なお、番号付きリストのようなマーカーは表示されません。) 　　インデントといっても実際には単なる余白であり、margin属性を使えば、簡 　単にインデント (のように見える余白) をコントロールします。 　　dt要素で囲む定義用語 (見出し) も同時にスタイル付けすることで、見出し 　部分とその解説 (段落のように見える) 部分とを明確に区別することで、視覚 　上の効果を高めることができるでしょう。 　　当サイトで使用している定義リストのスタイルシートを使って文書を作成し 　てみましょう。 定義リスト/CSS講座り

用語集

HTML
HTMLは、Hyper Text Markup Language の頭文字を取った略語で、その ルーツは SGMLにあります。基本的に決められた手順である文書の要素内容 に応じて、論理的な構造化するようにマークアップします。
マークアップされた文書は、Webを通じて世界中に配信することが可能に なることで、誰でも簡単に情報交換することができるようになりました。
W3C
W3Cとは、World Wide Web Consortium の略語で、Webに関する標準仕様を 定める民間の非営利組織である。世界中のベンダーや技術者、研究所や個人な どが集まり、現在はマサチューセッツ工科大学、欧州情報処理数学研究コンソ ーシアム、慶応大学の三者がホストを勤めている。
　サンプルの実行結果 　http://www.scollabo.com/banban/magazine/ms/sample_97-1.html ◆スタイルシートの解説 　■body { margin-left: 6%; margin-right: 6%; color: #000; background: #fff } 　コンテンツを配置するためのbody要素をスタイル付けしています。 　　左右の余白はブラウザ画面比率の６％とし、文字色を黒色、背景色を白色に 　しています。 　■h1 { margin: 0; padding: 2px; background: #069; color: #fff; font-size: 1.2em; text-indent: 1em } 　見出し要素の背景色をくすんだ青色に、文字色は白色にしました。また上下の 　余白をなくし、要素内の余白 (背景色が適用される) には上下左右とも２ピク 　セル分とし、文字サイズを標準よりも２割大きくしました。また１文字分のイ 　ンデントも設定しています。 　■dl { margin: 0 } 　「定義リスト」を定義するための要素で、上下左右の余白をなくしています。 　■dt { margin-top: 1em; padding: 0.1em; background: #ffc; color: #000; border-top: 2px solid #069; border-bottom: 2px solid #069; font-weight: bold; text-indent: 1em } 　　定義用語 (見出しとなる部分) を囲む dl要素を細かく設定しています。 　上側の余白を１文字分、要素の内側の余白は１文字の10分の１に設定、背景色 　はクリーム色、文字色は黒色、上下に２おい九セルの太さを持った青い罫線、 　文字は強調し、１文字分インデントしています。 ◆まとめ 　　ここに掲げたスタイルシートを自分流にアレンジしてください。色や大きさ 　などを変えるだけでもずいぶん印象が違ってくるでしょう。 □□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□ ◆HTML、XHTML属性の解説 --- border属性 　ある要素の四方に罫線を表示させるための属性です。 　■border属性　要素の四方に罫線を表示する 　DTD：　　　 　すべての文書型定義で利用可 　属性値：　　　長さ (ピクセル単位) 　記述法：　　　
右寄せ
　関連要素：　　img (非推奨)、object (非推奨)、table 　XHTMLの制限：特にありませんが、XHTML1.1では table要素のみ使用可能 　border属性は、img や object要素で用いる場合、文書型定義に過渡期仕様の 　みに限ります。厳格仕様 (Strict) では使えません。 　　imgや object要素に用いる場合は、画像をリンクブタンなどで利用したとき 　に有効になります。 □□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□ 今回はここまで。 　申し訳ありませんが「今週のおさらい」は未完です。４〜５日中にはアップで 　きると思います。しばらくお待ちください。 　　今週のおさらい目次　http://www.scollabo.com/banban/magazine/ 　次回は、7月23日に配信を予定しています。 □□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□ ◆質問・ご意見ははこちらまで→　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://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/ □□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□ 初心者のためのホームページ作り_96.txt100666 0 0 36176 10067475466 15734 　　　　　　　　　　　　　　　　毎週金曜日配信　What's New 2004年6月25日 □□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□ 　　┏┏┏┏　初心者のためのホームページ作り/Web for beginner 　　┏┏┏　　　　　http://www.scollabo.com/banban/ 　　┏┏ 　　┏　　　　　　　　　　　＜第96号＞ 　　　　　　 　 　　　banban@scollabo.com □□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□ 　　当講座は、初心者や中級者が正しい文法と作法を身につけて、プロ級の本格 　的な Webページ作成に役立つことを目的に配信されております。 　　当講座では HTML4.01、XHTML1.1、XML1.0 を中心とした文法が主体となって 　います。なお、このマガジンは等幅フォントでお読みいただくと快適に読める 　ようになります。 　　　今週のコンテンツ 　　　　■ 正しい文法のために 第１回 --- 論理構造 　　　　■ CSS講座　第16回 --- リスト 　　 　■ 属性の解説（第18回） --- nowrap □□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□ ◆正しい文法のために（第１回）　論理構造 　今回より今までの解説を踏まえて、HTMLを作成するための「正しい」文法につ 　いて順次解説します。 　　今まで、作法やアクセシビリティに重きを置いて解説してきましたが、考え 　てみれば文法については、明確にしてきませんでした。どちらかといえば、か 　なり抽象的な持って回った説明に終始してきましたが、やはり文法は大切なフ 　ァクターであり、ページ作成において避けて通れないところでもあります。 　■正しい文法とは何か？ 　一言で言うなら「論理的な構造を持った文書」となりますが、これとて抽象的 　で読者の中には、一向に意味が通じないところでしょう。 　例えば、次の構文を見てください。 　正しい文法
マークアップ言語の本来の振る舞いは、論理的な構造を 　　　正しく伝えることである。 　　この構文を分析して解析してみましょう。 　最初の「正しい文法」という文字列 (テキスト) に対する文字サイズを大きく 　しています。それを改行して、次の文章の文字サイズを「普通の大きさ」に設 　定しています。 　　ここでは、文字の大きさを変えているだけの文字列だけが記述されています。 　視覚系ブラウザで閲覧すると「見出し」と「段落」に見えますが、そのように 　見えるだけです。 　　これを、非視覚系ブラウザでレンダリング (描写) するとどうでしょうか。 　　つまり、この構文は文字列だけで構造的な意味がありません。「見出し」や 　「段落」のない新聞を読むようなものです。これでは情報が正しく伝わるかど 　うか疑問です。つまり、「絶対に悪い」というわけではなく文法上、問題とな 　ります。文字列だけのコンテンツは、何らかの構造の中に配置しなくてはなり 　ません。正しくは以下のとおりとなります。 　

正しい文法

マークアップ言語の本来の振る舞いは、論理的な構造を、正しく伝え 　　　ることである。

　　サンプルの結果 (悪い例と正しい例) 　　http://www.scollabo.com/banban/magazine/ms/sample_96-1.html 　■論理的な文書構造とは何か？ 　それぞれのコンテンツ構成の脈略が、ある「かたまり」として定義した構造の 　中で配置することを論理的な文書構造と呼びます。 　　例えば、見出しとなる要素は「見出し」として定義し、当然ながらそれに伴 　う段落は「段落」として定義します。 　　HTML4.01では、こうした構造を表わす要素型が幾つか用意されており、すべ 　てのコンテンツはその構造上に配置されることが要求されています。 　　主だった構造を定義する基本的な要素型は以下のとおりです。 　　　address　　 アドレス要素 　　　h1〜h6 　 見出し要素 (第一から第六見出しまで） 　　　p 　 段落要素 　　　blockquote　引用文要素 　　　table　　　 表組リスト (テーブル) 　　　pre　　　　 整形済みテキスト要素 　　　form　　　　フォーム要素 　　　ol　　　　　番号つきリスト要素 　　　ul　　　　　番号なしリスト要素 　　　dl　　　　　定義済みリスト要素 　■階層化された論理構造 　HTMLは基本的の階層構造を持った構文となり階層構造とは、いわばツリー構造 　を形成します。各構造では「親要素」と「子要素」「孫要素」といった親子関 　係が成り立っています。 　　以下は簡単な階層を持ったHTML構文です。 サンプル

HTMLの基本

マークアップ言語の原点は以下の精神から出発しています。

  • 物理的なレイアウトではなく、文書の構造を反映したものとする。
  • コンピューターと人間の両方が理解可能な形式とする。

こうした観点から、マークアップの標準仕様として HTML4.01が Webの標準 　　仕様を制定する機関である W3C より正 　　式に勧告されています。

　　この構文をツリー構造で表わすと、 　　　　　　　　　　　　　　　　　　html 　　　　　　　　┏━━━━━━━━━┻━━━━━━━━━┓ 　　　　　　　 head　　　　　　　　　　　　　　　　　　body 　　　　　┏━━┻━━┓　　　　　　　　　　　┏━━━━╋━━━━┓ 　　　　 meta　　　　title　　　　　　　　　　h1　　　　 p 　　　 ul 　　　　　　　　　　　　　　　　　　　　　　　　　　　　┃　　　　┃ 　　　　　　　　　　　　　　　　　　　　　　　　　　　　 a li 　　この図のとおり HTML文書の最上位様子は html要素となります。html要素に 　は２つの子要素が配置されています。 　　head要素には、meta要素と title要素が子要素として配置され、文書情報と 　して Webサーバに伝えます。この部分を「ヘッダ」と呼びます。 　　コンテンツを配置する body要素には、幾つかの階層に分けられています。 　つまり、body要素とはコンテンツを配置するための最上位として位置付けられ 　ています。body要素の子要素として、h1、p、ul などの要素が配置され、また 　それらの子要素として a、li という要素が配置されています。 　　文法上、a要素などのようなインラインレベル要素は独立して body要素直下 　には配置することができません。必ずブロック要素の中で配置されなければな 　りません。 　■インラインクレベル要素 　インラインとは、普通の文字列 (テキスト文字の集合) と同じ役割を持ち、前 　後に改行や余白などは一切ありません。HTML文法では、インラインレベル要素 　と呼ばれるタグは、必ずブロックレベル要素内で配置しなければなりません。 　　その理由とは？ 　　　以下の構文を参照してください。 　 Web for begginer 　　a要素はナビゲーションリンクを示すアンカー要素と呼ばれるインラインレ 　ベル要素です。この構文では、当サイトのトップページのリンクを示したもの 　ですが、このままでは、その文字列が構造上、何を意味しているのか分かりま 　せん。 　　そこは段落としてリンクを張っているのか、リストとしてなのか、それとも 　表組の中で示したものか明示的に確認されていません。HTTPという通信手順を 　解釈する「ユーザエージェント」と呼ばれるソフトウェア (ブラウザやプロキ 　シ、検索サーチロボットなど) では本来、文書の論理的な構造を解釈する振る 　舞いを持っています。 　　インラインレベル要素は以下のとおり定義されています。 　　a、abbr、acronym、applet、b、basefont、bdo、big、br、button、 　　cite、code、dfn、em、font、i、iframe、img、input、kbd、label、 　　map、object、q、s、samp、select、small、span、s、strike、strong、 　　sub、sup、textarea、tt、u、var 　　なお、applet、basefont、font、iframe、s、strike要素は HTML4.01の厳格 　仕様から非推奨 (Deprecated) として再定義されています。 　■ブロッレベル要素 　文書構造を提供するタグのほとんどがブロックレベル要素で占められています 　が、必ずしもすべてのブロックレベル要素がそうであるとは限りません。 　　ここではごく一般的なブロックレベル要素について解説します。ブロックレ 　ベル要素には、他のブロックレベル要素を配置できないタイプもあります。 　以下のブロックレベル要素は、インラインレベル要素のみ配置可能です。 　　　address　　 アドレス要素 　　　h1〜h6 　 見出し要素 (第一から第六見出しまで） 　　　p 　 段落要素 　　　pre　　　　 整形済みテキスト要素 (img要素は配置できない) 　次のブロックレベル要素の直接の子要素は必然的に決められています。必ず 　以下のとおりでなければなりません。 　　　ol　　 li要素のみ配置可能 (li要素内ではすべての要素型が利用可能) 　　　ul　　 li要素のみ配置可能 (li要素内ではすべての要素型が利用可能) 　　　dl　　 dt あるいは dd要素のみ配置可能 　　　table　直接の子要素として tr、tbody、thead、tfoot要素のみ配置可能 　次のブロックレベル要素は、子要素として必ず他のブロックレベル要素を配置 　しなければなりません。 　　　blockquote　コンテンツを囲む要素としてブロックレベルを子要素とする 　　　form　　　　入力フィールドを配置するためにブロックレベルで囲む 　汎用的に利用できるブロックレベル div要素は、そのタグ自体に意味を持って 　おりません。その意味では論理的な構造を意味するものではないということに 　なります。なお div要素には、ほとんどのタグを配置することが可能です。 　　　※ 次回は、終了タグの扱い、及び子要素の扱いについて解説します。 □□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□ ◆CSS講座（第16回）　リスト 　箇条書きコンテンツを作成するときに用いられるリスト要素のマーカー (行頭 　で示されるマーク) や、余白をコントロールするときに使うスタイルシートに 　ついて解説します。 　■番号なしリスト 　マーカーが番号ではないリストを作成するために、ul要素を使います。行頭の 　マーカーは閲覧者の利用するソフトウェアによって異なりますが、一般的な視 　覚系ブラウザでは、黒丸が標準的に表示されています。 　　スタイルシートでは、マーカーの形状を任意に変更して表示させることがで 　きます。スタイルシートは、list-style-type属性を使います。 　　list-style-type属性の値と機能 　　　disc 　　黒丸 　　　circle 　白丸 　　　square 　四角 　　　decimal 数字 　　　none　　 マーカーの表示なし 　　list-style-type属性の書式 　　　ul { list-style-type: circle } 　　　タグに直接記述する場合は、 　　　
    　　マーカーに任意の画像を指定することもできます。 　画像を指定するスタイルシートは、list-style-image属性を使います。 　　list-style-image属性の書式 　　　ul { list-style-image: 画像の URI } 　　番号なしリストのスタイルシートサンプル 　　　http://www.scollabo.com/banban/magazine/ms/sample_96-2.html 　■番号つきリスト 　行頭に番号が付与される番号つきリスト (ol要素) の番号マーカーを他の形式 　の数字や記号に変更することができます。 　　記号の変更は、上記で説明したとおり list-style-type属性を使います。 　　数字や記号を表示する値は以下のとおりです。 　　　decimal-leading-zero 頭にゼロのついた数字 　　　lower-roman　　　　　小文字ローマ数字 　　　upper-roman　　　　　大文字ローマ数字 　　　lower-alpha　　　　　小文字アルファベット 　　　upper-alpha　　　　　大文字アルファベット 　　　lower-latin　　　　　小文字ラテン文字 　　　upper-latin　　　　　大文字ラテン文字 　　　lower-greek　　　　　小文字ギリシャ文字 　　　hebrew　　　　　 　　ヘブライ数字 　　　armenian　　　　 　　アルメニア数字 　　　georgian　　　　 　　グルシア数字 　　　cjk-ideographic　　　漢数字 　　　hiragana　　　　 　　あいうえお順のひらがな 　　　katakana　　　　 　　アイウエオ順のカタカナ 　　　hiragana-iroha　 　　いろは順のひらがな 　　　katakana-iroha　 　　イロハ順のカタカ 　　　none　　　　　　 　　マーカーの表示なし 　　ここに掲げた属性値は CSS Level 2 で定義されているものが多く、実装し 　ている Webブラウザが少ないのが現状です。Mozilla、Netscape では、アルメ 　ニアとグルジア以外を実装しています。MSIEでは上記のうえから４つくらいま 　でを実装しています。 　　番号つきリストのサンプル 　　　http://www.scollabo.com/banban/magazine/ms/sample_96-3.html 　■リストの余白 　番号なしリスト (ul要素) でも、番号つきリスト (pl要素) でも、リストの内 　容はどちらもリストアイテムの li要素を使うことになります。 　　通常、li要素はインデント (字下げ) して出力します。 　　実際にはインデントではなく、一種の余白と考えられます。スタイルシート 　では、margin属性によって余白を自由にコントロールすることができます。 　　余白をコントロールする書式 　　　ul { margin-left: 0 }　　インデントのように見える余白を解消する 　　　ul { margin-left: 2em } ２文字分のインデントのように見せる 　　　※ 次回は定義リストについて解説します。 □□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□ ◆HTML、XHTML属性の解説 --- nowrap 　テーブル内のセルで配置されるコンテンツ (主に文字列) の自動改行を禁止す 　る属性です。HTML4.01Strict (厳格仕様) では非推奨として定義されているた 　め、使うことができません。 　■nowrap属性　セル内の自動改行を禁止する 　DTD：　　　 　過渡仕様 (Transitional)、及びフレーム仕様 (Frameset) 　属性値：　　　なし 　記述法：　　　

　関連要素：　　td、th 　XHTMLの制限：XHTML1.0 Transitionalで利用可。ただし、属性の値として以下 　　　　　　　 のように記述する必要があります。 　　　　　　　　
セル内のデータの改行を禁止します 　　　　　　　 XHTML1.1では、この属性は破棄されていますので使えません。 　　通常、視覚系ブラウザではテーブルのレンダリングは、ブラウザ固有の仕様 　に委ねられます。１行のセルデータが横に長くなった場合、ブラウザ側で自動 　的に調整して改行するのが一般的です。 　　作者のデザインを維持するときに利用することがある属性ですが、現在は非 　推奨扱いとなっており、スタイルシートで利用するように求められています。 　　スタイルシートでは以下のように設定することで、セル内のデータを強制的 　に改行を禁止することができます。 　　　　td { white-space: nowrap } □□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□ 今回はここまで。 　申し訳ありませんが「今週のおさらい」は未完です。４〜５日中にはアップで 　きると思います。しばらくお待ちください。 　　今週のおさらい目次　http://www.scollabo.com/banban/magazine/ 　次回は、7月2日に配信を予定しています。 □□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□ ◆質問・ご意見ははこちらまで→　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://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/ □□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□ 初心者のためのホームページ作り_95.txt100666 0 0 56522 10064312132 15701 　　　　　　　　　　　　　　　　毎週金曜日配信　What's New 2004年6月11日 □□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□ 　　┏┏┏┏　初心者のためのホームページ作り/Web for beginner 　　┏┏┏　　　　　http://www.scollabo.com/banban/ 　　┏┏ 　　┏　　　　　　　　　　　＜第95号＞ 　　　　　　 　 　　　banban@scollabo.com □□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□ 　　当講座は、初心者や中級者が正しい文法と作法を身につけて、プロ級の本格 　的な Webページ作成に役立つことを目的に配信されております。 　　当講座では HTML4.01、XHTML1.1、XML1.0 を中心とした文法が主体となって 　います。なお、このマガジンは等幅フォントでお読みいただくと快適に読める 　ようになります。 　　　今週のコンテンツ 　　　　■ 特集 --- Webデザインその１　情報バリアフリー 　　　　　　　　　　Webデザインその２　バリアフリーのアーキテクチャー □□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□ ◆特集 (Webデザイン)　情報バリアフリー 　先週28日、国会において「改正障害者基本法」が全会一致で成立しました。こ 　の法律の骨子は、障害を理由とした差別を禁止すると明記し、障害者の福祉に 　関する基本的施策として、 　　　１．障害者の作業活動の場の拡充のための費用助成 　　　２．公共施設のバリアフリー化 　　　３．情報利用におけるバリアフリー化 　　などを定めたもので、来年中に施行されることが決定しました。アメリカで 　は既にリハビリテーション法第 508条によって、ハードウェアや電子化された 　情報のアクセシビリティが義務付けられています。 　■アクセシビリティとバリアフリー 　当講座で何度となく登場してきた「アクセシビリティ」とは、閲覧環境に関係 　なく誰でもいつでも自由にアクセスできるということが骨子となっています。 　特殊な機械やソフトウェアに頼らず、確実に送受信できることが可能であるこ 　とを基本として、ハード面では相当の進歩が見られています。 　バリアフリーとは、公共の施設やインフラなどが、身体に障害を持った人たち 　に対して自由で安全に行動できるよう工夫する「施策」を指します。駅の改札 　や階段、プラットフォーム、歩道や公共の建物を利用する際の安全性や使いや 　すさなどといったハードウェアにおける数々の「工夫」があります。 　■情報バリアフリーの実現のために 　一方で Web社会が拡大し、個人の能力や技術レベルの差異が拡がったことによ 　り、各個人の個別のニーズを満たす基盤技術の存在が重要になりました。 　　また、高齢者や身体障害者が情報にアクセスできないというソフト面での問 　題も顕在化しています。 　　特に Webページでは、見た目の美しさや格好良さを追求するあまり、アクセ 　シビリティやユーザビリティを置き去りにする傾向が目立ち、デザイナーの自 　己満足に終始する有様です。 　　こうした背景の中で、情報に対するバリア (障壁) を解消するための法律が 　制定されるのは、「今」の時代を考えると正当なのかもしれません。 　　ですが、デザインの美しさを追求することとバリアフリーを実現することは 　決して相入れない案件ではありません。 　　情報のバリアフリー化を達成するために必要なことは決して難しいことでは 　ありませんが、さりとて易しいわけでもありません。現在のページをブチ壊し 　て最初から設計しなおすという気概があれば、それこそ情報バリアフリー化の 　第一歩なのではないでしょうか。 　■HTML4.01の理念 　インターネットの発展は、HTTPプロトコルと、URI(URL) と,、HTMLであること 　に今さら説明は要らないでしょう。初期のHTMLはテキストベースの非常にシン 　プルなマークアップ言語でしたが、W3C (World Wide Web Consortium) が発足 　した後に発表された HTML3.2は各ソフトウェアベンダーからの要求が実装され 　視覚レイアウトを中心とした魅力的なものでした。 　　しかしながら HTML3.2は、本来のマークアップの原点から逸脱する変則的な 　ものでした。 　　HTMLはもともとシンプルな論理構造を提示するものであり、見た目のレイア 　ウトなどを構築するものではありません。マークアップ言語の原点とは、 　　・物理的なレイアウトではなく論理的な文書構造を反映する 　　・コンピュータと人間が理解可能な形式でなければならない 　　こうした要求を満たすために本来の姿に立ち返った HTML4.0 が発表され、 　さらにアクセシブルなマークアップを実現する HTML4.01 が相次いでリリース 　されました。 　　HTML4.01では数々の新機軸が実装され、特殊な技術を使うことなくバリアフ 　リーな文書を作成することができます。その仕様は異なるコンピュータやソフ 　トウェアの銘柄に関係なく正しく情報が伝わる仕組みを持っています。 　　視覚的なレイアウトをマークアップから分離することで論理的な文書構造を 　維持し、別途スタイルシート(CSS) を利用することで、より魅力的なレイアウ 　トを提供することが可能です。 ◆情報バリアフリーのアーキテクチャー 　ここではアクセシブルなページ作成のための基本的な考え方をガイドラインと 　して集めました。誰でも、どんな環境でも閲覧可能なページ作成のために役立 　つ様々な工夫について解説します。 　　（過去の記事と重複する場合があることをお断りします。） 　■文字 　視覚障害者の方が利用している音声ブラウザ (音声読み上げのソフトウェア) 　や点字ブラウザ (点字出力ディスプレイを使用) では、以下のような特徴があ 　ります。 　　・１つの単語にスペースや強制改行がある場合、正しく意味が伝わらない。 　　・大文字だけの英文はアルファベットとして発音する。 　　・文書の冒頭で使用言語が指定されない場合に、正しく読み取れない。 　　・特殊な記号や機種依存文字は、環境によってはリスクが伴う。 　　テキストは情報を手軽に伝えるための手段として大変有効ですが、使い方を 　誤ると情報にアクセスできない場合があります。 　　単語にスペースを入れる場合にはスタイルシートの letter-spacing属性を 　使いましょう。例えば「北海道」を「北　海　道」とした場合、音声読み上げ 　ソフトでは「きた、うみ、みち」と発音してしまいます。 　　音声読み上げソフトでは英文を大文字で記述すると、すべてアルファベット 　として発音します。例えば「HOME」は、エッチオーエムイーと発音してしまう 　ので、本来の意味が通じません。意外な落とし穴です。 　　この場合は「Home」あるいは「home」とするようにしましょう。 　　HTML文書内の冒頭で利用する言語の種類を指定しなかった場合、音声ソフト 　の中にはその内容を正しく読み上げられない危険があります。 　　 と明記して、言語を指定するようにしましょう。 　　特殊な記号 (&、<、> など) や機種依存文字は表示上のダメージを伴います。 　半角文字も文字化けの原因となり、音声読み上げソフトでは正しく発音できま 　せん。また、意味のない記号の乱用は控えましょう。どうしても記号を使う場 　合、音声で読み上げられても理解できるようにするか、読ませない工夫を考え 　ましょう。 　　なお、以下の記号はほとんどの環境で再現することができます。 　　、。，．・：；？！゛゜´｀¨＾￣＿ヽヾゝゞ）〃仝々〆〇ー―‐／＼〜 　　‖｜ …‥‘’“”（）〔〕［］｛｝〈〉《》「」『』【】＋−±×÷＝≠ 　　＜＞≦≧ ∞∴♂♀∠⊥⌒∂∇≡≒≪≫√∽∝∵∫∬∈∋⊆⊇⊂⊃∪∩∧∨ 　　¬⇒⇔∀∃° ′″℃￥＄¢£％ʼn＃＆＊＠§☆★○●◎◇◆□■△▲▽ 　　▼※〒←→↑↓〓 ♯♭♪†‡◯´｀¨＾ 　■フォント 　一般に言われるフォントとは、その銘柄 (フォント種) や大きさ、色などを表 　します。デザイン上、フォント種を指定する場面もあるでしょうが、現実的に 　は空しい努力といえるでしょう。 　　何故ならば、指定されたフォントが閲覧環境で実装されていなければそれを 　表現できないからです。 　　もっとも問題にしなければならないのがフォント (文字) の大きさです。高 　齢化を迎えている注意点として、閲覧者が自由に文字の大きさを変更できるこ 　とは大変重要です。 　　加齢による目の衰えは誰にでも訪れます。一般的にお年よりは小さな文字が 　読みにくい傾向にあります。多くの Webブラウザは閲覧者が任意に文字の大き 　さを変更して快適に読める仕組みが盛り込まれています。 　　しかし、制作者側で文字の大きさを「絶対値」で指定し待った場合には、残 　念ながら閲覧者側で文字の大きさを変更できない結果となります。ポイントや 　ピクセル、パイカといったような単位は文字の大きさを決め打ちすることにな 　ります。文字の大きさを指定する場合はできる限り「相対値」で設定すること 　が強く求められています。 　■色 　背景色や文字色をカラフルに彩ることは多くのサイトで見受けられます。色は 　サイトの印象や性格付けに大きな役割を果たすほど重要な要素でもあります。 　　ただし、色使いを誤ると閲覧者が困ることになります。特に色を組み合わせ 　る配色については十分な配慮が必要です。背景色を使う場合、他の要素 (テキ 　ストなど) との相関関係に注意しなくてはなりません。黄色い背景色に白色の 　文字色では情報にアクセスすることが困難です。 　　また色弱障害者にとって、ある種の配色は何も見えなくなる場合があります。 　配色は補色の関係を十分に考慮して設定するようにしましょう。 　　背景色を利用する場合には、必ず文字色も一緒に指定してください。どちら 　か一方ですと環境によってはまったく見えなくなります。つまり、閲覧者側で 　背景色や文字色を独自に指定していた場合、制作者側の背景色と閲覧者側の文 　字色が一致する場合も考えられます。背景色も文字も同じだったら、当たり前 　ですが文字を読むことができません。 　　高齢になれば多くの割合で「白内障」を患います。好むと好まざるに関わら 　ず、ある種の宿命なのかもしれません。白内障を患うと明るい色が「痛く」感 　じます。目を開けているのさえ困難になるほど明るい色は辛いものです。 　　背景色を白色、文字色を黒い色という組み合わせは一般的に広く普及した標 　準となっていますが、白内障患者にとっては「標準」とは言いがたいものです。 　　ページ全体に背景色を用意することは、こうした高齢者にとって非常にあり 　がたいものです。 　　色の指定は「色名」でなく、できる限り数値で指定するようにしましょう。 　例えば「Hotpink」や「Darkblue」などといった色名は Windows環境ならば再 　現することができますが、訪問者の環境は千差万別なので、必ずしもすべてで 　適用するとは限りません。 　■画像や動画・音声 　画像には alt属性で代替テキストを用意します。さらに画像の詳しい説明には 　longdesc属性を使って、詳細な情報のある文書に誘導します。 　　例： 　　夏のナイアガラ 　　longdesc属性は、視覚系ブラウザではサポートされていませんが、音声ブラ 　ウザでは有効に作用しますので、重要な情報を持った画像には利用する価値が 　あります。 　　昨今のブロードバンド (常時接続高速回線) の普及により、リッチコンテン 　ツがもてはやされています。特に動画はその最右翼に位置するでしょう。 　　動画を再生する場合、その多くでプラグイン・ソフトを使うことになります。 　Windows Media や QuickTime、Real や Flash など数多くのプラグインを利用 　する場合、閲覧者が容易にプラグインを取得できるような仕組みや説明を用意 　するようにしましょう。 　　また、動画を閲覧できない訪問者のために、動画の字幕や音声といった代替 　コンテンツも用意するようにしましょう。 　　動画や音楽などの音声情報は、閲覧者の操作で開始できるようにしましょう。 　特に動画は容量が重いため、受信時間が非常に長くなります。音楽の自動実行 　も場面によっては非常に迷惑になります。コンテンツの押し付けはできる限り 　控えるようにしてください。 　■ナビゲーション 　トップページから各ページへ、あるいはページからページへの移動を表すナビ 　ゲーションリンクはできるだけ同じ位置で設定しましょう。同じ位置にあるこ 　とで訪問者は安心します。 　　リンクにはなるべく下線を引いて、それがナビゲーションリンクであること 　を閲覧者に理解できるようにします。また、未訪問と訪問済みが分かるような 　色の工夫も考えましょう。 　　まだ完成していないページに「工事中」などとしている場合があります。未 　完成であるならばリンクする必要がありません。閲覧者に余計な操作や通信費 　を負担させるのは厳に慎みたいものです。 　　ページ数が増えてくるような場合には、「サイトマップ」を用意しましょう。 　サイトマップはサイト全体の構造が一目で分かるようにします。 　　閲覧者は必ずしもサイトのトップページから訪問するわけではありません。 　ちなみに当サイトへの訪問者の実に７割の方が検索エンジンから目的のページ 　へ飛んできます。 　　訪れた訪問者が他のページを閲覧したいとき、そのページに何もナビゲーシ 　ョンがなかった場合、作者も訪問者も残念な思いになります。特にフレームを 　利用する場合によく見られる現象です。トップページや関連するページへのリ 　ンクをすべてのページで用意するようにしましょう。 　　Flash や画像でリンクを用意する場合、それらにアクセスできない閲覧者も 　います。ナビゲーションは代替としてのテキストを用意するようにしましょう。 　　イメージマップでも同様にテキストのナビゲーションを設定してください。 　　プルダウンメニューでリンク先を選択したとき、それが自動的に実行するの 　は視覚系ブラウザなどのスクリプトが利用できる環境に限ります。スクリプト 　が実行できない場合には、どこにも移動することができません。その点に十分 　考慮してください。 　　リンクを用意するとき、そのリンク先が明確に理解できるようなテキストを 　用意しましょう。単に「ここ」とか「クリック」のような手抜きはダメです。 　■見出しと段落 　私たちがインターネットにアクセスして情報を得る場合、そこで提供されるコ 　ンテンツのすべてを読むことは稀です。そのほとんどで「ななめ読み」してい 　るのではないでしょうか。 　　ななめ読みとは、自分にとって必要なコンテンツだけを読むときの「読み飛 　ばし」です。実際の新聞を読むときも「見出し」を頼りに読み飛ばします。 　　見出しを設定するとき、単にフォントサイズを変えるだけでは見出しとは言 　えません。 見出し としているページを見かけますが 　これは見出しとは解釈されません。

見出し

としなければなりません。 　font要素はインラインレベル (文字列として扱う) 要素であり、構造をマーク 　アップするものではありません。 　　見出し要素 (h1〜h6) を、フォントサイズの変化に使うのも明らかな文法違 　反です。ページ全部が見出しであるわけありませんから。 　　また、最初に登場する見出し要素は必ず「h1」でなければなりません。決し 　て「h2」や「h3」が最初に登場すべきではありません。 　　段落とは、まとまったある文章の集合を区切ったものです。いわば長い文章 　の中における１つ区切りとなるものです。強制改行を示す br要素を連発して 　あたかもそこが段落のように見せることがありますが、厳密には段落ではあり 　ません。強制改行を連発するのはみっともないものです。 　　通常段落は p要素を使います。一般的なブラウザでは前後に改行と余白が表 　示されますが、それはブラウザの仕様によるもので、HTMLの仕様ではありませ 　ん。そのことに目をつけて

だけを使って余白を設けるのは間違いです。 　　見出し要素にせよ段落要素にせよ、その文字の大きさや余白の設定はスタイ 　ルシートで可能です。見出しや段落を別の目的 (レイアウト用) に用いるのは 　閲覧環境よっては混乱を起こす要因となります。 　■フォーム 　アンケートや質問の受付などで利用されるフォームは、音声ブラウザなどの非 　視覚系ブラウザが少々苦手とするところがあります。 　　例えばキーボードしか利用できない環境では、各入力フォームを上手に移動 　できないことがあります。適切なアクセスキーやタブの移動を可能できるよう 　にしましょう。（関連属性 accesskey、tabindex属性など) 　　また入力フィールドが近すぎてしまう場合、音声読み上げソフトでは同一の 　入力フィールドとして読み上げてしまう危険があります。入力フィールドの配 　置に考慮してください。 　　入力フィールドにラベルがない場合、音声や点字ブラウザでは何を意味して 　いるのか、何を入力していいのか理解できないことがあります。HTML4.01では 　label要素が定義されているので、適切なラベルを用意しましょう。 　　送信ボタンなどに画像を利用している場合、適切な代替テキストがないと非 　視覚系ブラウザでは操作することができません。画像には必ず alt属性を使っ 　て適切なテキストを用意してください。 　　テキスト入力領域にデフォルト (初期値) が設定されていないと、音声や点 　字ブラウザでは意味が通じなくなる場合があります。テキスト入力フィールド 　には適切なデフォルト値を設定しましょう。 　　例： 　　 　　フォームにアクセスできない場合、代替となる通信手段を用意しましょう。 　例えばメールや FAXなどを明記して、フォームの代替となる手段を用意します。 　■表組 (テーブル) 　音声や点字を扱うソフトウェアはテーブルのレンダリングが非常に苦手です。 　視覚的なレイアウトをテーブルで利用した場合、直感的に把握することができ 　ず操作することが難しくなります。 　　この節では、テーブルを利用する際の注意点について解説します。 　　テーブルを表として提供する場合、各セルがどのような構造で提示されてい 　るかを設計する必要があります。 　　テーブル全体の概要を示す summary属性を使って、非視覚系ブラウザに対応 　させましょう。視覚系ブラウザでは summary属性をサポートしませんが、音声 　読み上げには非常に有効です。 　　例： 　　 　　表としてのテーブルには「表題」と「見出しセル」を明記しましょう。表題 　は caption要素、見出しセルは th要素で行います。また th要素に見出しとし 　ての概要を示す abbr属性を使って行います。 　　例： 　　
　　 　　　　 　　音声ブラウザなどでは、各セルに示されるデータがどのような意味を持つの 　か理解できない点があります。そうした欠点を補うために、見出しやデータを 　構造化し、各セルと見出しなどを関連付けることによって快適な表を提供する 　ことができます。 　　セルの関連付けは scope属性で示します。見出しで示された内容のデータと 　データセルで示された情報を関連付ける手軽な方法です。 　　見出しのデータが下側に展開される場合は scope属性の値を「col」、右側 　に展開される場合は「row」を指定します。 　　見出しセルとデータセルの関連付けは、id属性と headers属性で行います。 　headers属性には、id属性で示された識別子を複数織り込むことが可能です。 　例： 　
情報バリアフリー・アーキテクチャー
課題意味
　 　　　 　 　　　 　　テーブルをレイアウトで利用するのは好ましくないとされています。テーブ 　ルはデータのすべてを受信しないとレンダリングを開始しないという性質があ 　り、データ量が多くなると閲覧者はそれなりに待たされる結果となります。 　　特にレイアウトとして使った場合には、容量の大きい画像が配置されること 　が多々ありますので、受信時間はさらに増えることになります。 　　テーブルのセルには、他のブロックレベル要素を配置することができ、大変 　便利な機能を有していますが、同じような表現方法は他の手段でも可能です。 　スタイルシートの「浮遊：float」や「絶対位置：position」を駆使すること 　でテーブルで描くレイアウトを構築することができます。お試しください。 　■スクリプト 　音声や点字、あるいはテキストブラウザなどといった非視覚系ブラウザでは基 　本的にスクリプトに対応していません。 　　また、セキュリティの観点からスクリプトの実行を「オフ」にしている閲覧 　者も少なくありません。 　　ちなみに WindowsXP Service Pack 2 Bata版では、デフォルトで ActiveX 　やスクリプトの実行を「オフ」にしています。 　　重要な情報伝達手段としてスクリプトを用いる場合には、スクリプトに対応 　していない環境に配慮し、代替のページやコンテンツを用意しましょう。代替 　のコンテンツを用意する場合には noscript要素を使います。 　　例： 　　 　　スクリプトは様々な形式があります。JavaScript、VBScript、JScriptなど 　その仕様は多様です。また、JavaScriptはバージョンによる微妙な違いもあり 　ます。閲覧者の環境を考慮し、どのようなハードウェアやソフトウェアでも実 　行が可能な仕様を選んでください。 　　スクリプトにエラーがあると実行途中で止まってしまうことがあります。そ 　の情報が重要である場合には、スクリプトの構文を十分チェックし、異なるソ 　フトウェアでの検証を行うように心がけましょう。 　■インターフェイス 　コンピュータのディスプレイ、キーボード、ポインティングデバイスはそれを 　操作する人にとって重要なインターフェイスになります。つまり、人間と機械 　を同期させる大切な役目を担っています。 　　インターフェイスは個人が自由にカスタマイズできます。それは個人にとっ 　て使いやすい環境を手にするために行われます。 　　せっかく自分なりの環境を設定して使っているインターフェイスを、スクリ 　プトなどで勝手に変えてしまうのは非常に迷惑であり愚かな行為です。 　　画面を最大化、あるいは最小化、マウスの形状を変える、あるいはマウスに 　画像が追いかける、キーボードからの操作ができないなど、少なくない Webサ 　イトで閲覧者のインターフェイスを無視する傾向が見られます。 　　また、マウスしか受け付けないナビゲーションやフォームでは、上肢障害が 　ある方や高齢の方には苦痛が伴います。特に Flashだけを使って提供するナビ 　ゲーションや、勝手にスクロールしたり点滅するようなコンテンツを控え、誰 　にでも操作可能なインターフェイスを構築しましょう。 　　コンピュータのマニュアルに掲載されていないような新しい技術を採用する 　ときには、高齢者や障害者でも操作可能な方法を取り入れましょう。そうした 　ことを無視したとき、少なくない閲覧者が情報にアクセスできなくなる恐れが 　あります。できうる限り標準化されない技術の利用をやめましょう。 　■W3Cで提供する技術を使う 　W3C (World Wide Web Consortium) は、世界中のソフトウェアベンダーや技術 　者、あるいは個人で形成される非営利の Web標準化を制定する機関です。 　　現在のすべての Web関連技術の仕様は、ここで討議され、草案が練られ、十 　分な試用期間でテストされて最終的な「勧告：Recommendation」とされます。 　　現在のすべての Web関連ソフトウェアは W3Cの仕様に準拠しています。正し 　くマークアップされたHTML文書であれば、ソフトウェアの銘柄に関係なく、そ 　の情報は正しく伝達されます。 　　アクセシビリティやバリアフリーなページを作成するということは、何より 　も W3Cに準拠した技術を使うことにほかなりません。 □□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□ 今回はここまで。 　申し訳ありませんが「今週のおさらい」は未完です。２〜３日中にはアップで 　きると思います。しばらくお待ちください。 　　今週のおさらい目次　http://www.scollabo.com/banban/magazine/ 　次回は、6月25日に配信を予定しています。 □□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□ ◆質問・ご意見ははこちらまで→　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://backno.mag2.com/reader/Back?id=0000090196 　■配信の変更・中止はこちらです。 　個別の手続きは受け付けていませんので、ご面倒でも各自でお願いできれば助 　かります。 　　当サイトにて　http://www.scollabo.com/banban/magazine/top.html 　　まぐまぐにて　http://www.mag2.com/m/0000090196.htm □□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□ ＜えでぃた〜ず・る〜む＞ 　ある雑誌社からコラムの原稿依頼がありました。当初 600字以内ということで 　したが大幅に字数を超えてしまいました。字数に制限があるという原稿作成は 　慣れていないせいか実に大変でした。 　　世の中にはたくさんのコラムニストや原稿執筆を生業としている人が多いよ 　うですが、字数制限の中で書き上げることはすごいことだなぁと感心します。 　　その点メールマガジンはかなり自由度が高いので気が楽です。ただし、原稿 　を作成する時間がないのが唯一の悩みどころです。 □□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□ ◆著作権について 　個人がご自分のＰＣに保存して利用する以外の記事の転載、引用は基本的に応 　じておりません。記事中の内容について、無断で使用することを固く禁じます。 　　なお、記事中のスタイルシート、スクリプト、HTMLをご自分のページ作成に 　自由に使っていただいても差し支えありません。 　 Copyright(C) 2002-2004 www.scollabo.com/banban/ □□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□ 初心者のためのホームページ作り_94.txt100666 0 0 45363 10064311776 15716 　　　　　　　　　　　　　　　　毎週金曜日配信　What's New 2004年5月28日 □□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□ 　　┏┏┏┏　初心者のためのホームページ作り/Web for beginner 　　┏┏┏　　　　　http://www.scollabo.com/banban/ 　　┏┏ 　　┏　　　　　　　　　　　＜第94号＞ 　　　　　　 　 　　　banban@scollabo.com □□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□ 　　当講座は、初心者や中級者が正しい文法と作法を身につけて、プロ級の本格 　的な Webページ作成に役立つことを目的に配信されております。 　　当講座では HTML4.01、XHTML1.1、XML1.0 を中心とした文法が主体となって 　います。なお、このマガジンは等幅フォントでお読みいただくと快適に読める 　ようになります。 　　　今週のコンテンツ 　　　　■ HTML講座 第35回 --- イメージマップ 　　　　■ CSS講座　第14回 --- 浮遊コンテンツ □□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□ ◆HTML講座 （第35回）　イメージマップの作成 　イメージマップとは、1つの画像の中に複数のリンクを埋め込むことを指し、 　基本的に２つの方法があります。 　□クライアント・サイド・イメージマップ 　　作者が用意した画像に、他のプログラムを使うことなくリンクを埋め込むと 　　きに利用します。複雑なプログラムを必要としないため応答性が速く、比較 　　的簡単に設置できることから広く利用されています。 　□サーバ・サイド・イメージマップ 　　主に CGIを利用して使います。サーバに別途 CGIプログラムを置き、閲覧者 　　の操作によって、リンクのデータが送信され、イメージマップとして実行し 　　ます。欠点は、一旦プログラムによって処理されるため応答性が遅く、閲覧 　　者が集中したときには、タイムアウトする危険があります。 　　今回のは、前者のクライアント・サイド・イメージマップを中心に解説しま 　す。なお、今回は「教材」を用意しましたので、お手数ですが以下のページか 　らダウンロードしてください。 　　受信時間を短縮するため、ファイルは圧縮していますので「解凍」してお使 　いください。なお解凍後、適当なフォルダを作って移動してください。 　　　教材のダウンロード 　　　http://www.scollabo.com/banban/daf/material.html 　■イメージマップの仕組み 　イメージマップは、１つの画像中に幾つかの区切られた領域を指定し、その領 　域にリンクを埋め込むことで実現します。 　　領域は、HTMLで定義されている「area要素」で指定しますが、領域の矩形の 　座標を指定します。座標はピクセル単位で行います。 　　また、使用する画像に対して、イメージマップとして使う「usemap属性」で 　マップを指定する「map要素」と関連付ける識別子 (ID) を設定します。 　「area要素」は、必ず「map要素」の子要素として使います。 　□map要素 　イマージマップを定義し、指定された画像を関連付けます。この要素の範囲に 　子要素として「area要素」を配置し、領域を指定します。 　　map要素の属性 　　　name　指定された画像で示す「usemap属性」の識別子を指定します。 　□area要素の機能とその属性 　areaとは「エリア」、つまり領域を指す言葉です。この要素内に矩形の領域と 　リンク席を指定します。 　　area要素の属性 　　　shape　領域の形を指定します。形は以下の４つが定義されています。 　　　　　　　rect：四角形、　circle：円形、　poly；多角形、 　　　　　　　default：画像全体 　　　coords 領域の座標をピクセル単位で指定します。矩形の種類によって座 　　　　　　 標が異なりますので注意してください。 　　　href　 リンク先の URI を指定します。 　　　alt 　 画像が表示されない環境のために代替テキストを用意します。 　■領域と座標の指定 　以下の図を参照してください。１つの画像の中に四角と三角の矩形を示したも 　のです。（テキストベースなのでうまく表示できません。等副フォントでお読 　みください。） 　　　　　　┏━━━━━━━━━━━━━━━━━━━━━━━━┓ 　　　　　　┃　→┌────┐　　　　　→│＼　　　　　　　　┃ 　　　　　　┃　　│　Ａ　　│　　　　　　│　 ＼　　　　　　 ┃ 　　　　　　┃　　│　　　　│　　　　　　│　Ｂ　＼　　　　　┃ 　　　　　　┃　　└────┘←　　　　→ ─────　←　　 ┃ 　　　　　　┗━━━━━━━━━━━━━━━━━━━━━━━━┛ 　　上記の図は、画像中にＡという四角の領域と、Ｂという三角の領域を表した 　ものとお考えください。また、矢印が付いている点に注目してください。 　　最初の四角形視覚系を示す領域を指定するために、area要素の shape属性で 　「rect」を指定します。このとき、座標を決める coords属性には、矢印で示し 　た２つの位置を指定します。 　　四角形の座標は、矢印で表した左上の座標と右下の座標を指定します。座標 　はどちらも画像全体のＸ座標とＹ座標を指定します。 　　Ｘ座標とは画像の上からの位置、Ｙ座標は画像の左からの位置をピクセル単 　位で指定します。それぞれの座標をカンマで区切って指定します。 　　書式 　　coorde="(左上のＸ座標,左上のＹ座標,右下のＸ座標,右下のＹ座標) 　　例文 　　 　　三角形の場合にも矢印で表した３つの座標を指定します。三角形のそれぞれ 　の頂点のＸ座標とＹ座標を指定することで、領域が決まります。 　　なお、三角形を表す場合、shape属性は poly (多角形) を指定します。 　　領域が円形の場合 shape属性の値は circle (円形)を指定し、領域は円の中 　心点のＸ座標およびＹ座標と、その半径をカンマで区切って指定します。この 　場合もすべてピクセル単位となります。 　　なお、画像が表示できない環境に配慮して、イメージマップのほかにテキス 　トベースによるリンクを明示しておくことも大切なことです。 　　これらを踏まえて、教材で提供した画像を使ってイメージマップを作ります。 　テキストエディタを起動して、以下の構文をタイプしてください。 イメージマップの作成/初心者のためのホームページ作り

イメージマップの作成

お問い合わせ 更新情報 ホームに戻る

Home / 更新情報 / Mail

　(注意) 　メールマガジンの横幅制限のため、幾つか改行して表現しています。HTMLを 　コピーして利用する際には、余分な余白を削除してからお使いください。 　サンプル実行結果 　　http://www.scollabo.com/banban/magazine/ms/sample_94-1.html ◆解説 　（スタイルシートから） 　■body { background: #fff; color: #000; margin-left: 6%; margin-right: 6% } 　　コンテンツを配置する body要素の背景色を白色、文字色を黒色に設定。 　また、左右の余白をブラウザの比率で６％としました。 　■h1 { background: #069; color: #fff; font-size: 1.2em; padding: 2px; text-indent: 1em } 　　第一見出し要素の文字色を白色、文字サイズを通常の２割り増し、背景色を 　ややくすんだ青色としまし。また、とうそ内の余白を上下左右とも２ピクセル 　とし、テキストのインデント (字下げ) を１文字分にしています。 　■.cent { text-align: center } 　　centというクラス名を設定し、このクラスで指定されたようそのコンテンツ 　を中央ぞろえで表示させます。 　（HTMLから） 　■

　

　　段落を示す p要素は、スタイルシートのクラス「cent」を適用します。画像 　をあらわす img要素には、イメージマップの識別子「banban」に対して、ハッ 　シュマークをつけて指定します。イメージマップを形成する上で、この識別子 　は map要素の「名前」と一致しなくてはなりません。 　　alt属性を「空」にしたのは、area要素で示す alt属性と混同させないために 　あえて何も指定しませんでした。 　■ 〜 　 map要素は、クライアント・サイド・イメージマップを定義するために使いま 　す。この要素内に、イメージマップの領域に関する設定を行う area要素を配置 　します。 　　name属性は、img要素内で指定した usemap属性の識別子と一致させなければ 　なりません。 　■お問い合わせ 　　area要素は、閲覧者の操作に反応してリンクするための領域を設定します。 　ここでは領域の矩形が多角形であることを示し、各頂点の角の座標を設定して 　います。座標は２つの座標を組にして全部で５つの頂点角を指定します。 　　最初の 196,143, は、上から 196ピクセルの位置、左から 143ピクセルの位 　置という具合に設定しています。それぞれの頂点を線で結ぶと多角形が形成さ 　れます。 　　また alt属性で示されるテキストは、画像表示ができない環境を考えて必ず 　設定するようにします。href属性はリンク先を指定します。 　　なお area要素は「空タグ」なので、終了タグは必要ありません。 　■更新情報 　　この alea要素では領域が円形 (circle) を示しています。その座標は画像 　全体の上から 273ピクセル、左から 90ピクセル、半径が 68ピクセルであるこ 　とをあらわしています。 　■ホームに戻る 　　この area要素では、領域が四角形 (rect) を示しています。座標は左上と 　その対角である右下の位置を指定します。 　■

Home / 更新情報 / Mail 　

　　ここでも段落要素にクラス (cent) を適用しています。クラスは１つのペー 　ジで何度の繰り返し利用することが可能です。 　　イマージマップを利用するとき、それに対応していない環境に配慮して、テ 　キストベースの代替リンクを用意するように心がけましょう。 ◆まとめ 　　イマージマップを作成する場合、画像の中で配置する得よう域の座標を求め 　ることはとても難しいものです。今回のサンプルを作成する際、イメージマッ 　プの座標の設定は、アドビ社の ImageReady CS) で作成しました。 　　高機能な画像ソフトは高価ですのでお勧めすることはできませんが、フリー 　のイメージマップ作成ソフトが幾つかリリースされていますので、参考にして 　ください。 　　■Windows向けソフト 　　　まっぷエディタ（す〜のお家） 　　　http://www3.to/su-house　（フリー） 　　　Client Side Image Map Editor（本気でフリーソフト） 　　　http://hp.vector.co.jp/authors/VA001944/freesoft/index.html 　　　UseMap（あすかぜ factory） 　　　http://www.asukaze.net/soft/index.html　（フリー） 　　■Macintosh向けソフト 　　　RGB&HexColorPicker++ 　　　http://www.kenjikojima.com/　（シェアウェア） □□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□ ◆CSS講座（第２回）　浮遊コンテンツ 　ある要素の右、あるいは左側に他の要素を回り込ませることを「浮遊：フロー 　ト」と呼び、スタイルシートでは float属性によって定義されています。 　　浮遊コンテンツを実現するのには、スタイルシート以外にも可能です。非推 　奨属性ながら align属性を使うことで、他の要素を左右に回り込ませることが 　できます。 　　以下はその例文です。 　

ナイアガラの滝 　　　ナイアガラの滝は、アメリカとカナダの国境に位置し、(以下省略） 　　

　　サンプル実行結果 　　http://www.scollabo.com/banban/magazine/ms/sample_94-2.html 　　このように align属性を使うだけで浮遊コンテンツの表現がが可能となって 　います。ただし、この場合の文書型定義は Transitional にする必要がありま 　す。また、Strictな厳格仕様には使うことができません。 　　スタイルシートを使うことのメリットは、受信環境を選ばず、ブラウザ銘柄 　を指定する必要がありません。言い換えれば、どのような閲覧環境にも対応で 　きる利点があります。 　　今回は、スタイルシートを使った多彩な浮遊コンテンツについて解説します。 　■浮遊コンテンツを利用する意味 　ブロックレベル要素を２つ横に並べたり、ある画像の横に説明文を配置したり 　その用途はさまざまです。一般に要素を横に並べるという手法にテーブルを利 　用するケースがありますが、テーブルにはそれなりのデメリットがあるので、 　レイアウトに用いることは推奨されておりません。 　　当メールマガジンの Webサイトにおけるトップページでは、一見するとテー 　ブルを使っているように見えますが、実は浮遊という手法を用いています。 　　浮遊コンテンツの手法は、テーブルでは表せない効果的な利用法があります。 　まさにスタイルシートを利用した実にダイナミックな表現といえるのではない 　でしょうか。 　■スタイルシートによる浮遊コンテンツの利用法 　先ほども述べたとおり、スタイルシートによる浮遊コンテンツは float属性を 　使います。ある要素に対して浮遊させるために用います。 　　□ float属性の値とその機能 　　浮遊するときの値は以下のとおりです。基本的に左か右を選択しますが、中 　　央に配置することはできません。 　　　left　　指定した要素を左側に配置しその右側に他の要素を配置する 　　　right　 指定した要素を右側に配置しその左側に他の要素を配置する 　　　none　　左右への回り込みをしない (デフォルト値) 　　□ 書式 　　要素を浮遊させる具体的な書式は以下のとおりです。 　　　img { float: left } 　　画像を表す img要素に対して左側に浮遊する設定です。この要素に続く他の 　　要素が右側に配置されます。 　　float属性を利用したサンプル (float属性を２つ使っています) 　　http://www.scollabo.com/banban/magazine/ms/sample_94-3.html 　　□ floatの解除 　　float属性を解除しない限り、設定した要素の反対側に回り込もうとします。 　　そのため、作者の意図しない表示になる場合があります。 　　float属性を解除しないサンプル 　　http://www.scollabo.com/banban/magazine/ms/sample_94-4.html 　　そこで、浮遊状態を解除するために、スタイルシートの clear属性を使いま 　す。これによって回り込もうとする浮遊を解除します。 　　clear属性の値は、以下の３つが定義されています。 　　　left 　float属性で left を指定した場合に解除します。 　　　right　float属性で right を指定した場合に解除します。 　　　both　 left、right に関わらず両方の回り込みを解除します。 　　□書式 　　以下は、罫線を表示する hr属性に浮遊の解除を行います。 　　　hr { clear: left } 　■実戦的な浮遊コンテンツの作成 　浮遊を設定する要素にあらかじめ横幅を指定し、複数の浮遊コンテンツを横に 　並べることで、テーブルで表現するようなレイアウトを構築することも可能に 　なります。 　　テーブルでは、データをすべて受信しなければ表示が開始できないという独 　特の欠点があります。そうした欠点を補い、閲覧者にストレスを感じさせない 　ページ作りは、ある意味重要なことでもあります。 　　こうした実戦的な浮遊コンテンツの作成についての詳しい解説は本誌「第49 　号」で掲載しましたので参考にしてください。当サイトのトップページの手法 　が解説されています。 　　　「第49号」今週のおさらい 　　　　http://www.scollabo.com/banban/magazine/review_049.html 　　　「第49号」プレーンテキスト版 　　　　http://www.scollabo.com/banban/magazine/magazine_049.html 　　このページでの解説は XHTMLが主体となっておりますが、記述法に注意しな 　がら HTMLを作成してください。XHTMLでは「空タグ」の行末にスラッシュがあ 　りますので、それを削除してお使いください。 □□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□ ◆メールマガジン配信についてのお願い 　このメールマガジンを配信して丸２年になります。おかげさまで「まぐまぐ」 　の「殿堂入りメールマガジン」にも推薦されるようになりました。 　　今まで「毎週金曜日」という配信間隔でお届けしてきましたが、個人的な都 　合により「隔週金曜日」に変更させていただきたくお願いします。 　　昨年末に長年勤めた会社を辞め、現在は独立して小さいながらも自分の会社 　を設立しました。会社といっても従業員などは１人もなく、妻や古い友人に手 　伝ってもらう程度の吹けば飛ぶような「零細企業」です。 　　業務のほとんどを私１人で行っており、極めて多忙の日々を送っています。 　納期を確保するため土日も出勤し、ほぼ毎日深夜に帰宅しています。わずかな 　時間の中で Webサイトの運営とメールマガジンの原稿を作成しているのが現状 　です。 　　メールマガジンの廃刊も選択肢としてありましたが、多くの読者の励ましも 　あり何とか続けていきたいと考えています。かかる状況をご理解いただき、配 　信における変更を伏してお願いいたします。 □□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□ 今回はここまで。 　今週のおさらいは Webページにも掲載しましたので、是非参考までに見ておい 　てください。 　　Webページでは HTML文の実行結果のサンプルもあり、より分かりやすく説明 　しています。あわせて過去の記事のおさらいも掲載しています 　（今週のおさらい） 　　http://www.scollabo.com/banban/magazine/review_094.html 　次回配信は、6月11日を予定しています。 □□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□ ◆質問・ご意見ははこちらまで→　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://backno.mag2.com/reader/Back?id=0000090196 　■配信の変更・中止はこちらです。 　個別の手続きは受け付けていませんので、ご面倒でも各自でお願いできれば助 　かります。 　　当サイトにて　http://www.scollabo.com/banban/magazine/top.html 　　まぐまぐにて　http://www.mag2.com/m/0000090196.htm □□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□ ＜えでぃた〜ず・る〜む＞ 　気がつけば５月も終わろうとしています。今年ほど季節感のない日々を過ごす 　のは初めてです。時間ばかりに追いかけられ、気が休まる暇もありません。 　　１日が24時間しかないことに腹を立てたり焦ったり、そうした中で精神状態 　がおかしくなってくることを時折自覚します。おまけに一生懸命がんばっても 　それに見合う収入の少なさに愕然とします。 　　それでも仕事にあるうちはマシです。仕事がなくなったらどうしようか、と 　いう恐怖もあります。 　　そのうちきっといいことがある、というかすかな希望を抱いて自分を励まし 　ています。そう、きっといいことあるさ、でなけりゃやってらんないよね。 □□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□ ◆著作権について 　個人がご自分のＰＣに保存して利用する以外の記事の転載、引用は基本的に応 　じておりません。記事中の内容について、無断で使用することを固く禁じます。 　　なお、記事中のスタイルシート、スクリプト、HTMLをご自分のページ作成に 　自由に使っていただいても差し支えありません。 　 Copyright(C) 2002-2004 www.scollabo.com/banban/ □□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□ 初心者のためのホームページ作り_93.txt100666 0 0 40507 10064311764 15705 　　　　　　　　　　　　　　　　毎週金曜日配信　What's New 2004年5月14日 □□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□ 　　┏┏┏┏　初心者のためのホームページ作り/Web for beginner 　　┏┏┏　　　　　http://www.scollabo.com/banban/ 　　┏┏ 　　┏　　　　　　　　　　　＜第93号＞ 　　　　　　 　 　　　banban@scollabo.com □□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□ 　　当講座は、初心者や中級者が正しい文法と作法を身につけて、プロ級の本格 　的な Webページ作成に役立つことを目的に配信されております。 　　当講座では HTML4.01、XHTML1.1、XML1.0 を中心とした文法が主体となって 　います。なお、このマガジンは等幅フォントでお読みいただくと快適に読める 　ようになります。 　　　今週のコンテンツ 　 ■ JavaScript講座 (第18回) --- location、及び historyオブジェクト 　　　　■ インターネット用語解説 (第７回) --- SSL □□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□ ◆JavaScript講座 --- location、historyオブジェクト 　JavaScriptにおける locationオブジェクトとは現在表示されているページの 　位置情報を扱い、historyオブジェクトは、現在のブラウザの履歴を扱います。 　　今回は、似て非なる２つのオブジェクトについて解説します。 　■ locationオブジェクト 　locationオブジェクトとは、現在表示されているページの位置や通信状態など 　を参照する場合に用いられます。また、現在のページを他のページに変更する 　ということも可能です。 　　locationオブジェクトのプロパティとメソッドは以下のように定義されてい 　ます。 　□locationオブジェクトのプロパティ 　　◆ hash　　　現在のアンカーを参照、または指定したアンカーへ移動する 　　　　　　　ここで示すアンカーとは、〜 で埋め込まれ 　　　　　　　たリンク先を示すアンカーを扱います。 　　　書式 　　　　document.link{参照番号].hash = "URL"　設定する場合 　　　　参照番号は、埋め込まれたリンクの順番を示します。最初の番号は 0に 　　　　なることに注意してください。 　　　例文 　　　　document.write(location.links[参照番号].hash); ◆ host　訪問中のホスト情報を参照する。 　　　　　　　ホストの具体的な情報とは、そのホストのドメイン名、あるいは 　　　　　　　IPアドレスを返します。 　　　書式 　　　　location.host 　　　例文 　　　　document.write(location.host);　ホストを参照します。 ◆ hostname　訪問中のホスト名（ドメイン名）を参照する。 　　　　　　　hostプロパティと同じように、現在のドメイン名を返します。 　　　書式 　　　　location.hostname 　　　例文 　　　　document.write(location.hostname); 　　　　　現在のホスト名を参照します。具体的には、hostプロパティと同じ結 　　　　　果になります。 　　◆ href　 表示しているページの URIを参照、または他の URIに移動する。 　　　　　　　現在のページ内で埋め込まれている 〜 で 　　　　　　　示されるアンカーの URIを参照したり、リンク先を個別に設定す 　　　　　　　ることができます。 　　　書式 　　　　document.write(location.links[参照番号].href)　リンク先の参照 　　　　location.href = URI リンク先の設定 　　　　　参照番号は、そのページに示されるリンクの登場順となります。 　　　　　最初の番号は 0 になることに注意してください。 　　　例文 　　　　 　　◆ port　 表示中のページのポート番号を参照、または設定する。 　　　　　　　ポート番号を参照する場合、あらかじめポート番号が指定されて 　　　　　　　いない場合には何も表示されません。 　　　書式 　　　　location.port 　　　例文 　　　　document.write("ポート番号は",location.port); 　　◆ protocol　現在通信中の通信手順（プロトコル）を返す。 　　　　　　　プロトコルとは、コンピュータ間の通信を行う際に、決められた 　　　　　　　規則（手順）にしたがって行われるものです。Webでは HTTPプロ 　　　　　　　トコルが使われます。 　　　　　　　　 などで指定された現在のページ、またはリン 　　　　　　　ク先のプロトコル名 (http:,ftp: など) を参照または設定します。 　　　　　　　返されるプロトコル名はサーバによって異なる場合があります。 　　　　書式 　　　　　location.protocol　または、 　　　　　location.links[参照番号].protocol (リンク先のプロトコル参照) 　　　　例文 　　　　　document.write(location.protocol); 　　　　　　現在のページのプロトコルを参照します。 　　◆ search　CGI などに渡される URIを参照、または設定する。 　　　　　　　 で設定されたリンク先、または現在のページの 　　　　　　　CGIなどに渡されるサーチ部分（？マーク以降の文字列）を参照、 　　　　　　　または設定します。 　　　　書式 　　　　　location.search 　　　　例文 　　　　　document.write(location.search); 　□locationオブジェクトのメソッド 　　◆ reload　 現在表示中のページのリロード (再読み込み) をする。 　　　書式 　　　　ウィンドウ名.location.reload(); 　　　　　現在のページをリロードする場合、ウィンドウ名を省略することがで 　　　　きます。 　　　例文 　　　 　　　　ボタンが押されると、現在のページを再読み込みします。 　　◆ replace　ブラウザに現在のページの履歴を残さずに移動します。そのた 　　　　　 　め、移動先からブラウザの「戻るボタン」をクリックしても元の 　　　　　　　ページには戻れません。 　　　書式 　　　　ウィンドウ名.location.replace(移動先 URI) 　　　　　ウィンドウ名は省略可能です。 　　　例文 　　　 　■ historyオブジェクト 　historyオブジェクトは、ブラウザの履歴(訪問済みの URIの記録) を操作した 　り、画面上に表示しているページの移動などの操作に利用します。 　□ histoyオブジェクトのプロパティ 　　◆ length　現在ブラウザが持っている訪問済みの URI の履歴の数を参照する。 　　　書式 　　　　hostory.length 　　　例文 　　　　document.write(現在の履歴数は", history.length); 　□ histoyオブジェクトのメソッド 　　◆ back 現在表示中のページの以前のページに戻る。 　　　　　Webブラウザの履歴の引数に示される分のページに戻ります。１つ前 　　　　　のページに戻るときには 1、２つ前の場合は 2 とするように、その 　　　　　数の分だけの履歴に戻ります。 　　　　　　ただし、履歴がない場合には無視されます。 　　　書式 　　　　history.back(戻るページの数) 　　　例文 　　　　[１つ前に戻る] 　　◆ foward 　現在表示中のページの先のページへ移動する。 　　　　　　　１つ先のページに移動します。ただし、そのページが既に読み込 　　　　　　　まれていることが前提となります。 　　　書式 　　　　history.fward 　　　例文 　　　　[１つ先に進む] 　　◆ go　　指定した数のページに移動します。負数を指定した場合には、履歴 　　　　　から参照します。移動するページがなければ何もしません。なお、引 　　　　　数には絶対パスを記述することも可能です。 　　　書式 　　　　history.go(移動するページ数：負数も可能) 　　　例文 　　　　[１つ前に戻る] 　■locationオブジェクトと、Linkオブジェクト 　 〜 　というリンクを扱うオブジェクトに Linkオブジェ 　クトが定義されています。このオブジェクトの内容は Areaオブジェクトとも 　まったく同じものとして定義されています。 　　特に、locationオブジェクトと Linkオブジェクトでは、それらのプロパテ 　ィに多くの共通点を見ることができます。locationオブジェクトに定義され 　ていないものは、targetプロパティだけで、後はすべて同じもので構成されて 　います。 　　２つオブジェクトの使い分けは、特に意識することなく同じ目的で利用する 　ことが可能です。 　■ historyオブジェクトの注意点 　ブラウザの履歴を使う historyオブジェクトを利用するに当たって、特に注意 　しなくてはならない点があります。 　　例えば、検索サーチから訪れた閲覧者に対して historyオブジェクトを使っ 　た場合、閲覧者の履歴で動作することになりますので、意図しないページに移 　動することになります。その意味では、あまりお勧めできないオブジェクトで 　あるといえるでしょう。 □□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□ ◆インターネット用語解説 --- SSL (Secure Socket Layer) 　オンラインショッピングなどで買い物をするとき、個人情報を入力する画面で 　は、そのほとんどで SSLを利用しているサイトがあります。これは一体、何を 　意味しているのでしょうか？ 　■ SSLとは 　インターネット草明期には、交換される情報 (電子メールを含め) に暗号化な 　どの手段がなく、第三者に見られるという不具合がありました。そのため、情 　報の機密性を高める暗号化という要求が高まり SSLが登場しました。 　SSLは、Netscape Communications社が最初に開発し、同社の Webブラウザに搭 　載された HTTP上の暗号プロトコル (通信手順) でした。 　　現在では、ほとんどのブラウザやメーラーに標準で装備されています。 　■ SSLの仕組み 　ごく簡単にネットワークについて解説します。詳しく解説すると１年分のメー 　ルマガジンでは足りません。本当にごく入り口について述べます。 　Webで利用する通信プロトコル (通信手順：通信するための規則) は TCP/IPと 　いわれる代表的なプロトコルが使われます。TCP/IPのIPは、ネットワーク層と 　いう階層のプロトコルで TCPはその上のトランスポート層のプロトコルという 　レイヤー (層状) で成り立っています。 　　ネットワーク層は第一層から第四層までの下位層 (Lower layers) で区切ら 　れ、主に電気的なシステム間通信を制御するプロトコルです。 　　一方、下位層のアプリケーション層と呼ばれる上位層 (Upper layers) は、 　人間に近い言語で示されています。これら全体を OSI参照モデルと呼びます。 　　OSI参照モデルは以下の層で構成されています。 　　　　　　　　　　┏━ アプリケーション層 　　　IP　上位層　━╋━ プレゼンテーション層 　　　　　　　　　　┗━ セッション層 　　　TCP 下位層　━┳━ トランスポート層 　　　　　　　　　　┗━ ネットワーク層 　　TCP/IPでは、HTTP、FTP、SMTP、POPなど実にさまざまな通信プロトコルをサ 　ポートしています。現在では世界標準といわれるほどのネットワークにおける 　プロトコルになっています。 　　SSLは TCP/IPの中で実装されているセキュリティ通信で HTTPSというプロト 　コルによって実現しています。具体的には、以下のレイヤーの関係になってい 　ます。 　　　　　　　TCP/IP (OSI参照モデル)　　　SSLプロトコル (HTTPS) 　　　　　 --------------------------------------------------- 　　　　　　アプリケーション層　　 →　　　HTML 　　　　　　プレゼンテーション層　 →　　　HTML 　　　　　　セッション層　　　　　 →　　　SSL 　　　　　　トランスポート層　　　 →　　　TCP 　　　　　　ネットワーク層　　　　 →　　　IP 　■ SSLは何故安全なのか？ 　最新の SSLでは、伝送される情報暗号化、認証機能、データ完全性の機能の３ 　つで成立しています。以下は、SSLにおける情報の流れです。 　　最初は、クライアント (ユーザ) が使用可能な暗号の種類をサーバに送信し 　ます。サーバは両者が使える最強の共通鍵暗号を選択します。 　　サーバは証明書と、サーバの署名をクライアントに送信して、サーバの「な 　りすまし」を防ぐことになります。 　　クライアントは、共有鍵を生成しサーバの公開鍵で暗号化してサーバに送り 　暗号化通信の開始を行います。 　証明書 　　証明書とは、本人であることを照明するための認証に用いられるもので、例 　　えば、免許証とか住民票などに当たるものです。 　　証明書にはその証明書の所有者の情報、例えば e-mail アドレスや、名前や 　　証明書の使用目的、有効期間、情報の場所、または通常名(Common Name, CN) 　　を含む識別名(Distinguish Name, DN) （web サイトのアドレスや e-mail 　　アドレスは用法に依存します）、そしてこの情報に保証を与えた（つまり署 　　名した）人物の証明書 ID が含まれています。 　　　さらに、証明書はその公開鍵を含み、最後に、その証明書全体が改竄され 　　ていないことを保証するためのハッシュ値を含んでいます。 　暗号化 　　暗号化を行うアルゴリズムには、さまざまな手法が考えられます。暗号化ア 　　ルゴリズムの決められた規則にしたがって、第三者に見られなくしたりデー 　　タの改竄を阻止します。 　　　暗号化されたデータの復号化には暗号表に当たる「鍵」を使いますが、必 　　ず対になる２つの鍵を使う公開鍵暗号と、どちらにも同じ鍵を用いる秘密鍵 　　暗号があります。前者にはRSA、ElGamal暗号、楕円曲線暗号などがあり、後 　　者にはアメリカ政府標準のDESや、IDEA、FEAL、MISTYなどがあります。 　ハッシュ値 　　ハッシュ値）とはハッシュ関数によってメッセージから作られたある数字の 　　ことを表します。これは一方通行関数とも呼ばれるもので、そのハッシュか 　　ら元のメッセージを得ることが不可能であることを意味しています。 　　　しかし、ハッシュは元のメッセージがほんの少し変更されても劇的に変化 　　します。したがって、ハッシュ値を変えないままメッセージを変形すること 　　は非常に困難になっています。 　　　ハッシュ関数はパスワード方式の仕組みや、アプリケーションがオリジナ 　　ルであることを保証するためや、一般的にはメッセージが改竄されていない 　　ことを確証するために使われます。 　秘密鍵と公開鍵 　秘密鍵、あるいは公開鍵の鍵ペアを用いる暗号化は、データが一方の鍵で暗号 　化されると、その対である他方の鍵でしか復号できない、ということを保証し 　ます。つまり、一方の鍵が暗号化すると、その対の鍵で復号化できる仕組みと 　なっています。 　　この鍵対は素数の性質に基づいていて、それらのビット長が対の鍵なしにメ 　ッセージを復号する困難さを保証します。 　■ SSLの安全性 　必ずしも SSLが完全というわけではありません。確かに暗号化はより高度で複 　雑になりましたが、第三者がそれを解く鍵を持っていれば、セキュリティは確 　保することができません。（滅多にないが、絶対ないわけではない） 　　鍵の種類は有限ですから、１つずつ確かめていけばいつかは開錠できるわけ 　です。しかしながら、１つずつ確かめる時間を長くする（例えば１年とか10年 　とかという長時間）することで、ある程度のセキュリティを保つことができま 　す。 　　オンラインショッピングで、クレジットカードなどを入力する際に、こうし 　た SSLを実装していないサイトならば、買い物はやめたほうが安全です。 　　一般的に SSLを実装した場合、その URL は、https:// と表示されます。 　また、ブラウザ画面の右下には「鍵マーク」が施錠されているアイコンを表示 　します。 　　Webサイトで SSLを実装するためには、それなりに経済的負担がかかります。 　オープン SSL というフリー版もありますが、最近ではセキュリティホールが 　発見され、その脆弱性が問われています。 □□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□ 今回はここまで。 　「今週のおさらい」は未完です。先週の分を含めて何も手がつけられない状態 　です。まことに申し訳ありません。私の宿題としてください。 　　次回は 5月28日 (２週間後) に配信を予定しています。来週は「出張」する 　関係で、お休みさせていただきます。 □□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□ ◆質問・ご意見ははこちらまで→　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://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/ □□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□ 初心者のためのホームページ作り_92.txt100666 0 0 46623 10064311552 15704 　　　　　　　　　　　　　　　　 毎週金曜日配信　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属性の値に、画像の代替となる簡単な説明文を設定します。 　　ばんばん株式会社 　　代替テキストは、画像を的確に説明した文章を簡潔に述べるようにします。 　簡単そうに思うのですが、それなりに難しいものです。つまり、画像を表示さ 　せない環境で、その代替テキストだけで内容を伝えるのは簡単ではありません。 　　言い換えれば、画像に頼ったコンテンツでは、すべての閲覧者に内容を伝え 　ることが困難であるといえるでしょう。 　　画像の表示は魅力的に思えますが、画像がなくても的確に情報を伝えられる 　文章力をつけるようにしましょう。その上で、補足的に画像を利用する手法が 　スマートで、誰にでも理解を得ることができます。 　　最近はノートパソコンの利用者が増え、モバイルを楽しんでいます。しかし 　ながら、その通信環境は決して早いものではありません。わたしも携帯電話を 　利用してノートパソコンで Webページを閲覧することがありますが、その際に 　は、利用するブラウザで画像表示を「オフ」にしています。 　　特に画像を利用したナビゲーション（イマージマップ）では、画像が表示さ 　れなくても、代替テキストでナビゲーションできるようにすることは、ある意 　味では、制作者の義務ともいえるのではないでしょうか。 □□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□ ◆Tips　画像のサイズを明記する 　画像を表示する際、あらかじめ画像サイズを明示しておくと、体感的に早くレ 　ンダリングされます。 　　これは、あらかじめ画像を表示する領域を確保できるため、ブラウザが計算 　する必要がないからです。その意味でも width、height属性で画像サイズをし 　っかりと明記するようにしましょう。 　○　ばんばん株式会社 　×　ばんばん株式会社 　　なお、明記するサイズはピクセル単位となっています。 ◆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/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/ □□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
情報バリアフリー・アーキテクチャー
課題意味
文字特殊な文字や機種依存文字を使わない