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

Web作成支援

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

プレーンテキスト版バックナンバー

<第57号> 今週のおさらい
                    毎週金曜日配信 What's New 2003/7/4
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
   ■ HTML講座  第6回 --- プレゼンテーション(見栄え)
   ■ XHTML講座 第18回 --- コンテンツの配置 その3

HTML講座 --- プレゼンテーション(見栄え)

ページにアクセントをつけて豊かに表現しようとする「見栄え」は、制作者なら誰もが考えていることでしょう。ページを彩るレイアウトデザインは、ホームページ作りにおける関心事でもあります。

HTML4.01 Strict では、見栄えを設定するタグや属性を使用することができません。あくまで、文書構造からプレゼンテーションを分離しなければならないのです。

その最大の理由は、Web上にあるリソースとしてのHTML文書は、世界中の誰もが自由にアクセスすることを前提としており、そこには少なくない「身体障害者」もいるのです。

その障害者たちが利用している非視覚系ブラウザでは、見栄えをサポートしておりません。音声や点字などに変換してレンダリングします。

また、色弱障害を持った人には、時として作者が設定する色を判断することができず、情報から阻害されてしまいます。

プレゼンテーションをHTMLから分離する利点

HTMLからプレゼンテーションを分離すると、HTML構文が非常にシンプルで誰が見ても理解しやすくなり、後々のメンテナンスが容易になります。

何よりも、文書構造が明確になりあらゆる層の、あらゆるプラットフォームに適用し、たった1つの文書で多方面に通用できます。つまり、ユーザの環境を意識することなく、自由で独創的なHTMLと見栄えを構築することが可能です。

プレゼンテーションを分離するためのスタイルシート

スタイルシート(Cascading Style Sheet: CSS)は、非常にユニークなプレゼンテーション作成記述のためのフォーマットです。

今、皆さんが見ているこのページもスタイルシートを利用して、色や文字の大きさ、枠線、位置指定などを指示しています。

スタイルシートの始まりは 1996年に W3Cより正式に勧告されて以来、非常に多くの Web制作者たちに取り上げられています。

スタイルシートという機能は、元々DTPソフトや、ワープロソフトなどで採用され、簡単に文字の大きさや字体、色や枠線、位置などを設定する場合に、ボタンひとつで利用されています。

Webページに大量のドキュメント・フォーマットを流し込むのには不適切です。そこで、制作者が自由にアレンジできる CSS という機能を盛り込んだスタイルシートが発案され、現在のところ、CSS Level 1、Level 2 が勧告されています。

詳しくはこちら CSS: スタイルシート

次回の講座では、実践的なスタイルシートの利用法について解説します。

XHTML1.1講座 --- コンテンツの配置 その3

今回は、コンテンツの見え方を設定するスタイルシートを説明します。見え方とは位置は関係ないように思えますが、実際に各要素の見え方を変化させることで、コンテンツの配置そのものにも大きな変化を及ぼします。

display属性の利用

スタイルシートにおける display属性は、要素の見え方や非表示にさせることが設定可能です。非表示にしてしまう理由はあまりないと思いますが、要素の見え方は興味のあるところです。

display属性の値と機能一覧

機能
block インラインレベル要素をブロックレベルのような見え方にする
inline ブロックレベル要素をインラインレベル要素の見え方にする
none 指定した要素を非表示にする(領域も確保されない)

誤解してはいけないのが、ブロックレベル要素がインライン要素になったりするわけではありません。あくまで見え方の設定ですので、文書構造の書き方には注意してください。

display属性のサンプル (詳しい XHTML構文は今週のメールマガジン「第57号」をお読みください。)



Valid XHTML 1.1! Copyright(C) 2002-2003 初心者のためのホームページ作り臨時制作委員会 wfb-org@jcom.home.ne.jp