[`yahoo` not found]
Delicious にシェア
Digg にシェア
[`evernote` not found]
LINEで送る
Pocket

 

フォントを指定しなかった場合

閲覧する環境によって、系統の異なるフォントが表示され、デザインに統一感が無くなる。

font-family プロパティ

フォントの種類を指定するプロパティ。

font-family:sans-serif; でゴシック系フォント、font-family:serif; で明朝系フォントを指定する。

具体的なフォント名、おおまかな分類名を指定できる。

  • [,](カンマ)で区切って複数指定できる。
  • より前に指定されたフォントが優先される。
  • フォント名が日本語もしくはフォント名に、スペースが含まれる場合、フォント名を、[‘](シングルクォーテーション)もしくは、[“](ダブルクォーテーション)で囲む。

font-weight プロパティ

フォントの太さを指定するプロパティ。

適用要素 全ての要素
値の継承
初期値 normal
指定可能な値 normal : 標準の太さ。
bold : 太字にする。
lighter, bolder : 基準のフォントより、1段階、細い、もしくは、太いフォントにする。
100, 200, 300, 400, 500, 600, 700, 800, 900
9段階に太さを指定。
標準=400 太字=700
inherit : 親要素と同じ値。

font-style プロパティ

フォントファミリーの中で、イタリック体、斜体を指定したい場合に用いるプロパティ。

適用要素 全ての要素
値の継承
初期値 normal
指定可能な値 normal : 標準のフォントに設定。
italic : フォントファミリーの中のイタリック体に設定。

イタリック体が無ければ、斜体に分類されるフォント、それも無い場合、標準のフォントを斜めに表示させる。

oblique : フォントファミリーの中で、oblique(斜体)に分類されるフォントに設定。




oblique に分類されるフォントが存在しない場合、標準のフォントを斜めに表示させる。

inherit : 親要素と同じ値にする。

line-height プロパティ

行の高さを指定するプロパティ。

プロパティの値は、数値、%、px、em、ex などで指定できる。

em :文字の高さを、1em とした単位。

ex :小文字のx の高さを1ex とした単位。

行間 = 行の高さ(line-height) ー 文字の高さ(font-size) となる。

適用要素 全ての要素
値の継承
初期値 normal
指定可能な値 normal : フォントに合わせて適切に設定。
実数:実数値にフォントのサイズを掛けた値が高さとして設定される。
実数+単位:その値で高さを設定する。
実数+% : フォントサイズのこの割合での高さが、設定される。
inherit : 親要素と同じ値。

font プロパティ

フォントの種類、太さ、斜体、行の高さなど、フォント関連のプロパティの値を、まとめて指定できるプロパティ。

値の指定順序

必要な値をスペースで区切って指定する。

ただし、font-size と font-family の値は、省略できない。




省略した値は、初期値が適用される。

  1. font-style の値
  2. font-weight の値
  3. font-size の値
  4. line-height の値
  5. font-family の値

font-style と font-weight の順序は、逆でも構わない。

line-height の値を指定する場合は、font-size との間を[/](スラッシュ)で区切る必要がある。

text-decoration プロパティ

テキストに、下線、上線、取り消し線を引いたり、点滅させるプロパティ。

半角スペースで区切ることにより、複数の値を同時に指定できる。
(指定順序は、自由。)

適用要素 全ての要素
値の継承 ×
初期値 none
指定可能な値 none : 通常の状態。(他の値と同時に指定できない。)
 underline : 下線を付ける。
overline : 上に線を付ける。
line-through : 取り消し線を付ける。
blink : テキストを点滅させる。
inherit : 親要素と同じ値にする。

vertical-align プロパティ

縦方向の表示位置を指定する。

指定可能な値

baseline,top,middle,bottom,text-top,text-bottom,super,sub,パーセント値、数値

 

このプロパティに関する一連の記事は、「10日でおぼえるCSS/CSS3入門教室」を大きく参考にした記事である。




CSS に限らず、この「10日でおぼえる」は、初心者を対象に、1つ1つ積み上げながら、系統的に学べる良書です。

尚、「10日でおぼえるHTML5入門教室」は、Web制作者向けというより、Webアプリケーションの制作を目的としています。

オススメ書籍

10日でおぼえるCSS/CSS3入門教室

CSS3開発者ガイド 第2版 ―モダンWebデザインのスタイル設計

(Visited 294 times, 1 visits today)
[`yahoo` not found]
Delicious にシェア
Digg にシェア
[`evernote` not found]
LINEで送る
Pocket

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください