html & css 試行錯誤 css の印について

css の印について

先ほどの html ファイルで使用した印を思い出してみませうこの様な形をしていたと思う、<span class="col-r"> と</span>これに対して css では .col-r { color: #ff0000; } の様になっていた（改行していないので見にくいかもしれませんが）html の中で印”<span class="col-r">”が開始場所”</span>”が終了場所の指定と考えると、わかりやすいと思います。終了場所と開始場所の違いがあり開始場所に於いては｜"class=なにか"｜の様に識別する物があり、終了場所には” /span”の様にここまでの指示表現があるようです。当然世の中には例外と言う物がありまして、最初の印のみのものも存在します。また css の中には”{”と ”}”の間には ”:”で区切られた一組のものが、あります””color”#ff0000”そしてその一組の後は”；”で終わってるのがわかります。これらからにゃんたろうは以下の様に類推します。

html の文字の並びの中の望む開始場所に印をつける、それがもう不要になる所に印をつける。（ここまでということです；解除するわけでは無いのです。）
html での ”なにか”は css では ”こうする”の指示がピリオドから始まる一連の指示が記載されている。
css にはピリオドで始まらない物もある。これもなにか指定しているようだ。
今回扱ったサンプルではピリオドで始まらないものは、背景の色と文字の色：白のようである。
html の中で、文字の他の色にする部分は｜"class=なにか"｜の ”なにか”の部分だけ異なっており、css の中で対応するのは”#色の指示？”の部分である。

これを確認するために新しく css ファイルを作って見れば良い、もう内容はわかった、わかったという方は先ほどの css ファイルを変えて見れば良い。css ファイルを新しく作成したなら、 html ファイルも修正する必要があります。指示する css のファイルの名前が変わるのでその場所を変更する必要がある。

新しく css ファイルを作成しましょう以下の様にしてみて下さい。

body {
	color: DeepPink ; 
	background-color: Cornsilk ; 
}

.col-r {
        color: Red ;
}
.col-g {
        color: SpringGreen;
}
.col-y {
        color: Yellow ;
}

これを名前をつけて保存してください名前は適当につけて下さい。ピリオド以下は "css"としてくださいそして前に作成した html ファイルと同じ場所に取り敢えず保存してください。次は前に作成した 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>

修正後

<!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="no2.css">
<!-- 一行に記入 ファイルの名前 no1.css 
から no2.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>

これを上書き保存するなり新しく名前をつけるなりお望みのままにして、ブラウザで見てみましょう。ここをクリックして見でください。

どのようなものが見えたでしょうか？かなり印象が異なったものが見えたと思います。これでにゃんたろうの考えはおおよそ間違ってはいないだろうと思います。

いままでは簡単に試行錯誤するもので、特に印についてなにもふれてなかったのですが次からはその内容について色々試行錯誤してゆく事になります。これらの説明について詳細なものがネットワークの中に多数存在していますので、厳密でかつ詳細なものを、見るのであればこれ以降はここでなく他の所を見て頂くようにお願いします。次は body に関係するものを取り扱います。

戻る