TYPE DESIGN / CSS EDITOR

CSS Text Effect Studio.

24プリセットから、見出しの文字を装飾する。

TEXT EFFECT WORKSPACE

文字と装飾を調整する

TEXT & FONT

0 / 80

フォント

端末にあるフォントを使います。書体や太さの見え方は環境によって変わります。

STYLE RECIPE

プリセットを選ぶと装飾と背景色が変わります。入力した文字・書体・サイズは維持します。

TYPE SETTINGS

文字サイズ（最大）

幅に合わせる

文字の太さ文字間隔行の高さ

長い文字は幅に合わせて折り返します。入力欄で改行した位置も反映します。

EFFECT DETAILS

縁取りの基準（最大）影のずれ（最大）光の広がり（最大）模様の間隔（最大）角度

縁取り・影・模様も文字サイズに比例して縮小します。「最大」は、上で指定した文字サイズでの値です。

文字色装飾色 1装飾色 2背景色

CSS TEXT / LIVE PREVIEW文字を選択できます

COPY & USE

装飾用のspanと、サイズの基準になるtype-canvasが必要です。HTMLサンプルには現在の文字・構造・CSSを含めています。

24 TEXT EFFECT PRESETS

文字を画像化せず、HTMLとCSSで描いています。

HOW IT WORKS

background-clip: textで、グラデーションや模様を文字の形に切り抜きます。金属風のプリセットも、明暗を配置した色の表現です。光源の計算ではありません。

縁取りとtext-shadowを文字の後ろへ重ねます。装飾用の文字はaria-hiddenにし、読み上げ対象は手前の文字1つだけにしています。

編集UIとコード生成にはJavaScriptを使います。保存したHTMLは、文字と装飾をCSSだけで表示します。外部ライブラリやフォント配信には依存しません。

サイズの基準：「自動で縮小」は、type-canvasの内側の幅800pxで指定サイズになり、狭いときは最小24pxまで縮小します。固定サイズでは縮小せず、文字を折り返します。

組み込み時：見出しレベル・リンク先・サンプル文言は用途に合わせて変更してください。光や影が切れないよう、親要素のoverflowと周りの余白も確認してください。複数の装飾を同じページに置く場合は、クラス名を設定ごとに分けてください。

読みやすさ：装飾は短い見出し向けです。配色と太さによっては読みにくくなります。ヒーローの周辺文言は、表示を確認するためのサンプルです。