WWW Watch

HTML カテゴリーの記事一覧

HTML に関する記事の一覧を表示しています。(1 / 4 ページ)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Firefox 30 でインスペクタが各要素のボックスモデルをオーバーレイ表示するようになっていた件

Firefoxたまたま Nightly (現時点で Firefox 31) でインスペクタを開いて気がついたんですけども、今までインスペクタの左隅に表示されてた各要素のボックスモデル (Box Model) について、実際のページ上にオーバーレイ表示するようになったんですね。見やすくて便利になりました。

で、調べたら Firefox 30 からの新機能だそうです。

Continue reading

srcset 属性に対応した Chrome ベータが公開、レスポンシブイメージ対応が可能に

Chrome Beta先月末の話ですのでちょっと乗り遅れ感はハンパないですが、Google Chrome の最新ベータ版、Chrome 34 が公開され、srcset 属性への対応が明らかにされました。

去年の夏に Webkit が Nightly Builds で srcset 属性をサポートした時から 議論されていたものが実際に実装されましたというお話。

Continue reading

SVG と背景色を使ってサイズやカラーが自在な汎用性のあるアイコンボタンを作る

透過 GIF や PNG 画像に背景色を組み合わせることでアイコンボタンのカラーバリエーションを簡単に作るっていうやり方は昔からありますが、これを SVG (Scalable Vector Graphics) でやることでサイズ変更にも対応しやすいやつを作るっていうお話。

手法的には目新しいことは何もありませんが、この前この Blog のデザインをリニューアルしたときに視覚的に左側サイドメニュー上部 (スマートフォン表示だと隠れてると思いますが) にある 「Follow」 メニュー部分で使ったので紹介。

Continue reading

新しい picture 要素の仕様が公開、レスポンシブ・イメージ最新動向

