Web標準Blogでは、Web標準の利用に興味のあるWebサイト管理者、Webデザイナーの方向けに、Web標準を利用するための手法やノウハウ、参考になるリソース等を、国内外を問わずご紹介します。
なお当Blogでは、Web標準に関する疑問や質問を募集しています。Webコンテンツ実装プロセスにまつわるお悩みでも結構ですので、お気軽に電子メールでstandards@mitsue.co.jp宛にお送りください。
2005年04月28日
論理マークアップと物理マークアップ
論理マークアップと物理マークアップという言葉があります。Web標準とSEOにおいて、文書の構造に即してタグ付けを行う
ことをお勧めしましたが、その手法は論理的なマークアップ、すなわち論理マークアップと呼ばれているようです。
そうではなく、文書の見栄えを目的としてタグ付けを行う手法があり、こちらは物理マークアップと呼ばれることがあります。そもそもマークアップ言語は、文書の見栄えではなく構造を記述するためのものですが、例えば以下のような要素が存在します。
- center
- 中央寄せのレンダリング
- b
- ボールド体でのレンダリング
- i
- イタリック体でのレンダリング
- strike（またはs）
- 取り消し線を引いてレンダリング
- u
- 下線を引いてレンダリング
これらはいずれも、文書の構造的意味をあらわさず、ただ単に見栄えを指定しているに過ぎません。見栄えはCSSで制御できますから、上に例示した要素についてはHTML4.01やXHTML1.0ですとcenter要素が非推奨、ほかの要素についてもCSSによる表現が推奨されています。
Web標準に準拠するうえでは、物理マークアップを避け、論理的なマークアップを心がけることが重要です。論理マークアップは、SEOやWebアクセシビリティ確保の観点でもメリットがあります。
コメント [2件] | 関連情報（トラックバック） [1件]
2005年04月26日
Web標準とSEO
検索エンジン最適化（SEO:Search Engine Optimization）の重要性というのは、改めて書くまでも無いことでしょう。今や多くの人々にとって、検索サービスは情報を捜し求める主要な手段となっています。的確にユーザーを自サイトに誘導するうえで、SEOは非常に有効と考えられていますが、Web標準はSEOを実施するうえでも役に立つツールです。
Web標準の考え方に基づき、文書の構造と表現をできるだけ分けて扱い、前者を(X)HTML、後者をCSSで実装するようにし、また(X)HTMLコーディングにおいては論理的なマークアップを心がけ、構造に即してタグ付けを行うようにしたとします。そうすると、文書のタイトルや見出し、強調箇所などを機械的に抽出することが可能になります。
一般的な検索サービスにおいては、言葉の重み付けに(X)HTMLソースのタグを利用しているとされていますから、論理的なマークアップによって、文書内のコンテンツにおいて特に重要な内容を適切に読み取らせることが可能になるわけです。
コメント [0件] | 関連情報（トラックバック） [0件]
2005年04月22日
印刷用スタイル
CSSとメディアタイプにおいて、ミツエーリンクスのサイトでは多くのページでscreenのほかにprintメディア向けにスタイルを用意
していることをご紹介しました。printメディアに対応した閲覧環境であれば、印刷用スタイルを解釈し、意図した見栄えでもって出力することが期待できます。印刷用スタイルを作成するうえでのポイントは、いくつかあります。
まず最初に、ページ上に存在する個々の情報について、印刷すべきかどうか（printメディアに対して表示させるべきか否か）という判断が必要になります。画面上では機能しても、紙に出力した状態ではリンクとして機能しないナビゲーションの類などは、displayプロパティを使用して出力させないようにすることができます。
次に、テキストの大きさや色。印刷を前提としたときに適当な文字サイズに変更したり、あるいはモノクロプリンタで出力されることを想定し、十分な可読性を確保できるような配色にする必要があります。リンクが設定された文字列については特に、リンクの存在を紙面でどう伝えるかを検討すべきでしょう。望むなら、contentプロパティに対応しているブラウザに対しリンク先のURIを出力させることもできます。
コメント [0件] | 関連情報（トラックバック） [0件]
2005年04月19日
CSSとメディアタイプ
多様な閲覧環境への対応として、コンテンツにある構造と表現をできるだけ別々に扱うようにし、前者は文書の構造に即した適切なマークアップ、後者はCSSでもって実装すること
の必要性をご紹介しました。
CSSの特徴のひとつに、異なるメディアに対して文書の表現方法を指定できるという点が挙げられます。たとえば、単一の文書に対して、視覚表現と音声表現を個々に指定することができます。CSS2の仕様書には、以下のようなメディアタイプとその対象デバイスが紹介されています。
- all
- 全てのデバイス
- screen
- カラー・コンピュータ・スクリーン
- ページ形式の不透明な物質への出力、あるいは印刷プレビュー・モードで見る文書
- projection
- プレゼンテーションにおける表現
- handheld
- 携帯デバイス
- tv
- テレビ型デバイス
- tty
- 固定幅の文字グリッドを用いたメディア
- braille
- 点字の触覚をフィードバックするデバイス
- embossed
- 点字のページを出力するプリンタ
- aural
- 音声合成機器
コメント [0件] | 関連情報（トラックバック） [0件]
2005年04月19日
メンテナンスのご案内
弊社Blogサービスの増強に伴い、4月22日（金）の18時から同日21時にかけて、Web標準Blogのコンテンツ公開を一時的に停止し、メンテナンスを実施いたします。
メンテナンス中にコンテンツを閲覧しようとした場合、ブラウザー上にエラーが表示され、アクセスができないほか、上記時間帯はトラックバックの受信もできなくなります。
大変ご迷惑をお掛け致しますが、何卒ご理解頂きますよう、お願い申し上げます。
コメント [0件] | 関連情報（トラックバック） [0件]
2005年04月15日
多様な閲覧環境への対応
CSSを活用することで、多様なソフトウェアやデバイスに対し等価な情報を伝達できるということを、テーブルレイアウトについて触れた中で述べました。Webはその黎明期において、もっぱらPCの画面上で閲覧することが主流でしたが、今日ではそれ以外にも
- 携帯
- テレビ
- PDA
- 音声ブラウザ
- スクリーンリーダ
- キオスク端末
などを用いてアクセスする場合があります。
コメント [2件] | 関連情報（トラックバック） [0件]
2005年04月12日
テーブルレイアウト
前回、ハイブリッド実装について書いた中で、table要素についてレイアウト目的に利用することは好ましくありません
と書きました。しかし現実には、これは広く利用されている実装手法で、俗にテーブルレイアウトと呼ばれます。
テーブルレイアウトでは、セル間隔とセル内余白を0ピクセルにしたテーブルと、スペーサーGIFと呼ばれる1ピクセル四方の透明な画像を用い、画像や文章などの情報を意図した場所へレイアウトするのが一般的です。
ちなみにセル間隔とセル内余白を0にしておくのは、ブラウザがデフォルトで適用するそれらの値が、ブラウザの種類やバージョンによって異なっても確実にピクセル単位でレイアウトできるようにするためです。
コメント [2件] | 関連情報（トラックバック） [0件]
2005年04月08日
ハイブリッド実装
文法チェックに便利なツールにおいて、「ハイブリット型」についての質問をいただきました。この言葉はおそらく、ハイブリッドレイアウト、またはハイブリッド実装と呼ばれる手法と同義と思われますので、以後は「ハイブリッド実装」と表記します。
ハイブリッド実装とは、Webコンテンツの実装において見栄えの制御を完全にCSSで行う（＝フルCSS実装）のではなく、その一部をtable要素を使って行うというものです。ただし、そのような（レイアウト目的の）table要素を無闇に使って良いわけではなく、コンテンツの読み上げ順序に配慮し、また複数のtable要素が複雑な入れ子にならないよう注意することが求められます。大まかなレイアウトにのみtable要素を用い、それ以外の見栄えはCSSで指定するのが一般的のようです。
上記の配慮は、主にアクセシビリティを確保するという理由から求められますが、そもそもtable要素は本来、その名のとおり表を記述するために用意されたものであり、レイアウト目的に利用することは好ましくありません。
しかしJeffrey Zeldman氏は著書「Designing with Web Standards」のなかで、このハイブリッド実装を、フルCSS実装の採用に至るまでの過渡的な手法として、その有効性を論じています。CSSを一切使わず、見栄えの制御もすべて一緒くたにHTMLで記述し続けるよりは、段階的にであってもWeb標準の考え方を取り入れることが重要であり、その過程においてハイブリッド実装を採用することは理にかなっている、といえます。
コメント [0件] | 関連情報（トラックバック） [0件]
2005年04月05日
文法チェックに便利なツール
Web標準とWebアクセシビリティにおいて、文法チェックのツールとその特性に関する質問をいただきました。そこで今回は、Web制作の現場で文法チェックによく利用される、便利なツールをいくつかご紹介します。
- W3C Validator
- その名のとおり、W3Cの提供する文法チェックツールです。HTMLまたはXHTMLの文法に照らしその妥当性をチェックします。URLの指定もしくはソースファイルのアップロードでチェック対象を指定。ソースは公開されており、ローカル環境で動作させることも可能です。
- CSS Validator
- やはりW3C提供の文法チェックツールですが、こちらはCSSを検証します。URLの指定もしくはソースファイルのアップロード、あるいはテキストエリアにソースを直接入力して検証します。やはりソースは公開されていて、ローカル環境で動作させることができます。
- HTML VALIDATOR (based on Tidy)
- FirefoxあるいはMozillaブラウザの拡張機能。インストールすると、閲覧中のWebページの(X)HTMLソースが文法的に妥当か否かを教えてくれます。エラーや警告の数も同時に表示可能で、ソースを表示させると具体的なエラーもしくは警告の内容を表示、該当行にアクセスすることも容易にできます。もともとはW3Cで開発され、現在は有志に開発が引き継がれているTidyを基にしています。
- Another HTML-lint
- 石野恵一郎氏が開発したHTML文法チェッカ。特徴は、単に文法的な観点のみならず、実装上好ましくないとされる点についてもチェックし、またその結果を点数で表示すること。機械的に判別、算出されるものですし、100点満点が取れればそれで全ての問題点が解決されたことを意味するわけではありませんが、チェック結果は大いに参考になります。ゲートウェイサービスでURLの指定もしくはソースファイルのアップロード、あるいはテキストエリアにソースを直接入力して検証できるほか、Perlの実行環境があればローカル環境で動作させることができます。
ご紹介した以外にも、多くの文法チェックツールが存在しています。是非いちど、お作りになった(X)HTMLソースの妥当性を検証してみてください。
コメント [3件] | 関連情報（トラックバック） [0件]
2005年04月01日
Web標準とWebアクセシビリティ
Web標準に準拠することで、Webアクセシビリティを確保することができます。たとえば、Webページに画像を表示させるときのことを考えてみましょう。
画像をimg要素を使ってマークアップする場合、画像を見ることができない人や環境に配慮し、HTML4.01やXHTML1.0ではその代替テキストをalt属性を用いて指定することが必須とされています。
Web標準に準拠するということは、利用する仕様により忠実に、文法的に妥当なソースを記述するということでもあります。ですので、おのずとalt属性を記述することになり、つまり一定のアクセシビリティを確保することにもなるわけです（もちろん、代替テキストの内容が適切であることが必要ですが）。
コメント [2件] | 関連情報（トラックバック） [1件]
