CSS 基礎チュートリアル

CSS 盒子モデル

CSS3基礎教程

CSS 参考マニュアル

CSS @規則(RULES)

CSS Fonts(字体)

CSSフォント属性は、フォントにさまざまなスタイルを設定することができます。例えば、テキストのフォントシリース、サイズ、太字、バージョンなどです。

フォント属性

CSSスタイルでテキストコンテンツのフォントを設定する場合、以下の属性が提供されます：font-family、font-style、font-variant、font-フォントの太さおよびfont-;。次のセクションでは、これらの属性を順に紹介します。

フォントシリース

このfont-familyCSS属性は、テキストコンテンツのフォントシリース名と、フォントを使用する優先順位リストを設定することができます。

このfont-family属性には、複数のフォント名をバックアップフォント。まず、欲しいフォントをリストアップし、すべてのフォント（利用できない場合）をリストアップします。ブラウザが最初のフォントをサポートしない場合、次のフォントを試みます。フォントシリースの宣言は以下のようになります：

例

p　{
　　　　font-family:　"Times　New　Roman",　Times,　serif;
}

テストを見て‹/›

注：もしフォントシリースの名前が一つの単語を超える場合、それを引用符で囲む必要があります、例えば"Times New Roman"、"Courier New"、"Trebuchet MS"など。

一般的なフォントの組み合わせに関する情報をさらに学ぶために；セキュリティフォントを確認してください。

フォントスタイル

通じてfont-style属性で要素のテキストコンテンツのフォントスタイルを設定します。

この属性の可能な値は：normal、italicまたはoblique。

例

p.one　{
　　　　font-スタイル: normal;
}
p.two　{
　　　　font-スタイル: italic;
}
p.three　{
　　　　font-スタイル: oblique;
}

テストを見て‹/›

注意：最初に見たときは、斜体と斜体スタイルが同じように見えますが、異なります。このitalicスタイルを使用する斜体バージョンのフォントであり、一方でoblique一方でテキストは単なる倾斜のバージョン通常のフォント。

フォントサイズ

font-;属性で要素のテキストコンテンツのフォントサイズを設定します。

フォントサイズ値を指定する方法がいくつかあります。例えば、キーワード、ピクセル、emsを使用できます。

キーワードでフォントサイズを設定する

body要素にキーワードフォントサイズを設定することで、ページの他の場所に相対的なフォントサイズを設定することができます。これにより、全体のページでフォントを簡単に縮尺できます。以下のキーワードのいずれかで絶対的なサイズを指定します：xx-small、x-small、small、中間、大きい、x-大きい、xx-大きい。

相対的なサイズは以下のキーワードのいずれかで指定されます：小さい、、大きい。

例

、など。以下の例を参照してください：
　　　　font-サイズ: 大;
}
h1　{
　　　　font-サイズ: 大きい;
}
p　{
　　　　font-サイズ: 小さい;
}

テストを見て‹/›

ピクセルでフォントサイズを設定する

ピクセル精度が必要な場合、ピクセル値（例えば12ピクセル、16ピクセルなど）フォントサイズを設定することは良い選択ですが、結果はブラウザによって異なることがあります。なぜなら、彼らは似たような効果を実現するために異なるアルゴリズムを使用するからです。

例

h1　{
　　　　font-size　24ピクセル;
}
p　{
　　　　font-size　14ピクセル;
}

テストを見て‹/›

ピクセル単位のフォントサイズを定義することで使用できますが、ユーザーがブラウザの設定でフォントサイズを変更できないため、これは柔軟ではありません。例えば、視力が悪いユーザーは指定されたサイズより大きいサイズを設定したいかもしれません。したがって、デザインを含むページを作成する場合は、フォントサイズにピクセル値を使用することを避けるべきです。

px使用できますズームツールすべてのブラウザでテキストサイズを調整できます。しかし、この機能はテキストだけでなく、整个ページのサイズを調整します。

エムでフォントサイズを設定する

px=ユニットは親要素のフォントサイズを指します。

px=値のサイズは動的に定義されます。font-;属性の時、an px=親要素に適用されるフォントサイズと同じです。

もしfont-;body要素にaを設定します20ピクセルの場合、1em=20ピクセルおよび2em=40ピクセル。

ページ上のどこかにフォントサイズを設定していない場合、それはブラウザのデフォルト値であり、それは16ピクセル。したがって、デフォルトでは1em=16em　=および2em=32em　=。

例

h1　{
　　　　font-size　2size:　　　　/*　32em　=/16値はこのようにして2px=　*/
}
p　{
　　　　font-size:　0.875size:　　　　/*　14em　=/16px=0.875px=　*/
}

テストを見て‹/›

警告： IE6およびIE7サイズ調整後のテキストのサイズを拡大します。（リリース前に最終テストを行ってください）。

パーセンテージとEmの組み合わせを使用します

すべてのブラウザで同様の効果を実現するソリューションはfont-;body要素に対してデフォルトのパーセンテージを設定します。一般的な技術はfont-;bodyの62em;5%（つまりデフォルト16pxの62em;5％）に等しい10pxまたは0.625em

今では、font-;emユニットを使用するすべての要素を、記憶しやすい変換で使用する方法em　=通じて10通じて10値はこのようにして1px=、12値はこのようにして1em;2px=、14値はこのようにして1em;4px=、16値はこのようにして1em;6px=em

例

、など。以下の例を参照してください：
　　　　font-size　62em;5body　{　　　　/*　font-;　1.　10em　=　*/
}
p　{
　　　　font-size　1em;6size:　　　　/*　1em;6.　16em　=　*/
}

テストを見て‹/›

pxヒント：の3万国仮想網絡（WC）

推奨はEMまたはパーセンテージ（%）の値を使用し、より強力で拡張可能なレイアウトを作成することです。

font-フォントの太さweight

font-属性はフォントの太さまたは太字を指定します。normal、bold、bolder、lighter、100、200、300、400、500、600、700、800、900およびinherit。

style属性の可能な値は以下の通りです：100- 900数値400指定されたフォントの太さを示す、各数字は前のものよりも暗い太さを示します。normal＆700同じbold。
のbolderおよびlighter、他の値は絶対的なフォントウェイトであり、それは継承フォントの太さに対して相対的です。

例

p　{
　　　　font-weight:　bold;
}

テストを見て‹/›

ほとんどのフォントは限られたウェイトで使用できます。通常、それらは通常および粗体表示。指定されたウェイトでフォントが利用できない場合、最も近いウェイトの代替フォントを選択します。

フォント変体

font-variant属性は特別な大文字形式でテキストを表示することができます。

小文字大文字または小文字大文字通常の大文字と少し異なる、通常の大文字では、小文字は対応する大文字の小さなバージョンとして表示されます。

font-variant属性の値は以下のとおりですnormal、small-capsおよびinherit。

例

p　{
　　　　font-variant:　small-caps;
}

テストを見て‹/›

CSS Text(文本)CSS Background(背景)