WWW Watch

HTML/CSS カテゴリーの記事一覧

HTML や CSS のコーディングなどに関する記事の一覧を表示しています。(1 / 5 ページ)

HTML 5.2 の First Public Working Draft (FPWD) が公開される

HTML5

今年 6月に、HTML 5.1 が今年 9月の勧告に向けて勧告候補 (CR - Candidate Recommendation) への移行検討段階(CFC - Call For Consensus) に入った件を簡単に触れましたが (下記リンク参照)、その後、予定通り HTML 5.1 は勧告候補に移行しました

Continue reading

アフィリエイト・サービス・プロバイダ各社はいい加減配信する広告を SSL に対応させろと思っていたらバリューコマースさんが対応した件

いや、もうタイトルで言い切ってるんですけども、大手のアフィリエイト・サービス・プロバイダ各社は、HTTPS による広告配信に未だ対応していないところが多く、当 Blog のように Web サイトを SSL 対応させた際にそのままでは混在コンテンツ (Mixed Content) が発生してしまいとてもやっかいでした。

2016年にもなっていつまで対応しないんだよ、いい加減対応しろ...... もとい、そろそろ対応して欲しいなぁと思っていたらバリューコマースさんがやっと SSL に対応したそうです。ついでに他のアフィリエイト・サービス・プロバイダさんも調べてみたら A8.net さんもいつの間にか SSL 対応していましたという話。

Continue reading

Windows で游ゴシックが細字になってしまう件は誰が悪いのかについて CSS 仕様から考えてみる

Windows で 「游ゴシック」 フォントを使用すると細字で表示されちゃって困るという話、なんか Twitter で下記の記事が回ってきたので、あぁそういえばそんな問題がありましたよねと思い出したのですが、ちょっと気が向いたのでこれを CSS の仕様を基に考えてみたいと思います。

要するに上記の記事の方が言うように制作者サイドの問題なのか、それとも Windows のレンダリングが悪いのかという話ですが、結論から言えば Windows が悪いってことでいいんじゃないかと思います。あと気になって自分の環境で調べてみたら、少なくとも Windows 10 ではこの問題は起こらないみたいですね。

Continue reading

AMP (Accelerated Mobile Pages) バリデータの Web 版が公開される

AMP (Accelerated Mobile Pages)

AMP (Accelerated Mobile Pages) の文法が妥当かを検証 (バリデーション) する機能としては、#development=1 を付与した上で開発者ツールによる検証を行う機能が当初から AMP フレームワークの標準機能として提供されていましたが (参考記事)、もっと簡単にバリデーションを行うため、Chorme 拡張が今月に入ってリリースされています。

今回は、この AMP バリデータの Web 版が新たに公開されましたよというお話。Web 制作関連の人ならお世話になる 「The W3C Markup Validation Service」 と同様に、AMP HTML が妥当かを簡単にチェックすることが可能です。

Continue reading

Firefox 47 がリリース、CSS Mask Image プロパティへの対応やVP9サポートの有効化など

Firefox

Firefox の最新版、Firefox 47 が正式リリースされ、自動更新も提供開始されました。Android 版も同時公開。

CSS 関連では 「CSS Mask Image プロパティ」 や 「::backdrop 疑似要素」 への対応が行われました。また、「Fullscreen API」 の接頭辞が外れたほか、高スペックなマシンでは VP9 コーデックの利用が可能になり、また、Flash 以外すべてのプラグインが初期設定で 「クリックして有効化」 になるなどの変更が加えられています。

Continue reading

HTML 5.1 が今年 9月の勧告に向けて勧告候補への移行検討段階へ、HTML 5.2 の策定も開始

HTML5

今年 4月6日に 「Working on HTML5.1 - W3C Blog」 というエントリーが W3C 公式 Blog に投稿され、2016年 9月には HTML 5.1 を勧告として公開する計画がアナウンスされましたが、これに関連して先週末、下記の通り、現在最新の HTML 5.1 Working Draft を勧告候補(CR - Candidate Recommendation) に移行する提案(CFC - Call For Consensus)がされた旨、公式 Blog にてアナウンスされました。

Continue reading

AMP HTML でアコーディオンやカルーセル表示などを実装する拡張コンポーネントを使ってみる

以前、AMP (Accelerated Mobile Pages) HTML に関する基本的な記事と、拡張コンポーネントを利用した AMP HTML への Google Analytics 導入方法について記事を書きました(下記リンク参照)。

