Web制作に役立つ情報一覧

Photoshopでまずダウンロードしておきたい無料ブラシ素材50個セットまとめ

2017/03/16(Thu) 09:52

鉛筆やチョークで描いたような風合いから、水彩ペイントの淡い色合いやレトロなグランジ感など、さまざまな質感を表現できる Photoshop ブラシ素材セット。

http://photoshopvip.net/99556

[CSS]これなら簡単！レスポンシブ対応、アスペクト比を維持したまま画像や要素を実装する -RatioBuddy

2017/03/16(Thu) 09:51

デスクトップやスマホなど、異なるスクリーンのサイズでも、黄金比や白銀比などのアスペクト比を維持したまま画像や要素を実装するスタイルシートを生成する便利なオンラインツールを紹介します。

http://coliss.com/articles/build-websites/operation/css/calculating-aspect-ratios-ratiobuddy.html

1クリックでSVGのデバッグが可能！SVGのパスをアウトラインに変換、アンカーやポイントやハンドルを表示 -xvg

2017/03/15(Wed) 09:46

Webページで使用しているSVGのパスをアウトラインに変換し、アンカー、コントロールポイント、ハンドルを表示してデバッグができるChromeの拡張機能「xvg」を紹介します。

http://coliss.com/articles/build-websites/operation/work/debug-svg-path-xvg.html

全部無料！魅力的なパッケージを作成する優良モックアップ素材55個まとめ

2017/03/14(Tue) 09:52

ブランディング向けプロジェクト案件に便利な、無料ダウンロードできるパッケージ用モックアップ素材を一覧にまとめています。

http://photoshopvip.net/99484

1行追加でOK！CSSだけで画像をトリミングできる「object-fit」プロパティー

2017/03/13(Mon) 09:55

画像の一覧を表示する時などは、画像のサイズが統一されていると並べて表示させてもすっきりキレイに整って見えますが、必ずしもサイズが同じとは限りません。かといってPhotoshopを使ってすべての画像をリサイズできない…

http://www.webcreatorbox.com/tech/object-fit/

長いスクロールページでユーザーを引きつけるための５つの方法

2017/03/13(Mon) 09:55

ファーストビューだけで情報を伝える時代は終わりました。最近では長いスクロールや無限スクロールを用いるサイトが増えてきています。ユーザーが簡単にコンテンツをスクロールができ、スクロールすると自然に情報が表示されるサイトは以下のような利益をもたらします。

http://uxmilk.jp/61098

商用可！手書きでナチュラルな無料フォント65個まとめ 2017年完全フリー版（和 / 英文対応）

2017/03/10(Fri) 10:06

オシャレなカフェの黒板にチョークで書かれたような、ナチュラルな手書きデザインを検討中のひとにおすすめしたいコンテンツ。ラフで少し崩したような絶妙なバランスは、利用する素材で仕上がりが大きく変わってきます。

http://photoshopvip.net/99366

[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