週刊Webテク通信

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

この記事を読むのに必要な時間:およそ 2 分

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

1. CSS Reference - A free visual guide to the most popular CSS properties.http://cssreference.io/

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

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

図1 CSSのプロパティのビジュアルガイド

図1 CSSのプロパティのビジュアルガイド

2. 4 fresh alternatives to the hamburger menu | Webdesigner Depothttp://www.webdesignerdepot.com/2016/11/4-fresh-alternatives-to-the-hamburger-menu/

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

  1. 縦書き文字によるナビゲーション
  2. 画面の四隅や周辺部にバラバラに配置されたメニュー
  3. とても細いスライドメニュー
  4. 垂直メニュー

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

図2 ハンバーガーメニューの代わりになるメニューのトレンド

図2 ハンバーガーメニューの代わりになるメニューのトレンド

3. Scrolling in Web Design: How Much Is Too Much?https://speckyboy.com/scrolling-web-design/

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

  1. 長いスクロール
  2. 固定した要素のある長いスクロール
  3. 無限スクロール
  4. 視差スクロール

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

図3 Webデザインのスクロールについて

図3 Webデザインのスクロールについて

4. 20 Typography Animations, Experiments and Small Solutions for Your Next Web Projecthttp://www.onextrapixel.com/2016/11/22/20-typography-animations-experiments-and-small-solutions-for-your-next-web-project/

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

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

図4 文字を使ったアニメーションのいろいろな例

図4 文字を使ったアニメーションのいろいろな例

5. Enhancing a comment form: From basic to custom error message to BackgroundSync | justmarkuphttps://justmarkup.com/log/2016/10/enhancing-a-comment-form/

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

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

図5 コメントフォームを機能アップするためのテクニック

図5 コメントフォームを機能アップするためのテクニック

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

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

LogoMiner - Catalog of logo designs for analysis and free downloadhttp://logominer.com/

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

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

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

図6 ロゴを探してダウンロードできるサービス

図6 ロゴを探してダウンロードできるサービス

今週の気になるWebネタ

Google,「Google Cast」「Chromecast built-in」に改称へ - ITmedia ニュース http://www.itmedia.co.jp/news/articles/1611/24/news061.html

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

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

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

著者プロフィール

芦之由(あしのよし)

Webデザインやサイト制作に役立つブログ記事やニュースをほぼデイリーでお届けするメルマガ「デイリーWebテク」発行人。フリーのWebデザイナー兼イラストレーター&ライター。シャープMZ-80Bからのパソコンユーザーで,Macintosh IIciからのMacユーザー。嫌いな言葉は「IEで見ると表示が崩れてるよ」。

デイリーWebテクの購読やバックナンバーについては,以下の紹介サイトをご覧ください。

デイリーWebテク - Webテク関連の話題を毎日配信 -
URLhttp://www.rgs680.com/dwt/

バックナンバー

週刊Webテク通信

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

バックナンバー一覧

コメント

コメントの記入