CSSテキストストロークジェネレーター

ライブプレビューとコピー可能なCSSコードで、輪郭付きテキスト効果を作成します。

コントロール

プレビュー

生成されたCSS


      
    



    

      
使い方

      
    
        
  1. テキストを入力: 輪郭効果でプレビューするテキストを入力します。
    2. 
        
  2. ストロークの設定を調整: 太さ(ピクセル単位)、ストロークの色、テキストの色、フォントサイズ、フォントファミリーを定義します。
    3. 
        
  3. CSSをコピー: 生成された-webkit-text-strokeとtext-strokeプロパティが、スタイルシートにコピーする準備ができています。
    4. 
      


      
なぜCSS text-strokeジェネレーターを使うのか?

      
CSS text-strokeは、文字の周りに輪郭を追加します, 輪郭付きまたは中空の文字が必要なヘッドライン、ロゴ、ディスプレイテキストの人気のあるデザインテクニックです。正しいCSS構文を手動で構築するには、-webkitプレフィックス、単位、色の形式を知る必要があります。このジェネレーターを使用すると、効果を視覚的にプレビューし、本番対応のCSSコードを瞬時に生成できます。


      
機能

      

      
よくある質問

      

        CSS text-strokeはすべてのブラウザでサポートされていますか?
        
-webkit-text-strokeは、最新のブラウザ, Chrome、Firefox、Safari、Edge, で広くサポートされています。一部の文脈ではベンダープレフィックスが残っています。常にターゲットブラウザでテストし、必要に応じてtext-shadowフォールバックを計画してください。

      

      

        中空の輪郭付きテキストを作成するには?
        
テキストの色を透明に設定し、輪郭の色を追加します。これにより、輪郭のみが見える中空のテキストが作成されます。-webkit-text-fill-color: transparent;を-webkit-text-strokeと組み合わせて使用します。

      

      

        任意のフォントでtext-strokeを使用できますか?
        
はい、text-strokeは任意のフォントで動作します。効果は太く、ボールドなフォントでより劇的になります。細いフォントは、大きな太さで文字に重なる輪郭を表示することがあります。

      

    




  
CSS テキストストロークの起源

  
グリフをストロークするアイデアは CSS よりも数十年前から存在します。PostScript(Adobe、1984 年)にネイティブで、SVG 1.1(W3C 勧告、第 2 版、2011 年 8 月 16 日)に持ち込まれ、<text> を含むあらゆる形状に対して stroke、stroke-width、stroke-linecap、stroke-linejoin ペイント属性を定義しました。CSS は Apple が 2007 年 6 月に Safari 3 で -webkit-text-stroke を出荷した時に独自のバージョンを得て、-webkit-text-fill-color と共に出荷されました。このプロパティは出荷された W3C 仕様で標準化されたことはありません。CSS Text Decoration Module Level 4 エディター草案でプレフィックスなしの text-stroke として存在しますが、2026 年現在、プレフィックスなしの名前はまだどのブラウザでも有効化されていません。Firefox 49(2016 年 9 月 20 日)と Edge 15(2017 年 4 月 5 日)は両方とも、WebKit プレフィックス付きの名前のみを使用するページを処理するための明示的な Web 互換エイリアスとして -webkit-text-stroke を追加しました。本番環境では、プレフィックスを書いてください。






  
Web 上でテキストをアウトラインする 3 つの方法

  
テキストの周りにアウトラインを描く方法は複数あります。適切なツールは幅、可読性予算、および基礎となるグリフが鮮明である必要があるかどうかに依存します:

  





  
アクセシビリティ:コントラストの論理、本文 NO、装飾的 YES

  
WCAG 2.1 達成基準 1.4.3「コントラスト(最低限)」(W3C 勧告 2018 年 6 月 5 日)は、通常のテキストには 4.5:1 のコントラスト、大きいテキスト(18 pt / 14 pt ボールド)には 3:1 を要求します。ストロークが適用されると、グリフの視覚的に支配的なエッジはストロークの色なので、コントラストチェックはその色を背景と比較する必要があり、フィルではありません。よくある失敗:細い黒のストロークが付いた白の上の黄色のロゴは、黒対白をチェックすれば合格しますが、文字の本体は白の上の黄色で小さなサイズでは読みにくくなります。ストロークは本文テキストの可読性を破壊します。16 px のフォントサイズ未満では、1 px のストロークがグリフ内部の 10〜15 パーセントを埋め、2 px のストロークはカウンタ(「a」、「e」、「o」の穴)を閉じる可能性があります。テキストストロークは見出し、ディスプレイタイポグラフィ、装飾用途に予約してください。すべてのブレークポイントで明示的なテストなしに段落テキストに適用しないでください。






  
テキストストロークが正しいツールである場合

  





  
よくある間違い

  





  
その他のよくある質問

  
なぜ私のストロークは 1080p モニターよりも Retina ディスプレイで太く見えますか?

  
そうではありません、CSS ピクセルでは。2px ストロークは両方で正確に 2 CSS ピクセルです。変わるのは知覚される鮮明さです:Retina(2× DPR)ディスプレイでは、2 CSS ピクセルのストロークは 4 デバイスピクセルできれいにアンチエイリアシングします。1× ディスプレイでは、2 デバイスピクセルは著しくぼやけたエッジを与えます。Retina で 1 デバイスピクセルにスナップするヘアラインが必要な場合は、0.5px と書いてください。ブラウザは高 DPR スクリーンで 1 デバイスピクセルに丸めます。

  
各文字に異なるストロークの色を持つことはできますか?

  
単一の -webkit-text-stroke 宣言ではできません。各文字を <span> でラップして個別にスタイル設定するか、独自の stroke 属性を持つ SVG <tspan> 要素を使用してください。::first-letter 疑似要素は、最初の文字だけを変える必要がある場合は text-stroke を受け入れます。

  
ストロークはどのくらい太いと太すぎますか?

  
実用的な上限は フォントサイズの約 8 パーセントです。100 px フォントでは、それは 8 px のストロークです。それを超えると文字が互いに重なり始めます。より太いアウトラインビジュアルが必要な場合は、paint-order: stroke fill; を持つ SVG <text> を使用して、フィルを元の幅に保ち、ストロークが外側にのみ広がるようにしてください。

  
-webkit-text-stroke は絵文字で動作しますか?

  
カラー絵文字(モダンブラウザのデフォルト)では、ストロークは絵文字グリフの外側のシルエットに適用されます。絵文字は既に独自のアウトラインとシェーディングを持っているため、結果は通常微妙です。白黒の絵文字(text フォントバリエーション)では、ストロークは他のグリフと同様にきれいに適用されます。

  
何かがサーバーに送信されますか?

  
いいえ。プレビューに入力するテキスト、選択する色、生成された CSS はすべてブラウザの JavaScript で処理されます。ネットワーク呼び出しは行われません。確認するには DevTools のネットワークタブを開いてください。



    
    

      
関連ツール

      

        CSSテキストグラデーションジェネレーター
        グリッチ・テキスト・ジェネレーター
        CSSアニメーションジェネレーター
        CSS Text Shadowジェネレーター