MENU
サイト更新履歴
Profile
お問い合わせ
ツールのまとめ
AIツールのまとめ
プログラミング関係のツール
Web制作ツールのまとめ
英語学習ツールのまとめ
その他の便利ツールまとめ
サイト更新履歴
Profile
お問い合わせ
ツールのまとめ
AIツールのまとめ
プログラミング関係のツール
Web制作ツールのまとめ
英語学習ツールのまとめ
その他の便利ツールまとめ
プログラミング関係のツール
ホーム
プログラミング関係のツール
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分動画と演習を組み合わせたプログラミング学習サイト
閉じる