第2回 CSSの基本的な書き方 - ブロガー向けCSS入門
この記事は以下のブロガー対象としています。
- ブログをカスタマイズしたい
- 全くCSSの知識が無い
こんにちはnasustです。
今回はCSSの基本的な書き方を解説します。 CSSの書き方は二種類あります。
- CSSのファイルまたはhtmlのstyleタグの中に書く場合
- htmlのタグのstyle属性に書く場合
この二種類について解説します。
CSSのファイルまたはhtmlのstyleタグの中に書く場合
名前 又は 選択方法{ プロパティ名 : 値; }
実例:
.font-color-red{ color: red; }
このように名前を書いて { }
で囲い、1行毎にプロパティ名 : 値;
を書きます。
{ }
はブロックと呼びます。この中にデザインの内容を書いていきます。
プロパティはcolor
などのフォントの色を表す名前を指定します。値はred
などプロパティの名前に合わせた値を指定します。
プロパティは、沢山の種類があります。それに付いては別の記事で解説します。
そして名前は、クラス名とIDの二種類があります。
クラス名
クラス名とは、{ }
で囲まれたスタイルの塊の種類に名前を付けたものです。
そして名前の先頭に .
を付けます。
例:
<!DOCTYPE html> <html lang="ja"> <head> <style> .font-color-red{ color:red; } </style> </head> <body> <p>おはようございます</p> <p class="font-color-red">こんにちは</p> </body> </html>
この例のようにhtmlのタグのclass属性にfont-color-red
が記述されています。
これは、.font-color-red
というクラスのスタイルが<p class="font-color-red">
というタグに適用されるということです。
分かりやすく述べますと タグにclass="font-color-red"
と指定されていれば、フォントの色が赤くなります。
何故こういう言い回しをするかというと、名前はルールだからです。CSSは「こういうルールだからスタイルを適用するよ」という動きをするのです。
つまり、
スタイルを適用するルール{ プロパティ名 : 値; }
という事です。ルールに当てはまるhtmlのタグにスタイルを適用するのです。
htmlの例では「pタグにfont-color-redという名前のルールに当たるからスタイルを適用するよ」ということです。
規格では選択子という用語です。カタカナですとセレクターと呼びます。良くCSSの記事でセレクターと出てくるのは、この事を指しています。
ID
IDというのは先ほどのクラス名と同じように名前を付けます。ただし、これはhtmlで出現する名前が必ず一個、つまりユニークである事なので、スタイルが一つだけ適用されます。
名前のつけ方は、先頭に#
を付けます。
例:
<!DOCTYPE html> <html lang="ja"> <head> <style> #greeting{ background-color: blue; } .font-color-red{ color:red; } </style> </head> <body> <div id="greeting"> <p>おはようございます</p> <p class="font-color-red">こんにちは</p> </div> </body> </html>
この例では、挨拶の文章を囲んだdivタグの背景が青になります。 このように指定されたIDをが付けられたタグにスタイルが適用されます。
htmlのタグのstyle属性に書く場合
例:
<!DOCTYPE html> <html lang="ja"> <head> <body> <p>おはようございます</p> <p style="color:red;">こんにちは</p> </body> </html>
このようにstyle="プロパティ名:値;"
と書きます。複数のプロパティを適用したい場合は、
style="プロパティ名:値;プロパティ名:値;プロパティ名:値;⋯"
と;
で区切って書いていきます。
このstyleタグで書かれたデザインは、クラス名やIDで適用されるより優先されるので、仮に指定されていても上書きできます。
ブログの場合は、テンプレートで記事のデザインが決まっていますが、直接、htmlタグを書いてstyle属性でデザインを上書きすることが出来ます。
まとめ
CSSの書き方は二種類あります。
- CSSのファイルまたはhtmlのstyleタグの中に書く場合
- スタイルを適用するルールを書く
- スタイルの名前はクラスとIDがある
- スタイルを適用するルールを書く
- htmlのタグのstyle属性に書く場合
- スタイルのルールより優先できるので上書きできる。
次回
第3回 基本的なセレクタの解説 - CSS Level 1 - ブロガー向けCSS入門 - nasust life blog |