no-image

テキスト

@font-face/WEBフォント

サーバー上のフォントで表示。

結果

ABCDEFGHIJK…

解説

@font-faceは、WEBフォントを指定できます。
ユーザーのPCに入っているフォントではないフォントを利用したい時に便利です。
@font-faceは単独では動きません。
classやid等でfont-familyを指定するようにします。

IEは「format()」に未対応です。更に、「eot」にしか対応していません。
それを回避するために、「IE用」と「IE以外用」を用意します。

IE以外用にフォーマットを紹介します。
「.ttf」は、"truetype"。
「.otf」は、"opentype"。
「.eot」は、"eot"。

text-shadow/テキストに影

テキストに影をつける

結果

text-shadow:
2px 2px 0px gray;
text-shadow:
-2px -2px -0px gray;
text-shadow:
2px 2px 2px red,-2px -2px -2px gray;

解説

text-shadowは、テキストに影を指定できます。
内わけは、「右px 下px ぼかしpx 色」になります。
ふたつ指定するときはカンマで区切ります。

text-overflow/超過文字の処理

収まらない文字の処理方法

結果

【ellipsis】このサイトはHTML5とCSSを日本人向けに解説したサイトです。
【clip】このサイトはHTML5とCSSを日本人向けに解説したサイトです。

解説

text-overflowは、widthを超えてしまった文字をどう処理するかです。
「ellipsis」は、「…」で終わる。
「clip」は、表示できるまでを表示する。
利用するには、「overflow: hidden;」と、「white-space:nowrap;」を併用する必要があります。

word-wrap/自動改行

自動改行をするかどうか

結果

【word-wrap: normal;】Greeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeen
【word-wrap: break-word;】Greeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeen

解説

word-wrapは、文字の自動改行のタイミングを指定できます。
「normal」は、デフォルト。
「break-word」は、単語を中断しても改行します。