- オススメCSS解説本
- CSSのメリット
- 利用手順
- HTMLとCSSの関係
- スタイル設定
- 継承
- カスケード
- 疑似クラスと疑似要素
- マージンとパディング
- 数値単位
- メニュー作成
- コンテンツ作成
- タイトル作成
CSSのスタイル設定 CSSファイルに記述！どんなふうに書くの？
コメントの記述
CSSファイルにコメントを記述します。どのパーツのスタイルなのかを分かりやすくするため等に、コメントが使われます。記述方法は、下記の通りです。/**/で囲まれた部分は、読み込まれません。
/*ここにコメントを書く*/
と、記述します。実際に、CSSファイル内では、下記のようになります。
/*ヘッダー部分*/
h1{
width:550px;
height:50px;
line-height:50px;
color;#ffffff;
background-color:#FF0000;
text-aline:center;
font-size:25px;
margin:0;
padding:0;
}
基本形式
基本形式は、下記の通りです。
p { color ： red ； }
それぞれの部分に名前が付いています。
セレクタ { 宣言 }
pの部分をセレクタと言い、スタイルを適用する対象です。｛ ｝内の部分の color ： red ； を宣言と言い、適用するスタイル指定の内容です。さらに、この宣言は、２つに分けることが出来ます。
{ 宣言 } = { プロパティ ： 値 ； }
colorの部分をプロパティと言い、redの部分を値と言います。まとめると、
セレクタ { プロパティ ： 値 ； }
と、なるわけです。
複数のセレクタへ指定したい時
例えば、p以外の要素であるh1〜h3にも同じスタイル指定をしたい時、
h1，h2，h3，p {
background-color ： #ffffff ；
}
と、記述します。
ここで、注意すべきは、それぞれの要素の間を「，」で区切ることです。これを忘れると、スタイル指定した意味がありません。
複数の宣言を指定したい時
例えば、pに対し、カラー以外に、フォントサイズや、ラインヘイト（行間）を宣言したい時、
p { color ： red ； }
p { font-size ： 12px ； }
p { line-height ： 20px ； }
とすると、あまりにも無駄です。この場合、次のような書き方をします。
p { color ： red ；
font-size ： 12px ；
line-height ： 20px ；
}
ここで、注意すべきは、それぞれの宣言の間を「；」で区切ることです。これを忘れると、スタイル指定した意味がありません。
セレクタ・宣言共に、複数で指定したい時
step３とstep４の合体です。
h1，h2，h3，p {
background-color ： #ffffff ；
color ： red ；
font-size ： 12px ；
line-height ： 20px ；
}
と、なります。
IDセレクタについて
指定したID属性の値を持つ、特定の要素にスタイルを指定することが出来ます。
基本形式は、下記の通りです。
p # style { color ： red ； }
セレクタの赤字部分が、今までとは違う所です。構造は、下記のようになっています。
要素名 #ID名 { プロパティ ： 値 ； }
（ #ID名 { プロパティ ： 値 ； } ）
「要素名#ID名」の部分をIDセレクタと言います。ID名は、任意で自由に付けることが出来ます。先頭に要素名を指定した場合、その要素に対してのみ有効になります。要素名を特定しない場合は、HTML上で、どの要素からでも有効にすることが出来ます。
要素名 #ID名 { プロパティ ： 値 ； } は、CSSファイル上での記述方法でした。次に、HTML上での書き方を説明します。
■ CSSファイル上 ） p # style { color ： red ； }
と、記述されたものは、
■ HTML上 ） <p id="style">ここは、赤字で表示されます</p>
と、記述します。
IDは、唯一のものとして特定される識別子のため、１ページのHTML内で同じid属性(id="ID名")を複数設定することは、出来ません。
クラスセレクタについて
指定したclass属性の値を持つ、複数の要素にスタイルを指定することが出来ます。
基本形式は、下記の通りです。
p ．style { color ： red ； }
セレクタの赤字部分が、今までとは違う所です。構造は、下記のようになっています。
要素名 ．クラス名 { プロパティ ： 値 ； }
（ ．クラス名 { プロパティ ： 値 ； } ）
「要素名．クラス名」の部分をクラスセレクタと言います。クラス名は、任意で自由に付けることが出来ます。先頭に要素名を指定した場合、その要素に対してのみ有効になります。要素名を特定しない場合は、HTML上で、どの要素からでも有効にすることが出来ます。
要素名 ．クラス名 { プロパティ ： 値 ； } は、CSSファイル上での記述方法でした。次に、HTML上での書き方を説明します。
■ CSSファイル上 ） p ．style { color ： red ； }
と、記述されたものは、
■ HTML上 ） <p class="style">ここは、赤字で表示されます</p>
と、記述します。
クラスは、IDとは違って、１ページのHTML内で同じクラス属性(class="クラス名")を複数設定することが、出来ます。