確認のための演習

【本節の目的】
WWWサーバ上での相対URIによる参照時の注意点や、 CSSファイルによってスタイル指定されたWebページの公開/更新方法などを演習を通して習得します。

スタイル指定されたWebページの公開 --相対URIによるCSSファイルの指定--

[演習：CSSファイルによってスタイル指定されたWebページの公開と相対URI]

以下に説明する手順に従って操作し、 CSSファイルによってスタイル指定のされたWebページのアップロード(公開)方法を習得して下さい。

この演習の目的は、「スタイル指定されたWebページの公開方法」ですが、その中でもどのファイルをどこにアップロードするのかについて、注意を払って下さい。そのキーポイントが、 HTMLファイルとCSSファイルの相対的な位置関係です。相対URIの考え方を思い出しながらしっかり自分ものにして下さい。

WinSCPによりWWWサーバに接続し、 /public_htmlフォルダの下に、「w09」フォルダを作成します。
今回作業している「\week09\ex2.html」を、今作成したWWWサーバの「/public_html/w09」へアップロードします。
次に、アップロードしたHTMLファイルをWebブラウザで確認してみましょう。 (絶対)URIは、どう記述すれば良いか分りますよね？ http://st.gsis.kumamoto-u.ac.jp/ユーザID/w09/ex2.html ですね。
ちゃんと表示されましたか？されない？？
HTMLファイルの内容はちゃんと表示されているのに、今日設定したスタイルが適応されていませんね。どうしてでしょう？良く考えてみましょう。
(註) 「Not Found」が表示されたあなたは、 Webブラウザで指定したURIが間違っているか、アップロードしたファイルのフォルダが間違っています。確認して下さい。
もしかすると、アップロードしたファイルが間違っていたかもしれませんね。 PC上にあるアップロードしたファイル「week09\ex2.html」のアイコンをダブルクリックして、Webブラウザでの表示を確認して下さい。

(註) このとき、Webブラウザのアドレスバーの表示がローカルのアドレスであることを確認して下さい。
PC上にあるファイルは、ちゃんとスタイルが適用されていますね。
(註) もし、適用されていない人は、今ダブルクリックしたファイルが (おそらくアップロードしたファイルも) 間違っています。確認して下さい。
PC上にあるときは問題ないのに、どうして、 WWWサーバにアップロードしたらスタイルが適用されないのでしょう？
CSSの演習で、はじめに行なったことを思い出して下さい。
「week09\ex2.html」の head要素に以下の記述を追加しましたね。
```
    <link rel="stylesheet" type="text/css" href="../css/mystyle.css">
```
(註) 実際には、もう一行追加したのですが、覚えていますか？こちらで確認できます。

上の記述中の相対URI「../css/mystyle.css」が、スタイルを定義しているCSSファイルを表わしているのでした。そして、皆さんは、このCSSファイルにいくつかのスタイルを定義してきたのです。そのおかげで、確かに「week09\ex2.html」をWebブラウザで表示させると皆さんの定義したスタイルが適用されました。

それでは、WWWサーバにアップロードした後の、ex2.html (正確には、サーバst.gsis.kumamoto-u.ac.jp上で、皆さんのホームディレクトリの下の /public_html/w09にある ex2.html) から見た
「../css/mystyle.css」は、いったいどこにあるのでしょう？
WWWサーバ上のex2.htmlは、「/public_html/w09」にあるのですから、そこから見た「../css」は、「/public_html/css」ですね。ということは、 WWWサーバにアップロードしたex2.htmlは、サーバ上の「/public_html/css/mystyle.css」のスタイルを適用しようとしているのです。

ところで、WWWサーバ上に「/public_html/css/mystyle.css」はありますか？ありませんね。そんなフォルダを作ってはいないし、 CSSファイルをアップロードしてもいません。だから、アップロードしたex2.htmlをWebブラウザで表示させても、自分で定義したスタイルが適用されないのです。
それでは、アップロードしたHTMLファイルでもちゃんとスタイルが適用されるように、 CSSファイルもアップロードしましょう。

その前に、まず、サーバ上に「/public_html/w09/ex2.html」から見て「../css」のフォルダを作らなくてはなりません。絶対参照表記すると「/public_html/css」というフォルダですね。