AMP の拡張コンポーネント (Extended components) には、上記で書いた、amp-analytics コンポーネント以外にも色々と用意されていて、その中には、AMP HTML 内でカルーセルやスライドショー、あるいはアコーディオン式の UI を実装したり、ソーシャルボタンを設置するための拡張コンポーネントが用意されています。そこで、個人的に気になったものをいくつか取り上げて、簡単に解説してみたいと思います。

Continue reading

CSS で計算(四則計算)が行える calc() 関数を使ってみよう

CSS の calc() 関数は、CSS プロパティに指定する値を計算式で書くことができる仕様です。

ちょっと前に Firefox 48 が、この calc() 関数の入れ子表記に対応した件で下記のような記事を書いたのですが、その時参考にリンクを張ろうとした、過去に calc() 関数についての解説を書いた記事がもう6年も前の記事で、さすがに古すぎるということでリンクを張れなかったんですが、いい機会なのでちょっと書き直してみます。

なお、上記記事でも書いたとおり、calc() 関数は現時点で IE (IE11)や Edge を始め、Firefox、Chrome、Safari など、ほぼすべてのモダンブラウザがサポートしていますので、念のため古いブラウザ向けに最低限のフォールバックとなる記述だけしておいてあげれば問題なく使用できます。

Continue reading

Firefox 48 は CSS calc() 関数の入れ子に対応、CSS カスタムプロパティとの併用がより便利に

Firefox

CSS の calc() 関数は、サイズや形状を決定する値の指定を計算式で書くことができる仕様で、現時点では IE (IE11)や Edge を始め、Firefox、Chrome、Safari など、ほぼすべてのモダンブラウザがサポートしています

ちょっとした計算を簡単に書けるので私もよく使用する記述なのですが、現在、Beta リリースの Firefox 48 は、この calc() 関数の入れ子記述に対応しました。後述しますが、CSS Variables (CSS カスタムプロパティ) と組み合わせるときにかなり便利になりました。

Continue reading

Twitter アプリで投稿する画像に代替テキストを追加できるようになった件

TwitterTwitter から公式にアナウンスがありましたが、Twitter の iOS 及び Android アプリを利用している場合、アクセシビリティ設定から 「画像の説明を追加」 機能を有効にすることで、投稿する画像に説明文を追加することができるようになったそうです。

「画像の説明」 として入力したテキストは、タイムラインに表示される際、画像の代替テキスト (alt 属性値) として利用されますので、読み上げ環境を利用している人でも投稿された画像がどのような内容か (適切に説明文が書かれていれば) 理解することは容易になります。

Continue reading

HTML5 に対応したリファレンス本 「できるポケット HTML5 & CSS3/2.1 全事典」 が増刷されます

去年、2015年の 3月に発売された 「できるポケット HTML5 & CSS3/2.1 全事典」 ですが、おかげさまでコンスタントに売れてるらしく、初回発行分が在庫切れしたとのことで増刷されることになりました。

ほんの少し誤字なんかの訂正などが入っているようですが、大きな内容の変更はありません。店頭で見かけた際は是非、手に取ってみていただければ。

Continue reading

pa11y のレポートを日本語で表示したかったので HTML_CodeSniffer の日本語版作った

pa11ypa11y っていうオープンソースのアクセシビリティチェックツールがあります。

これのコマンドラインツールはコマンドラインから簡単にアクセシビリティレポート (もちろん機械的なチェックなのであくまで参考レポートなんですが) を簡単に出力できるってことで、ちょっと仕事の関係で使ってみようと思いましてちょっと前に色々と試していました。

で、結構使えそうだということで本格的に使い始めたんですが、そうなるとやっぱりレポートは日本語で出力されないとってことになります。pa11y はアクセシビリティチェックやレポート出力に HTML_CodeSniffer っていう Squiz 社 (Squiz Pty Ltd) が開発しているアクセシビリティチェック用の JavaScript を使用しているため、これを翻訳した、HTML_CodeSniffer-ja を作成し、公開しました。

Continue reading

amp-analytics コンポーネントを使用した AMP HTML への Google Analytics 導入方法

Google AnalyticsAMP (Accelerated Mobile Pages) のアクセス解析に関しては、コアコンポーネントとして用意されている amp-pixel を使用したトラッキングコードの挿入方法があって、以前、AMP HTML の出力方法についてまとめた記事を書いた際にも触れました (下記参照)。

