468801 ランダム
 HOME | DIARY | PROFILE 【フォローする】 【ログイン】

れびうぶろぐ @楽天ブログ

れびうぶろぐ @楽天ブログ

CSS内の記述について


3.CSS内の記述について

01.CSSとHTMLについて 02.HTML内の記述について 03.CSS内の記述について 04.CSSでよく使うタグ
05.テキストに関するプロパティ 06.フォントに関するプロパティ 07. 08.
09. 10. 11. 12.

ここで書いてる順番は意味はありませんので。
ただ思いついて書いてる順番です。

1.書式
2.コメントの挿入
3.class
4.タグの親子関係によるスタイルの設定


1.書式

h1{color:red}

このような記述があった場合、全体を宣言、h1の部分をセレクタ
colorの部分をプロパティ、redの部分をと呼びます。
セレクタはスタイルの対象のタグ。
プロパティはスタイルの性質。
はプロパティごとの値。
です。

もし、一つのセレクタに対し複数のプロパティと値を記述したいなら

h1{
color:red;
font-size:12pt
}

のように;(セミコロン)で区切って下さい。
ちなみに

h1{color:red;font-size:12pt}

このように一行で書いても問題ないのですが読みやすさを考えた場合、複数行に分けて書いた方がいいと思います。

また、複数のセレクタに同一のスタイルを適用することも出来ます。

h1,h2{color:red;font-size:12pt}

このように,で区切ってタグを追加します。


2.コメントの挿入

CSSファイル内でどんな処理をしてるか自分が後でわかりやすくするために
コメントを入れることが出来ます。

/*ここにコメントを入れます*/



3.class

仮に<p>というタグ(段落を表すタグ)を使っていたとします。

p{
color:red
}

だけどある段落だけフォントの色などを変えたいと思うことなどがありますよね。
そんな場合はクラスという識別子を割り振って対応します。

クラス名をsampleと仮にしておきます。
HTML内の記述
<p class="sample">文章</p>

CSS内の記述
p.sample{
color:pink
}

このようにクラスを利用すれば同じタグで違う効果を使うことが出来ます。


4.タグの親子関係によるスタイルの設定

これは簡単に言うと、ある特定の条件下でしかスタイルが有効にならない方法です。

HTML内の記述
<div><p>文章</p></div>

CSS内の記述
div p{
color:red
}

これは<div>タグの中の<p>タグにしか効果がありません。
他で使ってる<p>タグには何の影響もありません。
ちなみにdivとpの間は半角のスペースで区切ります。
ここではdivとpで説明していますがもちろん組み合わせはいろいろあります。



© Rakuten Group, Inc.
X