Freelance Wanted
コーディングでよく使用したり、図形などのサイトを７選まとめてみました。
コピペでできたり、カスタマイズが可能だったりと便利なサイトばかりです！
目次
Grabient
Grabientではグラデーションを作成したいときに自分で自由にグラデーションを作成できるサイトです。
角度も、色の数も自分で調整することができる便利なサイトになります。
サイトの使い方
色を変えたいときは右下の線３つに丸がのったところをクリックすると色のついた丸が出てきます。そこで色を変えることができます。色のついた丸を左右に動かすと位置を変えることができます。
色数を増やしたい場合はプラスマークのボタンを押すと増やすことができます。
角度は左下の丸に線が一本入っているところで調整ができます。
コピーはグラデーションにカーソルをあてると左上にマークが出てくるのでそこからコピー可能です。
パパっと簡単にグラデーションが作れる便利なサイトです！
Table Tag Generator | HTMLの表を簡単に作成・結合ツール
Table Tag Generatorはtableを作るジェネレータサイトです。
自分が作りたいテーブルの形を指定しHTML生成するサイトです。
サイトの使い方
まず、行と列の数を決めます。
td タグの代わりに th タグを使いたい場合（またはその逆）は、
①変換したいセルをドラッグして選択し
②「td ↔ th」 ボタンをクリックします。そうすると
③HTMLが書き換わります。
この手順でtableのHTMLが作成できます。
他にもセル結合、分割、文字を入れることもでき、HTMLを張り付けるだけでtableが完成する便利なサイトです！CSSも一つ用意されています！
Table Tag Generator | HTMLの表を簡単に作成・結合ツール。
CSS triangle generator
こちらのサイトでは簡単に三角形を作成することができます！
サイトの使い方
まずは三角形の角度を決めます。次にTypeやSize、Colorを決めていけばあっという間に三角形の完成です。
右下にCSSが生成され、コピペができてとても便利です。
93 Beautiful CSS box-shadow examples – CSS Scan
93 Beautiful CSS box-shadow examples – CSS ScanはCSSのプロパティであるbox-shadowのサンプルが沢山用意されています。
その中で自分が作りたいものをコピーして使用することができます。
普段使いするものから、おしゃれなデザインのものまで種類が豊富です！
サイトの使い方
使用したいbox-shadowをクリックしてコピーします！貼り付けて終わりです！
ワンクリックコピペでできてしまう簡単なサイトです！色、角度の微調整などをしたい場合は自分で変更をする必要があります！
93 Beautiful CSS box-shadow examples – CSS Scan
【コピペで簡単】CSSボタンジェネレーター
CSSボタンジェネレーターではボタンを作ることができます！
デザインに悩んだ時や、パパっとコーディングを終わらせたいときに便利です！
サイトの使い方
各項目を自分の作りたいボタンに合わせて設定していきます。
下に行くとHTML、CSSが生成されていてコピペができるようになっています！
placehold.jp | ダミー画像生成 モック用画像作成
placehold.jpではダミー画像を作成できます！
イメージ部分のコーデイングでテストをしたい時、このサイトで様々な大きさの画像を作成してスムーズにテストができるのでとても便利です！
サイトの使い方
画像の大きさを入力し、右隣のURLのところをコピーし、貼り付けて完成です！
あくまでダミー画像なのでサイト公開時には差し替えることを忘れないように注意してください。
placehold.jp | ダミー画像生成 モック用画像作成
CSS Layout Generator
CSS Layout Generatorはコーディングでコンテンツの並べ方によく悩む方必見のサイトです。
Grid、Flexboxを使用していて、自分が指定した形にHTML、CSSが生成されコピペで簡単に並べることができてしまいます！
サイトの使い方
今回はwrapを使用した並びで説明をします。
①要素の数を決めることができます。
②gapで余白を指定できます。
③wrapの種類を選ぶことができます。
④flexの種類を選ぶことができます。
⑤Desktop,Mobileなど画面サイズを変更して試すことができます。
⑥flex-grow,flex-shrink,marginつけることができます。
様々な微調整が可能なサイトで自在に並べることができるようになっています！
コピーができる場所は一番右側にあります。
まとめ
今回はコーダー向けのお役立ちサイトを紹介しました。
気になったサイトはありましたか？
どのサイトも悩んだ時や、コーディング速度を上げるのにとても便利です！
ぜひサイトを覗いてみてください！
最後までお読みいただきありがとうございました。