|
■ text-decoration
テキストの飾り指定 underline overline line-through nome blink
テキストの飾りと言っても線を入れる程度の事です。
text-decoration:underline →
下に線が入ります
text-decoration:underline →
上に線が入ります
text-decoration:underline →
取り消し線が入ります
■ white-space
半角スペースの扱いと改行の指定 normal pre nowrap
幅を決めた範囲に全角文字を幅以上書くと、幅一杯で全角文字は改行される。
半角英数字は、単語間の半角スペースで改行される。また半角スペースは複数並んでいても1つ分しか表示されないが、
pre で書いた通り表示する事もできる。
スタイルシートは音声ブラウザに配慮した属性も多くある。
Let's carry out study of CSS by Challenge HP.
white-space:normal ↓
スタイルシートは音声ブラウザに配慮した属性も多くある。
Let's carry out study of CSS by Challenge HP.
通常はこのように指定した幅一杯で改行される。
white-space:pre ↓
スタイルシートは音声ブラウザに配慮した属性も多くある。
Let's carry out study of CSS by Challenge HP.
書いた通りに表示される。筈がIEではその通りの表示されない。
white-space:nowrap ↓
スタイルシートは音声ブラウザに配慮した属性も多くある。
Let's carry out study of CSS by Challenge HP.
改行されずに指定した幅を超えて表示される。これは<nobr> や テーブルの属性の nowrap の代わりに使える。
■ letter-spacing
文字の間隔の指定 normal <lenght>
文字１字づつの間隔を指定できます。
letter-spacing:1.3em → 文字の間隔が広くなります。
letter-spacing:5px → 文字の間隔が広くなります。
■ word-spacing
単語の間隔の指定 normal
英文などの単語で、半角スペースで区切ってある部分の幅を指定するようです。
word-spacing:10px → Let's carry out study of CSS by Challenge HP.
word-spacing:0.5em → Let's carry out study of CSS by Challenge HP.
■ text-indent
段落の１行目のインデント指定 <lenght> <%>
段落の１行目の文字を下げる事が出来ます。全角スペースを入れても出来ますが、下げる幅を指定できるのが text-indent です。
text-indent:1.3em
文章の始めに文字の1.3倍のインデント。
text-indent:25px
文章の始めに25px文字の1.3倍のインデント。
■ word-break
英単語の改行の指定 normal break-all keep-all
英文は単語の途中で改行すると読み難くなりますが、幅一杯で改行したい時に
word-break:break-all を使います。normal は keep-all と同じ働きをします。
Let's carry out study of CSS by Challenge HP. の文章で比べてみます。
word-break:break-all
Let's carry out study of CSS by Challenge HP.
word-break:keep-all
Let's carry out study of CSS by Challenge HP.
■ word-wrap
英単語の強制改行の指定 normal break-word
掲示板を探してテストする時に、aaaaa などと英数字を連打する人がいます。このような切れ目のない英数字は、
table や div などの決められた幅を無視して、何処までも広がってしまいます。しかし word-wrap:break-word を使うと、
決められた幅で強制的に改行します。ちなみに日本語は word-wrap:break-word を使わなくても自動的に幅一杯で改行されます。
word-wrap:normal
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
word-wrap:break-word
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
■ writing-mode
文章の書き方の指定 lr-tb tb-rl
縦書きを表示します。日本語や中国語などで使われそうですが、ネットでは横書きに慣れているので、
縦書きの文章はかえって読み難いようです。
writing-mode:lr-tb
突然レーナは人間の方へ飛んで行き、そして人間に言いました。
「何をしに来たの？ お願い、帰って！けがされたくない。 ここは私達の沼よ。」
すると人間は、「ずいぶん慣れた白鳥だな。エサでも欲しいのか？ 何もないぞ。」
そう言うと、足元の葉っぱをちぎりレーナの方へ投げました。
レーナがどんなに訴えても、人間には分りません。
ただ、"コォー、コォー"と鳴いているだけなのです。
白鳥物語より
writing-mode:tb-rl
突然レーナは人間の方へ飛んで行き、そして人間に言いました。
「何をしに来たの？ お願い、帰って！けがされたくない。 ここは私達の沼よ。」
すると人間は、
「ずいぶん慣れた白鳥だな。エサでも欲しいのか？ 何もないぞ。」
そう言うと、足元の葉っぱをちぎりレーナの方へ投げました。
レーナがどんなに訴えても、人間には分りません。
ただ、"コォー、コォー"と鳴いているだけなのです。
白鳥物語より
■ text-transform
英字の大文字と小文字の指定 capitalize uppercase lowercase nome
英文で 全部大文字・全部小文字・頭だけ大文字 などを指定できます。
Let's carry out study of CSS by Challenge HP.
上の文章に text-transform を使ってみる
capitalize → Let's carry out study of CSS by Challenge HP.
uppercase → Let's carry out study of CSS by Challenge HP.
lowercase → Let's carry out study of CSS by Challenge HP.
|
