Web開発 無料学習

HTML・CSS・JavaScriptを0から学べる学習ロードマップ。環境構築→実践プロジェクトまで。演習問題73問付き。

学習ロードマップへ →

やりたいことから探す

「JSONを整形したい」「色のコントラストを確認したい」——そんなとき、キーワードでさっと見つかります。入力したデータはサーバーに送らず、ブラウザ内で完結するので安心して使えます。

セットで使う

目的別にまとめたツール群。一緒に使うと効率的です。

FPS・フレームタイム計算

目標FPSを入力するだけで、1フレームあたりの処理時間(ms)がすぐ分かります。パフォーマンス調整のお供に。

ゲーム開発Unity

Unity Screen/World 座標変換

ScreenToWorldPoint・WorldToScreenPointの変換をブラウザで試せます。カメラ設定を入力して即計算。

ゲーム開発Unity

色変換ツール

HEX・RGB・Unity Colorを相互変換。デザインツールとUnityの橋渡しに便利です。

デザインUnity

JSON 整形・フォーマット

オフライン対応

JSONの整形・圧縮・構文チェックがこれひとつで。API開発やデバッグのお供にどうぞ。

開発API

Base64 エンコード/デコード

オフライン対応

テキストや画像をBase64形式にエンコード・デコードできます。API連携やData URIの生成に便利です。

開発API

Unix タイムスタンプ変換

Unixタイムスタンプ(秒・ミリ秒)と通常の日時を素早く相互変換できます。ログ調査やAPI開発にどうぞ。

開発バックエンド

px / rem 変換

px値とrem値を簡単に行き来できます。基準サイズもカスタマイズでき、CSSでの余白やフォント指定がスムーズに。

フロントエンドCSS

URL エンコード/デコード

オフライン対応

URLの特殊文字や日本語をパーセントエンコーディング(エンコード・デコード)できます。クエリの解析に。

開発API

正規表現テスト

オフライン対応

正規表現パターンを入力し、対象テキストと正しくマッチするかをリアルタイムで確認できます。

開発

JWT デコード

オフライン対応

JWTの中身(ヘッダーとペイロード)をサクッとデコードして確認できます。API連携のデバッグにどうぞ。

開発API

ハッシュ生成

オフライン対応

入力したテキストからSHA-256/384/512のハッシュを一発生成。API署名やハッシュ化の動作検証に。

開発セキュリティ

UUID 生成

ランダムでかぶらないUUID v4をボタンひとつで生成できます。テストケースの作成などにどうぞ。

開発バックエンド

色のコントラストチェック

ふたつの色のコントラスト比を計算し、Webアクセシビリティの基準を満たしているか即座に判定します。

デザインアクセシビリティ

CSS グラデーション生成

線形・円形グラデーションを視覚的に調整しながら作成できます。完成したCSSはそのままコピー可能です。

デザインCSS

CSS box-shadow 生成

要素の影(box-shadow)をプレビューを見ながらスライダーで作成。生成したCSSはコピー可能です。

デザインCSS

QRコード生成

オフライン対応

URLやテキストから高画質なQRコードを即座に生成し、PNG形式で保存できます。名刺やチラシ作成に。

ユーティリティ

Markdown 整形

オフライン対応

全角記号やスペース不足など、Markdownのありがちな記述ミスを自動補正。ドキュメント作成の時短に。

開発ドキュメント

テキスト差分比較

オフライン対応

2つのテキストの変更点(追加・削除・変更)を色分け表示します。設定ファイルやコードの差分確認に。

開発

即時共有オンラインメモ帳(画像対応)

即時に複数のデバイス間で情報を共有したい方向けに開発したオンラインメモ帳。高解像度な画像対応はもちろん、パスワード保護といったセキュリティ対策も行っています。 詳しくは下部をご参照ください。

ユーティリティセキュリティ

HTML エスケープ/アンエスケープ

オフライン対応

HTMLタグとして解釈される特殊文字を安全にエスケープ(または復元)。XSS脆弱性の対策や検証に。

開発セキュリティ

Lorem Ipsum ダミーテキスト生成

デザインカンプやモックアップの確認に必要なダミーテキスト(Lorem Ipsum)を、分量を指定して生成します。

デザインユーティリティ

パスワード生成

オフライン対応

指定済みの文字種と長さで、推測されにくい安全なパスワードをランダム生成します。テストデータの作成にも。

セキュリティユーティリティ

大文字小文字・命名規則変換

オフライン対応

スネークケースやキャメルケースなど、プログラミング特有の様々な命名規則へ一括変換します。

開発

YAML ↔ JSON 変換

オフライン対応

YAML形式とJSON形式のテキストを相互に変換します。構文チェック機能も搭載。

開発API

Fluid Typography 計算機

レスポンシブなフォントサイズ調整に便利なCSSの「clamp()」関数を、数値を入力するだけで自動計算します。

デザインCSS

Aspect Ratio 計算機

指定した比率(16:9など)に合わせて、画像の幅や高さを自動で算出します。

デザインCSS

Golden Ratio(黄金比)計算機

