Home | 第79号 | 第80号 | 第81号 | 目次

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

Web作成支援

メールマガジン「初心者のためのホームページ作り」でお伝えした内容を、「復習」の意味で掲載しています。テキストのみのマガジンと違って、実際のサンプルや画像を交えて解説していますので、理解が深まると思います。なお、疑問点や分からない点がありましたら、遠慮なく メールにてご質問ください。

＜第80号＞ 今週のおさらい
　　　　　　　　　　　　　　　　 　  毎週金曜日配信　What's New 2004/1/9
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
　　　■ HTML講座  第24回 --- HTML基本データ形式
　　　■ CSS講座　第１回 --- スタイルシートとは？
◆ HTML講座 --- 基本データ形式
正しいHTML文書を作成する上で、最低限知らなければならない約束事が「基本データ形式」です。要素や属性、あるいはコンテンツを構成する文字列（テキスト）を記述するための、ややこしい決まり事があることを覚えてください。
■ 文字種情報
ここでの文字種情報とは、要素の属性値として記述する文字、あるいはコンテンツとして記述する文字の種別に関する基本的な規則を指します。
URI(URL) は、CS に分類され、大文字と小文字を区別します。要素名や属性名、スタイルシートなどは CI に分類され、大文字と小文字の影響を受けません。
「名前」は、基本的に大文字と小文字を区別する CA に分類されます。IDREFなども同様です。
PageTop
■ 実体参照を含む文字
実体参照 を含む文字列は、以下のように区別して扱われます。
#PCDATA は、SGML的に解釈される文字種で、実体参照を含む場合は、実体参照符号 に置き換えなければなりません。CDATA は、そのまま読み書くできるごく普通の文字種で、実体参照もそのまま記述することができます。
CGIなどのURIに含まれる実体参照は、特にその扱いには気をつけてください。
PageTop
■ NAME、ID
属性の値として「名前」を指定する場合、その名前開始文字はアルファベットの大文字、あるいは小文字に限定されています。数値やハイフンなどの記号は使えません。
ID は、id属性で利用される属性値で、扱いは基本的に NAME と同じです。
PageTop
■ IDREF、IDREFS
IDREF とは、参照される ID を意味し、アンカーなどで定義することができます。大文字と小文字を厳格に区別するので、その扱いに気をつけてください。
IDREFS は、IDREF の複数形で、IDREF をカンマで区切って記述した形を指します。扱いは、IDREF とまったく同じです。
PageTop
■ MIMEタイプ
ユーザエージェントが受け取ったデータを解釈するための情報で、コンテンツ・タイプとも呼ばれるもの。受け取ったデータを正しく処理するためには、文書別の MIMEタイプを明示しておくほうが、安全であるといわれています。
代表的な MIMEタイプ一覧
MIMEタイプ  内容 拡張子
text/htmlHTML文書html
text/cssCSSスタイルシート文書css
text/javascriptJavaScript文書js
audio/midMIDI音声midi
audio/mp3MP3音声mp3
image/gifGIF画像gif
image/jpegJPEG画像jpg
video/mpegMPEG動画mpg
PageTop
■ 言語コード
W3C では、アクセシビリティの一環として、WCAG 2.0 の中で、提供されるコンテンツが何語で記述されているのか、ユーザエージェントが正しく理解できるようにしなければならない、と示しています。
言語コードは、文書中で示されるコンテンツの国別の言語を明示するときに用います。主体となるコンテンツには、そうした言語コードを明示するように心がけましょう。
以下は、主だった国別の言語コードの一覧です。
言語コード言語 言語コード言語
enEnglish：英語 jaJapanese：日本語
frFrench：フランス語 zhChinese：中国語
deGerman：ドイツ語 ruRussian：ロシア語
itItalian：イタリア語 arArabic：アラビア語
esSpanish：スペイン語 heHebrew：ヘブライ語
PageTop
■ 文字化符号
紙の上に各文字と違って、コンピュータ上で記述する文字には、コンピュータが解釈可能な文字符合があります。代表的な WindowsOS の文字符号には「Shift_Jis」が使われていますが、UNIX系など他のコンピュータでは異なる符合が使われます。
また、Windows上であっても、利用するソフトウェアによっては、必ずしも「Shift_Jis」とは限りません。それぞれ、ソフトウェア上の固有の文字符号が使われることが一般的です。
Web作成の文字化符号は、IANA (Internet Assigned Number Authority) で登録されたものだけが利用可能となっています。
日本語の文字化符号としては現在、以下の３つの符号が登録されています。
PageTop
■ リンク形式
ハイパーテキストとしてのリンク形式は以下のとおりです。なお、大文字と小文字の区別はしません。一般的な視覚系ブラウザはサポートしているリンク形式は極めて少ないのが特徴的です。
値値の機能
altemateリンクがある文書の代替バージョン
stylesheet外部スタイルシート
start指定する文書が最初の文書であることを示す
next指定する文書が次の文書であることを示す
prev指定する文書が前の文書であることを示す
contents指定する文書が全体の目次であることを示す
index指定する文書が索引であることを示す
glossary指定する文書が用語解説であることを示す
copyright著作権に関する部分の記述
chapterひとまとまりの文書中で、「章」にあたる文書
sectionひとまとまりの文書中で、「節」にあたる文書
subsectionひとまとまりの文書中で、「項」にあたる文書
appendixひとまとまりの文書中で、「付録」にあたる文書
helpヘルプのある文書
PageTop
■ 色
HTMLでは、1677万色以上の色を指定することが可能です。ただし、HTMLの要素の属性で直接色を指定するのは、非推奨となっていますので、スタイルシートを利用しましょう。
色は、RGBの光の３原色によって構成し、それぞれ16進数２桁の数値で決定します。（スタイルシートでは、１桁で指定することも可能）
文字色や背景色を指定する場合には、できるだけ同時に行ってください。閲覧者の環境で文字色や背景色を個別に設定している場合があり、制作者の文字色と、閲覧者の背景色が同色の場合には、テキストを読むことができなくなります。その点を十分考慮する必要があります。
色の指定は、16進数によるものと、直接色名を指定することが可能ですが、多くの環境で利用できる色名は基本的に16色しかありません。それ以外の色名を指定した場合、閲覧者の環境によっては無視される危険があります。
色名指定による16色（実際に色名で指定しています。）
Black #000000 Green #008000
Silver #C0C0C0 Lime #00FF00
Gray #808080 Olive #808000
White #FFFFFF Yellow #FFFF00
Maroon #800000 Navy #000080
Red #FF0000 Blue #0000FF
Purple #800080 Teal #008080
Fuchsia #FF00FF Aqua #00FFFF
なお、制作者の環境で作成した色が、必ずしも閲覧者の環境と同じ色に発色するわけではありません。色の再現は、それぞれの環境で微妙に異なることを知ってください。
PageTop
■ 長さ
HTMLでは、属性値としての長さ（高さも含める）の形式には次の３つの形式があります。当然ながら長さの値は数値となるため、大文字と小文字には無関係にあります。
PageTop
■ URI (URL)
属性値で指定する特定の文書の場所を表わす URI（Uniform Resource Identifier）は、大文字と小文字の区別を厳格に行います。「a」と「A」は異なるものとします。
なお、URL (Uniform Resource Locator) は、現在では非公式な表現として扱われ、URI とするように求められています。厳密には、URL は、URI のサブセットとして位置付けられています。
PageTop
■ 要素タイプ
HTMLを構成する要素型には、以下の３つのタイプに分かれます。
要素タイプには、終了タグを持たない 空要素（Empty Element） と呼ばれるものがあります。XHTMLでは、そうした空要素には行末に半角スペースの後にスラッシュ「/」を記述しなければなりません。
HTMLでは、終了タグを省略することが可能な要素タイプがあります。例えば、p要素 では、終了タグを省略した場合、この要素型にはブロックレベル要素を配置することができないため、次に登場するブロックレベル要素の前で </p> が自動的に補完されます。
HTMLでは、html、headl、body などの要素は、開始タグさえも省略可能です。
しかし、このように終了タグを省略することが可能であっても、制作者がメンテナンスを行う場合、文書の構造が読み取りにくい場合があり、なるべくなら、終了タグを省略することのないよう習慣づけることをお勧めします。
なお、XHTMLでは、終了タグの省略は一切認められておりません。
PageTop
◆ CSS講座 --- スタイルシート
Webページのプレゼンテーション（表現の見栄え）を引き受けるスタイルシートの役目は、HTMLの文書を構造にのみ徹するという、本来のマークアップに求められた機能をさらに飛躍させるものです。
HTMLは、SGML のサブセットとして位置付けられており、基本的には SGMLの精神を色濃く踏襲しています。SGMLは、
  1. マークアップは物理的なレイアウトではなく、文書の論理的な構造を反映したものでなければならない。
  2. マークアップはコンピューターと人間の両方が理解可能な形式でなければならない。
