Google+ ウィジェットの JavaScript コードに async / defer 属性がついた件
Google+ プラットフォームで配布されている、「+1 ボタン」 や、「バッジ」 などの JavaScript コードすべてに、async / defer 属性が付与されるようになりました。 Google+ プラットフォームで配布されている、「+1 ボタン」 や、「バッジ」 などを Web サイトに設置する際に使用される JavaScript のソースコードがありますが、これらソースコードに、script 要素の async / defer 属性が付与されるようになりました。 Googleの Ilya Grigorik 氏が自身の Google+ に投稿しているほか、実際のソースコードにもすでに反映されています。 All Google+ widgets have been updated to use the script[async + defer] pattern!... ： Ily
Firefox の srcset 属性実装は sizes 属性を省略すると正常に動作しないらしい
1つ前の記事で picture 要素 や srcset 属性に関して書いた課程で知ったんですが、Firefox （テストしたのは Firefox Nightly 34.0a1） の srcset 属性実装に関して、sizes 属性を省略したときに正しく動作しない問題があるようです。Bugzilla@Mozilla に報告されていました。 1052417 - Default `sizes` attribute value for `srcset` should be 100vw ： Bugzilla@Mozilla srcset 属性の実装状況 srcset 属性は、近々正式リリースされる、Firefox 32 で試験的に実装されていますが、今回テストしたのは Firefox Nightly （34.0a1） です。まだ試験的な実装のため、dom.image.srcset.enabled お
Google 検索結果内の検索ボックスを有効にするための Microdata マークアップ
Google の検索結果内に表示される検索ボックス （Sitelinks search box） を有効にするための schema.org 語彙による Microdata を使用したマークアップについて解説してみます。 Google ウェブマスター向け公式ブログで、Google の検索結果内に表示される検索ボックス （Sitelinks search box） について刷新され、見せ方が変わったほか、この 「Sitelinks search box」 を表示するために必要なマークアップについて紹介されていました。 検索結果内の検索ボックスが新しくなりました ： Google ウェブマスター向け公式ブログ Sitelinks Search Box ： Google Developers Sitelinks search box は、検索結果で表示されるサイトリンクの下部に表示されるもので、以
placeholder 属性と jQuery で IE にもプレースホルダを
フォームの入力コントロール （input とか textarea） に対して、初期値として入力例などをうっすら表示し、ユーザーへのガイドとして使用するプレースホルダ。HTML5 では、placeholder 属性が新たに追加され、プレースホルダの提供が簡単に行えますが、この属性の値を活かして、未対応環境にもプレースホルダを提供する jQuery プラグインを紹介します。 フォームの入力コントロール （input とか textarea） に対して、初期値として入力例などをうっすら表示し、ユーザーへのガイドとして使用する （プレースホルダ） なんてことはよくやります。 HTML5 では、プレースホルダを指定する属性として、まさにそのままの名前が付いた、placeholder 属性が新たに追加され、ブラウザさえ対応していればとても簡単に実現可能になっていますが、今のところ IE が対応していな
HTML5 Image Description Extension （longdesc 属性） が W3C 勧告候補に
画像に対する長文の説明へのリンクを提供する属性、longdesc 属性に関する HTML5 拡張仕様、「HTML5 Image Description Extension」 が、勧告候補として公開されました。 HTML5 拡張仕様として策定が進んでいる、「HTML5 Image Description Extension」 が、勧告候補 （Candidate Recommendation / CR） として公開されました。 HTML5 Image Description Extension は、画像に対する、（alt 属性だけでは難しいレベルの） 長文の説明へのリンクを提供する属性、longdesc 属性の仕様を策定するものです。longdesc 属性自体は HTML 4.01 の時代から存在していたものの、HTML5 の仕様には含まれなかったのですが、アクセシビリティ上の理由から必要性が
position: absolute; の指定で要素が上下左右中央配置になる理由
人様の人気エントリーに乗っかる感じで恐縮ですが、「CSSで block 要素を上下左右中央寄せにする、イマドキの方法。 ： バシャログ。」 という記事が話題になっていたので、なんでその指定で上下中央配置になるのか補足してみます。 詳しい話は下記のリンク先をご覧ください。 CSSでblock要素を上下左右中央寄せにする、イマドキの方法。 ： バシャログ。 何でこういうことを書くかというとですね、例えば CSS でこういう指定をするとこう表示されるっていう話に関しては、仕様書を基準に話して欲しいのです。 「なんかよくわからないけどこういう風に書いたらこういう表示になった。よかったね」 で終わらせるのは個人の自由ですが、仕様書を基になぜそうなるのかの根拠を知るとより一層理解が深まると思いますので。 なので余計なお世話なんですが、下記に小難しく書きます。 解説のためのサンプルソース 例えば、下記の
CSS Variables （CSS カスタムプロパティ） の使い方
CSS でカスタムプロパティを定義し、変数として使用できるようにするための新しい CSS 仕様 「CSS Variables」 について、最新仕様に基づいた解説します。 CSS Variables とは、CSS でカスタムプロパティを定義し、変数として使用できるようにするための新しい CSS 仕様です。定義した変数は他のスタイル宣言内で参照することができることで、より効率的な CSS の記述が可能になります。 以前、この Blog でも書きましたが、CSS Variables は Firefox 29 が実装し、機能としては使用できるようになっていましたが、正式リリース版ではデフォルトでは無効だったのと、カスタムプロパティの接頭辞が var- という古い仕様での実装でした。 近日正式版がリリースされる予定の Firefox 31 で最新の仕様 （接頭辞が -- に変更） を基に実装、デフォ
吹き出しやリストマーカーに使える三角形を CSS で作る
特に目新しい方法ではないですが、デザイン内に出てくることの多い三角形のあれ （謎） を簡単に CSS で作る方法について。 しばらく CSS ネタ的なの書いていませんでしたので書いてみようと思います。 三角形のあれというのは、よくリスト型メニューにアイコン的に使われていたり、メインメニューでアクティブな項目に付けたり、Tips などを表示する際に吹き出し的な見た目を作る場合に使われたりする、下記のような部分のことです。 これを CSS のみで簡単に再現する方法を解説してみます。CSS は class の付け方でカラーやサイズなどを簡単に適用できるようにしてみましょう。また、今どきっぽく Sass 向けに mixin （ミックスイン） のサンプルも紹介しておきますので参考まで。 CSS による基本的な三角形の作り方 いまさら詳しく解説するまでもないですが、下記のように border プロパテ
jQuery が 1.12 以降のブラウザサポートについて発表。 IE6/7 のサポートは 1.12 まで
jQuery 公式サイトにて、年内にリリース予定の jQuery 1.12 以降のブラウザサポートについて、1.12 が IE6/7 をサポートする最後のリリースになると発表しました。 Browser Support in jQuery 1.12 and Beyond ： Official jQuery Blog 以前、この Blog でも書きましたが、jQuery 2.x 系はすでに IE6/7/8 のサポートはしていません。1.x 系がレガシーブラウザをサポートするバージョンですが、1.12 までは現在の最新版である 1.11 同様、IE6/7/8 をサポートするものの、次バージョン （2015年リリース予定） の 1.13 では IE8 以降のみのサポートとなります。 What's Changing? There are no firm dates, but we plan on r
新しい Google Maps Embed API が公開、埋め込み地図のカスタマイズが簡単に
Google が新しい Google Maps Embed API を公開しました。 埋め込む地図の URL に様々なパラメータをつけることで、ルート案内や周辺検索など、様々なカスタマイズを簡単に行いつつ、Web ページ上に地図を表示することが可能です。 Adding the new Google Maps to your website just got easier with the new Google Maps Embed API ： Google Geo Developers Blog Google Maps Embed API ： Google Developers Google Maps Embed API - Developer Guide 埋め込みコード生成用のページも用意されています。下記にアクセスしてみましょう。 Google Maps Embed API -- Ge
スタイルの継承で Google Maps JavaScript API で表示した地図のコントロール UI がおかしくなった件
たいした話ではないんですが、ある案件で Google Maps JavaScript API を使用した地図を Web サイト内に表示して調整しているとき、通常、デフォルトでは左上の方に表示されるコントロール UI （ズームとか操作するやつです） の表示がおかしいことに気がつきました。 で、なんでだろなと思って Web コンソールで調べてみたら、思わぬところに原因がありましたというお話。 とりあえずどういう症状が起こったかですが、下記が正しい表示。 一方で、下記が今回おかしくなっていた時の表示。コントロール UI の一部がなんか変なことになっています。 ちなみに上記のサンプルで出しているキャプチャ画像は前述した 「ある案件」 のものではなく、自分の会社のサイトで表示している地図を改めて確認したら同じ症状がでていたのでそちらのキャプチャ画像です。 img 要素に対する max-width プ
TinyPNG API を使って PNG 画像を最適化する grunt-tinypng 使ってみた
PNG ファイルの最適化 （減色 / 圧縮） を行うオンラインツールとして TinyPNG は有名ですが、開発者向けの API も提供されています。 この TinyPNG API を使った画像の最適化を Grunt タスクとして実行できる 「grunt-tinypng」 をここのところ試していたんですが、いい感じだったので紹介。これまでは 「grunt-pngmin」 を使っていたのですが grunt-tinypng に移行して試しています。 grunt-tinypng ： marrone/GitHub TinyPNG ： Compress PNG images while preserving transparency ちなみに、TinyPNG API は処理する画像の数によって有料になりますので、その点は注意が必要です。現時点での価格設定は下記のようになっています。 Free プラン
SVG と背景色を使ってサイズやカラーが自在な汎用性のあるアイコンボタンを作る
SVG によるアイコンデータと CSS による背景色の指定を組み合わせてサイズやカラーを自在に変更可能なアイコンボタンを作るお話。あわせて主要 Web サービスのロゴデータを SVG で用意する方法や注意点なども。 透過 GIF や PNG 画像に背景色を組み合わせることでアイコンボタンのカラーバリエーションを簡単に作るっていうやり方は昔からありますが、これを SVG （Scalable Vector Graphics） でやることでサイズ変更にも対応しやすいやつを作るっていうお話。 手法的には目新しいことは何もありませんが、この前この Blog のデザインをリニューアルしたときに視覚的に左側サイドメニュー上部 （スマートフォン表示だと隠れてると思いますが） にある 「Follow」 メニュー部分で使ったので紹介。 やってることは簡単です。白抜きにしたい部分をそのまま白色、背景は透過するよ
Web デザイナーさん向け Grunt を使った コーディング作業の効率化、はじめの一歩 | WWW WATCH
フロントエンドの開発を色々と捗らせてくれる Grunt について、初めて Grunt を使うならこれだけまずはやってみたら？ という入門的な解説記事を書いてみました。 この記事は公開からかなりの時間が経過して内容が古いのと、Gulp を使ったフロントエンド開発環境構築について新しい記事 「Web サイト作るお仕事をしている人向け Gulp で作るフロントエンド開発環境」 を書いていますのでそちらをご覧ください。 Grunt の導入記事なんか珍しくもないし、色々な方がわかりやすい記事を過去にも書かれていているので今さらではありますが...... とはいえ、まだ使ったことがない人もいるだろうということで、「Grunt って何ですか？」 とか「使ってみたいけどよくわからない......」 なんていう Web デザイナー （主に HTML や CSS を書くフロントエンドな人） さん向けに、初めて
世界各国の地図がベクターデータでダウンロードできる 「Free Vector Maps」
すでに他でも紹介されているかもしれませんが、ちょっと便利だったので紹介。 「Free Vector Maps」 は、世界各国の地図を、ベクター形式のデータ （ダウンロードデータには .ai, .esp, .jpg, .pdf, .png が含まれています） でダウンロードできるサイト。提供されるデータは、基本的に無料で、個人 / 商用利用を問わず利用できます。 Free Vector Maps ： Royalty-Free Vector Maps Free Vector Maps is a growing library of highly detailed free* and premium royalty-free vector maps created for designers all over the world. View the Library (*Attribution r
自動更新無効化ツールキット配布開始で IE11 の自動更新開始が近づく
Windows 8.1 の公開もあと数時間後に迫っている今日この頃ですが、IEBlog で Windows 7 向けの IE11 自動更新無効化ツールキット （Update Blocker Toolkit） を配布開始するよというアナウンスがされていました。すぐにではありませんが、近いうちに Windows 7 向けに IE11 の自動更新が始まることが予想されます。 IE11 Automatic Update Blocker Toolkit Available for Windows 7 ： IEBlog Business and organizations that want to manage their own update schedule can use the IE11 Automatic Update Blocker Toolkit to disable automatic
HTML5 で追加された属性の中からマイナーっぽいのを紹介してみる
HTML5 から追加された属性の中から、まだあまり広く使われてなさそうな属性さんたちに日の目を見て頂くための紹介記事を書いてみようかと思います。 この記事は、HTML5 Advent Calendar 2013、11日目の記事です。 去年の HTML5 Advent Calendar 2012 では、Microdata 関連の記事を書いたんですが、今年も登録してみたものの、見事にネタが無いのでどうしようかなと...... ということで、HTML5 から追加された属性 （要素じゃなく属性の方） の中から、まだあまり広く使われてなさそうな属性さんたちに日の目を見て頂くための紹介記事を書いてみようかと思います。 ちなみに、「あまり広く使われていなさそうな」 は完全に私の独断と偏見ですのでよろしくお願いします。 placeholder 属性 最初なのであまりマイナーっぽくないやつから。その名の通り
WAI-ARIA はじめの一歩。サンプルソースで学ぶ WAI-ARIA 導入方法
WAI-ARIA をマークアップに取り入れるはじめの一歩として、まずは WAI-ARIA を既存のマークアップに取り入れる際に、扱いやすい項目についてピックアップしつつ、それぞれのサンプルソースを挙げながら紹介します。 この記事は、Web Accessibility Advent Calendar 2013、4日目の記事です。ベタな内容なのでもしかすると他の方とかぶるかもしれませんが、気にせずいきます。 とはいっても、WAI-ARIA の仕様をすべて詳細に取り上げるのは大変なので、まずは WAI-ARIA を既存のマークアップに取り入れる際に、扱いやすい項目についてピックアップしつつ、それぞれのサンプルソースを挙げながら、紹介してみたいと思います。まだ WAI-ARIA をマークアップに取り入れたことがない方が、初めて使うきっかけになれば幸いです。 WAI-ARIA の仕様は下記にあります
Google タグマネージャで Web ページに読み込む JavaScript を管理してみる
Google タグマネージャ （Google Tag Manager） をこの Blog 内の各ページで読み込んでいる JavaScript コードの管理に数ヶ月前から使い始めていますが、結構使いやすくて便利なのと、ページの表示速度的にもいい結果が出たので紹介してみます。 Google タグマネージャ公式サイト 機能 ： Google タグマネージャ Google タグマネージャとは？ Google タグマネージャは無料で簡単に使用できるタグ管理システムです。ウェブ上の使いやすい管理画面から自分でタグを管理してモバイル アプリを設定できるため、面倒なコード書き換えは不要で、IT 部門に依頼する必要もありません。 機能 ： Google タグマネージャ から引用 と公式には書いてありますが、簡単にいえば Web ページ内で読み込む各種の JavaScript コード、例えば Google A
Google っぽいプリローダーを CSS だけで作る
Lea Verou 氏の Blog に、CSS のみで、Google の Web アプリケーションで使われているようなプリローダー （画面ロード中に表示されるインジケーター） を作るっていう記事がアップされていましたので紹介。 CSS だけで再現しているため、サイズの調整などにも柔軟に対応できます。 Flexible Google-style loader with CSS ： Lea Verou 基本的には元記事のソースコードを見ればわかると思いますので、簡単にだけ紹介しますが、プリローダーの HTML に関しては、下記のような感じでシンプル。 <div class="progress">Loading...</div> 元記事ではサイズバリエーションのため、下記のような class を追加したものも併記されています。 <div class="small progress">Loadin
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
