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

スポンサーリンク

本当にわからないとこがあった場合一人では解決できません。
『teratail』とはエンジニア特化型のQ&Aサイトです。 すべてのエンジニアさんが抱えている悩みを共有して 解決するための質問サイトです
無料なのでまずは登録して使ってみてください。メールアドレスだけで登録可能です ----------------------------------------------------------------------------------------

セレクタ

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>

<p><input type=”submit”></p>

</form>
}

style.css

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

body{ background-color: black
}

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

こうなれば成功です!

前のページCSSの基礎〜CSSの使い方

次のページ③CSSの基礎〜色






スポンサーリンク

プログラミングは独学からは挫折の可能性が高いです。まずは無料体験ができる
コードキャンプが本当におすすめ。無料体験でわからないところを聞きましょう。
転職補助つき。カリキュラム終了後に転職紹介をしてくれます。