id名,class名をCSSでセレクタにする。

2015年6月13日

CSSでid名,class名をセレクタに指定する場合、
id名の前には「#(イゲタ)」、class名には「.(ドット)」を
書きます。

サンプルコードでは
id名「news」は「#news」、
class名「kijititle」「.kijititle」、「test」「.test」と
いった具合に書きます。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>HTMLのメモ</title>
    <style>
        #news{
            background-color: black;
            padding:10px;
        }
        #news p{
            color:white;
        }
        .kijititle{
            font-size:10px;
        }
        .test{
            font-size:12px;
        }  
    </style>
</head>
<body>

<div id="news">
	<p>今日のニュース</p>
	<p class="kijititle">新商品の～</p>
	<p class="test">＊＊＊株式会社が本日～</p>
</div>


</body>

</html>

<!DOCTYPE html>

<head>

<title>HTMLのメモ</title>

<style>

#news{

background-color: black;

padding:10px;

}

#news p{

color:white;

}

.kijititle{

font-size:10px;

}

.test{

font-size:12px;

}

</style>

</head>

<body>

<p>今日のニュース</p>

<p class="test">＊＊＊株式会社が本日～</p>

</div>

</body>

</html>

実行例↓

今日のニュース

新商品の～

＊＊＊株式会社が本日～

サンプルコードをみると、<head></head>内に
<style></style>ないに適用するセレクタを書いています。
今回はそういうものだという理解でお願いします。

また、#news のなかにあるpタグにCSSを適用したい場合
#news pと指定します。このような書き方を子孫セレクタと
言います。詳しい説明は後日します。