フォントサイズを指定する

font-sizeプロパティでフォントサイズを指定

ホームページの文字フォン卜のサイズを指定す るのはfont-sizeプロパティです。値には単位を付けた数値、または大きさを表すキー ワードを指定します。ここで は8 ポイントに指定してみます。

CSS では font-family プロパティを使ってフォントの種類を指定することができます。ただし、指定した種類のフォントが、表示する側のパソコンにインストールされていないと指定が無効になります。そこで、複数のフォント名の候 補をr .Jで区切って列挙しておきます。個々のフォント名を指定する代わりに、衰のようなグループ名を指定するこ ともできます。一般的には、グループ名は量後に指定します。フォント名に半角スペースが含まれる場合は[“]か[‘]でフォント名をくくる必要があります。M S明朝がインストールされていれば、 M S明朝で表示され、なければ、CenturyArialの願、それらもインストールされていなければ [Serif] に属するフォントを使って表示されます。文字を斜体にするには font-style プロパティを [italic] に設定します。なおSafariでは欧文 フォントにのみ設定が可能です。

font-wightプ ロパティを[bold]に設定

フォントの太さを指定するのは font-weight プ ロパティです。これには [100] [200] [300] •• [900] 9種類の数値が指定でき、 900が一番太 いことを意味します。しかし、現実的には 9 種類の太さを備えたフォントはなく、あまり実用 的な指定方法ではありません。そこで、太字に するためのキーワード [bold] を指定して太字 にするのが実際的です。ほかにも下表の値が 設定できます。

テキストを強調する

強調したい箇所を表すタグがem タグと strong タグで、 strongタグのほうがより強い強調を表 します。これらのタグを単純に指定した場合、 em タグが斜体、 strong タグが太字で表されま すが、いろいろなスタイルと組み合わせること によって、視覚的な強調の効果を高めることが できます。サンプルでは strong タグに文字色 を適用しています。

テキストの行間を指定するのは line-heightプロパティです。より正確にいうと、 line-heightプロパティは行の高さ(文 字の上端から次の行の文字の上端までの距離) を指定するもので、これを大きく取れば行闘が大きく空くわけです。 値には具体的な長さを単位付きで指定する方法と、フォン卜のサイズ (font-size プロパティの値) に対する比率で指定 する方法があります。比率で指定する場合はフォン卜サイズに対して何倍かを示す整数かまたはパーセンテージで指定します。また、キーワード [normal] を指定すると、ブラウザの設定によりもっとも適当とされる行間に設 定されます。

font-stylefont-weightfont-variantfont-sizeline-heightfont-familyの各プロパティはfontプロパティ 1つで設定す ることができます。フォン卜の種類(font-familyプロパティの設定値) を最後に設定し、大きさ (font-size)、行間(line-height) は大きさ/ 行間というように、 [/] を聞に入れてフォン卜の種類の直前で指定します。行聞は省略可で、その場 合は [/] も省略します。斜体 (font-style)、スモールキャピタル (font-variant)、太さ (font-weight) はその前に順不同で 指定でき、省略も可能です。サンプルでは[斜体][スモールキャピタル] [ 太字][サイズ24ポイント][行間 1.2倍][Arialフォン卜]を指定しています。

おすすめ:ホームページ作成のWEB制作会社 東京WEBメーカー