| その１ | WEBページ（htmlファイル）を１ページ作成。 | |
 CSSはそれだけでは設定も変更も視覚的に確認することはできないんぢゃ。ぢゃから、webページを作成するぞい。 ツールがない人の為に、メモ帳で作っていくとしようかの？ もちろん、他のテキストエディタがあれば、それで結構ぢゃ。 ちなみにわしの愛用は、CGIの時も使えるサクラエディタぢゃぞ。 使ってみようと思うお方は、ここからダウンロードしてくれい。 →【サクラエディタ】 勿論フリーウェア（無料）ぢゃから安心ぢゃ。 
（安心って・・・教授はケチで有名ですからね？） 何か言ったかのぉ？
いえ、別に。 ・・・・ま、いいか。（昇進はなしぢゃな。あいつは一生わしの助手ぢゃ。）メモ帳ぢゃと、htmlやcssや普通の文章ならいいんぢゃが、CGIスクリプトの記述はできないんぢゃ。今後の為に、Ｄ／Ｌしておいた方がいいとも言えるの。 |
||
| １）ということで、メモ帳を開いてくだされ。 ２）下のように、日本語以外は、すべて半角で書き込んでくだされよ。 コピーペーストでもＯＫぢゃ これはhtmlと呼ばれるもので、html（タグ）でwebページは作られていくんぢゃ。 あっと、それから、色は関係ないぞい。判別する為だけぢゃ。
3)INDEXの下準備で作成したフォルダの中に、今書いたものを test1.html という名前をつけて保存。保存したら、フォルダを開けて、test1.htmlを開いてくだされ。 上の方にテストページと文字が表示されたページが表示さることを確認するのぢゃぞ。 これでテストページとだけ書いたwebページができたことになるんぢゃ。 ※最後が .htmlで終わっていれば、test1のところは半角英数なら、自由に名前をつけてＯＫぢゃぞ。一応ここでは、test1.html という名前で説明していくがのぉ。 ※参考１：拡張子について いつも使っている作成ソフトで、単に「テストページ」とだけ書いたページを作って、test1.htmlという名前で保存してもいいぞ。その場合、余分なタグがはいるとは思うがの、それらは無視しておいてくれ。 |
||
| その２ | CSSファイルを１ページ作成。 | |
| １つずつ確認していきながらクリアしていこうかのぉ。 慌てる乞食はもらいが少ないと言うからの。 進行が遅くて、いらいらする人もいるかもしれんが、まー、年寄りのやることぢゃから、かんべんしてくれ。/^^; |
||
| １）メモ帳を新規で開いてくだされ。 ２）下のように、すべて半角で書き込んでくだされ。 途中、半角スペースや記号などがあるぞい。記入漏れなどないように気を付けてのぉ。  そういう時の予防策にコピーペーストという手もありますよ♪ お！たまには良いことを言うぢゃないか。
（このくらい私だって・・というか誰でも気付くと思うんですけど・・・・ ほんとに、教授ったら私がな〜〜んにも知らないと思ってんだから・・まったく・・・）
上のは例のごとく説明のために色をつけてあるんぢゃ。body・・・ページ全体を意味しとるんぢゃ。 ｛ ｝で囲まれたところが、bodyに対する指定内容になるんぢゃ。 background-color・・・背景の色 powderblue・・・ここでは、例として、パウダーブルーを指定しておるぞい。 ※background-colorのあとの : とか、powderblueのあとの ; も忘れないよう入力してくれのぉ。 おお、そうぢゃ！ background-color（背景色）:（は） powderblue（パウダーブルー）;（です） な〜んていう感じに、記号を覚えておいてもいいんぢゃないかのぉ？（笑
3)これもhtmlを保存したフォルダの中に、 style.css という名前をつけて保存します。 最後が .cssで終わっていれば、styleのところは半角英数なら、自由に名前をつけてＯＫですが、ここでは、style.css という名前で説明していきます。 こら！助手！勝手に割り込むんじゃないっ！・・ったく・・・・ |
||
| その３ | CSSファイルの設定を、htmlファイルに読み込ませます。 | |
| 本当に背景色が、指定の色（この場合はpowderblue）になっているかどうか確認するぞい。 最初は、白だったことも思い出してくだされや。 |
||
| １）作成した test1.html をメモ帳で開けてくだされ。 メモ帳が閉じてなけれぢゃばいいんぢゃが、メモ帳を閉じてしまってる場合は、 test1.htmlファイルをクリックしてブラウザで表示させ、そのブラウザの上でマウス右クリックして、「ソースの表示」を選んでhtmlを表示させてくだされ。 ２）前書いたものに、少し追加するぞい。 半角スペースもきちんと開けてくだされよ。 半角スペースや記号などの入力ミスを避ける為、コピーペーストでもいいぞい。
※href="style.css" ・・・ ""で囲んだところ（赤い文字）に、読み込むスタイルシートのファイル名を入れるんぢゃ。ご自分がつけたファイル名にしてくだされ。つまりぢゃ、「 <link rel="stylesheet" type="text/css" href="style.css"> 」のところで、このページの内装は style.css を読み込んで、それに従って表示するんぢゃぞ！という指定をしておるんぢゃ。 そして、これは必ず、<head></head>で囲んだところに書くんぢゃぞ！ webページ作成ソフトでwebページを作ると、<head></head>内には、他にもいろいろ書いてあるが、ともかく、<head></head>内ならＯＫぢゃっ！(^-^v 他では用を足さんからのぉ。 3)書き加えたら、ファイルを上書き保存ぢゃ。
これで、ブラウザで test1.htmlを表示させると、背景色が変わったはずぢゃ。cssファイルの背景色名を変えて、あれこれ実験してみてくだされ。 色は、#ではじまる６桁の１６進数で指定する方法と、red、blue、など色名で指定する方法がある。あとRGBで指定もあるが、一般的には、色名か１６進数、色名より１６進数表示の方が多いと言える・・かのぉ？/^^; 一応カラーリストはここぢゃ。コピーペーストが間違いがなくていいかもしれん。（ｗ
第一回の最終webページはこれです。 １つだけでごめんなさい。何しろ教授は高齢でして、これだけで疲れてしまったみたいなんですよ。 次回は、スタイルシートで文字色の変更を予定してます。 質問などありましたら、BBSへお気軽にどうぞ。 それから、間違っているところもあるような気もします。つっこみ、訂正箇所の指摘などBBSでよろしくお願いします。 |
||