カテゴリー別アーカイブ: css

CSSで使用できる単位は

ホームページ製作をする際には、様々なものの長さや大きさを指定しなくてはいけませんが、HTMLでは、「ピクセル px」 「パーセント %」 「*」 の3種類でした。
現在はCSSでの制作が主流になりつつありますが、CSSになって9種類の単位が扱えるようになりました。

「% / em / ex / px / pt / pc / mm / cm / in」

いろいろ選択肢は増えましたが、使用頻度が高いのは「% / px / em」です。(私の場合)

フォントサイズは出来る限り px / em で数値指定せず「font-size: small」とか「font-size: medium」などで指定しましょう。ブラウザ側での文字サイズの変更が出来なくなります。 ユーザーによっては文字が見えにくい為に、ホームページを詳しく見て頂けない場合もあります。 レイアウト的に仕方のない場合も多いとは思いますが・・・

CSSでのカラー指定

CSSでのカラー指定ですが、最も広く利用されているのは

#003366 といった方法です。

これは、HTMLと同じ方法なのでご存知の方も多いかと思います。

〔#〕 に続けて、RGB各色の値を2桁ずつの16進数で表したものです。

1色が256通り×3チャンネルで、約1,677万色から指定できることになります。

その他、使用頻度は低いですが以下の方法でも可能です。

3桁表記 【#036】
CSSの場合、半分の3桁でカラー指定可能です。 1桁が2桁分の指定をしているので〔fc1234〕などの時には使用できません。 「00 33 66 99 cc ff」の組み合わせで指定すればWebセーフカラー(216色)での表示が楽に出来る。

RGBでの表記 【rgb(0%,0%,100%)】
RGBはレッド、グリーン、ブルーの3色の組み合わせですから、 rgb(赤%,緑%,青%) という式で表すことが出来ます。
ブルー #0000ff であれば rgb(0%,0%,100%) となります。

キーワード指定 【black】
HTMLに定義された16色であれば キーワードで指定できます。
black / gray / silver / white / navy / teal / aqua / blue / olive / green / lime / yellow / maroon / purple / fuchsia / red

cssの書式 適用先の指定方法

現在のホームページ制作では欠かす事の出来ないCSSの基本ルール

●要素名を直接

●id を指定

●class を指定

cssの書式に付いて

適用先 { ~表示方法を指定する~}

適用先=セレクタ

基本は要素名をそのままセレクタとして指定する

・body要素を適用対象とする場合 body { ~ }

・p要素を適用対象とする場合 p { ~ }

・適用先を複数指定する場合 body,h1,h2,p { ~ }

・全ての要素を指定する場合 * { ~ }

idセレクタで指定する

・id=”header”で指定したdiv要素だけを適用対象にする div#header { ~ }

・要素の種類を限定しない場合 #header { ~ } 通常はこの方法が一般的

・ちなみに div[id=”header”] { ~ } でも指定可能

classセレクタで指定する

・class=”menu”で指定したdiv要素だけを適用対象にする div.menu { ~ }

・要素の種類を限定しない場合 .menu { ~ } 通常はこの方法が一般的

・ちなみに div[class=”menu”] { ~ } でも指定可能