で、もう一方で拡張コンポーネントとして amp-analytics も用意されていて、そちらを利用する方法もあるのですが、先月、Google Analytics がこの amp-analytics を使用したトラッキングコードの挿入に正式に対応たことを発表 (参考記事)。今日、日本語でのアナウンスも公式にされたので、よい機会ということで簡単に導入方法をまとめてみます。

Continue reading

Google Search Console に AMP の項目が追加される

ちょっと前の話なんですけどね。Google Search Console (サーチコンソール、元々はウェブマスターツールって呼ばれてたあれです) に新たに 「Accelerated Mobile Pages (AMP)」 の項目が追加され、インデックス状況やエラーレポートを確認することができるようになりました。

AMP について、および実際に AMP を出力する方法については下記の記事を少し前に書いていますので参考まで。

Continue reading

Chrome 49 Beta が CSS カスタムプロパティ (CSS Variables) に対応

Google Chrome現在 Beta 版としてリリースされている Google Chrome 49 (次の正式リリース版) が、CSS でカスタムプロパティを定義し、変数として使用できるようにするための新しい CSS 仕様 「CSS Variables」 をサポートしました。

Chromium Blog でアナウンスされています。

Continue reading

AMP (Accelerated Mobile Pages) HTML を出力するようにしてみたけど面倒くさかった話

Google が発表したプロジェクト、Accelerated Mobile Pages (AMP) は、モバイル端末における Web ページの表示を高速化する取り組みで、超簡単に言ってしまえば、オープンソースで公開されるフレームワーク、AMP HTML の仕様に従って Web ページを作ってくれれば、その表示を大幅に高速化できますよという仕組み。

単にファイルサイズ的に軽いよというような単純な話だけではなく、キャッシュなど様々な技術を組み合わせることでページのロード時間を大幅に短縮する仕組みで、制作者側が AMP HTML に則ったページを提供し、Google が (Twitter も初期から対応するとのこと) AMP に対応することで、リンク先のページを高速に表示することが可能になります。

Google からの具体的なアナウンスは去年の 10月。下記のリンク先で確認できます。

Continue reading

1990 年代後半から CSS を触っている私が当時の記憶を振り返る、CSS 昔話

Advent Calendarこの記事は CSS 昔話 Advent Calendar 2015、10日目の記事です。

面白そうなんで参加してみましたが、CSS ハックとかバグの話は他の方々が、色々面白い記事を書いてくださると思いますので、ここは少し外して、とりとめもない感じになってしまうのは覚悟の上で、空気を読まずに本気で昔の話をしてみようと思います。

私が CSS を触り始めた頃の記憶を辿りつつ。そう、あれはもう 20 年近く前の話......

Continue reading

「アクセシビリティ」 を当たり前にするために制作者はどう考えればよいのか

Advent Calendarこの記事は、Web Accessibility Advent Calendar 2015、3日目の記事です。

技術的なお話は別の人がするからもう俺はいいやってことで、毎年恒例だし、今年は技術的なところにはあまり触れずになんか書こうかなーと軽い気持ちで参加表明しちゃった Web Accessibility Advent Calendar なんですが、忘れてただけで去年、すでに今年考えてたような内容で書いてたことに気がついてネタがありません。どうしましょう。

ということで今回は完全に技術的な話は排除して、ゆる~くにアクセシビリティについて思うところを書いておくことにしました。とはいっても啓蒙的なお話についてはアクセシビリティ界隈の偉い方々が常々やってくださっておりますので、じゃあアクセシビリティってやつを制作者サイドはどのように捉えて制作業務に組み込めばいいの? ってお話を少し。

Continue reading

Firefox 40 が正式リリース、text-decoration 関連プロパティからベンダプレフィックスが削除されるなど

FirefoxFirefox 40 のリリースからちょっと時間経っちゃってるんですが(現在 Firefox 40.0.2 が提供されています)...... Firefox の最新版、Firefox 40 が正式リリースされ、自動更新も提供開始されました。Android 版も同時公開。

Continue reading

当 Blog を SSL 対応させたので手順や修正が必要になった点などをまとめ

なぜか先週末の夜中に急に思い立って、この Blog のドメイン用に SSL 証明書を購入し、急遽 SSL 対応 (HTTPS でアクセスできるように) してみたわけですが、その手順やら、SSL 化したことでちょっと手直ししないといけなくなって大変だった点などをまとめて見ようと思います。

