|
| CSS Reference_________ |
|
|
|
|
 |
| 文字に対するスタイル指定 |
文字の色を指定する。指定は「カラーコード」で行う。
| <span style="color: #ff0000;
background-color: transparent">赤色文字</span>
文字の色を赤に指定。 |
フォントのスタイル（体裁）を指定する。「italic」もしくは「oblique」を指定できる。
| <span style="font-style: italic">Italic</span>
フォントを斜体（イタリック体）に指定する。正確には斜体は「oblique」で指定するが、ブラウザによっては対応していないものがあるため、同じようなスタイルの「italic」を指定しておくほうが無難である。 |
フォントのサイズを指定する。指定には「pt」、「em」、「in（inch）」等の算術単位の他、小さいほうから「xx-small」、「x-small」、「small」、「medium」、「large」、「x-large」、「xx-large」が指定できる。
| <span style="font-size: 8pt">8ポイントの文字</span>
<span style="font-size: x-small">小さい文字</span> ブラウザによっては「small」と「x-small」のサイズを同じとみなしてしまうものもあるため、厳密にサイズを固定したい場合は「10pt」などの算術単位を使う。 |
フォントの種類（ファミリ名）を指定する。
| <span style="font-family:
verdana,arial,helvetica,sans-serif">フォントの種類</span>
上記のようにフォントの種類は複数指定してもよい。その場合、ブラウザが対応しているフォントを先頭から優先的に表示しようとする。「Times New Roman」のようにフォントファミリに空白がある場合は'（引用符）で囲んでおく。日本語のページなら「MS Pゴシック」、あるいは「sans-serif」を最後に指定しておくと間違いなく「日本語」として表示される。 |
フォントのウエイト（太さ）を指定する。指定には100〜900までの100単位の数字、もしくは「bold」、「bolder」、「lighter」が指定できるが、単に文字を太くしたい（強調したい）のなら「bold」と指定する。
| <span style="font-weight: bold">太文字</span> |
「font-size」、「font-weight」等、フォントに対する複数指定を一度にまとめて行う。
| <span style="font: 10pt bold italic arial">フォント指定</span>
ここで注意すべきは、「フォントの種類（ファミリ名）は必ず最後に指定しなければならない」となっていることである。ただ、仕様書にはフォントファミリーを指定した場合は「一般フォントファミリー名(generic font family)を最後の選択肢として付け加えておく事を推奨します」とあるため、この指定方法はあまり推奨できない。 |
文字や画像の横位置を指定する。左端なら「left」、中央なら「center」、右端なら「right」、両端なら「justfy」と指定する。
| <span style="text-align: center">中央揃え</span>と指定した場合は
中央揃え のようになる。 |
文字や画像の縦位置を指定する。指定には「pt」、「em」、「in（inch）」、「%（パーセンテージ）」等の他、「baseline」、「sub」、「super」、「top」、「text-top」、「middle」、「bottom」、「text-bottom」の指定もできる。文字に対して指定した場合、ブラウザによっては無視されてしまう傾向が強いため、画像（IMGタグ）に対してのみ指定するほうが無難である。
「baseline」、「sub」、「super」、「top」、「text-top」、「middle」、「bottom」、「text-bottom」を指定した場合はそれぞれ
のようになる。 |
文字に下線を引いたり、点滅させたりする。文字の下に線を引く「underline」、上に線を引く「overline」、取り消し線を引く「line-through」、文字を点滅させる「blink」が指定できる。しかし、一般的には「blink」で点滅させることは閲覧者側にあまり良いイメージを与えない。
| <span style="text-decoration:
underline">文字の下に線</span>
<span style="text-decoration: line-through">取り消し線</span> 尚、「overline」と「blink」は対応するブラウザが限られるため、使う際には注意が必要。 |
文章の1行目の頭下げの幅を指定する。指定には「pt」、「em」、「in（inch）」等の他、「%（パーセンテージ）」の指定もできる。
| <p style="text-indent: 20pt">文章の1行目を20ポイント頭下げする。</p> と指定した場合は
文章の1行目を20ポイント頭下げする。 |
上下左右の余白の幅を指定する。指定には「pt」、「em」、「in（inch）」等の他、「%（パーセンテージ）」の指定もできる。「margin-top」で上、「margin-bottom」で下（底）、「margin-left」で左、「margin-right」で右を設定する。
| <p style="margin-left: 20pt">右端から20ポイント頭下げする。</p> と指定した場合は
右端から20ポイント頭下げする。 |
行の高さ（行間）を指定する。指定には「pt」、「em」、「in（inch）」等の他、「%（パーセンテージ）」の指定もできる。
| <p style="line-height: 15pt">行の高さを指定すると、文章が見やすくなる。<br>ただし、これらは見る側の主観に左右される部分が多い。また、多用すると余計に見辛くなる場合があるので注意が必要。</p> と指定した場合は
行の高さを指定すると、文章が見やすくなる。 |
文字と文字の間隔を指定する。指定には「pt」、「em」、「in（inch）」等の他、「%（パーセンテージ）」の指定もできる。
| <span style="letter-spacing: 5pt">文字と文字の間隔</span> と指定した場合は
文字と文字の間隔 のようになる。この「letter-spacing」は適切に指定すると表示が見やすくなるため、ぜひ使いこなしたいテクニックの1つである。 |
単語と単語の間隔を指定する。指定には「pt」、「em」、「in（inch）」等の他、「%（パーセンテージ）」の指定もできる。「letter-spacing」が文字と文字の間隔を指定するのに対し、こちらは単語（1かたまりの文字）と単語の間隔を指定することができる。
| <span style="word-spacing: 20pt">単語
hello good</span> と指定した場合は
単語 hello you のようになる。 |
スペースやタブなどの空白文字や改行の扱いを指定する。指定には「normal」、「pre」、「nowrap」が指定できる。「pre」、「nowrap」はHTMLの「PRE」、「NOWRAP」要素と同じ機能をする。
| <span style="white-space: nowrap">長い文字列（ここでは省略）</span> と指定した場合は<br>タグで改行指定しない限り永遠と改行されることなく（ブラウザの右端で折り返されることなく）文字列が続く。 |
| CopyRight (C) 2000-2013 by T.Shiraishi All right reserved 無断転載禁止／リンクフリー |
