辞典の索引＞優先度１＞１の例外＞優先度２＞優先度３＞優先度４＞優先度５
この技は、インターネットエクスプローラー4.0と、オペラ6以降で対応していますが、ネットスケープはバージョン６を除いて対応していません。
「:hover」を付けてスタイルシートに設定すると、マウスに触れたリンク文字の形や色が変えられる。
表示例：辞典の最初に戻る
クリックしたときに、一瞬、指定した色、形に変わる。
表示例：辞典の最初に戻る
別のスタイルシートの設定を取り込みたいときに使う。""の中にスタイルシートのファイル名を書く。
使用例：スタイルシートの一番始めに、「@import url("stylesheet.css")」と書く。
注意：ZSPC（＞＞参考にした文章）によれば、初期のネットスケープでは、強制終了やフリーズのような最悪な状態を引き起こすことがあるらしいので、使うには抵抗がある。
ある装置を使って、ページが表現されたとき、適用されるスタイルシートを設定する。{}の中に、適用させたいスタイルシートを入れる。装置の指定は、{}の前に装置の名前を書く。
使用例：印刷装置（プリンタ）で紙に印刷するときだけ、文字を赤色にしたいときには、
@media print{ body{color:red;} }
ネットのページはテレビ、液晶画面で表示されるだけではなく、あるときは、紙に印刷されたり、あるときは、音声で読まれる。このように、いろんな装置によって、すなわち、様々なメディアタイプで表現される可能性がある。
この可能性をちゃんと考えるべきだろう。
フォント（文字）に関するスタイルシートを設定する。フォントデータの指定などを行う。
使用例：@font-face {font-family:有澤楷書,serif; src: url("http://site/font/このサイトは実際にはありません。")}
'font-family'の他にも、 'font-style', 'font-variant', 'font-weight', 'font-stretch' や'font-size'を指定することが出来る。
明朝体や、ゴシック体など文字の形を設定するには、あらかじめそれに関するデータがコンピュータに入っていなければならない。このデータがないと、文字はちゃんと表示されない。よって、font-familyでフォントを指定するときは、フォントデータが相手のパソコンに入っているかどうか注意しなければならない。
もし、独自のフォントデータを使いたいのであれば、上のように、@font-faceを使って、データのダウンロード先を書いておくべし。
ここでは、そのデータを「フォントデータ」と呼んでいるが、ちゃんとした名称があるのかも知れない。とにかく、このデータはインターネットのいたる所に置いてあり、自由にダウンロードできる。
ただし、普通、コンピュータには前もってフォントデータが入っている。機会があれば、IMEの文字パレットで探してみると良い。ウインドウズだと、右下にある文字機能を設定している所をクリックしてみよう。
カーソル（マウスに沿って動く矢印）の形を変えることができる。
インターネットエクスプローラー4.0以降で対応。ネットスケープはバージョン６を除いて対応せず。
?の中に、カーソルの形を状況に応じて決められる「auto」、＋のような十字架にする「crosshair」、矢印である場合が多いのだが、通常の形にする「default」、対象が動かせることを知らせる「move」、辺が動かせることを知らせる「e-resize」、「ne-resize」、「nw-resize」、「n-resize」、「se-resize」、「sw-resize」、「s-resize」、「w-resize」、Iの記号のような文章が選択できることを示す「text」、時計や砂時計のように、使用者に待機するように示す「wait」、疑問符（?）のような、お助けを意味する「help」のいずれか一つを入れる。
リンクを示す「pointer」は、ネットスケープ６を除いてはまだどのブラウザでも対応していない。
表示例：各々の文字の上に、マウスのカーソルをのせてみてください。「crosshair」、「default」、「move」、「e-resize」、「ne-resize」、「nw-resize」、「n-resize」、「se-resize」、「sw-resize」、「s-resize」、「w-resize」、「text」、「wait」、「help」、「pointer」
注意：確認できている問題として、MAP要素上では作動しない。
アルファベット文字を大文字にしたり、小文字にしたりできる。インターネットエクスプローラーとオペラはうまく表示できるが、ネットスケープ日本語版では作動しないようだ。（英語版はうまく作動するらしい）
?の中に、各単語の１文字目を大文字化する「capitalize」、各単語の全文字を大文字化する「uppercase」、同様に小文字化する「lowercase」、指定しない「none」のいずれかを入れる。
表示例：「capitalize」、「uppercase」、「lowercase」、「none」。
やや小さい大文字を作る。アルファベットの小文字は自動的に大文字となる。
小文字を大文字にさせたいだけならば、text-transformが使える。
インターネットエクスプローラー４．０とオペラ6以降で対応。ネットスケープは６を除いて非対応。
?の中に「normal」、「small-caps」を入れる。
表示例：「normal」、「small-caps」。
普通の大文字Sの大きさと、small-capsを適用させたSの大きさを見比べると、small-capsの方が小さいことが分かる。
空白、タブ、改行の扱いを設定できる。
PRE要素（整形テキスト）や、NOWRAP属性（改行禁止）と同じ効果が得られる。
ネットスケープ４．０とオペラ6以降で対応。インターネットエクスプローラーは非対応。ただし、マックのインターネットエクスプローラー５．０は対応しているようだ。
?の中に、連続する空白などを一つにまとめ、ブラウザの端がきたら自動に改行する「normal」、PRE要素のように、空白はそのままでBR要素を使わずに改行を指定できる「pre」、逆に、BR要素を使わない限り、絶対に改行されず、連続する空白を一つにまとめる「nowrap」のいずれかを入れる。
使用例：HTML文書に以下のように書いた。<p id="wsn">表示例：normalを適用した場合。
端にきたならば、 自動的に改行されているはずです。
どうでしょうか。
なお、改行を自分で指定したいときは、<a href="simple_jiten2.htm#br">BR要素</a>を使います。
たとえば、こんな<br>風に。</p>
<p id="wspre">表示例：preを適用した場合。
普通に、改行 できるでしょう？
ブラウザの端にきても、改行されないので、
見えない部分が登場します。</p>
<p id="wsnowrap">表示例：nowrapを適用した場合。
改行しても、BR要素 を使わない限り、無視されます。
これも見えない部分が登場します。</p>
表示例：normalを適用した場合。
端にきたならば、 自動的に改行されているはずです。
どうでしょうか。
なお、改行を自分で指定したいときは、BR要素を使います。たとえば、こんな
風に。
表示例：preを適用した場合。 普通に、改行 できるでしょう？ ブラウザの端にきても、改行されないので、 見えない部分が登場します。
表示例：nowrapを適用した場合。 改行しても、BR要素 を使わない限り、無視されます。 これも見えない部分が登場します。
文字の間隔を設定できる。
インターネットエクスプローラー４．０とオペラ6以降で対応。ネットスケープはバージョン６を除いて非対応。
?の中に「normal」か、あるいは長さ（＞＞長さの単位についてはこちら）を入れる。
文字の間隔は前もって定められているのが普通である。「normal」では、その基準となる長さが適用される。このスタイルシートで長さを設定しておくと、例えば、「letter-spacing:1pc;」とすると、「normal」すなわち、基準に1pc足すことになる。
表示例：「normal」だとこうなる、「10pc」だとこうなる、「1cm」だとこうなる。
表示、非表示を設定できる。いろいろなものを見えないよう、隠すことが出来る。通常は、ジャバスクリプトと連動させて使う。
インターネットエクスプローラー４．０とオペラ6以降で対応している。ネットスケープは対応しているのかどうか不明。不安定。
?の中に見えるようにする「visible」、隠してしまう「hidden」、表の行や列を隠してしまう「collapse」のいずれかを入れる。 「collapse」は対応ブラウザがない。
visible、これは見ることが出来ます。
背景画像を固定できる。つまり、画面を下にずらそうと上にずらそうと、ずっと見ることが出来る。
インターネットエクスプローラー４．０とオペラ6以降で対応。ネットスケープは未対応。ネットスケープ6は不安定（再読み込みで解決する）。
?の中に、背景画像を固定しない（通常設定の）「scroll」、固定できる「fixed」のいずれかを入れる。
表示例：インターネットエクスプローラーをお使いの方は、すでにお気づきかも知れないが、BODY要素に「background-image: url(sample.gif);background-attachment:fixed;background-repeat:no-repeat;」を適用させており、画面左上に常に、画像がついて回っているはずである。
注意：このスタイルシートは性質上、「background-repeat」と、「background-position」を一緒に設定して置いた方がよいかも知れない。
背景画像の位置を設定できる。
インターネットエクスプローラー４．０とオペラ6以降で対応。ネットスケープは未対応。また、ネットスケープ6は不安定（再読み込みで解決する）。
?の中に長さを入れる。普通、二つの長さを、空白を挟んで入れる。たとえば、「1cm 2cm」は背景画像の位置（画像左端の点）が、左から1cm、上から2cmの所にあることを指す。パーセント（%）には注意が必要なので、後で詳しく語る。
また、「top」、「center」、「bottom」 の３つと「left」、「center」、「right」の３つを組み合わせて使う。（下の表示例を参考）
パーセントには注意を要する。まずは、下の例を見て欲しい。背景画像に、「background-position: 50% 50%」を適用させた例である。
上の図を解説しよう。まず、黒い太線はブラウザの端である。画面中心の赤い点は、ブラウザの端にとって、左から50％、上から50％の位置に存在する。
と同時に、背景画像の左端から50％、上の端から50％の幅をとっているのである。
つまり、ここで言う「background-position: 50% 50%」とは、ブラウザ全体からみて、左から50％、上から50％になるような点と、背景画像全体からみて、左から50％、上から50％になるような点を重ね合わせるように、画像を配置しろと言う意味なのである。
もう一例。こんどは、「background-position: 40% 80%」で適用させてみると、下の図のようになるはずである。
だとすると、「0% 0%」は背景画像がブラウザの、あるいは適用された範囲の左上にぴったりくっつくはずである。逆に、「100% 100%」は右下にぴったりとくっつくはずである。以下の表示例を参考に。
表示例（background-repeat:no-repeatを一緒に設定しておいた。よって、ネットスケープでは、乱れているはずである。body要素に適用すると、多分大丈夫なはず。）
「top left」かもしくは、「left top」か、「0% 0%」
例文：確かにその料理の店はさびれていました。お皿は毎日洗っておらず、ほこりがたまっていました。いすにもテーブルに積っていました。
「top」かもしくは、「top center」か、「center top」か、「50% 0%」。
決して料理がまずいというわけではなかったのですけれども、店員の態度も良かったのですけれども、どういうわけだか、さっぱり人気が出ないのです。
「center」かもしくは、「center center」か、「50% 50%」。
客足が遠のくばかりなので、困った店長は頭をひねりました。新サービスでも出そうかしらん。しかし、店長の頭には、グッドアイディアとか、そんな起死回生のサービスなどあるわけがないのでした。
「right top」かもしくは、「top right」か、「100% 0%」。
時には、新しい料理のメニューを出します。ですが、やっぱり客は来ないのです。店長は店を見渡しました。ところどころ、ちりやほこりがたまっています。そこで、掃除をしました。
「left」かもしくは、「left center」か、「center left」か、「0% 50%」。
店内は見違えるほどにきれいになりました。けれど、そんなことをしても、ちっとも客は入ってきません。とうとう店長は、ねをあげしまいました。どうするわけにもいかず、近所でも評判の占い師に店を占ってもらうことにしました。
「right」かもしくは、「right center」か、「center right」か、「100% 50%」。
占い師に頼んで、店にきてもらうことになりました。占い師は、店を見たとたん、大笑いをしてしまいました。なんだこれは？店には、エアコンが付いていませんでした。ですから、信じられないほど、暑かったのです。
「bottom left」かもしくは、「left bottom」か、「0% 100%」。
腹の底から笑った占い師は、やがて、笑いをどうにか喉の奥に納めると、こう言いました。「この店には、とんでもない邪気が潜んでおる。それが、客を来させぬのじゃ。」店長は叫びました。「邪気ですって？」
「bottom」かもしくは、「bottom center」か、「center bottom」か、「50% 100%」。
「そうじゃ、まがまがしい邪気じゃ。さっそくお払いせねば。」「ひや、大変だ。そうなら、すぐに、お払いの準備を」と店長。必死になって、笑いをこらえながら、「邪気を外に払うためには、新鮮で涼しい風が必要。お払いには、風を起すものがないといかん」
「bottom right」か、「right bottom」、「100% 100%」。
そういわれて店長が持ってきたのは、店の奥にあったウチワ。危うく、占い師は笑い死にしそうでした。「それでは、すずしくは、いや、邪気を追い払うことはできんぞ。」占いを商売に何年もやってきたのですけれども、これほど、愚かな店長は見たことがありません。
要素の表示形式を決める。ブロックや、インラインを形成させることができる。ブロック要素とインライン要素とは何かを、私なりに説明したページを次に示しておく。
＞＞「HTML言語：要素について」
ジャバスクリプトなどと連携して、使う。
インターネットエクスプローラー４．０以降で一部対応。ネットスケープも一部対応。詳しくは下に。オペラ6はほとんど対応しているようだ。
?の中に全く何も形成させない「none」、要素をインラインにする「inline」、要素をブロックにする「block」、要素をリストや項目にする「list-item」、行グループを生成し、thead要素と同じ振る舞いをする「table-header-group」、tfoot要素と同じ振る舞いをする「table-footer-group」のいずれかを入れる。ちなみに初期設定は「inline」のはずなのだが。
「table」、「inline-table」、「table-row-group」、「table-row」、「table-column-group」、「table-column」、「table-cell」、「table-caption」、「marker」、「run-in」、「compact」は優先度4で解説する。
使用例： <p id="disnone">表示例：「none」。</p> <p>上は[none]を設定したため、消滅してしまった。 インターネットエクスプローラー４．０以降、 ネットスケープ４．０以降で対応</p> <p id="disblock">表示例：「block」 インターネットエクスプローラー５．０以降で対応。 ネットスケープ４．０以降で対応。</p> <p id="disinline">表示例：「inline」 インターネットエクスプローラー５．０以降で対応。 ネットスケープは非対応。</p> <p id="dislist">表示例：「list-item」 インターネットエクスプローラーは非対応。 ネットスケープ４．０以降で対応。</p> <p id="disthead">表示例：「table-header-group」</p> <p id="distfoot">表示例：「table-footer-group」 上とあわせて、インターネットエクスプローラー５．０以降で対応。 ネットスケープは非対応。</p>
表示例：「none」。
上は[none]を設定したため、消滅してしまった。インターネットエクスプローラー４．０以降、ネットスケープ４．０以降で対応
表示例：「block」インターネットエクスプローラー５．０以降で対応。ネットスケープ４．０以降で対応。
表示例：「inline」インターネットエクスプローラー５．０以降で対応。ネットスケープは非対応。
表示例：「list-item」インターネットエクスプローラーは非対応。ネットスケープ４．０以降で対応。
表示例：「table-header-group」
表示例：「table-footer-group」上とあわせて、インターネットエクスプローラー５．０以降で対応。ネットスケープは非対応。
注意：「visibility:hidden」と「display:none」はちがう。前者は透明になるだけで、存在が消されたわけではないが、後者はあたかも存在が消滅したかのような扱いを受ける。従って、後者では、消えた跡の空白は出来ない。
印刷するときに、前を改ページをするかどうか設定できる。これを適用した要素は、次のページに表示される。
インターネットエクスプローラー４．０とオペラ6以降で対応。ネットスケープは６を含めて未対応。
?の中に、強制的に改ページさせる「always」を入れる。
またはどのブラウザも対応していないが、改ページを禁じる「avoid」、次のページが右手になるよう改ページをする「right」、同様に、左手になる「left」を入れる。
確認には、実際に印刷してみるのがよいだろう。インターネットエクスプローラー５．５ならば、「印刷プレビュー」機能を使うとよい。
注意：適用されない要素もある。その中でも特に注意が必要なのは、hr要素である。インターネットエクスプローラー５．０以前では適用されない。
印刷するときに、改ページをするかどうか設定できる。これを適用した要素は、ページの最後に表示される。
インターネットエクスプローラー４．０とオペラ6以降で対応。ネットスケープは６を含めて未対応。
?の中にページを改ページさせる「always」を入れる。
またはどのブラウザも対応していないが、改ページを禁じる「avoid」、次のページが右手になるよう改ページをする「right」、同様に、左手になる「left」を入れる。
ol要素など、項目リストの頭に、画像を挿入できる。
インターネットエクスプローラー４．０とオペラ6以降で対応。ネットスケープは６を除いて非対応。
?の中に何も設定しない「none」か、画像のURL(url()の中に入れる）のいずれかを入れる。
表示例：ol要素で設定。
ol要素など、項目リストの位置を設定できる。
インターネットエクスプローラー４．０とオペラ6以降で対応。ネットスケープは６を除いて非対応。
?の中に、マーカーを外に出す（これが通常設定）「outside」、マーカーを中に入れる「inside」のいずれかを入れる。
注意：インターネットエクスプローラー４．０では、「inside」と設定しても、「outside」と同じようになるらしい。
項目リストに関するプロパティ、「list-style-type」、「list-style-image」と、「list-style-position」をまとめて設定できる。
「list-style-image」と、「list-style-position」に関しては、ネットスケープ（６は除く）は対応していない。
?の中に「list-style-type」、「list-style-image」と、「list-style-position」の値を、各自、入れる。省略しても構わない。スペース（空白）で区切る。
表示例：list-style:upper-roman outside
高さの幅を決めることが出来る。
インターネットエクスプローラー4.0とオペラ6以降で対応。マッキントッシュ版インターネットエクスプローラーも4.5以降で対応。ネットスケープ（6を除く）は未対応。
?の中に、長さを入れる（長さの単位についてはこちら）。
注意：widthと同じような現象が見られる。上の具体例では、0.5文字の高さになるはずなのに、IEでは、そうならない。widthの項を参照のこと。
(辞典の索引＞優先度１＞１の例外＞優先度２＞優先度３＞優先度４＞優先度５)
