はじめに
本業や個人制作で
・デザイン作成（Figma）
・マークアップ（HTML / CSS9
・フロントエンド開発（React, TypeScrip）
を行なっています。
その際によく使っている便利なサイトについてまとめました。
システム開発よりも、デザイン・Web制作系が多めになります。
思い出すたびに追加していきます。（最終更新：2025/12/10）
目次
HTML
HTML5 入れ子チートシート
入れ子関係を忘れることがあるので、たまに使っています。
HTMLには 「コンテンツモデル（Content Model）」 という概念があり、
「どの要素の中にどのカテゴリーに属する要素を入れてよいか」というルールがあります。
例えば、以下の例はすべてルールに版しています❌
<h1>
<p>乃木坂46</p>
</h1>
<ul>
<div>
<li>項目</li>
</div>
</ul>
CSS
三角形ジェネレーター
セレクトボックスやメニューを作る際に三角形をよく使うので、ジェネレーターで生成しています。
サイトも使いやすいです。
Font-family メーカー
Web制作会社にいたころはよく使ってたサルワカさんのサイトです。
使いやすくてお気に入りのサイトです。
画像
ダミー画像生成
「画像は支給されてないけど、とりあえず仮画像を置いておきたい」というときに使っています。
無難なシンプルな画像が生成されるので使いやすいです。
画像はpngのみです。
幅(width)と高さ(height)を自由に決められます。
カラー
コントラスト比チェック
数年前からウェブアクセシビリティの「コントラスト比」について対応を求められることがあります。
このチェッカーか、Figmaのプラグインを使って比率を調べています。
最低限「AA」はクリアするようにしています。
カラーコード変換
カラーピッカー
「この画像のカラーコードが知りたい」というときに使っています。
画像をアップロードして任意の箇所をクリックすると、カラーが表示されます。
（HEX、RGB、HSVに対応）
フォーム
チェックボックスジェネレーター
デフォルトのチェックボックスだと見た目がいまいちなので、多くの場合はカスタマイズします。
フォーム系のパーツは地味に面倒なので、こういうサイトをよく使っています。
フォント・文字
文字数カウント
入力フォームに文字数制限がある場合に使っています。
その他
デバイスのサイズ確認
デザイン崩れが起きていないか確認するときに便利です。
一般的なモニターの横幅は1920pxですが、ワイドモニターを使っていたり、中途半端なブラウザの幅にして確認するときに使っています。
以前まではずっと別のサイト使っていたんですが、会社の人から「思想が強い」という指摘を受けたので掲載するのはやめておこうと思います。（「デバイス サイズ確認」でググると出てきます）
URLからサイトのタイトルを取得する
システム開発では使ったことはありません。
Web制作会社にいたころ、大規模なWebサイトのリニューアル時に使っていました。
スプレッドシートなどにタイトル、URLを記載したい場合に便利です。