Web標準Blogでは、Web標準の利用に興味のあるWebサイト管理者、Webデザイナーの方向けに、Web標準を利用するための手法やノウハウ、参考になるリソース等を、国内外を問わずご紹介します。
なお当Blogでは、Web標準に関する疑問や質問を募集しています。Webコンテンツ実装プロセスにまつわるお悩みでも結構ですので、お気軽に電子メールでstandards@mitsue.co.jp宛にお送りください。
2005年06月28日
ズームレイアウト
アクセシビリティのコンサルティングや研究、著書等で知られるJoe Clark氏は、今月ロンドンで開かれたWeb標準関連イベント「@media 2005」において、「Zoom the Web: The problem of giant fonts」と題した講演を行っています。そのなかで彼は、ズームレイアウト（zoom layout）と呼ぶ新たなデザイン手法を提案しました。
文書の意味構造に即したマークアップとCSSによる見栄えの実装により、全盲の人々が音声読み上げソフトの類を使いWebコンテンツを利用しやすくなるのは周知の事実でしょう。しかし、弱視の人々はそういったソフトを使わず、代わりに画面の一部を拡大するソフトを利用しているケースが多くあります。ズームレイアウトは、まさにそういった人々にも利用しやすいデザインを提供するためのものです。
たとえば段組を廃止し、文字サイズを大きくし、構成をより単純化するといったことが、ズームレイアウトを実現する具体的手法であり、そのような指定を行った代替スタイルの提供が提案されています。と同時に、前景色と背景色の組み合わせで、全体的に明るい組み合わせと暗い組み合わせのどちらを好むかが人それぞれであり、どう対応するかが難しいといった問題提起もなされています。
コメント [0件] | 関連情報（トラックバック） [0件]
2005年06月24日
Web標準デザインテクニック即戦ワークブック
弊社監修の書籍「Web標準デザインテクニック即戦ワークブック～XHTML+CSSを正しく賢く書くための15問」が、近く毎日コミュニケーションズより発売となります。同書は、海外で好評を博しているDan Cederholm著「Web Standards Solutions」の翻訳書です。
Dan氏の営むWebサイト「SimpleBits」のBlogには、「SimpleQuiz」という名前のカテゴリがあります。ごく簡単なソースを例示して、マークアップに関するクイズを出題したところ、多くの回答がコメントとして寄せられるようになり、人気となりました。「Web Standards Solutions」は、そのSimpleQuizにヒントを得て書き起こされた本であり、そのスタイルが踏襲されています。
ある視覚表現をWeb上に実装する場合、マークアップの手法や、CSSの書き方はさまざまに考えられます。どのような方法がベストかを論理的に導くためには、Web標準のもたらす利点や、その考え方を理解する必要があります。本書は、シンプルな例題を通じてそれらを会得することのできる良書ではないかと思います。
是非いちど、お手に取ってご覧ください。
コメント [0件] | 関連情報（トラックバック） [0件]
2005年06月21日
NetscapeとOperaがバージョンアップ
WebブラウザのNetscapeとOperaが、それぞれ前者が8.0.1から8.0.2へ、後者が8.0から8.01へバージョンアップしています。いずれも、前回のリリースからは比較的短期間でのバージョンアップとなりました。
Netscape 8.0.1は、当Blogでも「Netscape8が正式リリース」というエントリでお伝えしていましたが、その後不具合が確認されていました。具体的には、別のブラウザであるInternet Explorerにおいて、XMLファイルもしくはXSLTを適用したXMLファイルのレンダリングが不可能になるというもの。今回リリースされた8.0.2ではそれを解消したほか、いくつかの修正が施されています。詳しくはRelease Notesを参照ください。
Operaについては、Windows版とLinux版の8.01がリリースされています。バージョンアップの内容はセキュリティ強化、バグ修正、JavaScriptサポートの強化などだそうです。詳しくはFirst Opera 8 upgrade released todayを参照してください。また、この8.01というバージョンは日本語版も提供されており、ウェブブラウザ Operaから入手することが可能です。
コメント [2件] | 関連情報（トラックバック） [0件]
2005年06月17日
レンダリング結果の検証環境
制作したWebページが、実際の閲覧環境においてどのようにレンダリング（描画）されるかという検証は、欠かすことができません。より多くのデバイスやプラットフォーム、Webブラウザでもって確認を行うことが理想ですが、現実的にはサイトのターゲットユーザが主に利用するであろうWebブラウザをいくつか選定し、チェックすることになるでしょう。今回は、その検証環境について触れます。
VMwareやVirtual PCのような仮想マシン環境を構築できるソフトウェアを使えば、同じハードウェア上にさまざまなOS環境を作成することができ、つまり多種多様なWebブラウザをインストールし検証に利用することができます。Webブラウザは、evolt.orgのBrowser Archiveにアクセスすれば、英語版ではありますが新旧問わず実に多くの種類をダウンロードすることができます。
Windows環境とMacintosh環境については、ハードウェアを別々に揃えなければならず、コスト的に難しい場合もあると思います。そのような場合、たとえばBrowserCamのようなオンラインサービスを利用し、画面キャプチャを取得するなり、あるいはデスクトップ環境を用意するなりすると、安上がりかもしれません。
同じWindows OSにおいて、複数のバージョンのInternet Explorerを動かす方法もあるようです。英語ではMultiple IEs in Windows、日本語では異なるバージョンのMicrosoft Internet Explorerを共存させてみる。という記事にその具体的な方法が解説されています。また、Skyzyx.comでは、同時起動を可能にしたStandalone Internet Explorerがダウンロードできます。
コメント [0件] | 関連情報（トラックバック） [0件]
2005年06月14日
@media 2005、閉幕
6月9日から10日にかけて、ロンドンで開催されていた@media 2005というイベントが成功裏に閉幕したようです。@media 2005はWebデザインにおける2つのホットなトピックス、つまりWeb標準とアクセシビリティに関するカンファレンスです。
キーノートスピーチを行ったのは、Designing with Web Standardsの著者であるJeffrey Zeldman氏。ほかにもアクセシビリティの大家であるJoe Clark氏、Stopdesignを興し最近ではCapgeminiサイトのリデザインに携わったDouglas Bowman氏、WaSPメンバーでありCSS Zen Gardenに関する書籍を共著したMolly E. Holzschlag氏など、その方面において世界的に著名な人々がスピーカーとして招かれました。
講演資料は同イベントサイトのBlogにある「Presentation Links」というエントリからダウンロードできます。なかでもAndy Clarke氏の講演「Anatomy of a Mouse」の資料は、氏の携わったディズニーのECサイトを例にマークアップやCSSについて解説しており、興味深い内容となっています。
ほかにも、isolani - WeblogsやKuraFire Networkといったサイトでは、同イベントの詳細なレポートが公開されており、講演の模様をうかがい知ることができます。興味のある方は、チェックしてみてください。
コメント [0件] | 関連情報（トラックバック） [0件]
2005年06月10日
画像置換という手法
画像置換と呼ばれる一連のテクニック群があります。これはHTML文書でマークアップしたテキストを、CSSで画像に置き換えて表示させる手法を指します。たとえば、テキストはdisplayプロパティで隠したり、あるいはtext-indentやpositionプロパティを使って画面外に追いやり、画像を親要素の背景画像として表示させます。詳しくは、Dave Shea氏の記事「Revised Image Replacement」を参照してください。
画像置換は、マークアップに一切手を加えることなく画像を別のものに差し替えることができることから、デザイン変更が非常に容易という利点があります。またこの手法に少しばかり手を加えれば、JavaScriptに頼ることなくCSSのみでロールオーバー効果を得ることができるため、ナビゲーションのボタンに利用されているのをよく目にします。
しかし画像置換は、CSSが有効かつ画像は非表示という閲覧環境において、アクセシビリティ上の重大な問題を生じます。つまり、マークアップ上の文字情報が隠されたまま画像も表示されなくなりますから、適用箇所については一切の情報が得られなくなるのです。余計なマークアップを加えることなくこの欠点を完全に解決した手法は、今のところ登場していません。
コメント [0件] | 関連情報（トラックバック） [0件]
2005年06月07日
Acid2 Test、その後
弊社コラム「WebブラウザとWeb標準準拠」のなかで、Web Standards Project（WaSP）が企画・公開したAcid2 Testをご紹介しました。Acid2 TestはブラウザのWeb標準への準拠の度合いをテストするものですが、コラム執筆段階ではどのブラウザも、まだパスできていませんでした。
その後、MacOS XのデフォルトブラウザであるSafariの開発者・Dave Hyatt氏は自身のBlog「Surfin' Safari」の4月27日付エントリ「Safari Passes the Acid2 Test (Updated)」において、SafariがAcid2 Testをパスしたことを明かしました。その成果は、本日時点でのSafari最新バージョン（2.0）には盛り込まれていないものの、将来が楽しみです。
また、SafariはオープンソースのKHTMLというレンダリングエンジンを元に開発された経緯があります。Safariの成果の提供を受け、もともとKHTMLを採用していたKonquerorという名のブラウザもまた、Acid2 Testをパスしたとのニュースが今月4日になって届きました。これが世界で2例目かと思われましたが、そのニュース「Konqueror now passes Acid2」に寄せられたコメントに、Mac用WebブラウザのiCab 3.0ベータ版こそ2番手であり、Konquerorは3番手であるとの指摘がなされています。
手元の環境（MacOS 10.4）にてiCab 3.0ベータ版でレンダリング結果を実際に確認してみたところ、若干のレイアウト崩れが確認されたため、真偽のほどは定かでないものの、しかしかなりの部分は実装済みという印象です。Operaもまたパスに向けて活発に開発が続けられているようですし（Acid 2 progress - My Opera Forums）、しばらくはAcid2 Testを巡る動きから目が離せません。
コメント [0件] | 関連情報（トラックバック） [2件]
2005年06月03日
文書型宣言
Web標準に則ってWebページを作成する場合、その初期段階で検討すべきポイントに文書型宣言（DOCTYPE宣言）があります。文書型宣言とは、そのWebページがどのマークアップ仕様に適合しているかを示すものです。Webページを作成する準備としてまずどの文書型を採用するかを策定してからマークアップ、その後文法的妥当性をチェック、適合していることを確認するというのがコーディングの大まかなワークフローになります。
W3Cの定める文書型から選定を行う段階では、まずHTMLかXHTMLか？という点を決めなければなりません。次に、仕様のバージョン。最近の傾向としては、HTMLの場合は4.01、XHTMLの場合は1.0が主流です。
より古いバージョンのHTMLを使用することもできますが、4.01はSGMLをベースとしたHTMLの最新にして最終のバージョンであり、前方互換性の確保という観点では4.01が良いでしょう。また1.0よりも新しいバージョン（現状では1.1）のXHTMLを使用することもできますが、その場合メディアタイプにtext/htmlを採用すべきではない点に注意する必要があります。XHTMLデータをXMLデータとしてではなくHTMLデータとして扱うことが一般的な現状においては、HTML 4.01とXHTML 1.0のいずれかを選択するのが現実的です（詳しくはXHTMLのバージョンとメディアタイプを参照）。
コメント [4件] | 関連情報（トラックバック） [1件]
