WEB制作に役立つ便利サイトまとめ

radio_radio
WEB制作(コーディング)に役立つサイトをまとめました。【内容】フォント/計算/CSSで作るicon/Animation/画像軽量化/CSSの記述順序

▼フォント

・Worldmark.it

キーワードを入力するとPC内にインストールされているフォントでそのキーワードを表示してくれます。「この見出しはどんなフォントにしよう?」と悩んだ時などに便利。

・iOS Fonts

iOSで使用できるフォント一覧

▼計算

・Grid.Guide

デザイン時点で使用したいサイト。
例えば「950pxの中に横並びで4つのリストを表示させたい」とうような場合にリストの幅、隙間がそれぞれ何pxだとうまく収まるか、といった事を自動計算してくれます(パターンは複数)。
条件に合ったPNGのダウンロードも可能。

・RQRWD

レスポンシブ/スマホ・タブレット端末などの「パーセンテージ計算」に便利です。親に対して子が何%なのか、各数値を入力するだけで計算できます。

・比率計算機

レスポンシブなどに使用する比率計算に。

▼CSSで作るアイコン

・CSS ICON

使用しがちなアイコン集。すべてCSSで制作できます。

▼Animation

・Animista CSS Animations

項目を選びながらCSS3アニメーションを作成するサイト。

・CSS3 Keyframes Animation Generator

CSS3アニメーションをドラッグなどで直感的に作ることができるサイト。

・Animate.css

著名ライブラリ「Animate.css」の動きを確認できるサイト

・AOS

非jQueryのスクロールアニメーションを実現できる著名JSライブラリ「AOS」の動きを確認できるサイト

▼画像軽量化

・TinyPNG

PNG、JPEGの軽量化サイト。

・Optimmizilla

PNG、JPEGに使用できるサイト。同様のサイトの中では最もJPEGの画質を保てる印象。

▼CSS記述順

・CSScomb

CSSの記述順を任意の順番にソートしてくれるサイト。
記述順序にルールがある場合に便利です。

https://matome.naver.jp/odai/2155117940441497001
2019年02月26日