ちなみに、まだリダイレクトや HSTS (HTTP Strict Transport Security) はドメインに対して有効にしていないので、現状は HTTP / HTTPS どちらでもアクセスできる状態。もうちょっと検証した上で HSTS を有効にして所謂、常時 SSL 化する予定。

10年間以上運営してきた Web サイトを SSL 対応させると、こういう問題が起こるのね、とかそういうところが大変なのね的な感じで参考にして頂ければ幸いです。

Continue reading

Firefox 38 が正式リリース、レスポンシブ・イメージ、ruby 要素のサポートなど

FirefoxFirefox の最新版、Firefox 38 が正式リリースされ、自動更新も提供開始されました。Android 版も同時公開。自動更新が少し遅れて、38.0.1 として届いたので、リリース直後に少し問題があったみたいですね。

picture 要素がデフォルトで有効になり、srcset 属性が使えるようになったことで、所謂レスポンシブ・イメージ (Responsive images) の利用が可能になりました。また、ruby 要素、CSS Ruby への対応が行われ、ルビの使用が可能になっています。

Continue reading

ページ内リンクはスムーズスクロールしなくても一瞬点滅すればいいんじゃないかという実験

jQueryタイトルが (謎) な感じですが......

ページ内リンクでページ上部に移動させたりするとき、最近は所謂スムーズスクロールってやつを実装するのが当たり前になっていますよね。パッと瞬時に画面が切り替わってしまうと、ページ内で移動したことがわかりにくいので、スクロール処理を入れることでわかりやすくしてあげましょうって言う、親切心から採用されるケースが多いと思います。

実装方法は JavaScript と CSS アニメーションの組み合わせや、JavaScript (というか jQuery) でというのが多いと思いますが、今回はそのスムーズスクロールの実装方法はどれが良いのかとか、そもそもの是非 (好き嫌いとか?) についてはとりあえず置いておいて、画面が移動したのがわかるようにするなら、「スクロール」 以外でもできるんじゃないの? という実験です。

Continue reading

Firefox 37 が正式リリース、display: contents のサポートなど

Firefoxもうそろそろ Firefox 38 が自動更新で提供開始されそうなころですが、Firefox 37 がリリースされた時に書いた記事が下書きのまま放置状態で忘れてましたので、こんなタイミングですが公開しておきます。ですので、以下は1ヶ月以上前の話ですのでご了承ください。

Firefox の最新版、Firefox 37 が正式リリースされ、自動更新も提供開始されました。Android 版も同時公開。

Continue reading

Microsoft の新ブラウザ (Project Spartan) 開発に Adobe の Web Platform チームが参加

IE Blog で公開された記事によると、現在 Technical Preview が公開中で、今年の夏頃にはリリースされると言われている次期 Windows 「Windows 10 (コードネーム : Threshold)」 に搭載される新ブラウザ 「Project Spartan」 の開発で、Microsoft と Adobe が提携したとのこと。

個人的には結構気になる (ポジティブな意味で) 発表でしたので、ちょこっと触れてみたいと思います。

Continue reading

HTML5 に対応したリファレンス本 「できるポケット HTML5 & CSS3/2.1 全事典」 が発売されました

できるポケットちょっと前にも告知しましたが、インプレスさんの、どこでも手軽に読める入門書シリーズ、「できるポケット」 シリーズの新刊として、「できるポケット HTML5 & CSS3/2.1 全事典」 が 本日発売されましたのでお知らせです。

Continue reading

Google が言う 「モバイルフレンドリー」 とは? モバイルフレンドリーテストツールで色々試してみた

先週ですが、Google が Official Google Webmaster Central Blog で、2015年 4月 21日 (米国時間) から、モバイル検索の順位決定時に、その Web サイトが 「モバイルフレンドリー」 かどうかを重要なシグナルとして利用すると発表しました。

上記記事内で 「この変更は世界的に検索結果に対して大きな影響を与える (This change will affect mobile searches in all languages worldwide and will have a significant impact in our search results)」 と言い切ってることもあって、その影響は大きいものと思われますし、これを受けてまたスマホ対応がどうこうと騒がしい感じになるんでしょうが、そもそも Google は何を根拠に 「モバイルフレンドリー」 かどうかを判断するの? ってところがちょっと気になったので、わかる範囲で調べてみました。

