HTMLとCSSの旅(5)

文字の大きさを変えてみる

前回はテキストに色をつける方法を紹介しました。

次は、文字の大きさを変えてみようと思います。

次のコードをみてください。

HTML

<p>テキスト</p>

CSS

p {
   font-size: 10px;
}

これを実行すると. . .

テキスト

こんな風に大きさを変えることができました。

「font-size: 大きさ;」となるように任意の数値を入れてください。単位px(ピクセル)を忘れないよう気をつけてください。

文字の種類を変えてみる

CSSでテキストの文字の種類を変えることができます。明朝体やゴシック体など。

実際にコードをみていきましょう。

HTML

<h3>ABCD</h3>

CSS

h3 {
   font-family: "Impact";
}

これを実行すると. . .

ABCD

fontが変わりましたね。

「font-family: 書体;」と指定することによって文字の種類を変えることができました。

書体一覧はこちら

今までで、色、大きさ、文字の種類の変え方を書いてきましたが、これらを一つのテキストに行う場合どうすればいいのでしょうか。

次のコードをみてください

HTML

<p>ABCD</p>

CSS

p {
   color: red;
   font-size: 20px;
   font-family: "Impact";
}

これを実行すると. . .

ABCD

このように今までやったことをまとめることができます。