4 スタイルとスタイルシート

4.1 スタイルについて、はじめに

スタイルの使用はワードプロセッシングとデスクトップパブリッシングで既に十分確立されています。ウェブサイトデザインでは、それは、さらに重要な役割を引き受けて、プレゼンテーションのほとんどあらゆる外観を制御することができます。

HTML文書のスタイルはW3Cスタイル仕様の要求に従うべきものです。これらの詳細はhttp://www.w3.org/TR/CSS21/ （訳注：リンクは変更されたと思われるため、反映させておきます。）で入手できる「カスケーディングスタイルシート、レベル2 CSS2仕様」にあります。

全ての緒言と多くの有用な引例がhttp://en.wikipedia.org/wiki/Cascading_Style_Sheetsで見つかるでしょう。

4.1.1 スタイルの能力

スタイルは、ページの特定の要素が、印刷でも何でもよいが、スクリーンにどのように現れるかを指定します。このガイドはそれ自体をスクリーン上の問題に制限します。「要素」に従って、ページ構造の部品を、典型的には見出しや段落を意味しますが、また多くの他のものにも拡張して、テーブルや番号なし・番号付きリストなども含んでいます。事実、同じスタイルがいくつかに適用されるかもしれませんが、ほとんどのHTML「タグ」が指定されているでしょう。
スタイルは通常、フォント字体、サイズ、変形、文字色、背景色といったプレゼンテーションの外観を定義します。あるいは要素を右、中央、左に揃えることや、他の要素から空間をとる（訳注：マージン等？）、枠線で囲むかどうか、またその線のタイプや色を定義します。ページに対する絶対位置を要素に与えるでしょう(要素を重ねることもできます)。段落、テーブル、画像などの要素が箱やブロックの中にあるかどうか、またはこれらの箱のサイズを指定するでしょう。

注意： 「表示 - ブロックの輪郭」を選択することにより、ブロックの輪郭を見ることができます。

4.1.2 クラス

要素のスタイルを指定することができるように、選択的にいくつかの要素だけにスタイルを定義して、適用することが可能です。これは「クラス」を通して行います – 「クラス」はまさにあなたが選んだように、選んだときに適用できるスタイルです。
「クラス」は「タグ」に適用されます(マーカーは要素に付随します)。クラスが適用されている要素はクラスによって定義された書式で現れます。適用されたクラスのない他の同様の要素は標準の書式で現れます。すなわち、ブラウザにより指定された標準のスタイル、あるいは対応する要素のためにユーザーが定義したスタイルとなります。

4.1.3 スタイルを使う

4.1.3.1 インラインスタイル

ページの中では、スタイルは3つの方法で使用されるでしょう。あなたが望むように、これらの道方法を混合し、調和させることができます。初めに、最も簡単でありのままであるのは、その場その時で限りのスタイルを定義することです。そういったスタイルは（コードを見れば「style = …」という構造を使って）適用されるタグを使って（ソース編集モードで）コードでリスト化されています。

心配しなくてもよいです。KompoZerはあなたから全てを隠しています。

同じスタイルがある他の項目があれば、このコードを繰り返さなければなりません。これはページ（訳注：ページのファイルサイズ／コードの量）をふくらませます。これは「インラインスタイル」として知られています。あなたの知らないうちにKompoZerは時々それを使用するでしょうが、KompoZerユーザの大部分はこの方法について心配する必要はありません。

4.1.3.2 内部スタイル

スタイルを使用する2番目の方法は、ページのヘッダ領域の中にスタイルの定義のリストを埋め込むことです。 (これらの定義は「スタイル規則」あるいは単に「規則」として言及されます。)

これらの規則は2種類であるでしょう。最初の種類は特定のタイプ(例えば、p、h1、table)のすべての要素に適用されます。2番目は上で議論したようなクラスです。

注意： クラス「mynicepara」が適用されたとき、HTMLソースコードを見ると、あなたは<p class="mynicepara">のような構造を見るでしょう。クラスが適用されてなければ対応するコードは<p>です。クラスに関するスタイルシートの構造を見ると、（訳注：ヘッダ領域などの<style>タグで囲まれた領域に）、例えば「.mynicepara」などとクラス名の前にドット(終止符)がついているのを見るでしょう。そのうえ、一般に適用されたスタイルは（訳注：pがまさにそのクラスを適用されているので）「p」のように見えるでしょう。もちろん一般に適用されたスタイルは、それらが適用しますが、クラスはあなたが好きなように与えるどんな名前も持つことはできるけれども、適用された要素の名前を運ばなければなりません。（訳注：classの名前を覚えておいて各所で使う、という意味だろう。）　サイトを維持管理するのを助けるために、結果として見える外観ではなく、その機能について説明する名前をそれに与えるのがよいです。

4.1.3.3 外部スタイル – リンクされたスタイルシート

最初の2つの方法は有効で役に立ちますが、3番目の方法は経済的であるので、特に好ましい方法であり、多くのページのために同じスタイルを再利用して、完全なウェブサイトを通じて外観の一貫性を獲得するのを手伝います。方法は1ページまたは数ページに「リンクした」外部のスタイルシートを使用します(各ページがそれ自体のためにリンク情報を含まなければなりませんが)。

