CSS3 テキスト効果

CSS3 テキスト効果

CSS3 には、いくつかの新しいテキスト機能が含まれています。

この章では、次のテキストプロパティについて学習します:

• text-shadow
• word-wrap

ブラウザ・サポート

Internet Explorer は、まだ text-shadow プロパティに対応していません。

Firefox、Chrome、Safari 及び Opera は、text-shadow プロパティに対応しています。

主要なブラウザの全てが、word-wrap プロパティに対応しています。

CSS3 テキストの影

CSS3 での text-shadow プロパティは、テキストへ影を付けるものです。

水平方向の影、垂直方向の影、ぼかしの間隔、影の色を指定します:

例

ヘッダへ影を付けます:

h1
{
text-shadow: 5px 5px 5px #FF0000;
}

Try it yourself »

CSS3 単語の折返し

エリア内に収まりきれないほど単語が長すぎる場合、外側にはみ出してしまいます:

This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.

CSS3 での word-wrap プロパティは、テキストへ強制的に折り返すことを可能にします - これは、 単語の中央であっても分割することを意味します:

This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.

CSS コードは次の通り:

例

長い単語を改行して、次の行に折り返すことができます:

p {word-wrap:break-word;}

Try it yourself »

新 Text プロパティ