メディアクエリーの最終草案が公開 | Web標準Blog | ミツエーリンクス
CSS WGより、メディアクエリー (Media Queries)の最終草案が公開されました。 メディアクエリーとは メディアクエリーは、link要素のmedia属性やCSSの@mediaを拡張したもので、デバイスの条件を指定しスタイルシートを適用可能にする技術です。 たとえば、「幅が1280pxなディスプレイ」と「幅が1600pxなディスプレイ」で、異なるスタイルを割り当てることができます。 /* 一般的なスクリーン */ @media screen and (device-width: 1280px) { .main { width: 600px; } .sub { /* 何もせずフッターにする */ } } /* 幅の広いスクリーンでは2カラムに */ @media screen and (device-width: 1600px) { .main { width: 800px; f
HTML5の完成は2022年！？ | Web標準Blog | ミツエーリンクス
海外ではHTML5の完成時期について、ちょっとした騒ぎになっています。 ことの発端は、HTML5のeditorであるGoogleのIan Hicksonが、TechRepublicのインタビューで「HTML5の完成は2022年ごろになる」と発言したことにあるようです。HTML WGのホームページにあるスケジュールでは、2010年9月の勧告とされているため、12年もの開きがあることに疑問を感じる人が多いようです。 しかしながら、2022年に勧告されるという見通しは、そこまで非現実的ではないように思います。 たとえば、CSS 2.1についても2002年の策定開始より6年以上経ち今もなお細かい詰めがおこなわれており、勧告は早くても2010年という予定です。HTML5は要素・属性の定義に加え、DOMの構成やインターフェース定義など、カバーする範囲がCSS以上に多岐にわたります。 また、そもそも20
label要素とその挙動 | Web標準Blog | ミツエーリンクス
先週取り上げたmaxlength属性に引き続き、今回はlabel要素について調べてみました。 label要素とアクセシビリティ・ユーザビリティ input要素そのものには、ラベルを記述する仕組みが用意されていません。このため、スクリーンリーダーなどでフォームコントロールの読み上げに支障が出ることがあります。アクセシビリティの確保のため、各フォームコントロールにはlabel要素を設けることが必要でしょう。 さて、label要素はアクセシビリティにのみ効果があるというわけではありません。ラベルを指定することは、ユーザビリティの向上にもつながります。 たとえば、チェックボックスやラジオボタンなどのコントロールは、それ自身のサイズが小さいため、クリックをしにくいという欠点があります。しかし、label要素でラベルとフォームコントロールを結びつけることにより、ラベルをクリックしたときにチェックをつけ
セマンティック Web のためのクールな URI
この文書「セマンティック Web のためのクールな URI」は、W3C の Semantic Web Education and Outreach (SWEO) Interest Group による「Cool URIs for the Semantic Web (W3C Interest Group Note 31 March 2008)」の日本語訳です。 規範的な文書は原文のみとなっています。この日本語訳は参考情報であり、正式な文書ではないことにご注意ください。また、翻訳において生じた誤りが含まれる可能性があります。 原文の最新版 は、この日本語訳が参照した版から更新されている可能性があります。また、この日本語訳自身も更新されている可能性があります。日本語訳の最新版は、W3C 仕様書 日本語訳一覧 から参照することができます。 更新日: 2008-04-17 公開日: 2008-04-1
HTML5 設計原則「HTML Design Principles」の翻訳「HTML 設計原則」
この文書「HTML 設計原則」は、W3C の HTML ワーキンググループ による「HTML Design Principles (W3C Working Draft 26 November 2007)」の日本語訳です。 規範的な文書は原文のみとなっています。この日本語訳は参考情報であり、正式な文書ではないことにご注意ください。また、翻訳において生じた誤りが含まれる可能性があります。 原文が勧告 (Recommendation) ではなく、策定途中の草案 (Working Draft) であることにご注意ください。 原文の最新版 は、この日本語訳が参照した版から更新されている可能性があります。また、この日本語訳自身も更新されている可能性があります。日本語訳の最新版は、W3C 仕様書 日本語訳一覧 から参照することができます。 更新日: 2008-04-16 公開日: 2007-11-27
microformatsのチートシート | Web標準Blog | ミツエーリンクス
2006年9月27日 Ian Lloyd 著 （この記事はWeb Standards Project（WaSP）における投稿記事「Microformats for cheats」を翻訳したものです。当Blogは翻訳の正確性を保証いたしませんので、必要に応じ原文を参照ください。） この手軽でコンパクトなチートシートで、microformatsをたっぷり調べてください。 microformatsに困惑していますか？ 友達や周囲の人にhCardの利点を印象付けたいと思っていますか？ 参加したWeb系カンファレンスでいじけた思いを味わわされることに疲れましたか？ 今こそmicroformatsに熱狂すべきときです！安っぽい書き出しを申し訳なく思いますが、あなたがダウンロードしたいと思うかもしれない手軽でコンパクトなPDF形式のmicroformatsチートシートをBrian Sudaが用意したこと
CSS Zen Garden Book | Web標準Blog | ミツエーリンクス
弊社が監修しました書籍「CSS Zen Garden Book」が、毎日コミュニケーションズより発売されました。本書は、以前当Blogの「『The Zen of CSS Design』のリンク集」でご紹介済みの書籍、「The Zen of CSS Design: Visual Enlightenment for the Web」の日本語訳になります。 本書を特徴付けているのは、やはり取り上げられている素晴らしいデザインの数々ではないでしょうか。css Zen Gardenとは、同じXHTML文書に対して異なるCSSを適用することにより、いかに多様で優れたデザインが実現可能かをデモンストレーションするサイトです。そこに投稿された優れたデザインのなかから、選りすぐりの36のアイデアを題材として、デザイン原則やスタイルシートの作成法を解説しているのが本書です。それら2つのメイントピックスのすべて
CSSとSEOスパム | Web標準Blog | ミツエーリンクス
Webデザイナーのまことさんより、CSSとSEOスパムに関するご質問をいただきました。 ＣＳＳコーディングにおいて、画像のメニューボタンをマウスオーバー時に画像変更させたい場合、まず、リストタグでテキストリンクのメニューを作成します。 そして、ＣＳＳにて画像を背景画像にして変更する形をとります。 そのため、各画像ボタンにあるリンクテキストの文字は見えなくさせる必要があります。 その方法としては、テキストインデントを負の-9000などにしてリンクテキストの文字を画面から消す方法、もう１つは、可視性で非表示にして消してしまう方法があります。 この２つの方法が使われるようですが、これはＳＥＯスパムではないでしょうか？ＣＳＳ設定で文字を非表示にしたり、画面から見えなくするのはＳＥＯスパムだと思うのですが。。。 本件につきましては、既に画像置換とSEOスパムという記事のなかでも触れている事柄ではあり
WD Live! Web標準時代に求められるサイト構築法
Web標準時代に求められる サイト構築法 木達一仁 株式会社ミツエーリンクス WEB開発チーム フロントエンドエンジニア Web Standards Projectメンバー k-kidachi@mitsue.co.jp / kidachi@kazuhi.to 株式会社ミツエーリンクス WEB開発チーム フロントエンドエンジニア（2004年2月～） Web標準準拠サービスの立ち上げ/運用 Web標準Blogの運営 W3C Advisory Committee Representative 海外のWeb標準関連書籍和訳版の監修 Web Standards Project（WaSP）メンバー mixiにてWeb標準コミュニティを主催（2006年5月25日現在3260人が参加） 7月15日「Web標準の日」開催
AJAX、アクセシビリティ、スクリーンリーダ | Web標準Blog | ミツエーリンクス
2006年5月4日 Ian Lloyd著 （この記事はWeb Standards Project（WaSP）における投稿記事「AJAX, Accessibility & Screen Readers」を翻訳したものです。当Blogは翻訳の正確性を保証いたしませんので、必要に応じ原文を参照ください。） James Edwardsは、さまざまなスクリーンリーダを用いてAJAXの使い勝手の良さ（あるいは悪さ）を検証した結果を公表しています。その結果は、あまり喜ばしいものではありません。 本エントリのタイトルには、ちょっとした矛盾（oxymoron）があります。どこか分かりますか？それは、「アクセシビリティ」と「AJAX」という単語です。この2つは、多くの人が経験しているように、ベストな組み合わせではありません。しかし、Webの専門家である私たちの多くは、AJAXがWebのアクセシビリティにマイナ
IE7の!important宣言の解釈は今後のリリースで修正 | Web標準Blog | ミツエーリンクス
2006年2月3日 Molly E. Holzschlag著 （この記事はWeb Standards Project（WaSP）における投稿記事「!important Fixed in Later IE7 Releases」を翻訳したものです。当Blogは翻訳の正確性を保証いたしませんので、必要に応じ原文を参照ください。） IE7 Beta 2のプレビュー版が!important宣言の役割を尊重しないため、ボックスモデル・ハックの代替ハックが機能しないということに、私は今日になって気づきました。 !important宣言は、いくつかの重要な（important）理由において大切な（important）ものです。第一に、!important宣言が存在するそもそもの理由でもありますが、制作者スタイルとユーザースタイルのあいだを取り持ちます。過去に仕様変更があったにせよ、それはCSS 1.0から
id属性とclass属性 | Web標準Blog | ミツエーリンクス
iwaimさまよりCSS Nite Vol.3に寄せていただいたご質問にお答えしたいと思います。 id 属性と class 属性はまったく別の性質を持つ属性なので使い分けが必要です。木達さんが考える使い分けの指針のようなものがあれば教えてください。 使い分けを行う前提として、id属性とclass属性のどちらも利用できる場面、すなわちスタイルシートのセレクタとしてid属性とclass属性のいずれかが必要な場面を想定します。なぜなら、たとえばハイパーリンクを生成するという目的に限定してしまうと、選択の余地なくid属性を使うことになるからです。 仕様書に示されているように、id属性はある要素に固有の識別子を付与する一方、class属性は複数の値を付与することができます。これを活かすよう、あるプレゼンテーションを一括して指定するのではなく、モジュール化して実装していた場合には、必然的にclass属
良いハック・悪いハック | Web標準Blog | ミツエーリンクス
サトウマサシさまより、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ハックです。子供セレクタを解釈するかどうかを振り分けの条件
文字サイズとコンテンツの横幅 | Web標準Blog | ミツエーリンクス
文字サイズとコンテンツの横幅に関するご質問を、モカさまがCSS Nite Vol.3にお寄せくださいました。 例えばフォントの大きさはピクセルで絶対指定すればある程度そろうのですが、相対サイズだと見栄えがかなり違います。 アクセシビリティーを考えると相対サイズの方が良いのでしょうが。 （私は14pxにすることが多いです） また、ページの幅もモニターやブラウザーのバーの設定などを考えると、どれくらいをターゲットにすれば良いか迷います。 （750px固定にしています） 最初のご質問に関し、まず明確にしておきたいのですが、px（ピクセル）は相対単位（画面解像度に対して相対的）です。相対単位にはpxのほかにem（エム）とex（エックス）などがあります。一方、絶対単位にはin（インチ）やcm（センチメートル）、mm（ミリメートル）、pt（ポイント）、pc（パイカ）があります。 仰るとおり、Webアク
友達を感動させる24通りの方法 | Web標準Blog | ミツエーリンクス
2005年12月1日 Ian Lloyd著 （この記事はWeb Standards Project（WaSP）における投稿記事「24 Ways to Impress Your Friends」を翻訳したものです。当Blogは翻訳の正確性を保証いたしませんので、必要に応じ原文を参照ください。） クリスマス向けのオンライン・カレンダーの登場です。個々の扉（ええ、それらが本物の扉でないことはわかっています……単なる比喩です。付け加えておきますが、Drewは祝福のためにトナカイと雪だるまを加えたりはしないでしょう）の後ろには、友達を感動させるようなWeb開発についての豆知識やチュートリアル（もちろん全てWeb標準に基づいたもの）がひとつ隠されています。正確に言うと、全部で24個あるうちのひとつ、にアクセスすることができます。そんなサイト「24 ways」が、ちょっとしたAjaxのプロトタイプ制作か
ディズニー・ストア・イギリスへの公開書簡 | Web標準Blog | ミツエーリンクス
2005年11月3日 Molly E. Holzschlag著 （この記事はWeb Standards Project（WaSP）における投稿記事「An Open Letter to Disney Store UK」を翻訳したものです。当Blogは翻訳の正確性を保証いたしませんので、必要に応じ原文を参照ください。） ディズニー・ストア・イギリス様 私は直接あなた方のサイトのフィードバックページにこの手紙を書くべきでしたが、Accessデータベース上でエラーが発生してしまいます。 電子メールもまた、機能していないようです。 そこで代わりに、あなた方のチームの誰かが見つけて、また注意を払ってくれることを期待し、公共のフォーラムであるここに書くことにします。 あなた方が呼ぶところのリデザインはパロディであり、悲劇であり、そして困惑でもあります。以前のサイトは見た目にずっと美しかったばかりではなく
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