Responsive Images Community Group所謂、レスポンシブ・イメージ (Responsive images) のお話ですが、HTML5 extension (HTML5 拡張仕様) として策定されている picture 要素に関して、最新の仕様 (Editor's Draft) が年明け、1月 2日に公開されました。

ちょっと時間が経ってしまいました (10日以上、下書きのままで放置されていたのはナイショ) が紹介と、レスポンシブ・イメージ関連の最新動向を簡単にまとめてみます。

Continue reading

HTML5 で追加された属性の中からマイナーっぽいのを紹介してみる

HTML5この記事は、HTML5 Advent Calendar 2013、11日目の記事です。

去年の HTML5 Advent Calendar 2012 では、Microdata 関連の記事を書いたんですが、今年も登録してみたものの、見事にネタが無いのでどうしようかなと...... ということで、HTML5 から追加された属性 (要素じゃなく属性の方) の中から、まだあまり広く使われてなさそうな属性さんたちに日の目を見て頂くための紹介記事を書いてみようかと思います。

ちなみに、「あまり広く使われていなさそうな」 は完全に私の独断と偏見ですのでよろしくお願いします。

Continue reading

WAI-ARIA はじめの一歩。サンプルソースで学ぶ WAI-ARIA 導入方法

この記事は、Web Accessibility Advent Calendar 2013、4日目の記事です。ベタな内容なのでもしかすると他の方とかぶるかもしれませんが、気にせずいきます。

とはいっても、WAI-ARIA の仕様をすべて詳細に取り上げるのは大変なので、まずは WAI-ARIA を既存のマークアップに取り入れる際に、扱いやすい項目についてピックアップしつつ、それぞれのサンプルソースを挙げながら、紹介してみたいと思います。まだ WAI-ARIA をマークアップに取り入れたことがない方が、初めて使うきっかけになれば幸いです。

Continue reading

Google タグマネージャで Web ページに読み込む JavaScript を管理してみる

Google タグマネージャGoogle タグマネージャ (Google Tag Manager) をこの Blog 内の各ページで読み込んでいる JavaScript コードの管理に数ヶ月前から使い始めていますが、結構使いやすくて便利なのと、ページの表示速度的にもいい結果が出たので紹介してみます。

Continue reading

HTML 5.1 など W3C 仕様が複数更新、Microdata 仕様は WG Note へ

HTML510月29日付けで W3C の HTML 5.1 仕様が更新されました。

加えて、HTML Canvas 2D Context, Level 2、および HTML Microdata の仕様も 同日付けで更新されています。

また、ほぼ同時にですが、11月1日付けで WHATWG の HTML(5) 仕様も更新され、blockquote 要素のセクションで説明されたマークアップ例に大きく差が出たことから、改めて引用元の表記をどのようにするのが最適解なのかという話が出たりしています。

Continue reading

Firefox Nightly が input type="color" に対応

Firefox Nightly現在、Firefox Nightly としてリリースされている、Firefox 28 で、HTML5 から追加された input 要素における type 属性値、「color」 がサポートされました。

input type="color" が指定された入力コントロールは、RGB カラーの入力欄となります。対応するブラウザでは、多くの場合、色を選択するためのユーザインタフェースが表示され、それを操作することで数値 (16進数カラーコード) を入力できます。HTML5 仕様書の該当箇所は下記。

Continue reading

Firefox 25 が正式リリース、Web Audio API、iframe srcdoc 属性などに対応

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

Web Audio API をサポートしたほか、iframe 要素の srcdoc 属性、CSS3 で追加された background-attachment プロパティの値 「local」 のサポートに加え、ECMAScript 6 関連の実装強化などが行われています。また、Android 版では、ゲストブラウジング機能が追加されました。

Continue reading

Google が無料の Web コンテンツ作成ツール 「Google Web Designer」 を公開

Google Web DesignerGoogle さんが、HTML5 広告をはじめとした Web コンテンツをデザイン、作成するための無料ツール、「Google Web Designer」 を公開しました。

Photoshop などのような、視覚インターフェースを使用して、広告などの Web コンテンツを作成し、HTML5、CSS3、JavaScript を書き出すことが可能です。コードエディタも搭載されているので、出力されたコードを直接編集して、より高度なコーディングを行うこともできるようになっています。

基本的にはインタラクティブな要素を持った 「広告」 の作成を簡単に行うためのツールで、AdMob や DoubleClick といった広告プラットフォームとの連携機能も搭載されています。

Continue reading

Chrome Canary が dialog 要素に対応、ダイアログボックスの表示が簡単に

Google ChromeHTML5Rocks の記事経由ですが、Chrome の Canary build が、HTML 5.1 で策定中の dialog 要素に対応したとのこと。

現状では、chrome://flags から enable-experimental-web-platform-features を有効にする必要がありますが、これによってダイアログボックス (モーダルウィンドウ) の表示を HTML と簡単な JavaScript API で行えます。また、::backdrop 疑似要素を使用することで、ダイアログボックス表示時の、画面背景を暗くするあれも CSS だけで簡単に実装可能です。

Continue reading

Firefox 24 が正式リリース HTML5 track 要素への対応など

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

media.webvtt.enabledtrue にする必要はありますが、HTML5 で策定中の新要素、track 要素に対応したほか、同時にリリースされた Android 版では、デスクトップ版では Firefox 22 でデフォルト有効になっていた、WebRTC をサポートしました。

Continue reading

main 要素を使用するサイトが 2ヶ月半で 300% 増加したらしい

HTML5HTML5 で策定中の main 要素について、この要素の生みの親である、Steve Faulkner 氏が Twitter に投稿していたツイートによると、「上位 10万 Web サイトを対象に調査した結果、(直近?) 2ヶ月半で、main 要素を使用するサイトの数が 300% 増加した」 とのこと。

「300% 増加」 っていうと、使用している Web サイトの数が 2ヶ月半前の 4倍になったってことになりますが、ツイートだけで細かいデータが開示されているわけじゃないので、「あぁそうですか。main 要素を使う人増えてるんですね」 くらいしか言えませんけども。main 要素の仕様を書いてる方のツイートだってことも含めて参考まで。

Continue reading

WebKit (Nightly Builds) で srcset 属性がサポートされたらしい

SafariWebKit (Nightly Builds) で HTML の srcset 属性がサポートされたようです。

srcset 属性は、img 要素の属性として使用することで、高精細ディスプレイ (デバイスピクセル比に応じて) 向けや、ディスプレイサイズに応じて画像を出し分けるための属性。所謂、「Responsive images (レスポンシブ イメージ)」 を HTML のみで実現することができます。

Continue reading

Recent Entry

全ての記事一覧を見る

Hot Entry

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