class(クラス)の使い方
スタイルシートを使って文字の色は変更出来たでしょうか?
『CSSの書き方』ではタグの中にCSSを書きました(インラインでの記述)が一般的にはタグの中に書く事はあまりありません。
class(クラス)とid(アイ・ディー)
と言うものをつかって外部に書きます。聞き慣れない言葉が出てきました。さっそく見ていきましょう。
CSSの書き方 Class
まず外部にclass(クラス) を使ってCSSを書く方法です。ここで言う外部とは<head>の中に記入する事を言います。
<head>
<style type="text/css">
<!--
.font{
color:blue;
}
-->
</style>
<head>
<body>
<p class="font">CSSを使って青字にします。</p>
</body>
</html>
CSSを使って青字にします。
タグの中に書いてしますCSSとは大分ちがった感じになりました。
まず<head>部分から説明します。CSSを使うためのタグ<style type="text/css">〜</style>を記入しその中にCSSを記入していきます。
画面に記入したCSSが見えないように<!--〜-->
をつかってコメントアウト(見えないようにする)します。class(クラス)を使うので
. (ドット)を書きクラス名を書きます。今回は font
と言う名前をつかっていますが自分で考えた名前でも大丈夫です、ただし数字(1,2,3...)や記号(_,-)
からは始められません。
.font-red .width-120px ←○
.-font .120px ←×
名前を決めたら { 〜 } を記入しその中に
『プロパティ』と『値』を記入します。
『プロパティ』と『値』の記入方法はタグの中に書く方法と同じです。
では、作ったクラスをタグに指定します。クラス名は font なのでタグの中に class="font"と記入します。これで指定したタグの中のテキストは青く表示されます。
クラスでCSSを作っておくとこんな便利な事も出来ます。
<head>
<style type="text/css">
<!--
.font{
color:blue;
}
-->
</style>
</head>
<body>
<p class="font">CSSを使って青字にします。</p>
<p class="font">CSSを使って青字にします。2行目</p>
</body>
</html>
CSSを使って青字にします。
CSSを使って青字にします。2行目
同じページの中であれば作ったクラスを何回でも指定する事が出来ます。
<p>文字を緑にしてみましょう。2行目</p>
<p>〜</p>に囲まれた文字を緑色にしてみましょう。
<head>
<style type="text/css">
<!--
.font{
color:green;
}
-->
</style>
</head>
<body>
<p class="font">文字を緑にしてみましょう。</p>
<p class="font">文字を緑にしてみましょう。2行目</p>
</body>
</html>
何度も書いて書き方をマスターしましょう。