広告は表示されますか？

運営維持のため一部ページに広告を表示していますが、ツール本体の動作を妨げない範囲に留めています。ブロッカーを利用されても機能は動作します。

使い方を教えてください。

画面の入力欄に処理したい値を入れるだけで、CSSテキスト装飾ガイドが即座に結果を表示します。コピーボタンで結果をワンクリックでクリップボードに送れます。

デザイン・CSS無料登録不要

CSSテキスト装飾ガイド

CSSのtext-decorationプロパティの値と装飾例を一覧表示する無料オンラインツール。

入力

結果

--- text-decoration ---
none           装飾なし
underline      下線
overline       上線
line-through   取り消し線

--- text-decoration-style ---
solid          実線
double         二重線
dotted         点線
dashed         破線
wavy           波線

--- ショートハンド ---
text-decoration: underline wavy red;

--- text-underline-offset ---
text-underline-offset: 4px;  (下線の位置)

--- text-decoration-thickness ---
text-decoration-thickness: 2px;  (太さ)

--- 使用例 ---
a { text-decoration: underline; }
a:hover { text-decoration-color: #3b82f6; }

.strike {
  text-decoration: line-through;
  text-decoration-color: red;
  text-decoration-thickness: 2px;
}

FAQ

よくある質問

はい。CSSテキスト装飾ガイドが出力するCSSはTailwind CSSの任意のクラスと共存でき、必要に応じて任意値クラス（[xxx]記法）への変換も可能です。

こちらもおすすめ

CSS text-decoration値

CSS text-decoration値を表示する無料オンラインツール。CSS text-decoration値をブラウザ上で即座に実行でき、デザイン・CSSとして登録不要で利用できます。

CSS text-align値

CSS text-align値を表示する無料オンラインツール。CSS text-align値をブラウザ上で即座に実行でき、デザイン・CSSとして登録不要で利用できます。

CSSテキストグラデーション

テキストにグラデーションカラーを適用するCSSコードを生成。Webデザインに使えるテキストエフェクトの無料オンラインツール。

CSSテキストストローク

テキストの輪郭線(text-stroke)のCSSコードを生成。見出しデザインに使える無料オンラインツール。

border-radiusジェネレーター

CSSのborder-radiusをGUIで視覚的に調整。4隅個別・楕円形の角丸にも対応。コードをコピーしてすぐ使える無料オンラインツール。

Box Shadow生成

CSS box-shadowをGUIで直感的に作成。多重シャドウ、ニューモーフィズム、テキストシャドウにも対応。コード即コピーの無料ツール。

読み込み中...