PNG/JPG to WebP

高品質を維持したまま、PNG/JPGをWebPに変換し圧縮します。

SVG to PNG/JPG/WebP

SVG画像をPNG, JPG, WebPに変換。解像度を指定してラスタライズできます。

カラーピッカーツール

美しいカラーパレットから色を選んでコピー。HEX, RGB, RGBA、カラーネームに対応。

JSONとPHP配列の相互変換ツール

JSONコードとPHP配列コードを相互変換

JSONとPython辞書の相互変換ツール

JSONコードとPythonの辞書型(dict)コードを相互変換します。

JSONとJSオブジェクトの相互変換ツール

JSONコードとJavaScriptのオブジェクト(Object)コードを相互変換します。

HTMLタグ除去・抽出ツール

HTMLコードからタグを除去し、テキストデータのみを抽出します。実体参照のデコードや空白処理も可能です。

HTMLエスケープツール

HTMLの特殊文字（<, >, &, " 等）を実体参照に変換（エスケープ）、または元に戻す（アンエスケープ）ツールです。

HTMLテーブル1行目をヘッダーセクションに変換

テーブルの1行目をthead要素、最後の行をtfoot要素に変換します。WordPressのヘッダーセクションに対応。ExcelやWebからコピーした表もOK。スタイル属性やタブ・改行の一括削除機能付き。

JSONとCSVの相互変換ツール

JSON配列とCSVデータを相互に変換します。ヘッダーの有無も切り替え可能です。

WebP to PNG/JPG 変換ツール

WebP画像をPNGまたはJPG形式に変換します。JPEG画質の調整も可能です。

テキストからJSONに変換

テキストデータを指定した改行数で分割し、JSON配列（リスト）に変換します。

テキストからHTMLリストに変換

テキストデータを改行区切りで<li>タグに変換します。<ul>タグで囲むかどうかも選択可能です。

テキストをpタグで囲うツール

テキストデータの改行ごとにpタグで囲みます。ブログやHTMLコーディングの効率化に。

透過グラデーションテキストのCSS作成ツール

テキストに透明になるグラデーションを作成できるCSSジェネレーターです。方向や間隔も調整可能。

テキストグラデーションのCSS作成ツール

テキストに2色または3色の美しいグラデーションをかけるCSSを簡単に作成できるCSSジェネレーターです。

二重縁取りテキストのCSS作成ツール

CSSのtext-strokeと擬似要素を使って、文字に二重の縁取り（ボーダー）を作成するCSSジェネレーターです。

ネオン文字のCSS作成ツール

CSSのtext-shadowを使って、ネオンのように発光する文字を作成するCSSジェネレーターです。

白抜き文字（袋文字）のCSS作成ツール

文字の中を透明にしたり、指定色で塗りつぶした縁取り文字（アウトラインテキスト）を作成するCSSジェネレーターです。

マウスホバーで下線が広がるCSS作成ツール

リンクにマウスを乗せた際、中央から左右にアニメーションしながら下線が広がるCSSジェネレーターです。

テキスト選択時のスタイルを指定するCSS作成ツール

テキストを選択（ドラッグ）した際の背景色や文字色をカスタマイズするCSSジェネレーターです。

spanなしで文字ごとに色を変えるCSS作成ツール

spanタグを使わずに、CSSのグラデーション機能で文字ごとに色を変えるスタイルを作成します。

フェードアウトする下線付きテキストのCSS作成ツール

見出しテキストの下線が途中からグラデーションで透明に消えていくスタイルを作成するCSSジェネレーターです。

マウスホバーでフェードインするCSS作成ツール

マウスを乗せるとふわっと現れる（色が濃くなる）テキストのCSSジェネレーターです。

マウスホバーでテキストを切り替えるCSS作成ツール

マウスホバーでテキストがふわっと切り替わるアニメーションを作成するCSSジェネレーターです。

テキスト点滅アニメーションCSS作成ツール

常に点滅を繰り返すテキストのアニメーションを作成するCSSジェネレーターです。

ガラス調テキストCSS作成ツール

テキストの背景用に透明感と立体感を与え、ガラスのような質感を出すCSSジェネレーターです。

光るボタンCSS作成ツール

マウスホバーでキラッと光が走るアニメーションボタンをカスタマイズ可能なCSSジェネレーターです。

メタル調テキストCSS作成ツール

ゴールドやシルバーなど、金属の光沢感を持つテキストのカスタマイズ可能なCSSジェネレーターです。

3DテキストのCSS作成ツール

プリセットから立体的なテキストをカスタマイズ可能なCSSジェネレーターです。

SVG/PNGからfavicon.icoを作成するツール

SVGやPNG画像から、マルチアイコンに対応したfavicon.icoを一括生成します。また、ファビコン設定に必要なサイズのPNGファイルやmanifestも同時に生成することが可能です。

favicon.ico 解析チェッカー

ICOファイルを解析し、含まれている画像サイズ、色深度、形式（PNG/BMP）などの詳細情報を確認します。また、favicon.icoファイルとして適しているかどうかを判定します。

マウスホバーで裏返るCSSジェネレーター

マウスホバーでクルッと裏返るカード型アニメーションを作成。表面と裏面のデザインをカスタマイズできます。

凹み文字CSSジェネレーター

背景が切り抜かれたような、凹んだように見える効果（デボス・レタープレス）のテキストCSSを作成します。

ストライプ柄テキストCSSジェネレーター

テキストをストライプ（縞模様）柄にするCSSを作成します。色や角度、幅を自由にカスタマイズ可能です。

七色の虹ストライプテキストCSSジェネレーター

七色のストライプで構成された虹色テキスト用CSSを作成します。ビビッドやパステルなど多彩なプリセットを用意。

七色の虹色グラデーションテキストCSSジェネレーター

滑らかに変化する虹色グラデーションテキストCSSを作成します。ビビッドやパステルなど多彩なプリセットを用意。

CSSツートンカラーテキスト生成

2色の境界がくっきりとしたツートンカラーのテキストCSSを生成します。

animation-play-state（再生・一時停止）のCSS動作テストツール

CSSのanimation-play-stateプロパティ（再生・一時停止）の挙動をテストするツールです。合わせてanimation-directionでの逆再生もテストしています。

CSSの::markerでリストマーカーをカスタマイズするツール

リストのマーカー（行頭文字）をCSSの::marker擬似要素を使ってカスタマイズします。文字、色、サイズや簡単なアニメーションを設定できます。

CSSの疑似クラス:is()と:where()の違いを確認する動作テストツール

CSSの疑似クラスである :is() と :where() の違いを確認するために作成した動作テスト的なツールです。