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
クローンした後にこのコマンドを実行
React & GraphQLでポケモン図鑑を作ってみました
作成日[2020/4/10]
はじめに
こんにちは、けん@学生(@jdGRm2XW3IBhXU)です。
フロントエンドエンジニア兼デザイナーを目指しております。
今回、Reactを勉強をしており少し分かってきたので何か作成しながら学ぼうと思い、YouTubeで探したところポケモン図鑑を作り方が載っていたので作成することにしました。
作成するにあたりGraphQLは全く分かりませんでしたが、動画を見て何とか作成することができました。
map() : コールバック関数によって新しい配列を生成する
slice() : 指定範囲内の文字列を取得する
関連する記事
GraphQL server https://graphql-pokemon.now.sh/
