Web標準Blogでは、Web標準の利用に興味のあるWebサイト管理者、Webデザイナーの方向けに、Web標準を利用するための手法やノウハウ、参考になるリソース等を、国内外を問わずご紹介します。
なお当Blogでは、Web標準に関する疑問や質問を募集しています。Webコンテンツ実装プロセスにまつわるお悩みでも結構ですので、お気軽に電子メールでstandards@mitsue.co.jp宛にお送りください。
2006年01月31日
小さな組織におけるWeb標準
2006年1月30日
Drew McLellan著
（この記事はWeb Standards Project（WaSP）における投稿記事「Web Standards in Small Organisations」を翻訳したものです。当Blogは翻訳の正確性を保証いたしませんので、必要に応じ原文を参照ください。）
新年の抱負を口にしていませんでしたが、あえて言うならば、Webについての確かなアドバイスを与えるべく、私と関わりのある組織に今年はもっと積極的に参加したいと思っています。
Web上のプレゼンスについては、アドバイスを必要としている小規模の組織やボランティアグループと、大抵の人が何らかの繋がりを持っているものです。それは学校だったり宗教団体だったり、スポーツチームやクラブ、チャリティーもしくはビジネスのための小さなネットワーク・グループかもしれません。誰かが手がかりを与え正しい方向に導かない限り、彼らは驚くほど高額のお金を見当違いの方法のために費やしかねません。
私は最近、教育やボランティア分野向けのソリューションを専門とする英国のUniServity社が運営するschool-portal.co.ukというサイトを目にしました。サイト上のリストに挙げられた膨大な数の学校のうち、文法的に妥当なHTMLを使用した、あるいは最も簡単なアクセシビリティテストであれば合格できそうなサイトを、ひとつも見つけることができませんでした。基本的に酷い出来なのです。仮に英国の学校に（自身の予算からWebサイトに資金を捻出するよう）財政上の圧力を加えるとして、サイト構築を適切にやり直すだけの余裕のある学校をリストから見つけ出すのは、かなり困難だろうと思います。
非常に若い産業ということもありますが、物事を進める前に内情に詳しい人々にアドバイスを求めても良いということは、常に明らかというわけではありません。会計士の存在を知っていれば、帳簿を記帳するのに通常、会計事務所を通じてアドバイスを求めるでしょう。しかし話がWeb上でのプレゼンスとなると、同様の注意を払わないがゆえに重大な結果を招き得ると、果たして彼らは理解しているでしょうか？
おそらく今年は、あなたが関係のある組織に参画し、Web標準ベースでアクセシブルなサイトを確実に構築するよう、何らかのアドバイスや指導を提供するのに良い年です。覚えておいて欲しいのですが、アドバイスを申し出ることは、実作業のボランティアを買って出ることと同義ではありません。アドバイスとはしばしば、（ボランティア作業よりも）ずっと貴重な貢献となるのです。
コメント [0件] | 関連情報（トラックバック） [0件]
2006年01月31日
name属性値の決め方
これまで数回に渡りCSS Nite Vol.3にお寄せいただいたご質問にお答えしてきましたが、これが最終回になります。iwaimさまよりいただいた、フォームコントロールの名前の決め方に関するご質問にお答えします。
各フォームコントロールには名前を付ける必要がありますが、例えばメールアドレスだと「email」というように安直な名前に走ってしまいがちです。ただ、そのような汎用的過ぎる名前だと同一文書内でみるとなんだかあまり嬉しくないことになってしまいます。何の「email」なのかがわからなかったり。
一方、その「名前」は、そのフォームのデータを受けとるプログラム側でも使われてしまうため、冗長すぎるのもどうかなぁ、という思いもあります。このあたりの落としどころとして、何か指針みたいなものはありますでしょうか?
もしくは、国内、海外でそのような話題について言及され尽くされていたりするのでしょうか?
仰っているところの「名前」とは、name属性値のことと解釈しますが、弊社内あるいは個人的にであっても、その決め方について指針みたいなもの
は特に定めておりません。
しかしご質問のなかでお書きいただいたように、汎用過ぎず、かといって冗長過ぎでも無いよう名前を定めるというのは、id属性値やclass属性値を決めるうえでも必要な考え方であると思います。
バックエンドの設計を行う部署がフロントエンドの実装を行う部署と密に連携することで、ページ単位あるいはサイト単位でもって語彙を管理し、名前個別のみならず、その集合としての妥当性もチェックするようにすると良いのでは、と思います。
また、このような話題についての国内外での言及についてですが、自分の記憶の範疇においては、特に思い当るものはありません。
内容的にやや近いところでは（name属性に特化した内容ではないのですが）Andy Clarke氏が「What's in a name」という記事のなかで行った調査が興味深いのではないかと思います。また最近では、Googleが「Web Authoring Statistics」という記事で良く使われているclass属性値の調査結果を公開していますので、参考にご覧になってみてはいかがでしょうか。
コメント [0件] | 関連情報（トラックバック） [1件]
2006年01月24日
Web標準を理解してもらうための方法
以下のご質問は、floralさまよりCSS Nite Vol.3にお寄せいただいたものです。
なにかといろいろと聞きたいことがありますが、Web標準をどう社内やクライアントに理解してもらうのか、コンセンサス、プロセスなどを教えていただけるとうれしいです。
最近では、Webアクセシビリティ確保の重要性が広く認知されるようになったこともあってか、始めから「Web標準で」あるいは「CSSレイアウトで」といったご要望をいただくことが少なくありません。これは弊社に限った話ではなく、おそらくWeb制作を請け負う企業や個人に共通の傾向ではないかと思います。こと弊社に限っては、2004年4月よりWeb標準準拠サービスをスタートさせ、またWeb標準セミナーを通じその価値を強くアピールしてきたこともあり、社内とクライアント様の別を問わず、既に一定の理解は得られていると認識しています。
Web標準に馴染みの薄いクライアント様向けには、必要に応じWeb標準セミナーをクライアント先で開催、理解を深めていただくといったプロセスを通じ、そのメリット・デメリットにつき共通認識を形成するようにしています。その一方で、社内向けには不定期ながら勉強会やセミナーを通じ知識やノウハウの共有を推進しているほか、実際の業務を通じては、既にWeb標準を使いこなせる人とそうでない人がペアを組んでOJT（on the job training）を実施しています。また、文書化した案件個々の仕様の社内共有等も行っています。
あまりお答えになっていないかもしれませんが、たとえば清水麻遊さまが公開されているMACCAWSのWeb標準導入キットや、当Blogで公開しました資料「Web標準のススメ」などは、Web標準の理解推進の場で、お役立ていただけるのではないかと思います。
コメント [0件] | 関連情報（トラックバック） [1件]
2006年01月24日
id属性とclass属性
iwaimさまよりCSS Nite Vol.3に寄せていただいたご質問にお答えしたいと思います。
id 属性と class 属性はまったく別の性質を持つ属性なので使い分けが必要です。木達さんが考える使い分けの指針のようなものがあれば教えてください。
使い分けを行う前提として、id属性とclass属性のどちらも利用できる場面、すなわちスタイルシートのセレクタとしてid属性とclass属性のいずれかが必要な場面を想定します。なぜなら、たとえばハイパーリンクを生成するという目的に限定してしまうと、選択の余地なくid属性を使うことになるからです。
仕様書に示されているように、id属性はある要素に固有の識別子を付与する一方、class属性は複数の値を付与することができます。これを活かすよう、あるプレゼンテーションを一括して指定するのではなく、モジュール化して実装していた場合には、必然的にclass属性を用いることになります。
コメント [2件] | 関連情報（トラックバック） [1件]
2006年01月24日
PAGE2006
2月1日から2月3日にかけて、サンシャインシティコンベンションセンターTOKYOを会場にPAGE2006が開催されます。PAGEとはページネーション思想の啓蒙を目的
とし、1988年に初めて開催されて以来今年で19回目を数えるものです。Web標準というテーマからは若干逸れますが、筆者が個人的に興味深いと思うコンファレンスをご紹介します。
デジタルメディアトラックのなかでは「検索技術が創造する新たなコンテンツ」に注目です。Web2.0時代の検索技術について議論
するとのことですが、モデレータを務めるのはゼノン・リミテッド・パートナーズの神崎正英氏です。神崎氏は「ユニバーサルHTML/XHTML」の著者として知られ、また最近ではセマンティックWebの普及に貢献されています。
グラフィックストラックセッションでは「XML複合文書技術の動向」が要チェックでしょう。XMLフォーマットを利用したコンテンツの流通は活発化の一途を辿っており、今後は複合文書へのニーズも高まると思われます。このコンファレンスには、W3CにおいてHTMLアクティビティリードを務める石川雅康氏が参加されます。
またXMLコンソーシアムはクロスメディアコンファレンスにおいて、「基幹系情報システムへのメタデータ活用」をテーマにセミナーを企画しています。他にも「メディアを活かす ビジネスコーディネーション」をテーマに、さまざまなコンファレンスやセミナー、展示が催されるとのこと。興味のある方は参加されてみてはいかがでしょうか。
コメント [0件] | 関連情報（トラックバック） [0件]
2006年01月24日
もうひとつの誤ったリデザイン：IEEE
2006年1月23日
Kimberly Blessing著
（この記事はWeb Standards Project（WaSP）における投稿記事「Another Failed Redesign: IEEE」を翻訳したものです。当Blogは翻訳の正確性を保証いたしませんので、必要に応じ原文を参照ください。）
標準化団体が、自らのWebサイトを構築するのに標準を無視するとは、なんという皮肉でしょう！
メールニュースのなかで、IEEEのWebサイトが新たにリデザインされたとの知らせを「標準を見過ごすのはやめよう」という別の記事と共に目にしたとき、IEEEのメンバーとして私は笑わざるを得ませんでした。以前はWeb標準を利用していなかったものだから、今回こそはと期待したのですけど……新しいサイトのソースを見るやいなや、その期待は打ち砕かれました。
技術指向の標準化団体がWeb標準を完全に無視するだなんて、ユーザやWebの専門家たちに向かって一体何を言えるでしょう？「（IEEEは）非プロフェッショナルだ」と言われる日も、そう遠くないようにすら思えます。
Webの専門家として、またIEEEのメンバーとして、私は恥ずかしく、そして侮辱されていると感じます。 あなたもまた、そうあるべきです。 どうかIEEEに、あなたの感じていることを伝えてください。
コメント [0件] | 関連情報（トラックバック） [0件]
2006年01月18日
CSS Nite Vol.4
明日、1月19日（木曜日）の午後7時より、マンスリーイベント「CSS Nite」の第4回が開催されます。CSS Niteは、Web標準を進める上で重要な役割を果たす「CSS」にスポットを当て
ており、前回のVol.3では当Blogの運営に携わっております木達がゲスト出演させていただきました。
Vol.4もまたこれまでと同様に2部構成となる模様です。第1部では今回のゲスト、H2O Spaceのたにぐちまこと氏が「AjaxによってWebがどのように変わっていくのか」をテーマにお話されます。そして続く第2部では、本イベントを主催されております株式会社スイッチの鷹野雅弘氏が「フォントサイズとスタイルシート切り替え」について講演されます。
なお、本イベントは入場無料、事前登録も不要です。毎回、立ち見のお客様がいらっしゃるほどの盛況ぶりですので、参加をご予定の方はお早めに会場に向かわれることをお勧めします。
コメント [0件] | 関連情報（トラックバック） [1件]
2006年01月18日
スタイルシート スキルアップ・デザインブック I
弊社コラム「Web標準のススメ」末尾で既にご紹介しておりますが、毎日コミュニケーションズ様より「スタイルシート スキルアップ・デザインブック I」が先月末に発売されています。この本は、CSSの世界的エバンジェリストとでも呼ぶべき人物のEric Meyer氏がお書きになった「Eric Meyer on CSS」の翻訳書で、弊社が監修を担当させていただきました。
簡単に内容をご紹介しますと、本書はHTMLやCSSに関する知識を既にある程度有している方向けに、スタイルシートの書き方を非常に具体的かつ実践的に紹介した指南書です。13あるプロジェクトはそれぞれにゴールが設定されており、それを満たすためのプロセスが丁寧に紹介されています。読むばかりでなく、サンプルファイルをサポートサイトのDownloadsページからダウンロードのうえ、エディタ等で編集しながらプロセスを自ら体験することで、理解をさらに深めることもできます。
なお、本書の続編として「スタイルシート スキルアップ・デザインブック II」が今月末には書店に並ぶ予定です。プロジェクト単位の構成と、作業過程を追いながら丁寧に解説がなされるスタイルはそのままに、CSSで実現するプルダウンメニューなど、さらに実践的なテクニックを紹介しています。本書をお買い求めの方には、是非続編のほうもお手に取ってご覧いただければと思います。
コメント [0件] | 関連情報（トラックバック） [0件]
2006年01月16日
文字サイズとコンテンツの横幅
文字サイズとコンテンツの横幅に関するご質問を、モカさまがCSS Nite Vol.3にお寄せくださいました。
例えばフォントの大きさはピクセルで絶対指定すればある程度そろうのですが、相対サイズだと見栄えがかなり違います。
アクセシビリティーを考えると相対サイズの方が良いのでしょうが。
（私は14pxにすることが多いです）また、ページの幅もモニターやブラウザーのバーの設定などを考えると、どれくらいをターゲットにすれば良いか迷います。
（750px固定にしています）
最初のご質問に関し、まず明確にしておきたいのですが、px（ピクセル）は相対単位（画面解像度に対して相対的）です。相対単位にはpxのほかにem（エム）とex（エックス）などがあります。一方、絶対単位にはin（インチ）やcm（センチメートル）、mm（ミリメートル）、pt（ポイント）、pc（パイカ）があります。
仰るとおり、Webアクセシビリティに配慮するならば、絶対単位よりも相対単位や%値、キーワードで文字サイズを指定するほうが良いでしょう。ただしpx単位で指定した場合、それが相対単位であるにもかかわらず、広く普及しているWindows版Internet Explorerにおいて文字の拡大/縮小がブラウザで操作できない点は、注意が必要です。
なお、上記WinIEにおける問題は、初期設定のままでブラウザを使用しているユーザに対するものです。「インターネットオプション」から「全般」タブにある「ユーザー補助」の設定を開き、「Webページで指定されたフォントサイズを使用しない」の項を有効にしている場合においては、px単位でサイズ指定された文字であっても拡大/縮小は可能です。
コメント [2件] | 関連情報（トラックバック） [2件]
2006年01月16日
良いハック・悪いハック
サトウマサシさまより、CSS Nite Vol.3に寄せてCSSハックに関するご質問をいただきました。ちなみにCSSハックとは、Webブラウザ間でのCSS仕様の解釈の相違やバグの有無を振り分けの条件として利用し、特定のブラウザに対しスタイルを適用あるいは非適用とする手法のことです。
2005年10月13日の［IEBlogより：お使いのCSSハックを一掃してください］で取り上げていた良いHACK、悪いHACKについて、具体的に解説いただけたら嬉しいです。
MicrosoftのIE開発チームが、「Call to action: The demise of CSS hacks and broken pages」のなかで使用を控えるよう呼びかけた「悪いハック」には、以下のものがあります。
- html > body
- 子供セレクタを利用するCSSハックです。子供セレクタを解釈するかどうかを振り分けの条件としています。
- * html
- 子孫セレクタを利用するCSSハックです。(X)HTML文書のルート要素はHTML要素であり、その祖先に相当する要素は存在しません。しかしInternet Explorerはこのセレクタを有効なものとして解釈します。
- head:first-child + body
- 通称「Owen Hack」。疑似クラスと隣接セレクタを利用するCSSハックです。first-child疑似クラスと隣接セレクタの双方を解釈するかどうかを振り分けの条件としています。
- head + body
- 隣接セレクタを利用するCSSハックです。隣接セレクタを解釈するかどうかを振り分けの条件としています。
- body > element
- 子供セレクタを利用するCSSハックです。子供セレクタを解釈するかどうかを振り分けの条件としています。
コメント [0件] | 関連情報（トラックバック） [4件]
2006年01月13日
Web Developer 1.0 日本語版
当Blogでも何度か登場しているFirefox、MozillaおよびFlock用の機能拡張であるWeb Developer Extension。CSSやJavaScriptの有効/無効、あるいは画像の表示/非表示を簡単に切り替えることができるほか、Web制作にたいへん便利な機能の数々を使うことができます。昨年の大晦日にバージョン1.0が発表され、既にお使いの方も大勢いらっしゃると思います。
今月11日、株式会社インフォアクシア様より、そのバージョン1.0の日本語版が公開されました。英語版では、アップデートに際しては旧バージョンのアンインストールを事前に行うことが強く推奨されていますが、インフォアクシア様のサイト上では問題が発生してしまったときのために「バージョン 0.9.4以前より 1.0 へアップデートする際の不具合への対処方法」という文書も公開されています。
なおバージョン1.0では、スタイルシートのみならず閲覧中のWebページのマークアップも動的に編集することが可能になった（Edit HTML）ほか、読み込んでいるファイルの総容量を簡単に調べること（View Document Size）ができたり、マウスでポイントした要素の関連情報を即座に表示する機能（Display Element Information）などが新たに実装されています。
コメント [0件] | 関連情報（トラックバック） [0件]
2006年01月13日
マークアップに関するご質問
以下の3つのマークアップに関するご質問は、hosoyamaさまがCSS Nite Vol.3に寄せてくださったものです。
- １．実際に、HTML4.01からXHTML+CSSへ世の中が移行するリミットと思われる時期はいつくらいまででしょうか？
- ２．テーブルレイアウトとCSSレイアウト、ハイブリッドレイアウトとありますが、いずれは完全にCSSレイアウトを目指す方がいいのでしょうか。テーブルタグを使用してもOKないわゆる「純粋な表」の定義がいまいちわからず、「これはテーブルでもいいのかな？」と迷うことがあります。
- ３．フレームは使用しない方がいいと言われていますが、いまだWeb関連雑誌の作例では、フレームを使用した例も少なからず掲載されています。フレームやインラインフレームは、今後どう扱うべきでしょうか。
最初のご質問にあるHTML4.01からXHTML+CSS
という表現には、HTMLからXHTMLへの移行と、テーブルレイアウトからCSSレイアウトへの移行という2つの意味が込められているように感じました。
コメント [2件] | 関連情報（トラックバック） [1件]
2006年01月10日
Web標準が当たり前な世の中になった時の戦略
CSS Nite Vol.3に寄せられたご質問のなかから、最も興味深い質問として、shuburnさまのお書きになった以下のご質問を選ばせていただきました。
今、Web標準の次のステージを考えています。現在、Web標準に準拠した日本のWebサイトはまだ多くはありませんが、大手ポータルサイトが準拠し出したら急激に普及しそうです。2006年は本当の意味でWeb標準元年になるのかも知れません。
Q：そこで木達さんに質問ですが、Web標準が当たり前な世の中になった時の戦略として何かお考えでしょうか？
世の中のWebサイトがすべてXHTMLで書かれるようになったとき、もはや「Web標準」が売りにならなくなる前に我々は何処へ向かって行くのでしょうか。。
SEO（検索エンジン最適化）を例に考えてみますと、その主要な施策のなかには、一昔前であれば「適切なマークアップ」という項目が必ずといってよいほど含まれていました。見出しにはそれ専用のタグ（<h1>や<h2>など）を用いましょうとか、強調したい内容は<em>や<strong>要素としてマークアップしましょう、といったことです。
これはごく当たり前のことなのですが、それがまだ十分認識されていなかったり、認識はされていてもそれを実践するWebコンテンツの割合が相対的に小さかった時代には、SEO上のアドバンテージとして機能したわけです。
コメント [4件] | 関連情報（トラックバック） [2件]
2006年01月10日
リデザインの失敗
2006年1月9日
Tantek Çelik著
（この記事はWeb Standards Project（WaSP）における投稿記事「Failed Redesigns」を翻訳したものです。当Blogは翻訳の正確性を保証いたしませんので、必要に応じ原文を参照ください。）
Joe Clarkは最近、Webサイトのリデザインに関し複数の失敗例を記事に書きました。 その内容には典型的なWaSP調が含まれていたので、以下にパラグラフを2、3引用します（彼がこれを気にしなければ良いのですが）。
失敗したリデザインにおいて、Web標準全盛の時代にページが新規に作成あるいは更新されたにもかかわらず、標準を無視するか、または誤用しています。 リデザインの失敗例は、文法的に妥当なソースコードや、アクセシビリティガイドラインなどこの世に存在しないかのそぶりをします。21世紀が1999年という琥珀の中に閉じ込められたがごとく、うそぶくのです。しかしそれはそのサイトの制作者が、Web開発のプロでないというばかりでなく、彼らが完全に無能だということを示します。 あなたがもし21世紀にもなってタグがごちゃ混ぜになったコードを書き、レイアウトのためにテーブルを使っているのであれば、つまりあなたは無能者ということですよ。
10代の若者が趣味で作るBlog（「Web logs」の省略形）が、真新しいWebサイトよりも優れたコードで書かれているとしたら、誰かが過ちを犯しています。そして、その誰かというのはあなた方、開発者です。真っ当な会社なら、あなたはクビにされているでしょう。オーウェル風の社会に例えるなら、あなたは「再教育キャンプ」に送られるのです。そのどちらも望まないのなら、本を読み、少なくとも笑い種にされない程度のレベルにまでスキルを高める必要があります。
実に典型的ですね。 Joeの挙げたリデザインの失敗例については、彼の記事を読んでください。私がとりわけ気になったのは、最近の「Web 2.0」を自称する新興サイトが複数、失敗例のリストに含まれていたことです。Joeは特にTagWorldに言及しています。私としては、もし今度あなたが「Web 2.0」を自称するサイトを調べる機会があれば、ボンネットを開き、ソースを見て、そのなかにWeb 1.0時代のサイトがつけていたような口紅が残っていないかチェックして欲しいと思います。そして、結果を運営側に伝えるのです……もちろん、あなたのBlog上で。
コメント [0件] | 関連情報（トラックバック） [1件]
