Web制作に役立つ情報一覧

[CSS]レスポンシブ対応のフォントサイズの指定方法 -デスクトップやスマホのビューポート幅（vw）に対して文字サイズを変化させる

2017/03/10(Fri) 10:06

CSSだけで、ルートのフォントサイズを元に最小値と最大値を指定し、その間のサイズはビューポート幅（vw）に対して自動で変化させるスタイルシートの記述を生成するオンラインツールを紹介します。

http://coliss.com/articles/build-websites/operation/css/font-size-generator-for-responsive.html

ユーザーの心をつかむ画像を使うときの５つのポイント

2017/03/10(Fri) 10:05

「百聞は一見に如かず」ということわざがある通り、文字だけでなく目で見えるもので伝えることはとても重要です。

http://uxmilk.jp/60824

[CSS]マージンとパディングの使い分け方 -コンテナとコンテンツ間、コンテンツ内の要素間

2017/03/09(Thu) 09:50

CSSでスペースを与える時、マージン(margin)とパディング(padding)はどのように使い分けをしていますか？Webサイトやスマホアプリで実際に使用されるUIコンポーネントを例に、マージンとパディングの使い分け方を紹介します。

http://coliss.com/articles/build-websites/operation/css/margin-or-padding-for-ui.html

【対比現象】色の錯覚についてもっと詳しくなろう！

2017/03/09(Thu) 09:49

さて、今回は 色 について 5 つほどお伝えしたいことがあります。こう見えてWebデザイナーになる前に3ヶ月勉強して色彩検定2級を取得しております。（正直有効に活用できているかはわかりません……^^;）

https://liginc.co.jp/346817

デザインにかなり使える！夕焼けから生み出された、高品質なグラデーション素材 -Sunset Gradients

2017/03/08(Wed) 09:57

デザインやイラストに、個人でも商用でも無料で利用できる、高品質な美しいグラデーション素材を紹介します。グラデーションは夕焼けから作成されており、その美しさはデジタルでもアナログでも堪能できます。

http://coliss.com/articles/freebies/sunset-gradients-by-olhakozachenko.html

これぞプロのデザインテクニック！簡単なのにすごい、アイコンを作るテクニックのまとめ

2017/03/07(Tue) 09:50

オリジナルのアイコンを作るシンプルで簡単なデザインテクニックを紹介します。円や矩形などの基本的な形を組み合わせたり、変形させたりして、さまざまなアイコンを作成します。

http://coliss.com/articles/build-websites/operation/design/simple-guide-to-iconography.html

CSSのposition:stickyがすごく便利

2017/03/06(Mon) 09:50

最近新しく追加された position の新しい値 sticky が場合によってはすごく便利なので記事を書いてみます。対応ブラウザがまだあまり多くないので実用性は乏しいかもしれませんが、今まで JavaScript の力を借りなきゃ出来なかったことがたったの2行の CSS で出来てしまう魔法みたいな position の値です。

https://q-az.net/position-sticky/

春にぴったり！フォントやテクスチャをかわいい水彩タッチに仕上げる無料素材 -Aquaflow

2017/03/06(Mon) 09:49

デザインやイラストに使うフォント、オブジェクト、テクスチャなどを簡単に、かわいい水彩タッチに仕上げる無料素材を紹介します。

http://coliss.com/articles/freebies/watercolor-generator-aquaflow.html

ビジネスにおいてUXデザインが必要な理由

2017/03/03(Fri) 10:01

急速に進化するオンライン世界に対応し続けるために、企業は新しいテクノロジーや理論を効率的に導入する必要があります。進化の一例として、デザインの中心が、従来のUI（ユーザーインターフェイス）へのものから、UX（ユーザー体験）へ移行していることが挙げられるでしょう。

http://uxmilk.jp/60609

Flexboxでレイアウトを作成する時に覚えておきたい、子要素がどのようにサイズ変更されるかアニメーションで解説

2017/03/03(Fri) 10:00

普通にレイアウトするのであれば、FlexboxでもFloatでもそんなに変わりなく利用できます。Flexboxは、flex（収縮する）の名の通り、収縮してサイズ変更できることが大きな特徴です。

http://coliss.com/articles/build-websites/operation/css/even-more-about-how-flexbox-works.html