MENU

プログラミング関係のツール

HTML5

HTMLリファレンス(JP)


MDN Web DocsのHTML要素のリファレンス

CSS3

CSSリファレンス(JP)


MDN Web DocsのCSSリファレンス
CSS layout Generator


CSS GridとFlexboxのレイアウトを確認しながらコードを生成できる
CSS Generator


CSSの作成補助ツール(2)
CSS Reference by Codrops


CodropsのCSSリファレンス
Can I use?


ブラウザごとのフロントエンド技術のサポート状況を確認する
CLIPPY


Clip-pathを簡単に作成
30 CSS Selectors


重要な30個のCSSセレクタのまとめ
CSSセレクタのチートシート


37パターンのセレクタの説明と使い方サンプル
CSS Grid Generator


CSS Gridの作成補助ツール
Flex layout Generator


Flex layoutの作成補助ツール

CSS スニペットサイト

CSS Stock


250件以上のCSSのスニペットをコピペして使用できる。コピペ前に項目にそってデザインを調整できる
Uiverse.io


HTMLとCSSで実装された650種類以上のUI要素が、オープンソースで公開されている
Free Frontend


おしゃれなスニペットをまとめているサイト。CSSだけではなく、React, Vueなど多様なものを紹介

JAVASCRIPT

JavaScriptリファレンス(JP)


MDN Web DocsのJavaScriptリファレンス
現代のJavaScript チュートリアル


JavaScriptリファレンス。Webサイト「Modern JavaScript Tutorial」の日本語翻訳版で、基本から高度なトピックまで説明している
JavaScript Primer


同名のJavaScript入門書のWebサイト版。Webサイト版では、全て無料で公開している

TYPESCRIPT

TypeScript Docs


TypeScript Documentation
サバイバルTypeScript


TypeScriptの学習サイト

REACT/FRAMEWORK

React.dev


Reactの公式サイト
Next.js


Next.jsの公式サイト

PYTHON

Python.org


Pythonの公式サイト

TAILWIND CSS

Tailwind CSS Docs


Tailwind CSSのDocumentation
Tailwind CSS Components


公式のComponents
Tailwind CSS Cheat Sheat


TailwindCSSのチートシート
Tailwind Awsome


templates & UI kitsのキュレーションサイト
Tailblocks


すぐに実装できるUIコンポーネントのまとめ

FONTS AND TYPOGRAPHY

Google Fonts


Googleが無料で提供しているWebフォントサービス
Typescale


本文や見出しで使うフォントサイズを、バランスの良い比率でデザインできるツール
Min-Max-Value Interpolation


CSSのclamp()関数を簡単に定義できるツール

COLORS

HTML Color Codes


HTMLのカラーを探すツール
Open Color


UIデザインに適した基本12色のカラースキーム
Material Palette


選んだ2色からマテリアルデザインに似合うカラーパレットを作成してくれるサイト

ICONS

Heroicons


Tailwind CSS開発チームが提供するアイコン集。300以上のシンプルなSVGアイコンが揃っている
Iconhunt


オープンソースのSVGアイコンを対象にした検索エンジン
Phosphor Icons


1,000以上のアイコンを提供している。線の太さや色、サイズなどを調整できる
Google Fonts Icons


Googleが提供するオープンソースのアイコンフォント
Font Awsome


Webサイトにアイコンフォントを簡単に表示できるサービス

TESTING, OPTIMIZATION AND DEPLOYMENT

HTML Validator by W3C


HTMLソースコード内の構文チェック、文法チェック
CSS Validator by W3C


CSSソースコード内の構文チェック、文法チェック
Netlify


静的サイトをホスティングできるWebサービス
Heroku


アプリケーションの開発から実行、運用までをクラウド上で管理できるサービス
Firebase


Google が提供するモバイルおよびウェブ開発プラットフォーム
AWS


Amazonが提供するクラウドサービス
Render.com


（次世代Herokuとも噂される）アプリやウェブサイトをビルド・実行する統合クラウドサービス
Vercel


フロントエンド開発のプラットフォーム。Next.js を開発している Vercel Inc. が提供している

DEVELOPMENT TOOLS

Visual Studio Code


Microsoft社の提供する無償のコードエディタ
Cheet Sheet


Emmetのチートシート
Git Hub


開発プロジェクトのソースコードを管理できるWEBサービス
CodePen


ブラウザ上でHTML,CSS,JavaScriptのコードを記述し、リアルタイムで表示を確認できるサービス
CodeSandbox


ブラウザ上で動作する IDE (綜合開発環境)。React、Vue、Angular等の環境を即座に立ち上げられる。
Figma


ブラウザ上で共同編集できるデザインプラットフォーム。UIデザインやワイヤーフレームの作成など

REFERENCE

Stack Overflow


プログラミング技術に関するナレッジコミュニティ
Zenn


エンジニアのための情報共有コミュニティ
Qiita


エンジニアに関する知識を記録・共有するためのサービス
CSS-Tricks


CSS, HTML, JavaScriptに関する情報サイト
daily.dev


プログラミング・エンジニアリング関連記事に特化したRSSリーダー
ChatGPT


テキスト生成系のAIモデル
Lazyweb


ライブラリ、便利ツールのまとめ

TUTORIAL

Udemy


20万件以上の講座があるオンライン学習プラットフォーム
freeCodeCamp


アメリカの非営利団体によって設立されたオープンソースのプログラミング学習サイト
Exercism


コードレビューも受けられる無料のプログラミング学習サイト
Progate


初心者向けプログラミング学習サイト
ドットインストール


3分動画で学べるプログラミング学習サイト
Paizaラーニング


3分動画と演習を組み合わせたプログラミング学習サイト