はじめに
- 学習篇はこちら
- デザイン篇はこちら
- ツール篇はこちら
- 網羅性を重視して書いています。(備忘録)
- クリエイティブ・コモンズに気をつけてください。
- ここに書かれていない便利ツールがあれば教えてもらえると幸いです（あとで追加するかもしれません）
- 各項目使いやすさ・使用頻度順？に並べています
- 北海道に春が来るまでは工事中
ツールの宝庫
TwinzLab
とりあえず最強リンク集
coveloping{ } css Border Radius : 長方形の角 その他 Google Maps Generator : GoogleMapの埋め込みをつくれる
様々な機能がある、課金すればさらに多くの機能が使える無料の機能一覧
CSS Animation : アニメーション
CSS Box Shadow Generator : 影
CSS Button Generator : ボタン
CSS Filter Generator : 画像にモザイクかけたりできる
CSS Gradient Generator : グラデーションをつくれる
CSS Shapes Generator : 図形を作れる
CSS Text Shadow Generator : テキストに影をつけれる
CSS Flexbow Playground : Flexboxをまなべる？
Hash Generator : ハッシュ化してくれる
Meta Tag Generator : メタタグを作れる
QR Code Generator : QRコードを作ってくれる
Secure Password Generator : Chrome使ってれば必要ない？
Star Wars Intro Generator : スターウォーズのような演出をhtmlとcssで作ってくれる
Free Frontend
Codepenのまとめ集（名前がFreeだがライセンスは要確認！）
bennettfeely.com
canvasを中心とした便利ツールが盛りだくさんリンク集
HTML
Meta Tags
メタタグを逆算的に作ることができるリンク集
Grid Layout Builder
グリッドレイアウトをあっという間に、、リンク集
Tables Generator
テーブルを作ることができるリンク集
Easings.net
様々なトラディションを実装できるリンク集
Keyframes
CSSアニメーションを作れるリンク集
carbon
コードをおしゃれにしてiframeで埋め込むことができるリンク集
clippy
CSSでの図形の切り取りをコピペで実装できるリンク集
AddThis
SNSのシェアボタンを作れる。アカウントを作らないといけないリンク集
javascriptをつかったもの
Swiper
スライダーをJSをつかってかんたんに実装できる
animatedModal.js
シンプルにアニメーションのついたモーダルを実装できる
Magnific Popup
画像を含むモーダルを実装できる（解説http://mfl.revee.jp/blog/mag%EF%BD%8A%EF%BD%91nific-popup/)
Modal Video
モーダルを使った動画再生ができる、日本語解説もあり親切
PACE.js
ローディング画面を実装できる（解説 https://minory.org/pace-js.html）
scrollrevealjs
スクロールするとアニメーションを実装できる、商用利用にはライセンス購入必要？
解説 https://note.com/sho4771k/n/n4450f5fbd1dc
aos.js
上に同じだがこっちのほうがバリエーション多く使いやすそう？
fullPage.js
説明しにくいので公式サイトを見てもらいたい。商用利用にはライセンス購入が必要
jQuery Scrollify
fullPage.jsの劣化版？だがMITライセンス
smoothState.js
なめらかな画面遷移ができる
細かいところまで手を加えたい人向け
PLACEHOLDER.COM
プレースホルダーを運んできてくれる、使いようによってはyoutubeのローディング画面も作れる？
解説 https://garigaricode.com/placeholder-com/
iTyped.js
タイプライター風のテキスト（デザイン篇にも）
（解説 https://note.com/sho4771k/n/nbbea0d05454a
textillate.js
テキストにフェードアウトなどのアニメーションを入れられる
Stats.js
ステータスを表示してくれる
手の混んだもの
lottie
Airbnb製のアニメーションを作るとそこからスクリプトを生成してくれるライブラリ
GreenSock Animation Platform
よくわからないけどすごい...
結論
大学でhtmlの課題を出されたときにこれらを知っていればぁ。。。