Continue reading

Firefox 39 のインスペクタが要素のドラッグ & ドロップに対応

Firefox Nightly現在、Firefox Nightly としてリリースされている、Firefox 39 のインスペクタで、要素をドラッグ & ドロップして移動することができるようになりました。

Google Chrome のデベロッパーツールでは前から同様の操作ができましたが、Firefox でも同じように簡単に要素を入れ替えたり、別の場所に移動したりできます。

Continue reading

SVG のフォールバックは結局 Modernizr に落ち着いた件

SVGタイトルでほぼ言い切ってる感じなんですが......

SVG に対応していない環境 (IE8 以前とか、旧 Android の標準ブラウザとか) に対するフォールバックの方法はいくつかありますが、色々試して、最終的に img 要素で SVG を配置した上で、Modernizr と簡単な JavaScript (とりあえず jQuery) 書いて SVG 未対応ブラウザに対しては代替画像に差し替えるっていう手で落ち着きましたというお話。

Continue reading

Firefox 36 が正式リリース、scroll-behavior: smooth; のサポート、SPDY/3 のサポート廃止など

FirefoxFirefox の最新版、Firefox 36 が正式リリースされ、自動更新も提供開始されました。Android 版も同時公開。

CSSOM View Module から scroll-behavior プロパティをサポートしたことで、CSS だけでスムーズスクロールが可能になった他、SPDY/3 のサポートが廃止され、SPDY/3.1 のみのサポートとなっています。

その他、unicode-range デスクリプタのサポート、will-change プロパティのサポート、meta name="referrer" のサポートなども行われています。

Continue reading

HTML5 に対応したリファレンス本 「できるポケット HTML5 & CSS3/2.1 全事典」 を執筆しました

できるポケットインプレスさんの できるシリーズ と言ったらシリーズで 6,000万部とか売れている大人気シリーズなわけですが、その できるシリーズ をコンパクトにまとめた、どこでも手軽に読める入門書的なシリーズとして 「できるポケット」 シリーズってのがあるんですけども、そのシリーズの新刊として、「できるポケット HTML5 & CSS3/2.1 全事典」 を共著で執筆しました。

発売日は 3月 2日ですので、来週の月曜日ですが、Amazon などでは予約が始まっていますので告知です。

Continue reading

Web サイトの制作ガイドラインをクリエイティブ・コモンズ・ライセンスで公開しました

会社の方の Web サイトではすでに告知したんですけども、自分の会社で作って使っていた Web サイト制作のガイドラインを公開しました。

この制作ガイドライン自体は新しく会社を立ち上げた当初に整備し始めて、そのまま使っていたんですが、自社特有のルールを整理したり、書き方を少し汎用的に調整した上で、公開することにしました。クリエイティブ・コモンズ・ライセンスで公開していますので、ライセンスの範囲内であれば自由に使っていただけます。

Continue reading

Firefox 35 が正式リリース、CSS Filter がデフォルトで有効に

FirefoxFirefox の最新版、Firefox 35 が正式リリースされ、自動更新も提供開始されました。Android 版も同時公開。

CSS プロパティで、要素に対して様々なエフェクトをかけることができる CSS Filter がデフォルトで有効になった他、@font-face 規則における WOFF2 フォントのサポートなどが行われています。

Continue reading

HTML5 Differences from HTML4 が W3C WG Note へ

HTML5HTML5 における HTML4 からの変更点をまとめた文書、「HTML5 Differences from HTML4」 が更新され、Working Group Note となりました。これで参考文書として内容が確定されたことになります。

1つ前のバージョン、9月の時点で公開されていた草案 (Working Draft) から特に重要な変更はありません。

ちなみに、HTML5 の仕様も 10月に無事勧告となっていますが、これは当 Blog でも書きました (下記リンク参照)。

Continue reading

Firefox 34 が正式リリース、SSL 3.0 の無効化、CSS Fonts 関連の実装強化など

FirefoxFirefox の最新版、Firefox 34 が正式リリースされ、自動更新も提供開始されました。Android 版も同時公開。

以前、この Blog でも書きましたが、このバージョンで、SSL 3.0 がデフォルト無効化されました。また、CSS3 で再定義された、font-variant プロパティがデフォルトで有効になるなど、CSS Fonts 関連の実装が進んでいます。

Continue reading

Web アクセシビリティを身近に感じてもらうためのごく簡単なお話

