html & css 試行錯誤 css ファイルの作成

css ファイルの作成

さて css ファイルの作成です。エディターを立ち上げて下さい。確認しておきたいのは、前に作成した html ファイルを削除してしまったかどうか？削除してしまったならば css ファイルを作成した後に作成する必要があります。これは理解できますね！指示するファイルがあっても指示されるファイルがなければ、どうしようもないということなんです。また、どこかにこれらのファイルを纏めておく場所を確保しておいて下さい。バラバラになると、後で探すのが大変ですよ。また明後日の方向へゆかないうちに、下記の様に入力してください。

body {
	color: #ffffff; 
	background-color: #cccccc; 
}

.col-r {
        color: #ff0000;
}
.col-g {
        color: #00ff00;
}
.col-y {
        color: #ffff00;
}

これを名前をつけて保存してください名前は適当につけて下さい。ピリオド以下は "css"としてくださいそして前に作成した html ファイルと同じ場所に取り敢えず保存してください。次は前に作成した html ファイルを修正しましょう。取り敢えず最低限の修正ということで行いましょう以下にその例を示します。

修正前

<html>
<head>
</head>
<body>
A b C d E f おわり  end 
</body>
</html>

修正後

<!DOCTYPE html PUBLIC 
"-//W3C//DTD HTML 4.01 Transitional//EN">
<!-- 一行に記入 -->
<html lang="ja">
<meta http-equiv="content-type" content="text/html;
 charset=EUC-JP">
<!-- 一行に記入 -->
<meta http-equiv="content-style-type" content="text/css">
<link rel="stylesheet" type="text/css" 
href="no1.css">
<!-- 一行に記入 ファイルの名前 no1.css としている-->
<title>first.html</title>
<head>
</head>
<body>
<span class="col-r">A</span> b<span class="col-g"> 
C d E</span> f <span class="col-y">おわり</span>  end 
<!-- 一行に記入 -->
</body>
</html>

これをブラウザで見てみよう

A b C d E f おわり  end

どのようなものが見えたでしょうか？背景が灰色文字が白、赤、黄色等に変化したものがみえたでせうか？もしそのように見えたならば、これで css の基本は完了です。即ち html ファイルの印によりその内容を css から入手しその指示されたようにブラウザが表示したということです。（指示のきっかけは html ファイルに書かれた印により css の指示内容をブラウザが理解してその指示どおり表示をした。）

ここをクリックしても見る事ができます。

再度ふれておきますがますが、 html のバージョンが異なればブラウザ（見るもの）の対応も変わり、ブラウザ（見るもの）の種類やバージョンも変われば解釈も変わるし、理解出来ないものも起こります。現状では html のバージョン、同じバージョンでもその中に数種類あり、またブラウザ（見るもの）も多数の種類があるのが現実の状況です。全ての物に対応させるのは簡単ではありません、またそうしないといけないということもないとにゃんたろうは考えます。

出来るだけ努めることは必要ですが、出来ないといって諦めるより何か表現していくほうがいいのではないかと考えます。当然ネットワークで閲覧する場合、ここの表現も含めて（今ここで見ているこの文章）資源の無駄と言われればそのとおりかもしれません。

それはさておき、上記の結果がうまくゆかなかった場合どうすればいいでしょうか？その場合まず第一段階は、 css 無視で html ファイルのみ注目してみましょう、表示が修正前のものとどう違うか、検討してみます。同じかどうか？もし異なっていればその場所について修正を行って見て下さい。

実際の結果(皆様が作成したもの)をにゃんたろうは見ることが出来ませんがにゃんたろうの失敗経験から次の様な事がよくありました。

エディターの文字を入力する場合のモードの相違、半角英数のつもりがそうでなかった。
カンマ、ピリオド、セミコロン、}、括弧、”引用符号が抜けていた。
単純にミスタイプこれは残念ながら自分ではなかなか見付けられない。印刷の場合は上下逆さまにしてみると思わぬ発見をする場合がありますが？
実は html のバージョンが対応してなかった、またはブラウザ（見るほう）が対応してなかった。これはどうしようもないし、調査しきれないと思います。この場合は潔く諦めるしかないのですが、この場合少なくとも今現在見ているものが、あまり変なものでないと考えられれば、ブラウザ（見るほう）は対応していると考えて、html の方を疑ってみる。（書き間違いであろうと疑う）他のネットワークの画面を見ると色等が色々表示されているのにも、かかわらず、作成したものに、色がつかないという場合は、作成したものが、間違っているのではないか、ということです。
表示されている物が意図したもの、とどう違う表示か？文字は表示されるが、色がつかない等、この場合は css との位置関係を再度見直す。
スーペースの有無の確認大昔、にゃんたろうが生まれる前のずーと昔世の中にはコーディングシートなるものが存在してプログラムを書く場合その用紙に記入してそれに記入する場合はスペースの場所も当然存在してあったが、現在の状況ではわかりにくくなっているのにもかかわらず、その扱いが重要視されていない場合がままある。これは当然、愛と一、零と王にも関係するが "i":"1":"0":"o" これが思わぬ落し穴になってる場合があります。
最初にお願いしてるようにエディターに高機能なものは使用してない事を再度確認してください。ゐん同図では”ノートなんとか”マックであれば”シンプルかんとか”のようなものでひたすらテキストのみ扱うもの、また拡張子がそれぞれ html css になっているかどうか？

まあ言えばきりがないので、今回の場合文字が見えてるのであれば文字かんたらの場所を１箇所にしてみましょうそうして css に対応する箇所も１箇所にしましょう当然 ”body なんたら }" の場所は削除して ”.col かんたら”も１箇所にして再度実行してみて下さい。それで改善されたら、再度追加していって下さい。文字の見えない状態であれば最初の html ファイルを見直して文字が出るようにしてください。基本は最小の構成が正しく動く事を確認することだとにゃんたろうは考えます。これで再度なんらかの結果文字に色がついて背景が灰色の状態まで成立したら本件完了です。

次は、今までふれてなかった css と html の関係の機能を追加していくことです。

戻る