外部のスタイルシートは、上で参照した内部（訳注：内部スタイルシート）のリストに含まれているような規則の同じリストを含んでいます。 (それは実際には、Windows Notepadのようなテキストエディタを使用してあなたが構成できるような、簡単なテキスト文書です。) 通常、そのファイルはリンクされているページと同じフォルダー(ディレクトリ)に位置していて(ほかの場所にあることもありますが)、拡張子「css」を持ちます。

ページがこのスタイルシートを使用することをどのように知るのでしょうか? 　KompoZerがあなたのページのヘッダ領域に挿入する、あるコードの行がこれを理解します。コードは<link rel="stylesheet" type="text/css" href="mystylesheet.css>といった具合に見えます。

警告： これはNvu1.0がごちゃごちゃにするわずかな箇所の1つです。それは相対参照の代わりに絶対参照を挿入します。あなたのページがあなた自身のコンピュータに残っている限り正しく働くでしょうが、もしそれらを新しいフォルダーに動かすか、アップロードすると、あなたは、手動でこのコード行を編集する必要があるでしょう。Section 4.2.4.1を参照。

4.1.3.4 カスケーディングスタイルシート

あなたはこう思うかもしれません – 外部スタイルシートを使うなら、おそらく内部の規則やインラインスタイルがあると、混乱するのではないか?　これが「カスケーディング」（訳注：「滝のように落ちる」）という言葉が入るゆえんです。あなたのブラウザは、最初に何であっても標準のスタイルを使用するでしょう。もし外部のスタイルシートで適合するスタイルを見つけたら、代わりにそれを使用するでしょう。次に内部のスタイルを見るでしょう。そして、使う予定のある何かと一致したものは何であっても、それらをくつがえすでしょう。最後に、インラインスタイルに効果が出ます。

どのようにそれを使用することができますか? ひょっとしたらあなたのサイトは外部スタイルシートを使用することでスタイルを確立しているかもしれません。ひょっとしたらあなたは非常時の対処に関するページがあり、すべての段落が赤字であると決め。そのときあなたは単に「p」タグを再定義するそのページの内部規則を加え、通常のスタイルシートをページにリンクすればよいのです。テキストがすべての段落で赤字であるのを除いて、あなたのすべての通常のスタイルが適用されて、他のいずれも標準的でなくなることはないでしょう。
KompoZerでは、実際にページに複数の外部スタイルシートのリンクすることができます。 CSS仕様では１つ以上のスタイルシートによって定義された規則で起こることの中で、どのようにそれらが最優先させるかが定義されます。ただこの優先度を尊重しないブラウザもあります。結果的に、ブラウザとデザイナーの両方が混乱することがありそうです。このやり方を採用する前には、かなりの注意を払ってください。

ここで助けとなる試みとして、ページをテストしている間、KompoZerはスタイルシートを「スイッチオフ」させることができます。(後で出てきますが) CSSエディタを使って、スタイルシートを選択し「無効」ボックスをチェックしてください。

4.2 スタイルを作る

4.2.1 内部スタイル

スタイルは、CaScadeS（訳注：CSSそのものとは違う…）と呼ばれる、組み込み済みのスタイルシートエディタを使用することで作成、編集されます。 CaScadeSには、2つの操作モード「初心者モード」と「エキスパートモード」があります。エキスパートモードで開いたとき、初心者モードに切り替えるのが望みなら、(訳注：「エキスパートモード」の)チェックボックスをクリアしてください。その違いは、初心者モードでは外部スタイルシートを作成できないということです。

内部スタイルを作成したとき、KompoZerは文書の「ヘッダ領域」に、これらに関する規則を含めるでしょう。

スタイルを作り始めるには:

ツール > CSSエディタを開く。
「新しいstyle要素」、「スタイルシートの作成」をクリックします。
「新しい規則」をクリックします。
一般タブが開き、「名前付きスタイル」、「指定された種類の全要素に適用されるスタイル」、「次に指定するセレクタに該当する要素に適用されるスタイル」のオプションを提供します。

段落といった要素にスタイルを入れるには:

指定された種類の全要素に適用されるスタイルを選ぶ。
下のボックスに「p」などといった、要素タグを入力します（括弧は要りません）。
「スタイル規則の作成」をクリックします。.

左側のペインには、定義したようにそれぞれのタグとその構造が見えます。

要素をどのように見せたいかを定義するには:

左側のペインの要素タグをクリックします。一般タブに「セレクタ」（今は要素タグ）と、全てのスタイルの「宣言」（初めは空白です）を表で見られます。
順に必要に応じて、「テキスト」「背景」「枠線」といったタブを選び、正確にあなたが望む要素の見え方を指定してください。次のセクションはこのやり方のいくつかの詳細を述べます。
一般タブに戻って、あなたがセレクタに設定した全ての宣言を見てください。

私はすべてのオプションを経由せず、少しの言及しかしていません。

まず最初に、ある定まったプロパティを指定するのを強いられることはないことに気をつけてください。あなたが望むのが多かろうと少なかろうと指定できます。それはまさしくあなたが戻さなければブラウザが標準に戻すでしょう。（訳注：本来定義できないタグに対してスタイルを無理矢理適用した場合や、必須の設定が足りない場合のことを想定しているのだろう）　使用するための複雑な規則はちゃんとあり、ブラウザはいつもそのルールを守るわけではありませんが、しかしながら何が起こったとしても、たいていはあなたは幸せでしょう– そう感じなくても– それは変わります!

