2016年11月第5週号 1位は、CSSのプロパティを図解イラスト＆アニメーションで紹介したガイド、気になるネタは、Google、「Google Cast」を「Chromecast built-in」に改称へ

ネットで見かけたWebテク（Webテクニック・Webテクノロジー）記事から、Webデザイナーの目で厳選したネタを週刊で紹介するこのコーナー。今回は、2016年11月21日～11月27日の間に見つけた記事のベスト5です。

CSSのプロパティを、図解イラストとアニメーションで紹介したビジュアルガイドです。FlexboxやCSS animationなどを、サンプルコードと図解とでわかりやすく解説しています。

CSSプロパティはアルファベット順に並んだ左メニューから選べますし、本文は長い1ページなのでスクロールして見ていくことも可能です。また、Animations、Box model、Flexboxなど重要なものは「Collections」メニューからも選べます。

ハンバーガーメニューの代わりになるナビゲーションメニューを4つ紹介しています。

紹介されている実例のサイトを見ると、スマホサイズの時にはハンバーガーメニューになるものも多く、主にPCで見たときのメニューとしての話のようです。

Webデザインのスクロールについてまとめた記事です。

スクロールの種類については上記の4つが紹介されています。スクロールしても画面に残るスティッキーナビゲーションは非常に有効とのことでした。

文字を使ったアニメーションのいろいろな例をまとめています。それぞれコード共有サイトのCodepenがネタ元で、コードを確認したりいじってみることもできます。

Chrome以外では問題があったり動作しないものも多いとのことで、実際に使用する場合には注意が必要そうです。

コメントフォームを機能アップするためのテクニックを紹介しています。HTMLとJavaScriptを使い、フォームを機能強化するコードの例が掲載されています。

空欄チェックのエラーメッセージのカスタマイズや、自動で広がるテキスト入力エリアなど、ちょっとの手間で使い勝手を良くすることができそうです。

そのほか、最近の記事の中から、気になるニュース記事を3つ紹介します。

先週の気になるWebサービス

ロゴを探して詳細情報を見たりダウンロードできるサービスです。ロゴデザインをいろいろな切り口で検索することが可能です。

業種別、形状、文字数、文字の太さ、色、書体の分類からフォントを絞り込めますし、会社名やブランド名、色やフォントの名前を入力して検索することもできます。

それぞれのロゴは、フォントや色の詳細情報が掲載されており、フォントは購入できるサイトへリンクしています。また、JPEG／PNG／EPS／SVG／PDFのフォーマットでダウンロードも可能です。

メディアストリーミング端末「Chromecast」の技術の名称を「Google Cast」に統一しようとしていたGoogleが、少なくともコンシューマー向けには「Chromecast built-in」にリブランドする計画を発表しました。

Chromecastの認知度も上がってきたので、Google CastじゃなくChrome Castという技術名で広めていこうという戦略なのでしょう。Chromecast built-inは、「⁠インテル入ってる」のようなキャッチフレーズ的なものにもなりそうです。

Googleはサービスの名前をコロコロ変えたり、同じような用途のものを複数作ったりすることも少なくありません。でも、それが許されるようなイメージの会社ですし、我々もツッコミつつ楽しんでるところもありますね。