Advertisement

 

この記事では、コーディング作業で迷ったときに確認したいコードスニペットを集めた便利サイトをまとめて紹介しています。

 

ウェブ開発において、フロントエンドやデベロッパーが悩んでしまう問題の解決方法を知ることができるだけでなく、世界中の優秀なプログラマーの作成したコードを確認、実際に動かしながら学ぶことができます。

 

ちなみに、2020年に人気だったコードスニペットランキングがこちら。

HTMLなどのコードをブラウザ上で確認ができ、公開や共有もできるなど、世界中のデベロッパーが愛用するCodepen。 この記事は、2020年に特に人気

 

 

どう書くんだっけ? を一発解決!コードスニペットを集めたオススメWebサイトまとめ

 

CoddMyUI

Javascript、HTML、CSS、jQueryプラグイン、ウェブ開発にできるデザインスニペット1200個以上が揃ったサイト。ボタンホバーリンクテキストアニメーションなど細かくカテゴリ分けされているので、必要なパーツごとのコードスニペットを手軽に見つけることができます。

CodeMyUI

 

 

 

Little Snippets

ウェブデザイン開発でよく利用すれる、ホバーエフェクトなどのWebコンポーネントを多数収録したウェブサイト。ボタンアイコンの他、バナーにも活用できる画像カードなど、用途に応じて細かく分類されている点もポイント。現在、1,585個のコードスニペットが公開されています。

LittleSnippets_net_-_A_free_collection_of_CSS3_HTML_snippets__New_entries_crafted_and_added_daily_

 

 

 

CodeSandbox

JSの開発環境ってむずかしい、。そんなひとにオススメしたいオンラインで動くコードエディター。ReactやVue、Angularなどのフレームワークをほんの2クリックで、サクッと作成できます。

Search_-_CodeSandbox

 

 

 

CodePen

世界中のプログラマーが書いたコードを共有でき、交流を通してスキルを身につけることができるソーシャルネットワーク。HTMLCやCSS,JavaScriptなどのプログラム言語をつかって、オンライン上でコードを書くことができ、CDN経由で外部ライブラリを追加することもできます。

CodePen__Online_Code_Editor_and_Front_End_Web_Developer_Community

 

 

 

Web Code Tools

ウェブサイトやスマホアプリで利用するあらゆるパーツ用のコードを調整、生成できるジェネレーターが各種揃った参考書のような使い方ができる便利サイト。グラデーションや@keyframeアニメーションなど、CSSスタイリングが面倒なものから、TwtterカードやOpen Graph、Metaタグの設定用ジェネレーターなども。

 

 

 

CSS Hint

人気フレームワークBootstrapを中心としたコードスニペットを、ジャンルや用途ごとにまとめて確認できるサイトで、デザイン性を重視したスニペットが多数まとめられています。

Home_-_csshint_-_A_designer_hub-2

 

 

 

Free Frontend

スニペット関連の調べものをしているとき、個人的によく利用しているサイト。HTMLやCSS,Bootstrap,JavaScriptなど大きいカテゴリ分けはもちろん、エフェクトや入力インプット、レイアウト、メディア、ナビゲーションなどより細かく探すことができ、紹介されているコードスニペットの量もたっぷり豊富。デザインにアクセントが欲しいときにオススメ。

Free_Frontend

 

 

 

Tweetsnippets

Twitterに投稿されたプログラミングに関するコードスニペットや、ちょっとした小技、詳細なチュートリアルまでを網羅したキュレーションサイト。JavaScript、PHP、HTML、CSS、Vue JSなど多くの言語に対応。数日おきに更新されており、優れたプログラマーからたくさんの興味深いことを学ぶことができるでしょう。

All_snippets_-_Tweetsnippet

 

 

 

CSS-TRICKS Snippets

フロントエンドやWebデザインを専門としているひとに役立つ情報を発信ししている、人気の老舗ブログ・サイト。ウェブ開発の方法やヒント、チュートリアルが主要コンテンツとなりますが、制作でつまづきそうなポイントを集めたコードスニペットも用意されています。HTMLやCSS,JavaScript,WordPressなど新しいテクニックを手軽に把握できます。

Code_Snippets___CSS-Tricks

 

 

 

CodePad

デベロッパーが世界中から便利なコードスニペットを共有している、CodPenにも似たサイト。CSSアニメーションなどが中心で、人気スニペット一覧も便利。

Codepad_-_Share_Code_Snippets__HTML5__CSS3__JS_Demos

 

 

 

Codeply

2,000を超えるコードスニペットが公開されており、BootstrapやBulma、Vue、Angularなど主要なフレームワークをつかって、クリックひとつでコードを書き始めることができます。特にBootstrap系のコードスニペットが多数。

Codeply_v2

 

 

 

Bootsnipp

人気CSSフレームワークBootstrapで利用できるコードスニペットのみを、細かくカテゴリ分けしながら集めたキュレーションサイト。最新バージョンのBootstrapまで対応しており、入力フォームの設置やWebフォントの導入など、プログラマーの問題解決に役立ちます。

Home_of_free_code_snippets_for_Bootstrap

 

 

 

30 seconds of code

CSS、Javascript、Python、PHP、Reactなど人気の高いプログラム言語での開発に役立つ、問題解決型コードスニペットを多数紹介しているサイト。から、マウス追従型グラデーション・ホバーエフェクトなどデザイン性の高いものまで、分かりやすく分類されています。

Snippet_List_-_30_seconds_of_code

 

 

パーツや用途に応じてまとめた、コピペで利用することを想定したコードスニペット集。

 

この記事では、HTMLとCSSを中心にデザインされた、思わず押したくなる最新ボタンエフェクト用コードスニペットをまとめてご紹介します。 コンテンツに注
この記事では、CSSで表現できる新作テキストエフェクト用HTMLスニペットをまとめています。一部、jQueryなどプラグインが必要となりますが、CSSのコピー&ペー

 

最新のテクニックや新しい使い方などをまとめたHTML/CSSスニペットも定期的にまとめています。あっ!と驚く、ユニークで注目を集めるものから、お役立ち系スニペットまで一通り確認できます。

 

この記事では、Webデザイン制作に便利なコピー&ペーストで実装できる最新HTML/CSSスニペットをまとめてご紹介します。 一般的に「切れ端、断片」と