この記事は、Web Accessibility Advent Calendar 2014、1日目の記事です。去年は WAI-ARIA の導入方法について、ごく初歩的な記事を書いたんですが、今年は初っぱな、1日目の記事と言うことで、ごくごく簡単な記事でハードルを下げにいってみようかと思います (余計なお世話)。

Continue reading

Firefox 36 が unicode-range デスクリプタをサポート、文字コード範囲を指定してフォントを適用可能に

Firefox Nightly現在、Firefox Nightly としてリリースされている、Firefox 36 で、unicode-range デスクリプタがサポートされました。unicode-range は @font-face デスクリプタで、読み込んだフォントの適応範囲を指定します。

例えば、ある要素内のテキストのうち、特定の文字のみ、あるいは特定の文字コード範囲に含まれる文字のみを、別のフォントで置き換えたい場合などに、unicode-range でその文字や文字コード範囲を指定することができます。

Continue reading

Firefox Nightly が CSS でスムーズスクロールを実現する scroll-behavior: smooth; をサポート

Firefox Nightly現在、Firefox Nightly としてリリースされている、Firefox 36 で、scroll-behavior プロパティ、およびその値、smooth が実験的ながらサポートされました。

現状では、デフォルトで無効になっているため、about:config から layout.css.scroll-behavior.enabled、および layout.css.scroll-behavior.property-enabledtrue にしないと有効にはなりませんが、有効にした上で body 要素などに scroll-behavior: smooth; を指定する事で、ページ内リンクの移動時など、ページのスクロールが瞬時にではなく、スムーズスクロールで動作するようになります。

Continue reading

HTML5 仕様が W3C 勧告に

HTML5HTML5 仕様が無事、W3C 勧告 (W3C Recommendation) となりました。直近の更新としては、2014年 9月 16日に勧告案 (Proposed Recommendation) として公開されていましたが、事前に公開されていた Plan 2014 で 2014年第4四半期中の勧告予定になっていた通り、2014年 10月 28日付けで勧告へと進みました。

Continue reading

Firefox Nightly のインスペクタが ::before / ::after 疑似要素を表示するようになった

Firefox Nightly現在、Firefox Nightly としてリリースされている、Firefox 35 のインスペクタが変更され、::before / ::after 疑似要素を表示するようになりました。

表示するようになったといっても、インスペクタ上は 「ここに ::before 疑似要素がありますよ」 という感じで表記が出るだけなんですが、それでも表示された ::before / ::after 疑似要素を選択することで、それらに適用されたスタイルや疑似要素自体のボックスモデルを確認したりできるのでとても便利です。

Continue reading

HTML5 が勧告案 (Proposed Recommendation) に。DataCue / Drag and drop は仕様から削除

HTML52014年 6月 17日付けで一旦、最終草案 (Last Call Working Draft) に差し戻されていた HTML5 仕様ですが、2014年 9月 16日をもって勧告案 (Proposed Recommendation) として公開されました。

At risk 扱いだった、「DataCue」、「input type="time"」、「Drag and drop」、「ruby 関連要素 (新仕様)」 のうち、「DataCue」 および 「Drag and drop」 は実装不足ということで HTML5 仕様からは削除。「input type="time"」、「ruby 関連要素 (新仕様)」 は仕様に残されました。

Continue reading

Google 検索結果内の検索ボックスを有効にするための Microdata マークアップ

GoogleGoogle ウェブマスター向け公式ブログで、Google の検索結果内に表示される検索ボックス (Sitelinks search box) について刷新され、見せ方が変わったほか、この 「Sitelinks search box」 を表示するために必要なマークアップについて紹介されていました。

Sitelinks search box は、検索結果で表示されるサイトリンクの下部に表示されるもので、以前から一部の Web サイトでは表示されていたものですが、今回、デザインが変更になり、検索ボックスがサイトリンクの上部に表示されるようになったほか、オートコンプリートにも対応したとのこと。

Continue reading

Firefox の srcset 属性実装は sizes 属性を省略すると正常に動作しないらしい

Firefox Nightly1つ前の記事で picture 要素 や srcset 属性に関して書いた課程で知ったんですが、Firefox (テストしたのは Firefox Nightly 34.0a1) の srcset 属性実装に関して、sizes 属性を省略したときに正しく動作しない問題があるようです。Bugzilla@Mozilla に報告されていました。

Continue reading

