WEB制作(コーディング)に役立つサイトをまとめました。【内容】フォント/計算/CSSで作るicon/Animation/画像軽量化/CSSの記述順序
▼フォント
・Worldmark.it
キーワードを入力するとPC内にインストールされているフォントでそのキーワードを表示してくれます。「この見出しはどんなフォントにしよう?」と悩んだ時などに便利。
Wordmark.it helps you choose fonts by quickly displaying your text with your fonts.
・iOS Fonts
iOSで使用できるフォント一覧
iOS Fonts A Place for Happy Typography Every font. Every iOS version. Loading all fonts for iOS 70 % A Map of the Unexplored Project Project authors: Michael Critz and GitHub contributors Contact
▼計算
・Grid.Guide
デザイン時点で使用したいサイト。
例えば「950pxの中に横並びで4つのリストを表示させたい」とうような場合にリストの幅、隙間がそれぞれ何pxだとうまく収まるか、といった事を自動計算してくれます(パターンは複数)。
条件に合ったPNGのダウンロードも可能。
Create pixel perfect grids for the web.
・RQRWD
レスポンシブ/スマホ・タブレット端末などの「パーセンテージ計算」に便利です。親に対して子が何%なのか、各数値を入力するだけで計算できます。
Really Quick Responsive Web Design Calculator is a really quick responsive web design calculator.
・比率計算機
レスポンシブなどに使用する比率計算に。
instant tools PHP Functions hash str_rot13 base64_encode base64_decode md5 md5_file replace mb_convert_kana ord chr bin2hex Original Tools みかか変換ツール 文字出現頻度分析ツール str_rot47 str_rotN 任意ROT N パスワードメーカー モン…
▼CSSで作るアイコン
・CSS ICON
使用しがちなアイコン集。すべてCSSで制作できます。
▼Animation
・Animista CSS Animations
項目を選びながらCSS3アニメーションを作成するサイト。
Animista is a place where you can play with a collection of ready to use CSS animations, tweak them and download only those you will actually use.
・CSS3 Keyframes Animation Generator
CSS3アニメーションをドラッグなどで直感的に作ることができるサイト。
Online tool for creating native CSS3 Keyframes Animation. You can easy and fast generate consistent CSS3 animation using simple UI without any coding.
・Animate.css
著名ライブラリ「Animate.css」の動きを確認できるサイト
Animate.css Just-add-water CSS animations bounce flash pulse rubberBand shake swing tada wobble jello heartBeat bounceIn bounceInDown bounceInLeft bounceInRight bounceInUp bounceOut bounceOutDown bou…
・AOS
非jQueryのスクロールアニメーションを実現できる著名JSライブラリ「AOS」の動きを確認できるサイト
AOS – Animate On Scroll library using CSS3
▼画像軽量化
・TinyPNG
PNG、JPEGの軽量化サイト。
Make your website faster and save bandwidth. TinyPNG optimizes your PNG images by 50-80% while preserving full transparency!
・Optimmizilla
PNG、JPEGに使用できるサイト。同様のサイトの中では最もJPEGの画質を保てる印象。
Optimizilla is the ultimate image optimizer to compress your images in JPEG and PNG formats to the minimum possible size.
▼CSS記述順
・CSScomb
CSSの記述順を任意の順番にソートしてくれるサイト。
記述順序にルールがある場合に便利です。
CSScomb Try online Build config Getting started Paste your code here ↓ Combed code will appear here ↓ Comb it! GitHub Twitter
https://matome.naver.jp/odai/2155117940441497001
2019年02月26日