■キー割当表示 [Shift-H] ─ KeyNavi:キーボードを活用して 
ホームページを快適に─
 
ホーム [0] テキスト指定例リスト:1.目次 [1] 5. スタイルシート テキスト関連 ・サイトマップ [Shift-S]

テキスト指定例リスト
 ■ 5. スタイルシート テキスト関連

【このページ内のトピック: 「Ctrl-矢印」でフォーカス移動・「G/T」連打で自動ナビ】
5.1 文字間隔:letter-spacing
5.2 単語間隔:word-spacing
5.3 行の高さ:line-height
5.4 字下げ:text-indent
5.5 下線,取り消し線など:text-decoration
5.6 大文字,小文字変換:text-transform
5.7 左右位置:text-align
5.8 上下位置:vertical-align

注1: 「NS,NN=Netscape Navigator」「IE=Internet Explorer」の略です。
注2: ブラウザ名で特に指定が無いものはWindows版についての記述です。
注3: 基本的に スタイルシートの各指定例は<div style="...">などと インラインで行っています。

 ■ 5.1 文字間隔:letter-spacing

IE3,NS4サポート外。
指定内容 日本語 英語
指定無し
美しい日本語
Stylish English
-2px
美しい日本語
Stylish English
0px
美しい日本語
Stylish English
2px
美しい日本語
Stylish English
4px
美しい日本語
Stylish English
8px
美しい日本語
Stylish English
normal
美しい日本語
Stylish English

 ■ 5.2 単語間隔:word-spacing

IE3-5.5,NS4はサポート外。
指定内容 日本語 英語
指定無し
美しい 素晴らしい 日本語
Great Stylish English
-5px
美しい 素晴らしい 日本語
Great Stylish English
0px
美しい 素晴らしい 日本語
Great Stylish English
2px
美しい 素晴らしい 日本語
Great Stylish English
5px
美しい 素晴らしい 日本語
Great Stylish English
10px
美しい 素晴らしい 日本語
Great Stylish English
normal
美しい 素晴らしい 日本語
Great Stylish English

 ■ 5.3 行の高さ:line-height

IE3では「em,ex,normal,数値」で指定した場合行が重なる。 NS4ではnormalを指定しても継承してしまう。 また両者とも画像があると行が重なるなどの問題があります。 参考:HTML,CSSバグ&回避法リスト
指定内容 日本語 英語
指定無し
美しい日本語
素晴らしい日本語
Stylish English
Great English
0.8
美しい日本語
素晴らしい日本語
Stylish English
Great English
1.0
美しい日本語
素晴らしい日本語
Stylish English
Great English
1.5
美しい日本語
素晴らしい日本語
Stylish English
Great English
80%
美しい日本語
素晴らしい日本語
Stylish English
Great English
100%
美しい日本語
素晴らしい日本語
Stylish English
Great English
150%
美しい日本語
素晴らしい日本語
Stylish English
Great English
15px;
美しい日本語
素晴らしい日本語
Stylish English
Great English
30px;
美しい日本語
素晴らしい日本語
Stylish English
Great English
normal
美しい日本語
素晴らしい日本語
Stylish English
Great English

 ■ 5.4 字下げ:text-indent

IE4ではこの例の様にwidthを指定したdiv要素内、或いはtableのtd要素内では text-indentが効かず。
IE5では同様にwidthを指定するとボックス自体も指定量だけインデントする。
IE5.5-6では 下記の例の場合 text-indentをパーセントで指定すると ブロックが大きく右横に伸びてしまいます。 そのためパーセントの例は載せていません。
指定内容 日本語 英語
指定無し
美しい日本語
素晴らしい日本語
Stylish English
Great English
15px
美しい日本語
素晴らしい日本語
Stylish English
Great English
30px
美しい日本語
素晴らしい日本語
Stylish English
Great English
1em
美しい日本語
素晴らしい日本語
Stylish English
Great English
2em
美しい日本語
素晴らしい日本語
Stylish English
Great English

 ■ 5.5 下線,取り消し線など:text-decoration

IE3,NS4ではoverlineがサポート外。
IE3-6ではblinkがサポート外。NS4,NS6+(NS6.1除く)向け。
指定内容 日本語 英語
指定無し
美しい日本語
Stylish English
underline
美しい日本語
Stylish English
overline
美しい日本語
Stylish English
line-through
美しい日本語
Stylish English
blink
美しい日本語
Stylish English
none
美しい日本語
Stylish English

 ■ 5.6 大文字,小文字変換:text-transform

capitalilzeは単語の1文字目を大文字にする。
noneによって親から継承を受けないように出来る。
IE3,NS4サポート外。
指定内容 日本語 英語
指定無し
美しい日本語
Stylish English great english
capitalize
美しい日本語
Stylish English great english
uppercase
美しい日本語
Stylish English great english
lowercase
美しい日本語
Stylish English great english
none
美しい日本語
Stylish English great english

 ■ 5.7 左右位置:text-align

右寄せ、左寄せ、中央寄せ等
指定内容 日本語 英語
指定無し
美しい日本語
Stylish English
left
美しい日本語
Stylish English
center
美しい日本語
Stylish English
right
美しい日本語
Stylish English
justify
美しい日本語
Stylish English

 ■ 5.8 上下位置:vertical-align

インライン要素かテーブルのtd,th要素で指定。
以下はspanタグを使ったインライン要素の例です。 位置が分かり易いよう、位置指定する文字列を小さめ(7px)にしています。
以下の例はIE3,NS4では動作しないようです。 IE4,5ではbaseline,super,subのみ動作する模様です。 但しテーブルセルに適用した場合は 異なるかもしれません。
指定内容 日本語 英語
指定無し
美しい日本語
Stylish English
baseline 素晴らしい 美しい日本語 Great Stylish English
top 素晴らしい 美しい日本語 Great Stylish English
middle 素晴らしい 美しい日本語 Great Stylish English
bottom 素晴らしい 美しい日本語 Great Stylish English
super 素晴らしい 美しい日本語 Great Stylish English
sub 素晴らしい 美しい日本語 Great Stylish English
text-top 素晴らしい 美しい日本語 Great Stylish English
text-bottom 素晴らしい 美しい日本語 Great Stylish English

これはvertical-alignとは関係ないのですが、NS4でこの例を見ると 文字列全体が小さくなっています。 スタイルシートをインラインで指定しているので 文字サイズの指定が前後に波及するNS4特有のバグが発生しています。 詳しくはHTML,CSSバグ&回避法リスト




ページの先頭へ     

前のページへ
次のページへ
テキスト指定例リスト 目次 【数字キーでアクセス】
例 : 「2.1節」は「2」キーを2回連打して移動。「Q or P」で戻る。
「Ctrl-矢印」でフォーカス移動。
1. 目次
2. HTMLテキスト関連一般
3. HTML その他
4. スタイルシート フォント関連
5. スタイルシート テキスト関連
5.1 文字間隔:letter-spacing
5.2 単語間隔:word-spacing
5.3 行の高さ:line-height
5.4 字下げ:text-indent
5.5 下線,取り消し線など:text-decoration
5.6 大文字,小文字変換:text-transform
5.7 左右位置:text-align
5.8 上下位置:vertical-align
6. フォントファミリー指定例
7. フォントサイズ指定例
8. 各種フォントサイズとブラウザ互換性
9. 縦書き(追加作成中)


ホーム [0] テキスト指定例リスト:1.目次 [1] 5. スタイルシート テキスト関連 ・サイトマップ [Shift-S]
■キー割当表示 [Shift-H] ─ KeyNavi Project 2003 ─