辞典の索引＞優先度１＞１の例外＞優先度２＞優先度３＞優先度４＞優先度５
ここでは、優先度１でありながら、つまり、ブラウザ対応が進んでいながらも、使うには問題点が多すぎるスタイルシートのプロパティを挙げた。表示が乱れるのなどのおそれがあるため、安心できず、注意が必要である。
文字のサイズ、大きさを設定できる。なにも設定しない場合は「medium」。
以前は、文字を大きくしたり、小さくしたりするのに、big、small要素を使っていた。＞＞「ｈｔｍｌ言語学習辞典」のbig要素へ
?の中に長さの数値（例えば1.5emとか。＞＞詳細はこちら） を入れる。または、「xx-small」、「x-small」、「small」、「medium」、「large」、「x-large」、「xx-large」のいずれかを入れる。なお、「larger」、「smaller」をつかうと、前者は親要素に比べて大きくなり、後者は、小さくなる。例えば、「larger」と設定した場合、親要素が「medium」だったとすると、親より一回り大きい「large」と同じ効果を得られる。
表示例：「xx-small」、「x-small」、「small」、「medium」、「large」、「x-large」、「xx-large」
注意（確認できている問題）：困ったことに、ネットスケープ６以外、ほとんどのブラウザにおいて、「medium」ではなく「small」が普通の文字の大きさとなっている。よって、文字を小さくしたいときには、「x-small」を使わないと、効果が出ないだろう。
ネットスケープでは、ブラウザの設定によって、標準フォントの大きさが変えられる。だから、必ずしも「medium」が普通の文字の大きさに当たるとは限らない。
ネットスケープを使っている人は、「編集（上にある）＞設定＞表示＞フォント」の画面を出して、プロポーショナルフォントのサイズを変えてみよう。普通の文字の大きさが、サイズ８では「x-small」とほぼ同じ大きさに、サイズ１０では「small」とほぼ同じ大きさに、サイズ１２では「medium」とほぼ同じ大きさに、サイズ１８では「large」とほぼ同じ大きさに、サイズ２８では「x-large」とほぼ同じ大きさになる。
「px」や解像度との関係については、英語ではあるが、グラフで示しているので、以下を資料として使って欲しい。
＞＞Font Size Interval（http://style.cleverchimp.com/font_size_intervals/altintervals.html）
また、後で説明する「line-height」の設定をむやみに変えると、大文字が上と重なってしまう問題がある。
なお、私見だが、絶対単位（センチメートルなど）を使うと、読者が文字の大きさを変えることができない。もし、font-sizeを使う機会があれば、「%」のような相対単位を使って欲しい。「em」も使っても構わないが、インターネットエクスプローラー３．０で、「em」が「px」に変わり、文字がつぶれて読めなくなる現象が起きてしまう。それと、見出し要素（h1,h2など）に「%」を用いる場合、ネットスケープ（６を除く）ではデフォルトのサイズを基準にしてしまい、制作者の思うようにはいかないだろう。少なくとも、インターネットエクスプローラーとネットスケープとを比べてみると、見出しの大きさが異なるだろう。
つまり、単位選択に関して、「%」を使うか、もしインターネットエクスプローラー3.0を無視したいのであれば、「em」を使うか、このどちらかが良い。
文字に関する設定を一度にできる。「font-style」、「font-variant」、「font-weight」、「font-size」、「line-height」、「font-family」を一度に設定できる。
?の中にいろいろな物を入れる。その設定は、空白で区切りながら、
[「font-style」 「font-variant」 「font-weight」] 「font-size」/[「line-height」] 「font-family」
のように書いて、反映する。[ ]内で示したところはどれでも自由に省くことが出来る。ゆえに、「font-size」、「font-family」だけはこの順で必ず設定せねばならず、省略できない。「font-family」の設定は必ず、最後に付く。
表示例：font: italic normal bold large/100% monospace
「 font-style: italic; font-variant:normal; font-weight: bold; font-size: large; line-height:100%; font-family:monospace」と設定したのと変わりがない。
表示例：font: large monospace;でも良いし、font: italic large monospace;でも良い。
なお、「font-variant」と「font-family」については、それぞれ、優先度２と優先度1の例外で紹介する。「font-family」はブラウザ対応からみて、優先度１であるからすぐに使っても良いが、対応に混乱が見られるので、優先度1の例外に入れた。
同じ画面に、背景画像を繰りかえして使うかどうか設定できる。
要するに、これを使えば、タイルのように、画像を敷き詰めることができる。
どのブラウザでも対応しているはずだが、ネットスケープ（6を含めて）が不安定。再読み込みをすると、ちゃんと表示される。
まず、background-imageで背景画像を指定しておく。そして、?の中に上下左右に背景画像を敷き詰めていく「repeat」、上下だけに敷き詰める「repeat-x」、左右に広がって敷き詰めていく「repeat-y」、画像を繰り返し表示させず敷き詰めない「no-repeat」のいずれかを入れる。 初期設定は「repeat」になっている。
表示例：
背景画像は次を利用している。つまり、「background-image: url("sample.gif")」が前提。
まずは、「background-repeat:repeat;」で設定してみよう。
どうだろうか。後ろの背景画像が繰り返されているだろうか？タイルのように敷き詰められていると思われる。これは何も設定しなかったときも同様である。
以上が普通に、背景画像を設定したときである。
次に「background-repeat:repeat-y;」と設定してみる。この文章の背景画像は、さっきとは違っているはず。
画像は、縦方向につらなって、敷かれていく。横には、広がらない。
今度は横方向に広がっていくだろう。「background-repeat:repeat-x;」
どうだろう。うまく表示されただろうか。
次はよく使う方法なので、覚えておいた方がいい。
今度は画像を繰り返させない。つまり、一枚だけ表示させる方法である。設定は、「background-repeat:no-repeat;」となっている。
注意：body要素に適用すると起きなかったが、div要素に適用すると、ネットスケープ(6も含めて）において、読めなくなるほど、表示に乱れが見られた。body要素だけに用いるべきか。
ただし、ネットスケープ6に関しては、body要素に適用しても、表示されないときがある。再読み込みをすると、解決するとはいえ（とにかく、二度目の表示からは問題が起きなくなる）、これは非常にゆゆしき問題かと思われる。
背景画像について、いろいろと設定が出来る。「background-color」、「background-image」、「background-repeat」、「background-attachment」、「background-position」をまとめることが出来る。
表示例：background: url("sample.gif") gray 50% repeat fixed
背景画像については、さらに便利な設定方法がある。詳細は優先度２で。＞＞「background-attachment」、「background-position」
指定した範囲の、横幅を設定できる。
？の中に、長さを入れる。（＞＞長さの単位についてはこちら）
表示例：
注意1：パーセント（%）は何も設定されなかった場合の横幅を100%としている。
注意2：「ZSPCのCSS状況対応一覧のwidth(http://www.zspc.com/documents/css2/box/width.html)」では、IE4.0、5.0、5.5、6.0や、N4.7において、次のように指摘している。
内容としてwidthプロパティに指定した値よりも幅の広いものを含んでいる場合、 内容は正しく表示がされるが、ボックスの幅がそれに合わせて拡張されてしまう
例えば、背景色を塗ったり線を付けると、そこから文字がはみ出すことはない。
説明を補足するならば、ほとんどのブラウザにおいて、英単語を除いて、日本語である文字の幅は、「width」の値に従う。しかし、背景色と線で構成された四角のボックスは従わない。上の具体例では、英単語が改行されず、4文字の幅にならないため、本来文字がはみ出すはずであるが、はみ出さないのである。ただし、ネットスケープ6とオペラ6.0では、文字がはみ出す。（下図参照）
画像は、Opera6.0、Netscape4.1、Netscape6.0、IE4.01、IE5.5、Amaya5.2での表示を参考にし、イメージしたものである。実際の表示とは違うおそれがある。
詳細に、文字、絵など、範囲の位置を設定できる。とても便利で、table要素（表）を使う必要が無くなる。
positionについては、?の中に通常設定である「static」、絶対位置を指定する「absolute」、親要素と相対の位置を指定できる「relative」のいずれかを入れる。「fixed」を入れても良いが、対応ブラウザが少ない。詳しい説明は優先度３の「position:fixed;」へ。
「top」、「bottom」、「left」、「right」については、?の中に長さ（＞＞長さの単位についてはこちら）を入れる。または「auto」（これについては対応ブラウザが少ない）。なお、ネットスケープはバージョン６を除いて、「bottom」、「right」に対応していない。
表示例：別ページへ＞＞「配置に関するサンプルページ」。
画像に、文章を回り込みさせる。つまり、画像のすぐ横に、文章を並べることが可能となる。
または、画像の横に、下の文章を流し込むという表現の方が適切かも知れない。ただし、必ずしも画像でなくとも良い。
?の中に、右に配置させて置いて、左に文章などを回り込みさせる「right」、左に配置して、右に文章などを回り込みさせる「left」。もしくは回り込みをしない標準設定の「none」を入れる。
使用例：まず、スタイルシートに、#floatl{float:left;} #floatr{float:right;} #floatn{float:none;}を書いておく。 それから、ＨＴＭＬ文書に次のように書いた。
<p>表示例：以下をご覧下さい。</p> <img src="koukoku.png" alt="サンプル用の画像" width="210" height="35" class="floatr"> <p>右の画像は、IMG要素にfloat:right;のスタイルシートを適用させたものである。</p> <img src="simple.gif" alt="サンプル用の画像" width="200" height="50" id="floatl"> <p>次に左の画像は、float:leftを適用させてみた。この文章部分は、画像の真横、右に置かれているはずである。</p> <img src="simple.gif" alt="サンプル用の画像" width="210" height="35" id="floatn"> <p>今度はどうだろうか。float:none;と設定したので、画像の横には、文章が置かれていないはずである。</p>
表示例：以下をご覧下さい。
右の画像は、IMG要素にfloat:right;のスタイルシートを適用させたものである。
次に左の画像は、float:leftを適用させてみた。この文章部分は、画像の真横、右に置かれているはずである。
今度はどうだろうか。float:none;と設定したので、画像の横には、文章が置かれていないはずである。
注意：ネットスケープとインターネットエクスプローラーでは、class（クラス）属性を使って、画像にfloatを適用させた場合、表示が乱れてしまう。
これを解決するためには、style（スタイル）属性を使うか、id属性を使うとよい。ただし、スタイル属性は多用すると、ネットスケープにおいて表示が乱れる原因となるので、使用を控えておいた方がよい。
さらに、floatを設定する際、一緒に横幅（width）を設定しておこう。画像だとwidth属性を、文章ならばスタイルシートのwidthプロパティを設定することをおすすめする。
回り込みを解除させる。上のfloatと一緒に用いると便利。
例えば、一緒に回り込みさせたくない文章に適用させる。
?の中にfloatの制約を受けない（回り込みを解除できる）「none」、以前に登場したいかなる左フロート（float : left;）よりも、下に設置させる「left」、以前に登場したいかなる右フロート（float : right;）よりも、下に設置させる「right」、また、「left」、「right」両方をあわせもつ「both」のいずれかを入れる。 通常、このclearプロパティを適用させた文章部分は、直前のフロートの下辺が文章の上となる。
表示例：まず、clearを使わない例を示そう。
float:right;を右の画像に用いた。
この文章の右に画像が置かれているはず。段落が変わっても、同じように、回り込みがなされる。
さて、もし、上の「この文章の右に画像が」で始まる文章を画像の横に置きたくないときはどうすればいいであろうか。clearを使えばいい。以下は、「この文章の右に画像が」の文章部分に、clear:both;を適用させてみた。
表示例：
float:right;を右の画像に用いた。
この部分にclearを適用この文章の右に画像が置かれているはず。段落が変わっても、同じように、回り込みがなされる。
二つの表示例を比べていただきたい。「この文章の右に画像が」の文章が見事、回り込み解除されているはずである。もちろん、画像には右フロートが適用されているので、「clear:both」でなくとも「clear:right」で構わない。
ただし、「clear:left」は左フロート「float:left;」だけにしか通用しないので、今、設定しても無意味である。
文字や画像を重ねたとき、どれが一番上に表示させるかを設定できる。文字や画像を重ねるには、positionを使う。
?の中に数字を入れる。または、ネットスケープ（６は除く）では対応していないが、自動的に決定される「auto」を入れる。「0」を入れると、その設定された要素が一番下になる。後は順々に、階層のように「1」、「2」と上に重なっていく。
表示例：positionを使って、画像を重ねてみた。画像が多いので、別ページへ。＞＞「配置に関するサンプルページ」へ
行の高さ（行間）を設定できる。これを大きく設定しておくと、文字の上下に空白が出来て、見やすくなる。文字の大きさまでは設定できないので注意。
使うと、表示が乱れるのは覚悟した方がいいかも知れない。私は単位に、パーセント（%）のみを使うようにして、P要素だけに適用している。
?の中に長さを入れる。なお、相対単位の場合、フォントサイズ（font-size、文字の高さ）が基準となる。＞＞長さの設定についてはこちら。初期設定は「normal」。
表示例その１(line-height:120%；と同じくline-height:1.2をスタイルシートに設定)：そのレストランの名前は「ジジャール」という名前であった。新品同様の看板には、「ジジャール」という名前が青と緑色で記されてある。「ジジャール」は朝早くから営業していた。
表示例その２（line-height: 3pc;）：昼ともなると、とたんに客がドット押し寄せてくるので、店員は暇のないほど、その対応に追われていた。客には家族連れが多い。
注意1：この設定を変えるであれば、上の文字の大きさ（font-size）にも気を払わねばならない。さらに、気を付けるべきは、上の行と、下の行との文字が重ならないようにすることである。相対単位ならば、100%以下の数値に設定するべきではない。失敗例を下に書いておいた。
失敗例：line-height:0.6と設定すると、上の行の文字と
下の文字の行が重なっているでしょう？
注意2：ネットスケープでは、line-heightを適用させると、画像（IMG要素）や表（TABLE要素）の位置がずれてしまう恐れがある。適用させた要素の中に、画像と表を含ませないようにするべきである。少なくとも、BODY要素に適用させるべきではない。
注意3：インターネットエクスプローラー３．０では、「1.3」、「1.3em」などの値を使うと、「1.3px」と解釈されてしまい、読めなくなってしまう。また、「normal」と指定すると、0と解釈されてしまう。
フォントの種類を設定できる。フォントとは、ゴシック体や明朝体とかなど文字の形と思ってくれればいい。
（ちなみに、私は中学校の美術の時間で習ったのだが）
インターネットエクスプローラーはともかく、ネットスケープは６を除いて充分に対応できていないようである。ゆえにこのプロパティは優先度２に入れても良いかも知れない。日本語コードセットを用いている限り、ネットスケープは適用されない。
もし、ネットスケープ使っていて、フォントの形を確かめたい方がいるのならば、「編集（上にある）＞設定＞表示＞フォント」の画面で、プロポーショナルフォントを編集すればよい。すると、ページのフォントが変わるはずである。
？の中に、好きなフォントファミリ名（たくさんあるので、どんな種類があるかは自分で探して欲しい。作者は「文字コード」を手がかりに探した。ウィンドウズだと、右下にあるIMEの文字パレットを参考にできる）を入れる。または、明朝体に似ている「serif」、ゴシック体に似ている「sans-serif」、草書体に似ている「cursive」、装飾がほどこされた「fantasy」、タイプライタで打ったかのような幅が均等の「monospace」を入れる。これら５つはあくまで、似ている文字、フォントをコンピュータが自動的に探し出してくれるだけである。
表示例：MS P明朝（このように、フォントファミリ名に空白があるときには、引用符"で名前を囲むべき）、恋文ペン字、serif、sans-serif、cursive、fantasy、monospace
また、？の中にはいくらでも入れても良い。さらにその際、フォントは優先順で表示される。下の例を参考。
使用例：{font-family:有澤行書,"MS P明朝",serif}
表示例：上のように設定した場合、まず、ブラウザは「有澤行書」で文字を表示させようとする。しかし、外国の見知らぬ文字（エジプト語とか）で書かれている場合、そのエジプト文字などで「有澤行書」の形はないから、次に、「MS P明朝」というフォントで表示させようとする。しかし、それも出来なかったとき、「serif」のフォントで表示される。
注意点：以上のように、いくらでも書いても良い。ただし、最後に、serif、sans-serif、cursive、fantasy、monospaceのいずれかを入れておいた方がよい。
しかしながら、これらを単独で用いると、インターネットエクスプローラー４．０辺りや、ネットスケープでは文字化けを引き起こす恐れがある。
横の位置を設定できるtext-alignとは違って、縦の位置を設定できる。上付文字とか下付文字が設定できる（ちなみに、これとは別に「position:relative;」を使っても出来る）。適用できるのはインライン要素のみ（詳細は下の「注意」へ。
これを使うと、4の2乗を表示できる。（42）。以前はsup,sub要素を使っていた。＞＞「ｈｔｍｌ言語学習辞典」のsub要素へ
ネットスケープはIMG要素にしか適用されない。
「baseline」、「sub」、「super」は、インターネットエクスプローラー４．０以降で対応。「top」、「text-top」、「middle」、「bottom」、「text-bottom」はインターネットエクスプローラー5.5で対応。ネットスケープ6は全て対応している。
?の中に長さか、「baseline」、「sub」、「super」、「top」、「text-top」、「middle」、「bottom」、「text-bottom」のいずれかを入れる。
表示例：「baseline」、「sub」、「super」、「top」、「text-top」、「middle」、「bottom」、「text-bottom」、「30%」、「1cm」。
注意：インターネットエクスプローラーであっても、ネットスケープであっても、文章に適用すると、無視される傾向にある。画像だと大丈夫らしいが。よって、今のところ、sup要素の代わりには使えない。
(辞典の索引＞優先度１＞１の例外＞優先度２＞優先度３＞優先度４＞優先度５)
