テキストの大きさを調節する font-size属性

今度はテキストの大きさを調節する方法について調べましょう。
テキストの大きさを適用するために使うCSSの属性はfont-sizeです。

font-size属性の使い方

適用するタグ（セレクター）{font-size:バリュー}

これは使うためにはheadタグの内にstyleタグを作ってその内に書きます、下のように、
bodyタグの内にタグを入力して、headタグの内にあるstyleタグの内に適用するタグを入力してから使いたいCSS属性とそのバリューを書きます。

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS::everdevel - テキストの大きさを調節しよう！</title>
<style>
p{font-size:30px}
</style>
</head>
<body>
    <p>Welcome to everdevel</p>
</body>
</html>

結果

では、今度はいろいろのタグを使って調べましょう。

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS::everdevel - テキストの大きさを調節しよう！</title>
<style>
p{font-size:30px}
</style>
</head>
<body>
    <p>Welcome to everdevel</p>
    <b>Welcome to everdevel</b>
    <i>Welcome to everdevel</i>
</body>
</html>

結果

上のコードはpタグ、bタグ、iタグを使って、pタグだけfont-size属性を使ったので、pタグだけ大きさが違います。
ではもっと調べましょう、　下のコードのように　２個以上の同じタグはある場合、一つだけ大きさを調節するためにはどうするのかについて調べましょう。

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS::everdevel - テキストの大きさを調節しよう！</title>
<style>
p{font-size:30px}
</style>
</head>
<body>
    <p>Welcome to everdevel</p>
    <p>Welcome to everdevel</p>
    <p>Welcome to everdevel</p>
</body>
</html>

結果

上のコードの結果を見るとpタグを使ったテキスト全部の大きさが１5pxが適用されましたが、
これはセレクタでタグを使ったからです。
では、次の講座でこんな場合どうすればいいかにして調べましょう。

次のコンテンツは
CSSのセレクター class

ご覧くださってありがとうございます。お問い合わせと間違い説明はある場合、下にあるコメントにお願いいたします。

新しい窓を開き

講義に戻る。