トップページ>>スタイルシート>>書き方

CSS概要

Cascading Style Sheetの略だそうです。
HTMLのページを彩ったりするプログラミング言語です。
しかしこれもHTMLと同じく、難しくない簡単な言語だと言えるでしょう。
　そして、これも同じく専用のソフトなどは必要なく、
テキストエディタで作る事が出来ます。

拡張子は.cssです。
拡張子とはなんだ？と言う方はこちら

　このCSSが使えるようになれば、ページを細かくレイアウトしたり、
色をつけて目立たせたり、楽しくなると思います。

それでは、CSSを書き始めましょう！
ページの上へ

基本

さて、スタイルシートはどこに書くのでしょうか？

答えは二つあります。
一つ目は、HTMLファイルの中に書く。
二つ目は、外部ファイルとして書く。

まず一つ目の説明をして行きます。
　HTMLの<head>タグの説明を思い出してください。
スタイルシートについて、少し触れています。
実は<head>タグの中に、スタイルシートを書く事が出来るのです。
そのやり方をご紹介しましょう。 <head>
<style type="text/css">
ここに記述
</style>
</head> <style>タグの間に記述します。
<style>タグは<head>タグの中に記述します。
　typeプロパティにテキストのCSSですよと言う情報を入れます。
さぁ。これで第一段階は完了です。

しかし、厄介な事に、CSSを読み込んでくれないアホウなブラウザが存在するようです・・・。
その場合<style>タグの中に書き込まれたCSSが、
そのままブラウザ上に表示されてしまうのです・・・。
　それを防ぐためにHTMLでのコメントアウトと言うのを使います。
<!--課長のバカヤロー！！--> こうすると、なんとブラウザ上からは見えなくなるのです！
　確認出来ませんね？
それではソースコードを見てみましょう。

ちゃんと確認出来たでしょうか？
ソースコードはブラウザの表示と言う所から見れましたね。

これを利用して、HTMLでは表示されないけれど、
スタイルシートではちゃんと読み込まれるように出来るのです。
<head>
<style type="text/css">
<!--
ここに記述
-->
</style>
</head> 　一応マナーだと言う事なので、HTMLファイル内に書く場合は
忘れないようにしましょう。

二つ目の説明をして行きます。
外部ファイルを作ります。この外部ファイルの拡張子が.cssなのです。
HTMLファイルをスタイルシートを使ったからと言って.cssで保存すると
おかしな事になるので気をつけて下さい。

文法はどちらのやり方でも同じなので、ここでは外部ファイルを使って行きたいと思います。
外部ファイルを使う方が、CSSファイルを変更するだけで、すべてのページを一気に変更出来るからです。

　外部ファイルの貼付け方です。<head>タグ内に記述します。 <link rel="stylesheet" type="text/css" href="reidai02.css"> relプロパティにはどのファイルを貼付けると言うのを持たせています。
この場合はスタイルシートですね。
またもやtypeが出てきましたね。先ほどと同じです。
そしてhrefでパスの指定です。
パスの指定は何度もしているので、もうお手の物でしょう。
一応参考までに・・・。パスの指定
これでスタイルシートの適用の仕方が解りましたね。
ページの上へ

文法

さて、スタイルシートはどのように記述するのでしょうか？
スタイルシートは大きく分けて四つの物にプロパティを指定する事が出来ます。
まずはこれをスタイルシートに記述してみましょう。 body{color:red;} 記述したら、ファイル名は半角英数字、拡張子は.cssで保存してください。
そして、HTMLファイルでそのCSSファイルを読み込んでください。
HTMLでの読み込み方法はこちら。
HTMLファイルの中身はなんでも良いです。
この文字は赤色です。 はい。文字の色が赤色になりましたね？
説明をします。

　<body>タグの中の文字色を赤にしなさい。
と言う命令な訳です。
bodyと書かれた部分には、色々なタグが入ります。
今まで学んだ、「p」や「hr」はたまた「html」なんてのもタグなので入ります。
その中にあるもの（hrなどの空タグはそれ自身）のプロパティを変更出来るのです。

　大きく分けて四つの内の一つ目は「タグ」でした。
二つ目はこちらです。 #reidai03{color:red;} これは何にプロパティが付くのでしょうか？
実はこれだけでは、何も付きません。
HTMLファイルにも仕掛けが必要なのです。 <span id="reidai03">今日は晴れだ！</span>明日は雨だ！ 結果はこうなります。 今日は晴れだ！明日は雨だ！ さぁ今度は「今日は晴れだ！」と言うテキストだけが赤色になりました。
HTMLのタグにはidと言うプロパティが付けられます。
「ID」聞いた事ありますよね？
個人を認証するための物ですね。例えば免許証や保険証などがそれに当たります。
　それをHTMLのタグに付ける事が出来るのです。
ここで、何の役にも立たなかった<span>タグが役に立つ理由が解りましたね。
　しかし、便利なidですが、HTMLファイルの中で同じIDは一度しか使えないと言う特性があります。
（id="reidai03"とid="reidai04"は違うidなので使用出来ます）
同じ人が二人はいないのと同様に、idは一つしか使えない決まりになっています。
つまり、同じ効果を付けたい時に沢山のid名を考えなくてはならず面倒な事になってしまいます。
そして、スタイルシートに記述する量が膨大になってしまいますね。

そんな時にはclassプロパティを使いましょう。
.reidai03{color:red;} <span class="reidai03">今日は</span>晴れだ！
<span class="reidai03">明日は</span>雨だ！ 結果は予想がつきますね？ 今日は晴れだ！ 明日は雨だ！ 　これで大きく分けて四つの内、三つの説明が終わりました。
四つ目は今説明すると訳が分からなくなってきそうなので、
追々説明するとして、次からは色々なタグやプロパティについて学んで行きましょう！

<<前へ 次へ>> ページの上へ