happy cat image

tomodevel

皆んなのウェブ入門, ともでぃべる

テキストの大きさを調節する 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::tomodevel - テキストの大きさを調節しよう!</title>
<style>
p{font-size:30px}
</style>
</head>
<body>
    <p>Welcome to Beanscent</p>
</body>
</html>

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

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

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

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

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

講座に戻り