あなたは「Body」に宣言を設定して、全ての要素にそれを適用しようと試したくなるかもしれません。多くの場合、あなたがほかの場所で明示的に宣言を指定しないなら、それは全てに対して流れ落ちるように設定されます(これが「継承」です)。これは一般に働きますが、驚きを生むでしょう。

スタイルの名称集

スタイルはすでにあつらえられた専門用語があります。KompoZerは、コードを作者から隠しているため、ソース編集モード以外ではこれをほとんど使いません。ここに含まれる用語はこのユーザーガイドではまさに目にするでしょう。ここではいくつかの例とともに挙げています。この例はあなたのページのヘッダ領域か外部スタイルシートで見ることができるソースコードを挙げています。

単純な規則	p { font-family: Arial, sans-serif; }
2 つの宣言を含む規則	p { font-family: Arial, sans-serif; font-size: medium; }
2 つのセレクタを含む規則	h1, h2 { color: #990000; }
クラスセレクタを含む規則	.redtext { color: red; }
複雑なセレクタ*	#menu li a:link { text-decoration: none; }

キー:

規則は青い枠線の囲み

宣言は点線の枠

セレクタは橙色の枠・白い背景

プロパティは緑色の枠・白い背景

値はマゼンタ色の枠・白い背景

* このセレクタはリンクされたメニューdiv内の項目を選択します。

4.2.1.1 テキストタブ

フォントファミリ あなたは3つの指定された方法が提供されています。

未指定
規定値
独自のフォントファミリ

普通の意味で、専門用語「フォントファミリ」は「フォント」として参照されます。正しい印刷用語は「書体」です。(イギリス英語ではフォント(font)は「fount」でした（訳注：もともと泉の意）が、しかし悲しいかなアメリカ英語の単語がイギリスでも一般に使われるようになりました。)

「未指定」は全てをブラウザに任せます。

「規定値」は3つの選択のうち1つを提供するドロップダウンセレクタをもちます。各選択は、基本的に同様の特性を持っている3つの字体のセットがあります。その選択は、以下の通りです。

サンセリフ　プロポーショナルフォント
セリフ　プロポーショナルフォント
固定幅フォント

それぞれには３つのエントリーがあるでしょう。初めの２つは類似した互換フォントで、３つ目に一般的なフォント体の記述があります – ブラウザはリストにある初めのフォントを探し、もし見つからなければ２番目のフォントを探、それでも見つからないなら、最後のエントリーの一般的なタイプのフォントを使うでしょう。これで、常に適切なものが見つかるでしょう。

このオプションを使うときには下の Warningを参照してください。

「独自のフォントファミリ」は避けるべきか、または細心の注意を払って使用されるべきオプションです。提供されたリストは、ページの作者のコンピュータにインストールされたフォントからとってきたものです。訪問者のコンピュータで利用可能でないものを選ぶなら、何が使用されるかは全く制御できません。

一方、注意して使用すれば、このオプションは非常に柔軟性があります。あなたは「規定値」のセレクタからモデルを使用するあなた自身のセットを作ることができます。

フォントセットを作る

「規定値」のセットの構造に注意してください。フォント名がコンマによって区切られ、各セットが一般的なタイプで終わっている形で、リストは作られます。
一般的なタイプを次から選んでください：セリフ体、サンセリフ体、草書体、ファンタジーフォント、固定幅。
必要な一般的なタイプとに対応する好きなフォントを選択してください。
選択されたテキストタブで、「独自のフォントファミリを使用する」をチェックし、ボックスにあなたの好きなフォントをそれぞれコンマ区切りで入力し、一般的なタイプを最後に入力します。

注意 1： あなたはたぶんWindows PCシステムで利用可能な1つのフォントとMacintoshコンピュータで利用可能な同等のフォントを含むことを望むでしょう。

注意 2： あなたが望むのと同じ数のフォントを入力するかもしれません。

注意 3： 訪問者の間で、規格化のレベルがレンダリングの結果を非常に不確実にするので、「草書体」や「ファンタジーフォント」のオプションを使うのはお薦めできません。

注意 4：もし、（Times New Romanのような）スペース文字を含む名前のフォントを使うなら、名前は、例えば"Times New Roman"のように引用符で囲まねばなりません。もし、このようにし忘れても、結果としておそらくは働くでしょうが、検証の時には失敗するでしょう。

警告： 残念なことに、KompoZerではフォントを設定すること自体が、構築する際に失敗を引き起こします。固定幅フォントのオプションは問題ありませんが２つのプロポーショナルフォントのオプションはフォント名にスペースがあるフォントを使うと失敗します。作者は清書のしくじりで侮辱されるのに苦しむか、スタイルの値をソース編集モードで編集して、この問題を乗り越えるしかありません。

フォントサイズ. 異なったタイプのオプションを提供する3つのセクションがあります。最初のブロックはさまざまな単位を提供する集まりです。ディスプレイの画面がサイズと解像度が変化するので、また、人々の目と好みが異なるので、ブラウザは表示オプションを提供し、ユーザがテキストサイズを変更ことができます。この機能が無効なら、ユーザーが望むようにページを見ることができないかもしれません。この最初のグループ(例えば、ピクセル、ポイント、センチメートル、インチ、ミリメートル、パイカ)のオプションのいくつかは、印刷メディアに適用されるか、固定サイズの単位のものです。これらはブラウザのズーム機能や予測できないサイズの結果を無効にするかもしれません。あなたが、名前を付けたスタイルの(「最小」から始まる)最後のセットが最も満足できることがたぶんわかるでしょう。これは%やemスケールを使用するのにとって代わります。サイズを選択、変更すると、直接あなたのページの結果を見ることができます。

絶対サイズと相対サイズ

Divisionの中の文字
指定していないサイズは継承される。

テーブル内の文字
サイズは指定されていない。
divから継承されている。

このセルではサイズが
120%に設定されている。

2 つ目のテーブル内の文字

このセルではサイズが
120%に設定されている。

サイズは指定されていない。
tableから継承されている。

body要素の直下に存在する文字についてフォントサイズを設定するとき、 1em、100% 、「通常」は一般的に同一の結果をもたらします。フォントサイズは継承されるので、それ自身はbodyにも位置している要素内の文字は特に別個で指定されていない場合には同じサイズを使うでしょう。しかしながらbodyの直下にあるわけではない要素は、テーブルやdivisionのような他の要素の中に位置しているでしょう。テーブルやdivisionのようにフォントサイズがそれ自体で設定されるところでは、これはテーブルやdivisionのテキストは継承されるでしょう。例えば、もし、div要素がフォントサイズを150%に設定されていて、その中の段落でフォントサイズが1emと設定されていれば、文字はdivからの縮尺の継承によって、実際には1.5emにレンダリングされます。

注意： divisionは<div>要素を使って作成されます。Section 4.5 参照。

これがどのように働くかを示した例が隣の図にあります。文字はテーブルセルに位置しており、そのテーブルはさらにdivision内に位置しています。テーブルのうち１つと個々のテーブルのセルのうち１つがフォントサイズを指定されていますが、他では指定されていません。

全ての大きさがこのようにして縮尺されるわけではありません。サイズはパーセンテージか、emとex単位では縮尺されます。相対サイズとして参照されるからです。xx-smallを使って指定されたサイズは、システムは縮尺をおこないません。絶対サイズとして最小するからです。

注意： 全てのサイズは、ピクセル単位で指定されたサイズを除き、ブラウザのテキストサイズオプションを使えばズームできます。この場合はブラウザが要求に応じて変更します。

文字色(前景色). ボックスの中に色を入力するか、または右のボタンをクリックしてください。ボタンをクリックしたら、「文字色」の窓は開き、さらに3つのオプションがあります。(アメリカでアイスクリームを買うか、またはイギリスで電話をかけているようなものです。（訳注：？？？？？？）)　色調・彩度・明度(HSB)、赤・緑・青(RGB) の値(0から255の範囲)を指定することができます。別の方法として、提供された色の70色の箱の1つをクリックします。

これらはいわゆる「ウェブセーフカラー」で、性能の低いディスプレイで働くことができるでしょう。実際に216のウェブセーフカラーの最大範囲を提供しませんが、どのような場合でも、通常、現代のディスプレイでは少なくとも24ビット色で動くため、この制限はほとんど正当化されません。

次のオプションは、虹のような領域をクリックすることです。あなたがどれを選んでも、選択された色はすぐに四角に現れます。RGBや HSB値を使用することで微調整ができるでしょう。色コード（16進）とあるボックスが16進数として色を表示しています。これは実際に「文字色」ウィンドウを開くことなく、直接できるものです – このウィンドウを閉じると、ボタンに表示された色のサンプルに従った(「#」が前についた)16進数の値がボックスに見えるでしょう。

名前の付いている色. この記述はスキップするのも自由ですが、他に1つ方法があります! 70色のうち一つをクリックすると、時々、色名と表示されたボックスに色の名前が現れるのに気づいたかもしれません(黒か赤で試してチェックしてみてください)。CSS仕様では17色が認識されており、これらの名前は直接入力できます。すなわち、事実、「文字色」ウィンドウに入ることなく、セレクタボックスに入力できます。有効な名前は「aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, and yellow」です。

他のテキストオプション

これらは色のオプションの下に現れていますが、ほとんど一目瞭然でしょう。

4.2.1.2 背景タブ

色

これは文字色（前景色）と同様の方法で選択します。

画像

あなたは背景として画像ファイルを指定することができます。これはあらゆるものの後ろに現れるでしょう。「タイリング」の下で「しない」を選択したなら、あなたはボタンの下に置けるファイルの写しを手に入れます。あなたが「並べる」（訳注：水平に、垂直に、両方向に、のいずれか）を選択するなら、イメージは選択された方向に繰り返されます。

警告： 不透明度のオプションは、CSS2仕様書には含まれていないプロパティを使いますので、多くのブラウザでは、実行されないか正しく実行されないでしょう。

4.2.1.3 枠線

項目は枠線で囲むことができ、利用可能なオプションはかなりの柔軟性を提供します。種類、幅、色は（訳注：上下左右の）それぞれの側で独立に設定できるでしょう。

注意：枠線が見えるためには、幅と種類の両方を指定しなければなりません。

4.2.1.4 ボックス

ほとんどの要素が位置しているブロックの構造は既に言及しました(Section 3.4.1)。ボックスオプションはこれらのブロックの中での表示を制御します。
それらの箱のために必要とする寸法を入力するには：最初に、数字を入力してください、そして、ドロップダウンボックスから、単位を選択してください。

余白(margin) 枠線のあるあらゆる場所や周囲もしくは隣接したボックスといった、要素のボックスの間の距離を制御します。

注意： 垂直方向の余白は「崩れます」。見出しの下の余白を20pxに設定し、次の段落のページの上の余白を10pxに設定しているなら、それらの離れている間隔は合計(30px)ではなく、より大きいもの(20px)によって制御されます。

Diagram showing content, padding, borders and margin

枠内余白(padding) ボックスの内容やその枠線との距離を制御します。

幅と高さ特定の幅をボックスに割り当てます。この幅は絶対値か、ボックスの割合のいずれかです。（訳注：高さの言及はないが、同じように機能するはず？）

浮動表示 ブロックがまさに画像のように扱われて、それらをページ(または入っているブロックの端)の右か左側に寄せるのを許容します。したがって、他の要素はそれらを回り込むように表示されるでしょう。（訳注：テキストの回り込みがあるところが単なる寄せる操作と違う）

配置、オフセット と 優先順位(z-index) はレイヤーの使用に関連したパラメータです。これらはSection 3.10.6でとりあげています。

4.2.2 複数の要素に対するスタイル

そのときどきに1つ1つの要素にスタイルを設定する代わりに、同時に数個を指定するのは、より簡単であるでしょう。おそらくあなたのすべての見出しが1つのフォント(例えば、セリフ)で、他の全てが(例えばサンセリフ)であるとしましょう。あなたがh1、h2、h3、h4、h5、およびh6にセリフフォントを１つの動作で指定するには、「新しい規則」を選択した後、「指定された種類の全要素に適用するスタイル（種類を下に入力）」または「次に指定するセレクタに該当する要素に適用するスタイル」を選択し、それらをコンマで区切って並べます。（訳注：並べてから、単一の要素にやったような操作と同様に、フォントなどを指定します）　その後で、例えばそのサイズなど、それぞれの見出しを個々に別の規則で指定することができます。

4.2.3 名前付きクラス

私はこれまで、特定のタイプのすべての要素にスタイルを適用することによって始めるのを提案してきました。そのようなスタイル定義は自動的にどこでも、その要素がページに見られるところに適用されるでしょう。これは文書の中でかなりの一貫性をもたらすでしょうが、少々鈍いかもしれません!　あなた自身のスタイルも定義し、あなたはそれを選択して適用できます。これらのスタイルは「クラス」として知られています。

クラスを作る

CSSエディタを開き、Section 4.2.1のように、必要ならスタイルシートを作ってください。
それを選択してスタイルシートをクリックします。(もし、２つ以上のスタイルシートがあれば、クラスを作りたいと思う一つをクリックします。)
クラスの名前を決定します。
注意： クラスの名前には、文字、数字、アンダースコア（訳注："_"）を含むことが可能ですが、スペースはできません。また、数字で始めることはできません。また、大文字小文字の区別はしません。
新しい規則をクリックし、「名前付きスタイル」のままにして、ボックスにあなたの選んだクラスの名前を入力します。
「スタイル規則の作成」をクリックします。あなたのスタイルの名前が、左側のペインに見えるでしょう（訳注：ツリー構造の中に隠れていることもある）。その名前の前にドット(終止符)がついていることに注意してください。

そして、Section 4.2.1 のように「どのように要素を見せたいか定義するために」進めてください。(あなたに対応する要素を使用したページがあったとすれば)、あなたのスタイルの効果がすぐあなたのページに現れるのを見ることができるでしょう。今、もちろん、あなたがなにも持っていないのなら、最初に私たちはクラスを要素に適用する方法を学ばなければなりません。

まず最初に、新しいクラスが適用されているなら、あなたに画面上でそれを認識させるための、そのクラスの詳細に入ります。例えば、枠線タブを使って、実線、2ピクセル幅、赤色としてスタイル化した枠線を提供できます。

まさに要素と同じように同時にいくつかのクラスにスタイルを設定することができます。Section 4.2.2のように手順を進めてください。しかしこの場合、ドットが全てに先行してはじめにつけなければなりません。例えば、.style1, .style2などと。（KompoZerは自動的に最初にドットを追加します。）

4.2.3.1 クラスを適用する

Applying styles KompoZer はクラスを適用するのに２つの方法があります。１つ目の方法は簡単で、時々、この方法を使用するために項目を選択するのが難しいとき、２つ目の方法が望ましいです。

クラスを適用する - 方法 1

必要なら、CSSエディタを閉じます。
クラスが適用するべき項目を選択してください。見出しか段落に対しては、テキストを単にクリックし、そして、文中のテキスト（範囲, span）に適用するなら、（訳注：選択して）テキストを反転色にしてください。
書式ツールバーでクラスセレクタボックスを使用し(図を参照)、ドロップダウンをクリックし、必要であるクラスを選択してください。
クラスを適用した結果がどの編集モードでも見ることができるでしょう。

注意： KompoZerはブラウザではありませんが、それはブラウザ表示を非常によく再現します。しかしながら、リンクに適用されたスタイルは現在のところ、正しくレンダリングされません。

クラスを適用する - 方法 2

注意： このモードは、span要素を作成して文中のテキストにスタイル付けをするのに使うことはできませんが、すでにspanが存在するとそのようなセクションにはスタイル付けをすることができます。

必要ならCSSエディタを閉じます。
「タグ編集モード」でクラスを設定したい要素の黄色のマーカーをクリックします。（もし要素が選択できなければ、画面で縁取りや強調によって示すように、コントロールキーを押しながら選択します）
あるいは、通常編集モードやプレビューモードで、スタイル化したいブロックをクリックし、ステータスバーに並んでいるうちで最も右側の要素をクリックします。
現在、含まれているブロックと対応する要素の両方がステータスバー上で強調されているでしょう (上の図を参照)。
ステータスバーの強調された要素を右クリックし、「class」を選択します。すべてのクラスのリストがポップアップされるのを見るでしょう(これは内部スタイルシート、リンクされたスタイルシートのクラスを含んでいます。)。既に要素に適用されたどんなクラスも現れ、それにはチェック(✔)が入っており、リストのいちばん上の仕切線の上に現れます。他の利用可能なクラスが仕切線の下にあります。
新しいクラスを追加するには、そのクラスをクリックします。クラスを解除するには仕切線の上のクラスをクリックします。

注意： 要素は、実際に数個のクラスを適用することができます。これを行うなら、あなたは、クラスの性質が互いに矛盾しないのを確認するべきです。ほとんどの人々が、たぶん一度に1つのクラスだけを適用するのを好むでしょう。あなたは、間違って多くを適用しないようにチェックする必要があるでしょう。

4.2.3.2 クラスを削除する

同様の手順が、クラスから要素を切り離すのに用いられるかもしれません。単純に強調されたタグをクリックする方法を使用するなら、チェックの入ったクラスを選択すると、これは選択が解除されます。クラスセレクタボックスを使用するなら、もう一度そのスタイルを選択すると、これは取り消されるでしょう。これらの代わりに、要素を選択した後に、ステータスバーで強調されたタグの上で右クリックし、「詳細プロパティ」を選択してください。選択されたクラスが表になっているでしょう。そしてそれを選択し、「削除」をクリックしてください。

4.2.4 外部スタイル

外部スタイルシートが機能するには３つの方法があります。

4.2.4.1 新しい外部スタイルシートを作成する

外部スタイルシートは内部スタイルシートとほとんど同じ方法で作成されます。

外部スタイルシートを作成するには

CSSエディタを開きます。 (ツール > CSSエディタ).
「エキスパートモード」であることを確かめ、「新しいstyle要素」をクリックします。
ボックスにタイトルを入力し、「スタイルシートの作成」をクリックします。
「スタイルシートを外部出力し…」をクリックします。
css の名前を入力、保存します。あなたのページと同じフォルダが望ましいでしょう。

そして、「新しい規則」をクリックすれば、あなたはすでになじみの領域にいるでしょう。

私たちが内部スタイルを作成したとき、それらは私たちのページのヘッダ領域に入れられました。今、スタイルは外部のファイルの中に作成されています。ソース編集モードで見ると、仕切線が見られ、外部のファイルを参照し、あなたのページのヘッダ領域にリンクしているでしょう。

警告： 残念ながら、現在、KompoZerはファイル名を挿入するのをたいそうなものとして扱います。あなたのハードドライブの上にそれが現れると（訳注：すなわち保存すると）、それはファイルの絶対アドレスを置きます。あなたがページをアップロードまたは移動するとき、スタイルシートは見つからないでしょう。あなたは HTMLソースコードで、<link rel="stylesheet"で始まる行を編集する必要があります。(この「行」、複数行に広がっているかもしれないが、これはtype="text/css">で終了することに注意してください) file:///C:/Documents%20… で始まり、ファイル名の前についている / までのコードは全て削除してください。この結果、href="filename.css"　といったテキストが含まれるでしょう。もしスタイルシートがサブフォルダにあるなら、テキストは href="subfolder/filename.css" などとなっているでしょう。

4.2.4.2 内部スタイルを外部スタイルシートに変更する

内部スタイルを使って既にあなたのページを設定したなら、それらを外部のスタイルシートに変換して、それにリンクすることができます。
CSS エディタを開いてください。「スタイルシート」のペイン（訳注：CSSエディタウィンドウの左側のツリー部分）のスタイルシートをクリックし、全般タブの下の「スタイルシートを外部に出力し、そちらへと切り替える」をクリックして作業を進めます。

4.2.4.3 既存のスタイルシートにリンクする

他のページのために作成したか、またはあなたのサイトに共通して使おうとするスタイルシートがあれば、あなたのページをそれにリンクすることができます。
既存の外部スタイルシートにリンクするには

CSSエディタを開きます。(ツール > CSSエディタ)
エキスパートモードであることを確認して、「新しいリンク要素」をクリックします。
（ファイルを）「選択」をクリックし、使いたいスタイルシートの場所を探します。
「開く」をクリックし、「スタイルシートの作成」をクリックしてください。左側の「スタイルシート」のペイン（訳注：CSSエディタウィンドウの左側のツリー部分）にスタイルシートの名前が見えるでしょう。

そこで、CSSエディタを閉じることができます。しかしもちろん、普通の方法でスタイルシートを昨日させることができます。

注意!： Section 4.2.4.1　と同じ警告が適用されます。

4.2.4.4 スタイルシートを保存する

いったんスタイルシートをリンクし、保存すると、変更が後で行わても、その変更がすぐにあなたの文書に現れるでしょう。ページが保存されるとき、シートが再保存されるでしょう。

警告： シートが複数ページにリンクされているなら、そのときKompoZerで開いている他のページは、それらが閉じられて再び開くまでは変更が認識されないでしょう。

4.2.5 他のスタイルセレクタ

4.2.5.1 はじめに

要素スタイル(Section 4.2.1)や名前付きクラス(Section 4.2.3)はスタイルで使われる２つの主たる「セレクタ」です。セレクタはページで特定のスタイル宣言を特定の項目に付帯するリンクとして考えられるでしょう。

注意： 厳密には、クラスセレクタはクラスの名前とはじめについているドットで構成されています。

これらに加え、CSSの仕様はより複雑なセレクタの大部分が提供されていますが、その大部分はこのガイドの目的の範囲外にあるものです。詳細は、CSS 仕様書のSection 5を見てください(Appendix 2参照)。しかしながら、より頻繁に必要とする、またはそれほど複雑でないサイトのためのいくつかのケースがあります。これらは次の 2つのセクションでカバーされています。

4.2.5.2 リンクのスタイル

ブラウザはリンクを標準の色でレンダリングしますが、KompoZerはこれらを制御するいくつかのオプションを提供します。(Section 3.7.1.6参照). スタイルの使用を通じて、リンクのそれぞれの状態をフルコントロールできます。これはリンクの「擬似クラス」と呼ばれるセレクタを使用することによって達成されます。

より重要な擬似クラスは

`a:link`	全ての訪れていないリンク
`a:visited`	訪れたリンク
`a:hover`	カーソルを重ねたときのリンク

注意： 以下の手順は内部スタイルシートの使用に基づいています。非常に類似した手順は外部のスタイルシートに用いられるでしょう。

リンク擬似クラスを作成するには:

クラスを作成するように手順を進めてください。(Section 4.2.3参照)
ステップ4において、「次に指定するセレクタに該当する要素に適用されるスタイル」を選択し、ボックスに上の表に上げたセレクタを入力します。
ステップ5において、セレクタの名前が入力したように現れるでしょう。

現在、これらのオプションは全てスタイルづける、すなわち、文字色・装飾だけでなく、背景やボックスなど多くのことを設定することが可能です。

注意： A:hover はA:link や A:visitedの規則の後に配置されねばなりません。ですので、さもなくばカスケーディングの規則に従い、A: hoverの規則に隠されてしまうでしょう。

CaScadeS CSS エディタは、スタイルを出会った順に入力します。その順序は項目を選択し、「上へ」「下へ」ボタンをクリックして変更することができるでしょう。

警告： Nvu 1.0では「下へ」ボタンが無効です。

注意： 現在これらのスタイルは、自動的にリンクに適用されるでしょう。クラスで行うように、手動で適用する必要はありません。

4.2.5.3 フォームコントロールのスタイル

要求したような見た目となるフォームを設定するのは、スタイルが特定のコントロールに設定されるのを必要とするでしょう。これらはリンクでまさに記述されたように厳密に設定され、必要なセレクタにスタイルを設定するのが単に必要です。主なもののいくつかを以下の表に示します。

Control	Element	Selector
Submit button	Input	`input[type=submit]`
Reset button	Input	`input[type=reset]`
Text input	Input	`input[type=text]`
Text area	textarea	`textarea`
Label	label	`label`
Field set	fieldset	`fieldset`
Legend	legend	`legend`

4.2.5.4 IDのスタイル

ID (一意的な識別子) は、今まで言及することはありませんでしたし、完全に説明するつもりはありません。これらは、KompoZerでのサポートは限られていますが、いくつかの目的のために利用することができるでしょう。

IDは一意的な識別子で、（どのページでも）一度だけ使えます。最もよく知られたIDはdiv要素と連動して、目次やメニューなどページの特定の領域を特徴づけるのに使います。その利用方法を示すような名前をIDに与えると非常に助けになります。

IDをもとにしたスタイルを作成するには：

IDの名前を選択します。これはクラスと同じ規則に従わなくてはなりません。Section 4.2.3参照。
スタイルシートや要素にスタイルづけをするように、作業を進めてください。(Section 4.2.1 参照)
ステップ6のところで、IDの名前を入力しますが、ナンバーを前につけます。例、#menu 。

IDを適用する

原則的には、IDはクラスに似ています。KompoZerでは、IDをクラスセレクタボックスを通じて適用することはできませんが、しかしその方法は簡単です。

必要ならCSSエディタを閉じます。
IDを適用したい divの中をクリックします。
ステータスバーの<div>タグをクリックします。もし一つ以上あれば、最も右側にあるものを選択します。タグもdivの内容も強調されるでしょう。
カーソルを動かさずに右クリックして、「ID」を選択します。
ポップアップリストから、必要なIDをクリックします。

4.3 スタイルを削除する

CSSエディタはスタイルを追加するのと同様の方法で削除することができます。
「スタイルシート」ペイン（訳注：CSSエディタウィンドウの左側のツリー部分）の、削除したい規則を選択し、「削除」をクリックします。

同様に、スタイルシートを削除することもできます。シートを選んで「削除」をクリックします。もし、内部スタイルシートを選択したなら、ファイルから完全に削除されます。

警告： この削除は「元に戻す」を使って戻すことはできません。

外部のスタイルシートを削除するなら、ページへのリンクは不可逆的に削除されますが、外部のファイルはそのまま残されます。

4.4 継承

ウェブページには、階層構造があります。例えば、テーブルセルの中の文字は「テーブル」の下に置かれます。あなたは「HTMLタグ編集モード」でこの構造のいくつかを見られます。
継承の意味とは、構造中の高いレベルで設定されたスタイルの性質が、明確に再指定されないならば下のレベルでも適用されるでしょう。それゆえ、「Table」要素で設定されたフォントファミリーはテーブルの全てに適用されます。しかし、もしテーブルの中に段落を含み、「p」要素に違うフォントが設定されているなら、それが適用されているでしょう。Section 4.2.1.1 はその効果のちょっとしたデモンストレーションをすでに示しました。
あなたがスタイルの性質を使いたくて、それぞれ全ての要素に適用せねばならないことよりも、むしろスタイルシートで一度設定することが許容されるので、継承は非常に役に立ちます。
何が継承されるか、継承されないかを見るには詳細な仕様書をひかなければならないでしょうが、一般には背景、枠線、余白 (margin)、枠内余白(padding)、幅、および位置を決めるもの以外の全ての性質が継承されると想定すればよいです。

4.5 division <div>要素

今まで、通過する際にのみ<div>要素について言及してきました。divは、divisionすなわち、数々の要素を含むページのセクションを作成します。（後に触れるように、divの中ではスタイルがしばしば特殊な方法で適用されます）このセクションの残りはdivが何であるか、どのようにそれを使用するかについて完全な説明をすることではなく、KompoZerを使用することで、どのようにdivを作成し、配置するかに関する説明を意図したものです。 divの他の側面は初心者の関心を超えているようです。

4.5.1 divを作成する

divを作成するには：

divを作成するべき場所にカーソルを置きます。
注意： その後に項目を追加する必要あるなら、ページの最後の項目としてdivを作成しようとしないでください。（訳注：理由は後述）
注意： 表示 > ブロックの輪郭を選んだ上で、HTMLタグ編集モードで何が起こっているかを見るのが、より簡単です。
書式ツールバーのはじめのドロップダウンボックスをクリックします。
リストのいちばん下にある最後のオプション - 汎用ブロック(div)をクリックします。
divが本文として書式化されて作成されます。

例えば、文字や画像など、要求するいかなる項目をdivに挿入することが可能です。文字が選択されると、段落なとして書式化されるでしょう。必要なら、divそのものも挿入できます。それゆえ、入れ子になった複数のdivのセットが作成されます。

時々、divに配置するのを試みをするとき、div内の要素は見えなくなるなどといった、困難を経験するかもしれません。これを避けるためには、空の要素を挿入するのは望ましくありません。それゆえ、そのときに代替物として、例えば一つの段落を挿入したり、何らかのダミーテキストを入力するとよいでしょう。

divにクラスを適用するには：

通常の方法で作業を進めます(Section 4.2.3.1 参照)。クラスセレクタボックスはクラスをdivに適用するのに使われるでしょうが、すでに設定されたクラスは表示されないでしょう。使うのに望ましい方法は、クラスの追加や削除に使えるステータスバー上の強調されたタグを介することです。

クラスを確認および変更するには：

ステータスバーを使ってクラスにアクセスします。

divの中の要素は全て通常の方法で適用したスタイルをもっています。

divを離れるには：

divの外側の領域をどこでもよいのでクリックします。これはなぜdivがページの最後の項目にするべきでないかという理由です。それはページのより高いレベルの項目を訪ねること以外には去ることができないためです。

一意的なdivision

divの一般的な仕様はページの一意的な領域のために使用します。例えば、メニュー、目次、本文の領域などです。そのような場合、クラスをdivに適用するよりはむしろ 'id'を使うことがより適切です。

4.5.2 div内のスタイル

divはページの限られた領域内で違ったスタイルのセットを適用するのに役に立ちます。もちろん、クラスのセットが設計され、この領域内の要素に適用することができます。が、これは難儀でコードを増やしてしまいます。より簡単な方法は、divだけの中で適用されるような方法でそれらにタグをつけるために、div要素にスタイルのセットを設定します。適切なセレクタを使ってこれを行います。divがクラス「divclas」を持つとすると、適切なセレクタの例は以下のようになります。

div.divclas p div.divclas td div.divclas a:visited

あるいはIDを使うときは、

#menu p #contents li

これらは擬似クラスと同じ方法で設定されるでしょう。Section 4.2.5.2 参照。