サーバ上に、「/public_html/css」を作ったら、そこに、「css\mystyle.css」をアップロードして下さい。アップロードした後のWinSCPの様子を下に示します。 PC側 (左側) と WWWサーバ側 (右側) のフォルダが、下図のようになっていることをしっかりと確認して下さい。
所定の場所に、mystyle.cssをアップロードしたら、再度Webブラウザで http://st.gsis.kumamoto-u.ac.jp/ユーザID/w09/ex2.html をアクセスして下さい。こんどは、ちゃんとスタイルも適用されたでしょう。

CSSファイルによってスタイル指定されたWebページの更新

[演習：スタイル指定されたWebページの更新]

以下に説明する手順に従って操作し、 スタイル指定されたWebページの更新の際に注意することを演習により習得してください。

まずは、新しいセレクタを定義してみましょう。「css\mystyle.css」に、「p.mikan」というclassセレクタを下図のように追記して、 (上書き)保存して下さい。

(註) p.mikan セレクタの働きは、 class属性の値が「mikan」であるp要素に対して、文字色を「darkorange」にし、文字を通常の文字の３倍の大きさ「3em」にすることです。
次に、上で定義した p.mikan というclassセレクタを使って、 p要素のスタイルを変えてみましょう。「week09\ex2.html」の body要素の中で、 p.mikan というclassセレクタを使って下さい。
使い方は、下図のように、 p要素のclass属性の値を「mikan」にすれば良いですね。
「week09\ex2.html」をWebブラウザで表示すると (ファイルのアイコンをダブルクリックすると)、 class属性の値が「mikan」のp要素の内容は、下図のように「darkorange」の文字色で、通常の３倍の大きさの文字になりますね。
それでは、早速WWWサーバへアップロードして、スタイルを変更したWebページを公開してみましょう。
アップロード先は以前と同じにして、前に公開していたWebページを更新することにします。 WinSCPで、先程と同じようにアップロードすれば良いですね。 PC側のフォルダと、サーバ側のフォルダに間違いが無いか、良く確かめてからアップロードして下さい。
更新したWebページをブラウザで表示してみると、あれあれあれ？？？
文書は追加されていますが、スタイルがおかしいですね。なぜだか分りますか。
気づきましたか？そうです。 HTMLファイルだけではなく、 CSSファイルも書き変えましたよね。書き変えたCSSファイルをアップロードしていませんでしたので、公開したWebページのスタイルは、先にアップロードしたCSSファイルのものを使っていたのです。そのため、先程定義した p.mikan は定義されていなかったわけです。

それでは、改めて CSSファイル「css\mystyle.css」をアップロードしましょう。アップロード先を間違えないようにして下さい。
再度Webブラウザで http://st.gsis.kumamoto-u.ac.jp/ユーザID/w09/ex2.html をアクセスして下さい。こんどは、ちゃんとスタイルも適用されたでしょう。

以上の演習で分りましたように、 CSSでスタイル(見栄え)をコントロールするWebページを更新するには、一般的にはHTMLファイルだけではなく、CSSファイルも変更します。そのため、サーバへのアップロードはHTMLだけでなく、 CSSファイルも一緒に行なう必要があります。

ただ、以下のような場合は、ちょっと違います。以下の手順に従い実際に試してみて、何が上の場合と異なるかを自分で確認して下さい。

以下のように、mystyle.css のはじめの方で設定した bodyセレクタ (body要素のスタイル) の背景色 (background-color プロパティ)を、別の色に変えてみて下さい。勿論変更したら、(上書き)保存して下さい。
下の例では、背景色を元に戻せるように、元の色の設定をまずコピーしてから元の設定をコメントアウト (コメント化) しています。コメントアウトするには、コメントアウトしたい領域を「/*」と「*/」で囲むのでしたね。また、色は「#bac7c7」から「#ffe4c4」に変更しています。
この状態で「week09\ex2.html」を、ダブルクリックしてWebブラウザで表示すると、以下のように背景色が変っていることがわかります。
修正したCSSファイルをWWWサーバへアップロードしましょう。何度も行なっていますが、サーバ上のアップロード先を間違えないようにして下さい。
うまくアップロードできれば、下図のように、新しく設定したスタイルが適用され背景色が変って表示されます。

上記の例のように、CSSファイルのセレクタのプロパティだけを変更するときは、 CSSファイルだけの変更しか行ないませんので、 WebサーバへアップロードするのはCSSファイルだけで良いことになります。