ホームページ制作,維持・保守
サーバーシステム構築・管理
ネットワーク構築・管理
IT環境サポート
インフラ構築サポート
ITアウトソーシング
HTMLプログラミング
ホーム > WEBプログラミング > HTML,CSS > CSS
HTML,CSS

cssの文法を勉強しましょう~

森之宮 0 152 0

CSS構文を理解するためには選択者(selector)、属性(property)、

そしてプロパティ値(value)この3つを理解しなければなりません。

CSS構文は、選択者(selector)と宣言で構成され、宣言は属性(property)と値(value)で構成されます。 


p {color:red ; width:200} 


通常の場合、選択者(セレクタ)はHTMLタグの一つです。 <p>タグもセレクタとして使われました。


CSSの高級段階では属性の相続(inherit)とケスケード(cascade)をきちんと理解しなければならないのでこのセレクタ(selector)の概念が重要になります。


上で提示した例の意味は段落(p)の色(color)をredに指定しなさいという意味です。


属性と属性値は継続的に追加可能です。 この時:記号を使用して追加します。


セレクタも追加することができます。 この時、記号を使用して追加します。 


p, td {color:red ; width:200} 


段落(p)だけでなく、テーブルのセル(td)のスタイルも{}の中の内容のように指定するという意味です。 


クラス(class)セレクタ 


上記の例でp{color:red}に指定すればすべての段落の色が赤い色に指定されます。 

それでは特定の段落の色を赤色に指定するにはどのようにすればいいでしょうか?


そうです。クラス(class)を利用すればいいです。


<style type="text/css">

<!--

p.red{color:red}

//-->

</style>

<p>一般的な段落です.</p> 

<p class="red">redというクラスが指定された段落です.</p> 


上記の例でredというクラスを段落に適用させました。 特定HTML要素に適用させず、独立的にクラスを使用してもいいです。 


<style type="text/css">

<!--

。red{color:red}

//-->

</style>


<h3 class="red">小タイトルにもredクラスを指定します。</h3>


<p class="red">redというクラスが指定された段落です。</p>


このようにクラスを独立的に指定する方法が便利で、多く使われます。


idセレクタ


クラスは.を利用して定義してidは#を利用して定義します。


<style type="text/css">

<!--

#red{color:red}

//-->

</style>


<p id="red">が段落のidはredです.</p>


<p>一般的な段落です.</p>


クラスとidの違いはクラスは何回も使用することができますが、

idは固有性(ユニーク)を持っているのでした文書に一度だけ使用できます。


ホームページ全体的なスタイルを一貫性があるように指定するためにはクラス(class)の使用が必須です。 

実務においてクラス(class)の使用は頻繁に行われています。


文書の内容中に重要な内容は"赤い色で表現する"との方針を決めたら上の例と同じくredというクラスを

指定した後(普通は外部CSSファイルに指定します。)重要な内容部分に<span class="red">内容</span>このように指定してくれます。


このようにクラスに指定すると、例え"赤い色がとても強く、重要な内容を表示する時は緑色にして下線を引こう"という方針が

決められてもredというクラスのスタイルだけ変えると、ホームページのすべてのページのスタイルが変更されます。


即ち、個別にスタイルを指定するよりは、クラス(class)と外部CSSファイルを利用することが文書全体の一貫性はもとより、

スタイル変更時にも作業の効率性を高めてくれます。


CSSコメント作成


cssファイルの内容が多くなると、これを管理するためにコメントを活用すればいいんです。

コメントはソース上でのみ表示されるだけ実際には何の影響がないコードです。 

cssのコメントは/*で始まって、*/で終わります。 


<style type="text/css">

<!--

/*強調したい段落にredクラスを適用する。*/

。red{color:red}

//-->

</style>


<p class="red">この段落のidはredです.</p>


<p>一般的な段落です。</p>


CSS構文が簡単な場合にはコメントが大幅に必要ではないがホームページのすべての文書に連結された外部CSSファイルの場合、

CSS構文がとても複雑です。

この場合コメントを適切に使用すれば、CSS文書の管理が楽になります。 


0 コメント