CSSテキストデコレーションジェネレーター
実線、点線、破線、二重線、波線から選べる下線・上線・取り消し線を、色・太さ・オフセット付きで作成するCSS text-decorationジェネレーター。ライブプレビューで確認しながら、CSS宣言、完全なCSSルール、HTMLをコピーできます。
入力
プレビューとHTMLスニペットにのみ使用されます。
テキストと下線の間の距離 (text-underline-offset)。
出力
装飾されたテキストがここに表示されます。
このツールを使う他の方法
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-text-decoration-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{}'ご自身のアカウントのキーに差し替えてください。ツールのフィールドがそのままリクエストボディになります——ラッパーはありません。
AIエージェントに依頼する
Use the IOTools `css-text-decoration-generator` tool (CSS Text Decoration Generator) on this input:
YOUR_INPUT_HEREIOTools MCPサーバーに接続された任意のエージェントにこれを貼り付け、入力内容を追加してください。
埋め込みウィジェット
<iframe
src="https://iotools.cloud/embed/css-text-decoration-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="CSSテキストデコレーションジェネレーター — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>ご自身のページに貼り付けるだけ——無料、キー不要、リンクを掲載するだけです。
| API/MCP 1回あたりの費用 | 5クレジットから |
|---|---|
| クレジットが足りませんか? | 料金を見る |
次の方法でも利用可能
ガイド
CSSの text-decoration プロパティは、テキストに下線、上線、取り消し線を引きます。最新のCSSではこの線のスタイルも指定でき、実線、二重線、点線、破線、波線のパターン、任意の色、カスタムの太さを設定できます。このジェネレーターでは、ご自身のテキストに結果を表示し、コピーできるCSSを提供します。
使い方
- サンプルテキストを入力します。 これはプレビューとHTMLスニペットにのみ使われます。
- 線の種類を選びます。 下線、上線、取り消し線、またはその組み合わせから選べます。
- スタイル、色、太さを選びます。 赤の波線は見慣れた「スペルチェック」の表示です。点線や破線はリンクや略語に適しています。
- 下線のオフセットとインクのスキップを調整します。
text-underline-offsetは下線をテキストから離し、text-decoration-skip-ink: autoは g、j、y などの下に伸びる文字を線が避けるようにします。 - 出力をコピーします。 1行の宣言、完全なCSSルール、対応するHTMLスニペットをコピーできます。
ショートハンドの説明
text-decoration は text-decoration-line、text-decoration-style、text-decoration-color、text-decoration-thickness のショートハンドです。オフセットとインクのスキップは独立したプロパティなので、生成されるルールではそれぞれ別の行に記述されます。
アクセシビリティのヒント
- リンクを示すのに色だけを頼らないでください。下線を残すか、別の手掛かりを使ってください。
- 読みやすさが必要なテキスト（価格、変更点など）への取り消し線は、背景との十分なコントラストを保ってください。
テキストの影や光彩については、CSSテキストシャドウジェネレーターをご覧ください。グラデーションで塗られた文字には、CSSグラデーションテキストジェネレーターをお試しください。
プライバシー
すべての処理はブラウザ内で行われます。入力したテキストや設定がアップロードされることはありません。