②CSSの基礎〜セレクタ、プロパティ、値

Contents

1 スポンサーリンク
2 セレクタ
3 値
4 スポンサーリンク

セレクタ

color、font-weightまたはbackground-color。など性質を与える語になります。
例えば

body {
    background-color: black;  color: navy; }

としましょう。そうするとbody要素のバックグラウンドカラーが黒に変化します。こういったものがセレクタだと思ってください

値

CSSで使用される値には、多くのプロパティ固有の単位がありますが、いくつかの一般的な単位がいくつかのプロパティで使用されており、文字の大きさなどを決める場合はこれらを設定しないといけません。

px（などfont-size: 12px）はピクセルの単位です。
em（などfont-size: 2em）は、計算されたフォントサイズの単位です。たとえば、 “2em”は現在のフォントサイズの2倍です。
pt（などfont-size: 12pt）は、ポイントの単位であり、通常は印刷媒体などに使います。
%（などwidth: 80%）は、名前の通りパーセンテージを決めます。

この場合の「px」は、実際に必ずしもピクセル（コンピュータのディスプレイを構成する小さな四角形）を必ずしも意味するものではありません。最近のブラウザは、指定された場合でも、ユーザーで、ページのズームイン、ズームアウトすることができます。

不恰好ですが軽く作ってみました。

index.html

body{
<form action=”contactus.php” method=”post”>
<link rel=”stylesheet” href=”style.css”>
<p>Name:</p>
<p><input type=”text” name=”name” value=”Your name”></p>

<p>Species:</p>
<p><input name=”species”></p>
<!– remember: ‘type=”text”‘ isn’t actually necessary –>

<p>Comments: </p>
<p><textarea name=”comments” rows=”5″ cols=”20″>Your comments</textarea></p>

<p>Are you:</p>
<p><input type=”radio” name=”areyou” value=”male”> Male</p>
<p><input type=”radio” name=”areyou” value=”female”> Female</p>
<p><input type=”radio” name=”areyou” value=”hermaphrodite”> An hermaphrodite</p>
<p><input type=”radio” name=”areyou” value=”asexual”> Asexual</p>

</form>
}

style.css

p {p { color: red;}
a { color: blue;}

body{ background-color: black
}

貼り付けてみてみましょう！