見栄えが良くなる「黄金比(おおよそ1:1.618)」を使って、要素のサイズや余白の数値を計算します。

デザイン

Silver Ratio(白銀比)計算機

オフライン対応

日本人に馴染み深い「白銀比(おおよそ1:1.414)」を使って、レイアウトやデザインの数値を算出します。

デザイン

CSS Grid ジェネレーター

行数・列数・隙間(gap)を指定するだけで、複雑なCSS Gridのコードを簡単に生成できます。

デザインCSS

Glassmorphism CSS 生成

スライダーでぼかしや透明度を調整し、流行の磨りガラス風デザイン(グラスモーフィズム)のCSSを生成します。

デザインCSS

Line-height(行送り)計算

ピクセル単位の「行送り」を、CSSの「line-height(倍率)」へとサクッと変換計算します。

デザインCSS

RGBA ↔ HEX 変換

透明度(アルファ値)を含んだRGBA形式とHEX形式の色コードを、相互に変換します。

デザインCSS

Tailwind Color 検索

任意のカラーコードを入力すると、それに最も近いTailwind CSSのカラーパレット名を教えてくれます。

デザインCSS

JSON to CSV 変換

オフライン対応

データ分析に便利なCSV形式と、開発でよく使うJSON形式のテキストデータを相互に変換します。

開発API

Markdown 表生成

オフライン対応

ExcelなどのスプレッドシートやCSVデータを、そのままMarkdownのテーブル記法へと一発変換します。

開発ドキュメント

改行・空白削除(Minify)

オフライン対応

改行や連続するスペースを取り除き、テキストやコードを1行に圧縮(Minify)します。

開発

文字数・行数カウント

オフライン対応

テキストの文字数、行数、単語数を瞬時にカウントします。スペースや改行を除外するオプション付き。

ユーティリティ

重複行の削除

オフライン対応

リストデータから重複している行を取り除き、一意(ユニーク)なリストへと整理します。

ユーティリティ

OGP プレビュー

SNSシェア時の表示(OGP画像・タイトル・説明文)を、URLから事前プレビューします。

Web運用SEO

Favicon 一括生成

オフライン対応

1枚の画像から、ブラウザタブ用やスマホ用(Apple Touch Icon)など全サイズのFaviconを一括生成します。

Web運用

.htaccess 生成

「301リダイレクト」や「HTTPS化」など、サーバー設定ファイル(.htaccess)用のコードを生成します。

Web運用インフラ

robots.txt 生成

検索エンジンの巡回ロボットにアクセス許可・拒否を伝える「robots.txt」ファイルを簡単に作成します。

Web運用SEO

SSL証明書期限チェック

指定したサイトのSSL証明書がいつまで有効かをワンクリックでチェックし、期限切れを防ぎます。

Web運用インフラ

DNSレコード確認

指定したドメインのAレコード、MXレコード、TXTレコードなどの現在の設定状況をルックアップして表示します。

Web運用インフラ

ブラウザ情報(UA)表示

現在アクセスしているブラウザのUser-Agent(識別文字列)を表示し、簡単にコピーできます。

Web運用

Bug Report Support(バグリポ・サポーター)

オフライン対応

ゲーム制作者に喜ばれる「伝わるバグ報告」のテンプレートを自動生成します。OSやGPUなどの環境情報も自動で付与できます。

ゲーム開発デバッグサポート

画像 圧縮・WebP変換

オフライン対応

画像をブラウザ上で安全&超高速に圧縮・WebP変換。ファイルサイズ上限の指定も可能です。

ユーティリティ画像

SQL整形・圧縮(SQLフォーマッター)

オフライン対応

長い1行のSQLをインデント付きで読みやすく整形。キーワード大文字化・1行圧縮にも対応。

開発データベース

画像カラーピッカー(スポイトツール)

オフライン対応

画像をアップロードしてクリックするだけで、その箇所のHEX・RGB・HSLカラーコードを取得できます。

デザイン画像

LLM トークン数カウンター

オフライン対応

テキストのLLM推定トークン数をリアルタイム計算。GPT-4 / Claude / Gemini対応。API料金の概算付き。

開発AI

ダミー画像ジェネレーター

オフライン対応

幅・高さ・色・テキストを指定して、モックアップ用のダミー画像を即座に作成・ダウンロードできます。

デザインユーティリティ

画像リサイズ

オフライン対応

画像を指定サイズにリサイズ。幅・高さ・縦横比維持。複数画像一括対応。

画像デザインSNS

エスケープシーケンス変換

オフライン対応

改行・タブを\n・\tに変換、または逆変換。文字列の可視化・コード生成に。

開発テキスト

.env 整形

オフライン対応

.env形式をキー順にソート・整形。環境変数管理の整理に。

開発設定

色の名前検索

オフライン対応

HEXから色の名前を検索。red, blue等のCSS色名に変換。

デザイン

MD5 ハッシュ生成

オフライン対応

MD5ハッシュを生成。レガシー互換・簡易チェックサム用。

開発セキュリティ

Lua 整形・フォーマット

オフライン対応

Luaコードを整形。インデント・改行を整える。

開発ゲーム

← トップへ戻る · ガイド