W3C Markup Validation Service が HTML5 picture 要素 や srcset 属性に対応

W3CSimon Pieters 氏 (Opera Software) のツイート経由ですが、Validator.nu および、W3C Markup Validation Service が、picture 要素と srcset / sizes 属性に対応したそうです。

正確には Validator.nu が対応したので、HTML5 文書の検証に Validator.nu エンジンを使用している W3C Markup Validation Service も対応したという形になりますが。

Continue reading

メンテナブルな CSS 設計の考え方がよくわかる 「Web 制作者のための CSS 設計の教科書」

Web 制作者のための CSS 設計の教科書

サイバーエージェント社でフロントエンドエンジニアとしてご活躍の谷 拓樹氏 (@hiloki) 著による 「Web 制作者のための CSS 設計の教科書」 をインプレス様よりご恵贈いただいたので紹介です。

Continue reading

HTML5 Image Description Extension (longdesc 属性) が W3C 勧告候補に

HTML5HTML5 拡張仕様として策定が進んでいる、「HTML5 Image Description Extension」 が、勧告候補 (Candidate Recommendation / CR) として公開されました。

HTML5 Image Description Extension は、画像に対する、(alt 属性だけでは難しいレベルの) 長文の説明へのリンクを提供する属性、longdesc 属性の仕様を策定するものです。longdesc 属性自体は HTML 4.01 の時代から存在していたものの、HTML5 の仕様には含まれなかったのですが、アクセシビリティ上の理由から必要性が議論され、改めて HTML5 拡張仕様としての策定が進められています。

Continue reading

HTML5 仕様が再び勧告候補 (Candidate Recommendation) に

HTML5予定されていた通りですので特別な話ではないのですが、今年 6月に 「HTML5 仕様が最終草案 (Last Call Working Draft) に差し戻し」 という記事で書いたとおり、一旦最終草案 (Last Call Working Draft) に差し戻されていた HTML5 仕様が、再び勧告候補 (Candidate Recommendation) として公開されました。

Continue reading

Firefox 31 が正式リリース、HTML5 track 要素や CSS Variables 最新仕様に対応など

FirefoxFirefox の最新版、Firefox 31 が正式リリースされ、自動更新も提供開始されました。Android 版も同時公開。

HTML5 の track 要素に対応 (WebVTT) したほか、接頭辞が -- に変更された、CSS Variables (CSS カスタムプロパティ) の最新仕様に対応し、利用可能です。その他、ECMAScript 6 の実装がさらに進んだり、CSS.escape() が実装されるなどしています。

Continue reading

CSS Variables (CSS カスタムプロパティ) の使い方

CSS Variables とは、CSS でカスタムプロパティを定義し、変数として使用できるようにするための新しい CSS 仕様です。定義した変数は他のスタイル宣言内で参照することができることで、より効率的な CSS の記述が可能になります。

以前、この Blog でも書きましたが、CSS Variables は Firefox 29 が実装し、機能としては使用できるようになっていましたが、正式リリース版ではデフォルトでは無効だったのと、カスタムプロパティの接頭辞が var- という古い仕様での実装でした。

近日正式版がリリースされる予定の Firefox 31 で最新の仕様 (接頭辞が -- に変更) を基に実装、デフォルト有効になる予定とのことですので、ちょうどいい機会と言うことで CSS Variables の使い方について最新の仕様に基づく解説を書いてみようと思います。

Continue reading

HTML5 仕様 (WHATWG) に picture 要素が追加される

HTML5Simon Pieters 氏 (Opera Software) のツイート経由ですが、WHATWG 版の HTML5 仕様に、picture 要素が追加されたそうです。

picture 要素は、所謂レスポンシブ・イメージ (Responsive images) を実現するための要素で、picture 要素内に内包された img 要素と source 要素に srcset 属性、media 属性、sizes 属性を組み合わせて指定することで、デバイスピクセル比やサイズなどに応じた、複数イメージソースの出し分けが可能になります。

Continue reading

HTML5 仕様が最終草案 (Last Call Working Draft) に差し戻し

HTML52012年 12月の時点で勧告候補 (Candidate Recommendation) となっていた W3C の HTML5 仕様ですが、本日付で一旦、最終草案 (Last Call Working Draft) に差し戻されました。2014年 7月 15日までフィードバックコメントを受付中です。

Continue reading

Recent Entry

全ての記事一覧を見る

Hot Entry

逆引きおすすめエントリー