アウトライン（白抜き）文字タイトル
これは文字の輪郭線だけを描き、中身を空にしたアウトライン（白抜き）タイトルです。 color:transparent で塗りを消し、 -webkit-text-stroke で文字の縁に 2px の線を引くことで実現しています。
解説
これは文字の輪郭線だけを描き、中身を空にしたアウトライン（白抜き）タイトルです。color:transparentで塗りを消し、-webkit-text-strokeで文字の縁に 2px の線を引くことで実現しています。塗りつぶしのない抜けた表現になるため、アートやファッション系で上級感のあるキービジュアルに向きます。CSS のみで、アニメーションも JavaScript もありません。
線の太さと色だけで印象が決まる引き算のデザインで、余白と組み合わせると洗練された雰囲気が出ます。
使う場面とカスタマイズ
- ファッション・アート・ブランドの大見出しやヒーローのキャッチ
- 輪郭の太さと色は
text-strokeの値で変更 - 大きく見せるほど抜け感が映えるので
font-sizeは大きめに
注意点として、text-strokeは-webkit-付きの指定が主流で、細い線や低コントラストの背景では文字が読みにくくなります。可読性が必要な場面では線を太めにし、背景との明暗差を確保してください。塗りが透明なので、背景画像の上に重ねると中が透けてデザインのアクセントにもなります。
使用例・適したシーン
- ヒーローセクションのキャッチコピー
- セクション見出し
- 記事タイトル・ブログのリード
- コーポレートサイトのキービジュアル
よくある質問
輪郭線の太さや色を変えられますか
変えられます。-webkit-text-stroke の値が線の太さと色です。標準は 2px の白ですが、太くすると主張が強くなり、細くすると繊細になります。背景が暗いほど白い輪郭が映えるので、明るい背景では濃い色の線に変えると読みやすくなります。
中を透明にしたまま背景の上に重ねられますか
重ねられます。文字の塗りは color:transparent で透明なので、背景画像や別の要素の上に置くと中身が透けて見え、デザインのアクセントになります。ただし背景が複雑だと輪郭が読みにくくなるため、線を太めにするか落ち着いた背景の上で使うのが安全です。