とされています。つまり、HTMLの要素や属性から、「見栄え」を分離することが強く求められているのです。
■ スタイルシートとは
HTMLで利用するスタイルシート（Cascading Style Sheet:CSS）とは、どのような機能を持っているのか簡単に説明します。
以下は、マイクロソフト社の Word2000 のメニューバーの一部です。

Windows版 Word2000のメニューバーの図

このワープロ・ソフトでは、文字の大きさや書体、色、太字、イタリック体などがご覧のアイコンをクリックするだけで簡単に再現することができます。枠線やその太さ、図形処理まで行える非常に優れた機能を有しています。
ワープロ文書で表現する様々な処理は、そのソフトウェアが持っている固有のスタイルで実現しています。こうした考え方を取り入れたのがカスケーディング・スタイルシート、つまり CSSスタイルシートです。
SGMLでは、DSSSL（Document Style Semantics and Specification Language）と呼ばれるスタイルシートについての仕様があります。DSSSLは最近になって SGMLの国際規格として確立されたのですが、人間にとって理解するのが非常に難しいものとなっています。ということは、HTMLの原則である「人間とコンピューターの両者にとって読みやすく理解しやすい」という理念に反するわけです。
このため、W3Cではこれに代わるスタイルシートの実現のアイデアとして、CSSと呼ばれるものが提案されたのです。CSSフォーマットは人間にとって理解しやすく、HTML制作者のことを考えて設計されたものです。
HTMLでは、ワープロ・ソフトのようにボタンを配置することはできませんが、制作者側であらかじめ、要素内容に対して、独自のスタイルを設定することができます。大きさや色、余白、枠線などの表示処理という実に多くの機能を持っており、Webページを鮮やかに彩ることができるようになっています。
PageTop
■ スタイルシートの再現は Webブラウザ依存
HTML文書を解釈するのは、HTTPというプロトコル（通信手順）を利用するソフトウェア（ユーザエージェントと呼ぶ）の代表格である Webブラウザです。
Webブラウザが、Webサーバ（HTTPサーバ）にアクセスし、要求するデータを受け取って、初めてその画面にレンダリング（描画）します。スタイルシートも同様です。
その時、Webブラウザがスタイルシートを解釈できない場合（実際にはスタイルシートを実装していない場合）、作者のスタイルシートは無視されます。つまり、ユーザの利用するブラウザのスタイルシート実装に依存する結果となるわけです。
作者が丹精こめて作成した Webページとスタイルシートが、ユーザ環境によって再現されない場合、どのような結果となるでしょうか？
作者のスタイルシートが再現されなくても、しっかりした構造を持って作成された HTML文書はまったく傷つくことなく、ユーザのブラウザでレンダリングされます。つまり、作者の提供する有用な情報を確実に受信ことができるのです。
つまり、スタイルシートとは、HTMLの文書構造から見栄えを分離すること に意味があるのです。
作者は、スタイルシートがなくても相手に情報が伝わるようなコーディングをすることが大切です。正しく意味付けされた HTML文書であるならば、スタイルシートが再現されなくても、ユーザは困ることは何一つないのですから。
スタイルシートは、正確に構造化された HTML文書上ではじめてその威力を発揮するものです。そういった観点に立てば、スタイルシートがユーザのブラウザ依存であったとしても、何も問題になることはありません。
この CSS講座は、正しいマークアップを中心にして深く広く詳細に解説していきます。
This page is Valid HTML 4.01! 初版更新日 2004/1/9
Copyright（C） 2002-2004 banban@scollabo.com