CSS
無料お問合せはこちらから TEL 075-257-4588 営業時間 AM10:00〜PM7:00
| ホーム |
| 無料講座 | Dreamweaver編 | 単位・色 |
9.単位・色
CSSで扱える単位とは

ここでいう単位は、主にフォントに関係するものです。CSSで扱える「長さ・大きさの単位」は数多くあり、CSSを使えば、表に示したさまざまな種類の単位を指定することができます。
ただし、あれもこれも…と使ってしまうと、後々大変な思いをすることも少なくありませんので、コレを使おう!と決めたら、それを追求していきましょう。

CSSの場合、基本的にプロパティを「数値+単位」で指定することになりますが、値が「0」の時は、単位をつけなくても認識されます。

また、行間の空け方を指定するline-height プロパティや、手前・奥というように重なる順序を指定するz-indexプロパティなど、単位を付けずに数値を指定するプロパティも存在します。z-indexについては非常に複雑なので、そういったものもある、ということだけ、今は覚えておいて下さい。

その他の注意点としては、文字サイズの単位として「pt」や「px」使うと、IEではWebペ-ジを開くとき、ツールバーのメニューから文字サイズが変更できなくなります。
こういったことを踏まえ、ユーザビリティを考慮して「em」や「%」、または文字サイズを示すキーワードで指定することが推奨されています。
基本的にweb上の文字は「この指定にすれば絶対このサイズになる」というものはありません。工夫を重ねて、見やすい大きさや行間を見つけていきましょう。

何に対する割合かはプロパティによって決まります。例えば「bodyにfont-size: 20px;」という指定をした上で「font-size: 50%;」とすれば、その指定部分は10pxになるわけです。
px

ピクセル。モニタの解像度によって見た目が変わります。

pxについて)
例えば「A:800×600px」「B:1900×1400px」この2つのモニタがあったとします。解像度は違いますが、モニタそのものの大きさはABどちらも30cm×20cm、だとしましょう。
30×20は600ですよね。
Aのモニタは、600の大きさの中に800×600=48万個のピクセルが入っています。→1個のピクセルが占める場所が大きい
Bのモニタは、600の大きさの中に1900×1400=266万個のピクセルが入っています。→1個のピクセルが占める場所が小さい

…となると、同じ20pxと指定しても、Aのモニタでは大きく見えます。Bでは小さく見えるのです。

数学的かもしれませんが、ここを押さえておくとぐっと差がつきますよ。

※さまざまな単位が利用できますが、使用頻度が高いのは「%」 「em」「px」の3種類でしょう。自分の使う単位を決めて、それを追求してフォントサイズを操れるようになりましょう!

CSSでの色の基本

同じ色でも方法はさまざま。
CSSで色を扱うためには、基本的な「文字や枠線などへの色の指定」は、最低限、覚えておかなければいけません。

CSSで色を示すには数値とキーワード、大きくふたつの方法から選ぶことができます。

■まず、色を数値で示す方法について

これはHTMLと同様、「#」に続けて、RGB各色の値を2桁ずつの16進数で示します。
1色当たり256通り×3チャンネルなので、約1,677万色の中からひとつの色が選べる計算です。
「#AABBCC」と記述され、Web作成ではこの方法がもっとも広く利用されています。

また、数値によっては、CSSは上記した6桁の半分、すなわち3桁で色を示すこともできます。
たとえば「#ABC」なら「#AABBCC」と判断されます。「#ATBFCR」「#AABFCC」は省略できないので注意しましょう。
当然、1桁だけを指定するときは2桁の値が同じ数値であることが条件なのです。
この方法を覚えておくと、Webセーフカラーを示すときに役立ちます。
RGBの各色を6段階に単純化した、216色のWebセーフカラーでは、RGBの各色は必ず「00」「33」「66」「99」「cc」「ff」のいずれかとなるため、つねに3桁で表現することが可能になるからです。

