D3.js TailwindCSS Q&A

Q&Aを作成しましたので、間違っていたり追加して欲しい点などがあれば指摘して欲しいです。

#D3.jsのQ&A

####Q:以下は何を表すか
　ease("linear")

####A:一定の速度で動きが変化する

####Q:これは何を表すか
　ease("quad")

####A:やや加速度的な動きをする

####Q:これは何を表すか
　ease("cubic")

####A:動きが加速していく

####Q:これは何を表すか
　ease("elastic")

####A:弾力的な動きをする(ターゲットを一時的にオーバーする)

####Q:これは何を表すか
　ease("back")

####A:動きが後半に急速に変化する

####Q:これは何を表すか
ease("bounce")

####A:弾力的な動きをする (ターゲットをオーバーしない)

####Q:これは何を表すか
　ease("exp")

####A:指数関数的な動きをする

####Q:これは何を表すか
　duration()

####A:プロパティの変更を瞬時に実行するのではなく、指定した期間にわたってスムーズに実行する。
例:duration（5000）
これだと5秒かけて指定したことを実行する

####Q:これは何を表すか
　delay()

####A:これを使うと、動作を起動するまでに待つ時間が決められる。
例:delay(2000)　2秒待つ

####Q:これは何を表すか

 var w = 500; // 幅
 var h = 500; // 高さ
 var svg = d3.select("body")
              .append("svg")
              .attr("width", w)
              .attr("height", h);

####A:SVG領域の設定

####Q:これは何を表しているか

<rect/>

####A:四角形を描画する要素。
主にx,y座標や幅、高さを設定できる。
例

<rect x="0" y="0" width="500" height="50"/>

####Q:bodyタグにある全てのpタグに、データの数だけd3オブジェクトを作成するにはどう書けばいいか

####A:

d3.select('body')
  .selectAll('p')
  .data(a)
  .enter()

####Q:円を描画するにはどう書けば良いか?

####A:
<circle cx="(左からの距離)" cy="(上からの距離)" r="半径"/>

例

<circle cx="250" cy="25" r="25"/>

#Tailwind CSS

####Q:Tailwind CSSがBootstrapやFoundationと違う点は?

####A:
Bootstrap、Foundation:カードやアラートなどの要素を提供している(UIキット)
Tailwind CSS:自分で決めた色をカスタマイズできるように設計できる

####Q:Tailwind CSSでレスポンシブに対応させるには、HTMLにはどうすればいいか?

####A:特別手を加える必要はない。
ただし、機種によって見える様を変えたければ「sm:justify-start」というように「sm:」や「lg:」と記入する

####Q:Tailwindがデフォルトで含んでいない任意の擬似クラスを作成するにはどうすればいい?

####A:「tailwind.config.js」の中の

module.exports = { plugins: [] }

で[]の中に独自のバリアントプラグインを作る

####Q:「ホバー」や「フォーカス」などの機能は、HTMLではどのように書けば良いか?

####A:機能を書く際に、後ろに「hover:」などと画面サイズによってどうさせたいか書く

例

<button class="bg-transparent hover:bg-blue-500 text-blue-700 hover:text-white"> 

ユーティリティに対してバリアントを有効にするかを制御する
tailwind.config.jsの
variants: { }の中身を確認する

####Q:画面サイズによって異なる動きをさせるには、HTMLにはどう書けばいいか?

####A:機能を書く際に、後ろに「sm:」などと画面サイズによってどうさせたいか書く

例

<div class="bg-red-500 sm:bg-green-500 md:bg-blue-500 lg:bg-pink-500 xl:bg-teal-500"></div>