text-decorationに新たなスタイルが追加されました！

※この記事は2024年11月26日にWebflowが公開した下記アップデート情報・ニュースを日本語訳したものです（一部加筆・修正あり）

Text Decoration Styles

‍

テキストの下線と装飾のCSSプロパティがネイティブにサポートされているため、Webflowではスタイルパネルでtext-decorationを正確に制御できるようになりました。

text-decorationの位置を調整したり、テキストの色とは異なる色を選択したり、波線を追加したりできるようになりました。

‍

新たなスタイルパネルの画面です。

新しいテキスト装飾スタイルを使用すると、カラフルな点線の下線を作成できます！

‍

新しいtext-decoration

このアップデートでは、高度なテキスト装飾プロパティが導入され、下線のスタイルと動作をこれまでにないほど細かく制御できるようになりました。

• 装飾スタイル: 実線、破線、点線、波線、二重線から選択します。
• 下線オフセット: 下線の垂直位置を調整します。
• 装飾の太さ: 下線と取り消し線の太さをカスタマイズします。
• 装飾色: テキストの色とは独立して装飾色を設定します。
• 下線の位置: テキストに対する下線の配置を微調整します。
• インクをスキップ: 文字のアセンダとディセンダとの重なりを避けて下線をきれいに保ちます。

‍

‍

注:関連するテキストスタイルに簡単にアクセスできるように、斜体プロパティを「More Type Options」に移動しました。

‍

新しいスタイルを試してみてください

新しいオプションの動作を確認するには、サイトでStyle Panel  > Typography > Decorに移動します。

また、Style Panel  > Effects > Transitionsドロップダウンで、Underline offsetとDecoration colorをアニメーション化するCSSトランジションを作成することもできます。

新しいテキスト装飾スタイルの使用方法に関するステップバイステップのガイドについては、ヘルプセンターをご覧ください。

‍

‍