Webで使えるJavascriptライブラリ
Green Sock
<script src="https://cdn.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script>animejs
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.min.js"></script>https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.min.js
Darkmodejs
<script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.5.7/lib/darkmode-js.min.js"></script>
Lottie
barba.js
Blotter.js
Splitting.js
Matter.js
Particles.js
Fullpage
Glide.js
AniJS
Slick
CircleType.js
Parallax.js
Typed.js
PixiJS
Panzoom
Hover effect
Particles.js
skrollr
Owl Crousel2
scrollmagic
Dynamics.js
Sal.js
Delighters.JS
ScrollReveal4
CreateJS
ScrollOut2
Panolens.js
デザインをするときに使えるツール
Flaticon
freeのiconを使うことができるツール
PatternPad
幾何学模様が簡単に作ることができるツール
Colorsandfonts
色や文字など組み合わせなどが載っているツール
SNAZZY MAP
googleマップで道路や文字の色を変えたりすることができるツール
unDraw
最近トレンドのシンプルをモチーフにしたイラスト
Googleが使ってそうー
Free Vector illustrations
これも最近トレンドのシンプルなイラスト有料のもあり数も多くおすすめ
Old Book Illustrations
昔の西洋かどこかの絵本などに登場するイラスト
interfacer
グラフやアイコンなど多くある便利ツール
Webデザイナーが目指すべき世界的コンテスト
Awwwards
インターネット上のデザイン、創造性、革新に対する賞
CSSDesignAwards
デジタルフォーク、UI/UXのぞき見、そしてWebの刺激的なリーダーの
ためのWebデザイン&開発賞プラットフォーム
CSSWINNER
最高のWebサイトを授与および紹介し、革新的なWebデザイナー、
開発者、および代理店を宣伝する独自グローバルプラットフォーム
FWA
使用する媒体や技術に関係泣く最先端の創造性を披露する場所
VScodeにAdobeXDの拡張機能を入れてみた
adobeそれは有名なデザインソフトツールを作る会社である。
そのadobeから出ているadobeXDの拡張機能がVScodeに追加されたのである。
Adobe XD for Visual Studio Code
これはAdobeXDで作成された 色情報、 文字サイズ、 書体、 などがcssやsassのファイルになって作成される拡張機能である。
adobeXDでドキュメントアセットに編集したカラーと文字スタイルである。
これをCleative Cloudに共有してそのアドレスをVScodeの読み込ませるとこうなる
start editingを押してend editingを押すとscssファイルが生成される。
生成されたscssファイルである
cssのmin(),max(),clamp()関数
cssで@media screenを使っているのはもう古い！！
ということで続いておすすめのcssの書き方を紹介しよう〜！！
それがmin()とmax()とclamp()の関数だ！
サポートされていなのではないか？と思われるが、
https://caniuse.com/css-math-functions
主なブラウザではサポートされ始めている。
なので自分は max() min() clamp() に移行することに決めた。
自分は@media screenをめんどくさいと感じている。なぜめんどくさいかというとcssで同じ{}のなかに書くことができないからである。
それでは使い方を見ていこう〜！！
max()
width: max( 50%, 500px ) ;
簡単に言うと 最小値 を設定する関数になります。
横幅が1000px以下（900pxなど）の場合 500px が維持されます。
逆に横幅が1000px以上（1300pxなど）になると 50% が適用されます。
このように指定した要素の大きさによって最大値を決めることができるのです。
min()
width: min( 50%, 500px ) ;
簡単に言うと 最大値 を設定する関数になります。
横幅が1000px以下（900pxなど）の場合 50% が維持されます。
逆に横幅が1000px以上（1300pxなど）になると 500px が適用されます。
このように指定した要素の大きさによって最大値を決めることができるのです。
clamp()
width: clamp( 300px, 50%, 500px ) ;
clamp()はmin()とmax()を同時に使うことと同じです。
個人的に一番clamp()が使いやすいと思います。
要素が 300px ＜ 50% ＜ 500px という意味で横幅がどれだけ小さくなろうとも要素が300pxより小さくなることがなく、横幅がどんだけ大きくなろうとも500pxより大きくなることはないという意味です。
ReactアプリをGithub で公開
パッケージgh-pagesを使用
はじめにパッケージをインストールします．
~/react-sample/
$ npm install gh-pages --save-dev
次にpackage.jsonにスクリプトとホームページを追加します．
~/react-sample/package.json
{
"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
},
"homepage": "https://(user name).github.io/(repository name)/"
}
~/react-sample/
$ git remote add origin https://github.com/(user name)/(repository name).git
$ npm run deploy
Githubでcloneしたnode_moduleインストール
＄ npm install
クローンした後にこのコマンドを実行
