ホームページ 作り方

だれでもわかるホームページ講座
ホームページの作り方 教えます。
http://www.homepage-guide.com
 トップページ>>CSSの基本

CSS(スタイルシート)の基本

CSSの書式などについて学びます。CSSではHTMLより柔軟に記述ができるようになっています。 
 まずはCSSをはじめて学ぶかたのために、CSSを書くときの決まりについて説明しておくことにします。セレクタプロパティという名称ががどの部分のことを指すのかということをしっかり理解してください。
1.基礎構造
下画像はのCSSの基本的な書式まとめたものです。
セレクタというものでスタイルを適用する範囲を設定し、
中かっこ「{ }」のなかにプロパティ+コロン「:」+値という形式で記述します。

上の例では「h1タグの背景色に赤を設定する」という宣言になります。
コロンの前後(プロパティ名と値の間)は半角スペースを空けると読みやすくなります。

 CSSの使い方の基本は、セレクタ{プロパティ : 値 ;}

 プロパティというのはHTMLでいう属性だと考えていいと思います。要素の各特徴を表すものです。
HTMLと違い、文字列以外の値はダブルクォーテンション「"」で囲む必要がありません。

 もちろんひとつの宣言で1つのプロパティだけしか設定できないのではなく、中かっこの中にいくつでも指定することができます。その場合は下の例のようにセミコロン「;」で区切ります。複数行に分けて記述するとわかりやすいですね。

例)
h1{ color : blue;
    background-color:yellow
}
2.大文字・小文字の区別なし

 CSSでは、アルファベットの大文字と小文字を区別しない。
これはHTMLと同じです。ただしJavascriptからDOMの機能を使って、動的にCSSを操作する場合、プログラム内で使うプロパティ名は大文字小文字が決まっています。
例)background-color → backgroundColor など

3.色の指定方法

 CSSでは、色名かRGB値で色を指定する。
 色名は"red"や"black"などあらかじめ定義済の文字列があるのでその中から好きな色名を指定します。
 RGB値で指定する場合はHTMLでの#rrgbbb以外にも数種類の指定方法があります。
CSSでのRGB値の指定方法

  • #rrggbb ・・・ HTMLと同じ方法で赤・青・緑の各色を16進数で2桁ずつ指定します。
  • #rgb ・・・ 赤・青・緑の各色を16進数で1桁指定します。各値が2桁分繰り返された色が設定されます。例)#F6C = #FF99CC
  • rgb(r, g, b) ・・・ RGBの各強度を10進数で指定できます。10進数の場合指定できる値は0〜255の間となります。
  • rgb(r%, g%, b%) ・・・RGBの各強度をパーセントで指定できます。
例)代表的な色の16進数値

赤(#FF0000) 黄緑(#00FF00) 青(#0000FF) 紫(#FF00FF) 黄色(#FFFF00)
オレンジ(#FF9900) 水色(#00FFFF) 緑(#009900) 茶色(#990000) グレー(#808080)

4.大きさの単位
CSSで大きさを指定するときは、相対単位か絶対単位で指定する。

CSSでは大きさの単位は、柔軟に指定できるように定義されています。
全部で9種類ありますが、他の条件によってサイズが変わる相対的な指定単位と、常固定サイズで表示される絶対単位があります。

相対単位
  • em ・・・ 含まれる要素のfont-sizeの値を1emとする単位
  • ex ・・・ 含まれる要素のフォントの小文字のエックス「x」の高さを1exとする単位
  • px ・・・ 画面上の1ピクセルを1pxとする単位
  • % ・・・ 親要素に対する割合で指定する単位
絶対単位
  • in ・・・ インチで指定(1in = 2.54cm)
  • cm ・・・ センチメートル単位
  • mm ・・・ ミリメートル単位
  • pt ・・・ ポイント(1/72インチ)単位
  • pc ・・・ パイカ(12pt)単位
5.コメント

 コメントとは文書内に書き残しておくメモのようなものです。ブラウザがCSSを読み込むときにコメントの部分は無視されて表示されます。コメントをいれておくことで文書の可読性が向上したり、他の人がメンテナンスする場合にも役に立ちます。

 HTMLでは、「/* 」と 「*/」で囲まれた部分がコメント扱いとなる。

これは、プログラミング言語のC言語と同じコメントの記述方法です。

入門編

HTML編

CSS編


CopyRight(C) 2009- 「ホームページの作り方 教えます。」 All right reserved.