読み込んだスタイルシートファイルに、スタイルを設定してみます。
まずはテーブルにスタイルを設定してみましょう。
| こことか |
こことか |
ここに、 |
| 別のスタイルを |
設定してみます。 |
背景が |
| 同じ色の場所は |
同じスタイルが |
設定されています。 |

1■スタイルシートを開く
「スタイルシートを使う 1」で作った外部スタイルシートをダブルクリックで開きます。


2■スタイル設定のページを開く
すると、また同じようなウィンドウが開かれるので、「追加」をクリック。


3■スタイルに名前をつける
・まず、クラスのスタイルを設定を選択
・すると「クラス名」という欄が出るので、名前を英字入力ローマ字でつけます。
*よく見ると、クラス名の最初に「 . 」(ドット)があります。これは消さないようにしてください。
つまりクラス名は「.クラス名」になります。


4■スタイルを設定する
ここではカラーと背景を設定しました。他にもいろいろ細かい設定がありますが、まずは色から設定してみると効果がわかりやすいと思います。
・前景色は文字など中身のオブジェクトに対して反映します。
・背景色はその名の通り背景に反映します。


5■スタイルを反映させる
設定しただけではスタイルは反映されません。どこに反映させるかを指定してはじめて反映されます。
テーブルのセルごとにスタイルを反映させたいので、セルをクリックして選択します。

下図のボックスの、▼をクリックすると、先ほど作ったスタイル名が表示されているはずですので、スタイル名をクリック。
*ボックスの位置は下図の場所にあるとは限りません。ツールバーが非表示になっている場合も表示されていませんので、「表示→ツールバー」で表示させて下さい。

ここまでの作業を行うと、
| こことか |
こことか |
ここに、 |
| 別のスタイルを |
設定してみます。 |
背景が |
| 同じ色の場所は |
同じスタイルが |
設定されています。 |
このように設定が反映されます。

別のセルにも同じようにスタイルを反映させてみます。
| こことか |
こことか |
ここに、 |
| 別のスタイルを |
設定してみます。 |
背景が |
| 同じ色の場所は |
同じスタイルが |
設定されています。 |
また、別の名前のスタイルを1〜5をくり返して作成し、反映させてみます。
| こことか |
こことか |
ここに、 |
| 別のスタイルを |
設定してみます。 |
背景が |
| 同じ色の場所は |
同じスタイルが |
設定されています。 |

■別のスタイルの反映の仕方
スタイルを反映する場合、反映させたい場所を右クリックし、属性を変更、もしくはスタイルを設定でもスタイルは設定できます。どちらの場合も、上記のボックスから選択する方法と結果は同じです。

|