デルgame_468x60   Challenge HP
HP作成 スタイルシート apeskin サーバー HP作成ソフト アフィリエイト リンク BBS top
スタイルシート

CSSリファレンス


IEツールバー
Googleツールバー
Infoseekツールバー
Yahoo!ツールバー
Windowsをお使いでしたら、IEツールバーを利用すると検索に便利。 ブラウザに組み込まれ、キーワード検索できます。




■ font-size
長さの指定

一般的なフォントサイズの指定です。単位には幾つかありますが px / pt がよく使われます。

font-size:10px  font-size:10px  font-size:11px  font-size:12px  font-size:13px  font-size:14px 
font-size:10pt  font-size:11pt  font-size:12pt  font-size:13pt  font-size:14pt

おすすめの単位はテーブルなどの幅にもよく使われる px です。
% と em の指定

body などの文字サイズを基準にした%による指定もできます。100%がノーマルです。
このページは 14px になっていますので、それに対しての割合で表示されます。

font-size:80%  font-size:90%  font-size:100%  font-size:110%  font-size:120%

font-size:0.8em  font-size:0.9em  font-size:1.0em  font-size:1.1em  font-size:1.2em

IEでも文字サイズは固定されませんので、サイトを見る人を重点に置いた単位と言えます。 em はお勧めの単位です。
キーワードの指定 xx-small x-small small medium large x-large xx-large

body などの文字サイズを基準にしたキーワードによる指定もできます。
このページは 14px になっていますので、それに対しての割合で表示されます。
この場合xx-smallから1.5倍づつ大きくなっていきます。

font-size:xx-small
font-size:x-small
font-size:small
font-size:medium
font-size:large
font-size:x-large
font-size:xx-large
便利な使い方

例えばテーブルの td の文字サイズを 14px に指定して、テーブル内の文字サイズを大きくしたり小さくする場合があるなら、 その部分を 90% や 110% などにしておくと、td のサイズを 13px に変更した時、 それに合わせて小さくしたり大きくした文字も変更されます。つまり変更する時の手間が減るわけです。 キーワードも同じように使えます。
■ font-style
イタリック体・斜体 normal italic oblique

文字をイタリック体・斜体・ノーマルで表示するものです。

normal→ font-style:normal  italic→ font-style:italic  oblique→ font-style:oblique

italicとobliqueは同じ表示ですね。しかし本来は違う事になっています。
文字の斜体は強調などに使われますが、個人的には読み難いので好きではありません。
■ font-weight
文字の太さ normal bold bolder lighter 100 200 300 400 500 600 700 800 900

文字を太くするもので、normal=400 bold=700 です。

font-weight:normal  font-weight:bold  font-weight:bolder  font-weight:lighter
font-weight:100  font-weight:200  font-weight:300  font-weight:400  font-weight:500
font-weight:600  font-weight:700  font-weight:800  font-weight:900

現在のブラウザでは 100〜900 で細かく指定してもnormalとbold の2通りしか表示できないので、 normalまたは400 と boldまたは700 を使い分ければ良いようです。
■ font-family
文字のフォント名を指定する

フォントの種類は豊富です。しかしPCに入っているフォントしか表示する事が出来ません。 従って面白いフォントを見つけてきてそのフォントを指定しても、一般的な訪問者にはそのフォントで表示されません。 またMacとWindowsでもフォントが違うので、フォントを指定するのは以外に難しいです。

font-family:Arial  font-family:Times New Roman

英数字では上のようにMacとWindowsの共通フォントあります。
またフォントを指定する時は、複数入れておく事も出来ます。例えばMac用とWindows用など。

font-family:'MS P明朝',細明朝体

またMS P明朝のようにフォントの中にスペースのあるものは " や ' で囲います。
■ font-variant
英字の大文字を小文字サイズにする normal small-caps

アルファベットの大文字を小文字サイズで表示する利点は分かりません。

normal → ABCDEFG abcdefg
small-caps → ABCDEFG abcdefg

small-caps の方も ABCDEFG abcdefg と書きましたが、少し小さめの大文字になります。
■ font
フォント系属性を一括指定

font-style font-weight font-variant font-size line-height font-family 
これらを一括してするのが font 属性。属性の値を入れていきます。

しかしこれにはルールがあって、「省略出来ないと出来るもの」と「書く順番」です。

省略できないもの  font-size と font-family

書き込む順番
1.font-style font-weight font-variant / この3つから使うものを書く
2.font-size line-height / line-heightを入れる場合はfont-sizeの後に/を入れて書く。
3.font-family  /フォントを複数指定する場合は、 , で区切って入れる。


font:italic bold normal 14px/18px "MS Pゴシック",平成角ゴシック,
font は便利なのですが、必ずフォント名を入れるのが面倒なので、使い勝手が悪いです。 しかし複数を1度に取り込めるので、役に立つ事も多々あるでしょう。


font:bold 14px/18px "MS Pゴシック",平成角ゴシック,
font は便利なのですが、必ずフォント名を入れるのが面倒なので、使い勝手が悪いです。 しかし複数を1度に取り込めるので、役に立つ事も多々あるでしょう。


font:16px "MS Pゴシック",平成角ゴシック,
font は便利なのですが、必ずフォント名を入れるのが面倒なので、使い勝手が悪いです。 しかし複数を1度に取り込めるので、役に立つ事も多々あるでしょう。
 you style Copyright (C) 2003-2004 Challenge HP, All rights reserved.