超初心者のためのホームページ作成講座
HTML CSS Dictionary Netscape Color AccessUp Links SiteMap

■ フォントに関する設定 (2)

◆文字の大きさを変える

(html file)
<div style="font-size:xx-small;">1.わたしはxx-smallです。</div>
<div style="font-size:x-small;">2.わたしはx-smallです。</div>
<div style="font-size:small;">3.わたしはsmallです。</div>
<div style="font-size:medium;">4.わたしはmediumです。</div>
<div style="font-size:large;">5.わたしはlargeです。</div>
<div style="font-size:x-large;">6.わたしはx-largeです。</div>
<div style="font-size:xx-large;">7.わたしはxx-largeです。</div>
<div style="font-size:smaller;">8.わたしはsmallerです。</div>
<div style="font-size:larger;">9.わたしはlargerです。</div>
<div style="font-size:5mm;">10.わたしは5mmです。</div>
<div style="font-size:1cm;">11.わたしは1cmです。</div>
<div style="font-size:10pt;">12.わたしは10ptです。</div>
<div style="font-size:20pt;">13.わたしは20ptです。</div>
<div style="font-size:20px;">14.わたしは20pxです。</div>
<div style="font-size:100%;">15.わたしは100%です。</div>
<div style="font-size:150%;">16.わたしは150%です。</div>

1.わたしはxx-smallです。
2.わたしはx-smallです。
3.わたしはsmallです。
4.わたしはmediumです。
5.わたしはlargeです。
6.わたしはx-largeです。
7.わたしはxx-largeです。
8.わたしはsmallerです。
9.わたしはlargerです。
10.わたしは5mmです。
11.わたしは1cmです。
12.わたしは10ptです。
13.わたしは20ptです。
14.わたしは20pxです。
15.わたしは100%です。
16.わたしは150%です。

いっぱい書いちゃったけど、基本は xx-small から xx-large の7種類。後は CSS で使える長さの単位を覚えておけばいろいろな大きさを指定できます。


◆行の高さを指定する

<div>
HTML では行の高さを指定することができませんが、CSS では line-height プロパティを使うことで簡単に指定できます。ちょっと行の高さを変えれば、行間が広がり文章が読みやすくなりますね。
</div>

HTML では行の高さを指定することができませんが、CSS では line-height プロパティを使うことで簡単に指定できます。ちょっと行の高さを変えれば、行間が広がり文章が読みやすくなりますね。

(css file)
div{ line-height:1.5; }

(html file)
<div>
HTML では行の高さを指定することができませんが、CSS では line-height プロパティを使うことで簡単に指定できます。ちょっと行の高さを変えれば、行間が広がり文章が読みやすくなりますね。
</div>

HTML では行の高さを指定することができませんが、CSS では line-height プロパティを使うことで簡単に指定できます。ちょっと行の高さを変えれば、行間が広がり文章が読みやすくなりますね。

上の例は、行の高さを指定しなかった場合です。行間が詰まっているため、数行の文章ならいいけど、長い文章になったら、非常に読みにくくなってしまいます。
下は<div>タグに対して行の高さを1.5倍に指定した場合です。単位を書かない場合は文字の大きさの倍数になります。
1.5=150%=1.5emということです。
もちろん相対的な指定だけでなく絶対的な指定もできます。文字の大きさが12ptだったら、行の高さを18ptにすれば150%と同じことになります。
ちなみに、この CSS 講座では行の高さを140%にしています。


◆フォントの種類を指定する

font-family プロパティを使って文字をどんなフォントで表示するかを指定します。値にはフォント名を直接指定するか、またはフォントの一般名を指定します。

(css file)
.gothic{ font-family:'MS Pゴシック','MS ゴシック';}
.serif{ font-family:serif; }

(html file)
<div class="gothic">そのままの君でいて欲しい</div>
<div class="serif">いつまでも君でいて欲しい</div>

そのままの君でいて欲しい
いつまでも君でいて欲しい

ちょっとわかりにくいかな。上がゴシック体で、下は明朝体っぽい字体なんだけど。。。
上の例は、フォントを直接指定しています。2つ書いているのは第1希望と第2希望です。間をカンマ(,)で区切って、第1希望、第2希望、第3希望・・・と書いていくことができます。見ている人の環境によって、第1希望のフォントがなければ、第2希望、これもなければ第3希望・・・が表示されます。第3希望くらいによく使われるフォントを入れておきましょう。
フォント名は正確に記述する必要があります。アルファベットは全角か半角か、スペースは入っているかなど、まちがって記述すると正しく表示されません。間にスペースが入るフォント名の場合には、フォント名をシングルクォーテーション(')かダブルクォーテーション(")で囲みます。スペースが入らない場合は不要です。
下の例はフォントの一般名で指定した場合です。似たような字体を5つのカテゴリーに分けてそれぞれに一般名がつけられています。

  • serif
  • sans-serif
  • cursive
  • fantasy
  • monospace

私のパソコンだと fantasy がファンタジーっぽくないなぁ。見てる人のパソコンにうまく表示されてることを期待します。
明朝体系の文字は serif に分類され、ゴシック体系の文字は sans-serif に分類されます。アルファベットでうまく表示されても、日本語では表示されない(□□□□□になってしまう ^^;)ってこともあるようです。


◆フォントに関する設定をまとめて指定する

フォントの設定に関するプロパティを説明してきましたが、font プロパティを使えば、これらをまとめて指定することができます。font プロパティの値として、これまで説明してきたフォントに関するプロパティの値だけを記述します。line-height の指定は font-size の後にスラッシュ(/)を入れて値を書きます。

(css file)
div{ font:italic normal bold 14pt/21pt serif; }

(html file)
<div>
まとめて指定するときは、font-size と font-family の値は必ず入れなければなりませんが、他は省略することができます。
</div>

まとめて指定するときは、font-size と font-family の値は必ず入れなければなりませんが、他は省略することができます。

<div style="font:14pt cursive">monochrome</div>

monochrome

この例は、font-size と font-family 以外を省略した場合です。インラインで設定しています。

タグ{font:font-style値 font-variant値 font-weight値
 font-size値 / line-height値 font-family値; }