定番サイト
HTML、CSS、JavaScript
- HTMLクイックリファレンス
- CSS クラス名リスト
- BEM CHEAT SHEET
- Can I use
- HTML5Nest:選択したタグの親子関係・入れ子構造を視覚的に表現したツール
- codepen
- 動くWebデザインアイデア帳 逆引きリスト
- HTMLの記号・特殊文字の文字コード表
- 正規表現言語 – クイック リファレンス
- ExcelからHTMLテーブル変換 Ver.2
- HTMLエスケープツール
検証ツール
- Nu Html Checker
- PageSpeed Insights:画面の表示速度を確認するツール
各種デバイス比較
- Screen Sizes:iPhone、iPad、Apple Watchなどの歴代のAppleデバイスの情報が纏められている
素材、デザイン関連
Web業界情報サイト
WordPressリファレンス
Webアプリ関連サイト
- 【AI Colors】
テキストを入力すると、Webサイトやスマホアプリ向けの美しいカラーパレットをすぐに生成してくれるAIツール。「企業サイト向けのクールで信頼感のあるカラーで、ベースはホワイト」「子供向けキャンペーンサイト、海と夏のイメージ」のようにテキストを入力すると、それに相応しいカラーパレットを生成してくれる。 - 【paiza.IO】
オンラインですぐにプログラミングが始められる、 オンライン実行環境。C,C++,Java,Ruby,Python,PHP,Perlなど 主要24言語に対応。ファイルアップ機能、外部apiへの接続や、スクレイピングなども可能。 - 【ToolsOcean】
CSSやJavaScriptのミニファイ(軽量化)、HTMLやCSSやJavaScriptのフォーマッター、各種エンコード・デコード、QRコードの生成、カラー値変換、画像の最適化、ファビコン画像生成、ダミーテキスト生成、各種PDF変換など、Web制作に役立つツールがまとめて利用できるサイト。 - 【Notion(ノーション)】
「all-in-one workspace」を目指したもの。簡単にいうと仕事で役立つツールをひとまとめに使うことができます。メモはもちろん、タスク管理、Todoリスト、カレンダー、スプレッドシート、Wiki、ファイル管理など。Notionの特徴は、なんといっても「書きやすさ・読みやすさ」にあります。機能性の高さはもちろん、万人ウケするUI/UXも魅力の一つです。※2021年10月13日に日本語版がリリース - 【hue.tools】
指定したカラーの色相、さまざまな詳細情報、混色・ブレンド・変換・グラデーションなどを生成できるオンラインツール。最近のUIデザインで見かける複数のカラーを使用した美しいグラデーションを生成したり、そのカラーを使用したUIデザインや写真素材なども表示され、色に関する便利なツールがまとめて利用できます。 - 【Windows 11 in React】
Windows 11 in Reactは標準的なWebテクノロジ(HTML, CSS, JavaScript, React)を使用して、Web上でWindows11のデスクトップエクスペリエンスを複製することを目的として作成されたものです。Windwos 11をインストールせずに、ブラウザ上でWindows 11のUIを試せます。 - 【The Component Gallery】
Webサイトやアプリでよく使用される各UIコンポーネントのさまざまな実装方法がまとめられたThe Component Galleryを紹介します。コンポーネントは再利用可能な単一の部品として利用でき、実装するコードや名前の付け方など、Web制作者には非常に勉強になると思います。 - 【placehold.jp】
ダミー画像生成サイト。 - 【.htaccess Editor】
オンライン上でベーシック認証用のファイル(.htaccess、.htpasswd)を作成できる。 - 【JSFiddle】
HTML、CSS、JavaScriptの3つの言語を記述し結果を表示できる、オンライン実行環境。
Webデザインギャラリー
- MUUUUU.ORG
- I/O 3000
- SANKOU!
- ワードプレステーマTCD:有料の国産WordPressテーマ配布サイト
- Landings:500種類以上のランディングページのデザインをまとめたサイト(海外)