ホームページ制作の際のCSSの記述方法

ホームページ制作の際のCSSの記述方法

実際にホームページ制作をする為のCSSを作成するにはどのような記述をすれば良いのでしょう。

 

まず、拡張子を.cssとしたファイルを用意し、そのファイル内にCSSの記述を行っていきます。
CSSは主にタグ、class、idに対して指定をすることになってきます。
記述の方法としては基本的に名前{ プロパティ: 値; }といったように、スタイルを指定したいタグ名、クラス名、ID名に対して、
その部分の何をどのようにしたいのか、といった風にプロパティと値を記述することでスタイルを指定していく形になります。
この際、クラスの場合には『.クラス名』IDの場合には『#ID名』といったように名前の記述をします。
1つのタグ、クラス、IDに対して複数のスタイルを適用したい場合には名前{プロパティ1: 値1; プロパティ2: 値2; }
と言ったようにスタイルを1つずつ『;』で区切って記述していくようにします。

 

また、異なる複数のタグに対して同じスタイルの指定をしたいといった場合には、
指定したいタグ1つ1つに対して同じ記述をするといったやり方ではなく、
タグ1,タグ2,タグ3{ プロパティ: 値;}といったように指定したい複数のタグ名を『,』で区切ることでまとめてスタイルを指定することも可能です。

 

その他にも、タグを入れ子にして指定することもできます。その際の記述はタグ1 タグ2{ プロパティ: 値; }といった形になり、
タグ1に囲まれたタグ2に対してスタイルを指定するといった指定となります。
この入れ子の形はクラスやIDの場合にも指定することができます。
クラスの場合には.クラス名 タグ名{プロパティ: 値;}と記述することでクラスを指定した部分の中にあるそのタグに対しての指定、
逆にタグ名 .クラス名{プロパティ:値;}とすることでそのタグに指定したクラスのみに対してスタイルが適用されるといった形になります。
.クラスの部分を#IDにすることでIDでも同じように入れ子の指定をすることが可能です。

 

CSSを記述する際に記述方法に加えて理解しておかなければならないのが、クラスとIDの違いです。
クラスとIDの最も大きな違いとしては、1ページの中で同じクラスは何度でも使用できるのに対して、
同じIDを2回以上使用することはできないといった点があります。
そのため、IDはページ中に1度しか出てこないheadなどのまとまりに対して指定を行う時に使用し、
クラスはその他の文字の位置や文字色の指定など何度も使用するものの場合に使用するように使い分けるようにしましょう。