ホームページ作成無料レクチャー

Home > スタイルシートを使う２

スタイルシートを使う２

読み込んだスタイルシートファイルに、スタイルを設定してみます。
まずはテーブルにスタイルを設定してみましょう。

1■スタイルシートを開く

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

2■スタイル設定のページを開く

すると、また同じようなウィンドウが開かれるので、「追加」をクリック。

3■スタイルに名前をつける

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

4■スタイルを設定する

ここではカラーと背景を設定しました。他にもいろいろ細かい設定がありますが、まずは色から設定してみると効果がわかりやすいと思います。

・前景色は文字など中身のオブジェクトに対して反映します。
・背景色はその名の通り背景に反映します。

5■スタイルを反映させる

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

下図のボックスの、▼をクリックすると、先ほど作ったスタイル名が表示されているはずですので、スタイル名をクリック。

*ボックスの位置は下図の場所にあるとは限りません。ツールバーが非表示になっている場合も表示されていませんので、「表示→ツールバー」で表示させて下さい。

ここまでの作業を行うと、

このように設定が反映されます。

別のセルにも同じようにスタイルを反映させてみます。

また、別の名前のスタイルを1～5をくり返して作成し、反映させてみます。

■別のスタイルの反映の仕方

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