■そのほかCSSでは16進数だけでなく、10進数の数値で色を示す方法も提供されています。 RGBの各色を0〜255の値で示す
場合は、「rgb(R値、G値、B値)」という書式で示す。たとえば赤(#ff0000)を示すには、「rgb(255, 0, 0)」と指定すればいいです。さら
にRGBの各色を0〜100%の値で示す方法も用意されており、上記の色なら値に「%」を付けて、「rgb(100%, 0%, 0%)」と指定
します。


■最後に、数値ではなくキーワードでの指定について。

CSSではHTMLで定義されている16種類のキーワードから色を指定することも可能です。
直接キーワードを記述し、たとえば「yellow」なら「#ffff00」が適用されることになります。

色々な方法がありますが、ホームページ作成にあたっては、日頃から16進法の数字で入力する方法を覚えておく方がよいですね。

cssでの色の指定について

もどる すすむ

<< PAGE TOP >>


無料お問合せはこちらから TEL 075-257-4588 営業時間 AM10:00〜PM7:00
| ホーム |
| 無料講座 | Dreamweaver編 | 単位・色 |

| 繝帙シ繝繝壹シ繧ク蛻カ菴 莠ャ驛ス縺ョ繝帙シ繝繝壹シ繧ク菴懈舌ッ繝ェ繝・繧ヲ繝

CSS
縺雁撫蜷医○縺ッ縺薙■繧峨°繧峨TEL 075-257-4588 蝟カ讌ュ譎る俣縲AM10:00ス霸M7:00
| 繝帙シ繝 |
| 404 Not found |

404 Not found

縺頑爾縺励ョ繝壹シ繧ク縺ッ隕九▽縺九j縺セ縺帙s縺ァ縺励◆縲ゅい繝峨Ξ繧ケ縺碁&縺」縺ヲ縺繧九°縲√壹シ繧ク縺悟炎髯、縺輔l縺溷庄閭ス諤ァ縺後#縺悶>縺セ縺吶

<< PAGE TOP >>

BACK UP 蛻晏ソ閠縺ァ繝帙シ繝繝壹シ繧ク繧定縺医※繧峨l縺ヲ繧区婿縺ク

迢ャ閾ェ繝阪ャ繝医す繝ァ繝繝励d讌ス螟ゥ繧キ繝ァ繝繝励サYAHOO繧キ繝ァ繝繝鈴°蝟カ縺輔l繧句晏ソ閠縺ョ譁ケ繧ゅ∫┌譁吶〒縲∬ヲェ蛻縺ォ繧「繝峨ヰ繧、繧ケ縺縺溘@縺セ縺吶
シウシ・シッ繝サ譛域ャ。譖エ譁ー繝サ繝ェ繝九Η繧「繝ォetc

繝帙シ繝繝壹シ繧ク蛻カ菴懊ョ莠九↑繧

菴輔〒繧ゅ♀蝠丞粋縺帙¥縺縺輔>縲
縺雁撫蜷医○繝輔か繝シ繝縺ッ縺薙■繧峨°繧

繝帙シ繝繝壹シ繧ク菴懈舌ッ莠ャ驛ス縺ョ繝ェ繝・繧ヲ繝譬ェ蠑丈シ夂、セ

莠ャ驛ス蟶ゆクュ莠ャ蛹コ讖句シ∵カ逕コ222逡ェ蝨ー
繝偵Λ繧、繝薙Ν3髫

TEL 075-257-4588
蝟カ讌ュ譎る俣 AM10:00-PM7:00

縺雁撫蜷医○縺ッ縺薙■繧峨°繧峨TEL 075-257-4588 蝟カ讌ュ譎る俣縲AM10:00ス霸M7:00
| 繝帙シ繝 |
| 繝壹シ繧ク縺瑚ヲ九▽縺九j縺セ縺帙s縺ァ縺励◆ |
CSS
Ryuumu

CSS
Ryuumu