スタイルシートの単独ファイルの作り方と設置方法

スタイルシートの単独ファイルの作り方と設置方法

このホームページの『ホームページ作成の為の部品室』でも説明しましたが、もう一度説明します。

使い方は、これからご紹介する下のメニューをクリックしますとサンプル画面が表示されます。その画面の上部の｢表示(V) ｣を左クリックすると｢ソース(C) ｣が選択可能となります。｢ソース(C) ｣を更に、左クリックするとメモ帳が表示され、そこにＨＴＭＬで書かれたプログラムが出てきます。

もうひとつの、ソースの取りだし方は、サンプル画面の上にマウスポインタを置いて（この時、画像の上は避けてください。）、右クリックします。すると、小窓に｢ソースの表示(V) ｣が表示されますので、そこを選んで左クリックすると、メモ帳が表示されます。

いずれの方法でも、結構ですから、メモ帳の画面がでたら、いまソースを表示している画面の左上の｢ファイル（F）｣を左クリックして [ 名前を付けて保存（A) → 好きな名前をつけて｢保存｣ → 好きな名前の後に.html つけて｢保存｣ ] をしてください。

そして、後でソースリストの確認に便利のように、txtファイルを作っておきましょう。
作り方は、先ほどのhtmlと同じ手順で、[ 名前を付けて保存（A) → 好きな名前をつけて｢保存｣ → 好きな名前の後に.txtつけて｢保存｣ ] とします。

保存を指定した場所に、好きな名前のメモ帳 ( txtファイル )

（ 98の場合：

) と”ｅ”のアイコンのついたファイル ( htmlファイル )

（ 98の場合：

) が出来てます。
上のマークの例では、好きな名前を lesson として、lesson.txt

（ 98の場合：

) とlesson.htm

（ 98の場合：

) を作成して保存しています。

・・・と

ココまでは、いままで皆さんがやってこられた操作ですが、ここで紹介するスタイルシートは、もうひとつ、ファイルを作っていただく必要があります。

先ほどまで、読んできた感じでメモ帳の画面でソースを見てください。

すると、ソースリストの下部に、

というソースがあると思います。( 実際は黒文字ですが、ここでは区別のため赤文字にしてあります。)

それを、★→ と ←★に囲まれた中だけ、コピーしてメモ帳に貼りつけて、先ほどと同じように、[ 名前を付けて保存（A) → 好きな名前をつけて｢保存｣ → style-ex??.css として｢保存｣ ] して下さい。( ここでは、style-ex?? と名前を付けています。style-ex?? の？？は00～99の番号となります。この名前も任意ですが、名前を変える場合は呼び出し元の名前も同じ名前に変える必要があります。)
すると、style-ex??.css

（ 98の場合：

) が出来ますので、先ほどのlesson.htm

（ 98の場合：

) と一緒に、ホームページを置いているサーバーの同じ場所にアップすれば、完了です。

その他、プログラムリストの中にで囲まれた所はプログラムの説明文ですので参考にして下さい。