CSSを書く準備
CSSはCSSファイル(xxx.css)に記述します。
記述したCSSファイルをHTMLに読み込ませることにより、内容が反映されるようになります。
CSSの書き方基本
CSSは下記のような形式で記述します。
＜課題用ベースHTML＞
メロンパンナちゃんのお姉ちゃんはロールパンナちゃんです。
STEP1
【ロールパンナちゃん】の文字色を赤にするには下記のように記述します。
span {
color: red;
}
結果
メロンパンナちゃんのお姉ちゃんはロールパンナちゃんです。
STEP2
さらに太字にするには下記のように記述します。
span {
color: red;
font-weight: bold;
}
結果
メロンパンナちゃんのお姉ちゃんはロールパンナちゃんです。
STEP3
【メロンパンナちゃん】も同じスタイルを当てるには、ベースHTMLの【メロンパンナちゃん】にもspanタグを当てます。
span {
color: red;
font-weight: bold;
}
結果
メロンパンナちゃんのお姉ちゃんはロールパンナちゃんです。
STEP4
【メロンパンナちゃん】と【ロールパンナちゃん】にそれぞれ違うスタイルを当てるには、spanタグにclass属性を振って、クラスセレクタでスタイルを指定します。
.melon {
color: green;
font-weight: bold;
}
.roll {
color: blue;
font-weight: bold;
}
結果
メロンパンナちゃんのお姉ちゃんはロールパンナちゃんです。
STEP5
font-weight:boldはspanタグ共通のスタイルなので、spanタグのスタイルとして書き出すこともできます。
span {
font-weight: bold;
}
.melon {
color: green;
}
.roll {
color: blue;
}
結果
メロンパンナちゃんのお姉ちゃんはロールパンナちゃんです。
STEP6
上記HTMLでジャムおじさんを赤字にするけど太字にしないためには、より複雑な【CSSセレクタ】の記述が必要です。
/* p1クラスの中のspanタグのみ対象とする */
.p1 span {
font-weight: bold;
}
.melon {
color: green;
}
.roll {
color: blue;
}
.jam{
color: red;
}
結果
メロンパンナちゃんのお姉ちゃんはロールパンナちゃんです。
ジャムおじさんは人間ではなく妖精です。
STEP7
STEP6と同様のスタイルで【スタイルを上書き】で指定することもできます。
span {
font-weight: bold;
}
.melon {
color: green;
}
.roll {
color: blue;
}
.jam{
color: red;
/* 上書きで太字を解除 */
font-weight: normal;
}
結果
メロンパンナちゃんのお姉ちゃんはロールパンナちゃんです。
ジャムおじさんは人間ではなく妖精です。