CSSの書き方には決まり事があります。
とはいってもいきなり複雑な説明をしても？？だと思いますので、例を交えつつ簡単なものをいくつか紹介していきます。
後々CSSに慣れたら、ここで紹介したことより複雑(だけど便利)なことをご自分で勉強してみて下さい。
各部の名称
CSSでは、「どの要素のどのスタイルをどのように指定するか」というのを記述しています。
要素というのが、タグや後述するクラス・IDというもの。
どのスタイルをどのように指定するというのが、文字色を何にするか・文字の大きさをどのくらいにするか・枠線をどの太さで何色にするかなどといった具体的な指定を記述するもの。
大きく分けてこの2つから成り立っています。
CSSでは、要素部分ことをセレクタ、どのスタイルをどのように指定するという部分のことを宣言といいます。
宣言の中にはプロパティと値というものがあります。
プロパティはどのスタイルを変えたいのかという対象を記述する部分、値は具体的にどのような見た目に設定するかという値を記述する部分となります。
プロパティと値の間には:(コロン)を記述し、宣言の最後には;(セミコロン)を記述する必要があります。
また、1つのセレクタに対して複数の宣言を書くことが出来、これをまとめたものが宣言ブロックとなります。
宣言ブロックは{と}で囲みます。
宣言が1つでも{と}で囲む必要有なので注意が必要です。
宣言のグループ化
CSSでは、上でふれたように複数の宣言をまとめて宣言グループとして記述することが可能です。
1つのセレクタに対し複数の宣言をしたい時にグループ化してしまいましょう。
グループ化の方法としては、{と}で複数の宣言を囲むだけです。
以下に、同じ意味となる2つのサンプルを挙げてみます。
例)リンクの色を赤くして、リンクの下線をなくす。
a {color:red;}
a {text-decoration:none;}
a {
color:red;
text-decoration:none;
}
セレクタの種類
CSSのセレクタには、大きく分けて3種類あります。
- タグ
- クラス
- ID
タグは普通のh1やa等のタグのこと。セレクタにタグを書くと、そのCSSが適用される範囲にあるそのタグ全てに影響します。
クラスとIDは特定の箇所にのみその定義を適用したい場合に使用します。
以下に例を示します。
<body>
<h1 id=”midashi”>ページタイトル</h1>
<p>
クラスもIDも指定されていないpタグ。この中の文字は緑色になります。
</p>
<p class=”blue”>
クラス1回目。この中の文字は青色になります。
</p>
<p class=”blue”>
クラス2回目。この中の文字も青色になります。
</p>
</body>
p {color:green;}
.blue {color:blue;}
#midashi {color:white; background-color:black;}
上の記述例の場合、まずpタグの中身は全て緑色文字になります。
midashiというIDを指定されたh1タグは、黒色背景・白色文字になります。
blueというクラスを指定されたpタグのみは、青色文字になります。
ここで気になるのがクラスとIDの違いです。
一見差が無いように見えるのですが、大きく違う点があります。
それは、IDは1ページ内に1回しか使えないのに対しクラスはページ内に何回も使うことが出来ます。
その為、IDはレイアウト用や絶対に1回しか出てこないもの(タイトルなど)に使用し、見た目を変えるのには主にクラスを使います。
よく分からないうちは、全てクラスにしておけば大きな問題は無いので安心です。