【コーダー向け】コーディングでおすすめの神サイト5選
今回は筆者個人的にヘビロテしている、コーディングでおすすめの神サイトを5つご紹介します。
ぜひ、初心者コーダーの方や現在コーディング勉強中だよ〜なんて方に読んでいただけたら嬉しいです！
①Flexbox Cheat Site
1つ目は、Flexboxのチートシートです。
cssでFlexboxを利用する際、「あれ、align-itemsって縦揃え横揃えどっちだったっけ…？」「flex-wrapで指定できる値ってなんだったっけ…？」なんて時、すぐに参照して見ることができます。
筆者もよく使いますが、やっぱり1つこういうサイトを知っておくだけで、コーディングの際に心強いですし、調べる手間も省けるので一石二鳥です。
②placehold.jp
2つ目は、ダミー画像を一瞬で生成できるサイトです。
幅（width）、高さ（height）を入力し、「画像を生成する」ボタンを押すだけで、ダミー画像の埋め込み用URLを生成することができます。
文字色や背景色、表示文字、文字の大きさ、画像フォーマット（jpg, png）、web制作でよく使うサイズ等以外とカスタマイズ性もあります。
クライアント納品待ちだけど、コーディング作業を進めないといけない…なんて時、ローカルにわざわざダミー画像を入れなくても、URLを仕込むだけで画像表示してくれるので、とっても重宝しますよ。
③Clippy — CSS clip-path maker
3つ目は、clip-pathのジェネレータです。
cssでclip-pathプロパティを用いるとき、自分で考えながらパスを記載するのってとても大変ですよね。
Clippyでは、三角形、台形、平行四辺形、ひし形、五角形、六角形、ヘプタゴン、オクタゴン、九角形、デカゴン、ベベル、ラベット、左矢印、右矢印、星、クロス、吹き出し、丸、楕円形などなど… clip-pathで表現できる様々な形のcssを自動で生成してくれます。
ベースの形から、自分の好きな角度や長さなども調整できるので、clip-pathを初めて使う方なんかは一度ジェネレータを使ってイメージを作ってみるのもいいかもしれません！
④css animo
4つ目は、様々なcssアニメーションを掲載しているcss amimoというサイトです。
テキストをホバー（マウスオーバー）した際のアニメーションやローディングアニメーションがリストアップされており、アイコンをクリックするだけで、必要なcssをコピーできます。
1から作るより断然効率的ですし、初めて見るプロパティが出てきたら、逆引きして調べてみるのも知識を増やす第一歩になります。作りたいアニメーションがあったり、アニメーションの引き出しを増やしたい時に、ぜひ活用してみてください！
⑤CSS Gradient
最後5つ目は、cssのグラデーションを自動で生成してくれるサイトです。
グラデーションの微調整も、これまた大変な作業。。
CSS Gradientは線形、円形どちらも対応していたり、複数色用いたグラデーション、角度、0~100の中での色が切り替わる場所の指定など、必要な値を入力するだけで、cssを自動生成してくれます。
グラデーションの書き方がそもそもわからないよ！という方や速く書きたい！なんて方にもおすすめです。
まとめ
今回はコーディングをする際におすすめの神サイトを5つご紹介しました。
あれを表現したいんだけど、書き方がわからない！なんて時や、とにかく速く作らなきゃ！なんて時は、ご紹介したようなカンニングペーパーや自動生成ツールを使って、簡単に効率よくできるととても便利ですよね。
ぜひ気になったものはブックマークして、日頃のコーディングに役立ててみてください！
この記事が気に入ったらサポートをしてみませんか？