Web制作に役立つ情報一覧

実装がどんどん簡単になっている！スクロールに連動するCSSアニメーションを与えるスクリプト -Delighters

2018/06/22(Fri) 09:52

コンテンツが横からスライドしたり、カードが追従するように表示されたり、スクロールに連動するCSSアニメーションを簡単に実装できるスクリプトを紹介します。

https://coliss.com/articles/build-websites/operation/javascript/js-add-css-animation-delighters.html

フロントエンドのコーダーの頭の中、デザインを見た時にどんなことを考えるのか

2018/06/20(Wed) 09:49

フロントエンドのコーダーがデザインを見た時にどんなことを考えるのかを紹介します。デザインカンプを手がかりに、そのデザインが意味する仕様上のさまざまな可能性やそれらを実現するための実装方法を考えるなど、コーダーとして最も楽しい時間の一つです。

https://coliss.com/articles/build-websites/operation/work/your-brain-on-front-end-development.html

CSSの便利なセレクタ「:placeholder-shown疑似クラス」を使うと、フローティングラベルも簡単に実装できる

2018/06/19(Tue) 09:54

フローティングラベルとは、フォームのラベルが入力時にアニメーションで上方向にフローティングするテクニックです。一昔前までは、完全にJavaScriptの範疇、もしくは強引なCSSでもたつく感じのアニメーションでしか実装できませんでした。しかし、:placeholder-shown疑似クラスを使用すると、シンプルなコードで滑らかなフローティングラベルを実装できます。

https://coliss.com/articles/build-websites/operation/css/css-only-floating-label.html

配色のセンスがなくても、ベースカラーにぴったりなカラーパレットを1クリックで自動生成する無料ツール -Plax

2018/06/18(Mon) 09:59

UIのデザインやデータのビジュアライズに使用するカラーを決めるのに適したオンラインツールを紹介します。ベースカラーを決めるだけで、そのカラーに調和したフルスペクトルのカラーパレットが簡単に作成できます。

https://coliss.com/articles/build-websites/operation/design/ui-color-palette-generator-plax.html

まるごと使える！デザインが素敵になる無料テクスチャ、パターン素材30個まとめ 2018年6月度

2018/06/15(Fri) 09:53

Webサイトやグラフィック制作で活用されることの多いテクスチャ素材。そのまま背景デザインとして利用したり、テキストエフェクトの質感を演出するために使ったりと使い道もさまざまで、バラエティー豊富なデザインテクスチャが数多く公開されています。

http://photoshopvip.net/109484

CSS Gridの実用的なテクニックが基礎からていねいに解説されたフロントエンドの制作者にオススメの本

2018/06/15(Fri) 09:52

CSS Gridをそろそろ始めてみよう、と考えている人にぴったりの解説書を紹介します。本書は実践的な解説書で、CSS Gridを使用してデスクトップ・スマホ向けのさまざまなレイアウトをはじめ、ヘッダやセクションやフッタやナビゲーションなどのコンポーネントの実装方法が詳しく解説されています。

https://coliss.com/articles/book-review/isbn10-4839966338.html

Webサイト内のフリクションを見つけて改善する７つの戦略

2018/06/14(Thu) 10:09

ユーザー体験の観点から言うと、フリクション（摩擦）とはユーザーが目標を達成するのを阻むすべての要因のことです。フリクションはユーザーとデザイナーの双方にとって重大な問題となります。なぜなら、フリクションはコンバージョンを低下させ、直帰率を上昇させて、ユーザーがタスクをやめてしまう要因となるからです。

http://uxmilk.jp/71909

2018年おすすめのCSSリセット！「Reboot.css」の特徴と使い方を解説

2018/06/14(Thu) 10:08

Bootstrapは既に多くの人が知っていると思います。では、Bootstrapで採用されているCSSのリセットは知っていますか？

https://coliss.com/articles/build-websites/operation/css/new-reset-rebootcss.html

Web制作者がチェックしておきたい、最近のWebサイトで見かけるデザインのアイデア -2018年5,6月

2018/06/13(Wed) 09:59

デザインで悩んだ時には、新鮮なアイデアに触れてみると良いインスピレーションに繋がります。最近のWebサイトで見かけるデザインのアイデアを紹介します。

https://coliss.com/articles/build-websites/operation/design/6-essential-design-trends-2018-june.html

すごい簡単！UIデザイン用のさまざまなSVGアイコンをカスタマイズして利用できるJavaScriptライブラリ -vivid.js

2018/06/13(Wed) 09:58

WebサイトやスマホアプリにぴったりなSVGアイコンを簡単に使用できるよう構築されたJavaScriptの軽量ライブラリを紹介します。

https://coliss.com/articles/build-websites/operation/javascript/svg-icon-library-vivid.html