CSSの特徴
CSSの利用方法
CSSはWebページのスタイルを指定するためのスタイルシート言語で、このCSSの利用方法には外部CSSと内部CSSの2つの方法があります。
外部CSSはHTMLファイルとは別にCSSファイルを作成して利用し、内部CSSはHTMLファイルに直接記述して利用します。
外部CSSは全てのHTMLファイルが対象ですが、内部CSSは記述するHTMLページが対象になります。
効率性や利便性を考えるなら外部CSSの方が便利ですが、速度を重視する場合は内部CSSの方が効果的な場合もあるようです。
CSSとは
Webプログラミング
CSSエフェクト
一括編集
HTMLだけだと全てのページを編集しなければならず、あまり効率の良い方法とは言えません。
しかし、外部CSSを利用すれば特定のHTML要素に対して一括で指定できるので、各ページの修正や変更を簡単に行う事ができます。
編集時もスタイルシートを修正するだけで、指定した全ページのスタイルを一瞬で変える事ができます。
HTML要素の特性を変える
HTMLの中には少し癖のあるものもあり、文字のサイズや太さが決まっているものもあります。
しかし、CSSを利用すれば、それらのHTML要素が持つ特性を変える事ができます。
そのままでは使いづらいh要素やstrong要素も、CSSを使うと自由にスタイルを設定できます。
CSSのバージョンアップ
CSSにもCSS2やCSS3などのバージョンがありますが、HTMLとは違ってバージョンアップ時の変更作業は必要ありません。
つまり新旧のバージョンが混在していても問題はなく、ブラウザさえ対応していればどのバージョンのCSSでも自由に利用する事ができます。
CSSの基本
基本的な書式
CSSの基本的な書式は以下のようになります。
記号はわかりやすくするために全角にしていますが、記述時は半角にしてください。
書式の基本
- 基本書式：セレクタ（要素） {スタイル（プロパティ:値）;}
- class指定（要素の頭に記述）：．要素
- id指定（要素の頭に記述）：＃要素
- 要素間の区切り（要素間に記述）：．要素，．要素
- プロパティと値の区切り（プロパティと値の間に記述）：プロパティ：値
- スタイルの区切り（スタイルの最後に記述）：スタイル；
- 要素の範囲（対象要素に対するスタイルを全て囲む）：．要素｛スタイル；スタイル；｝
HTML要素のスタイル指定
HTML要素のほとんどは、CSS要素としてスタイル指定が可能です。
その際は頭に何も付加せずにHTML要素を要素として指定します。
- 書式：HTML要素 {プロパティ:値;}
- 例：h3 {font-size:10px;}
idセレクタとclassセレクタの違い
セレクタにはidとclassがありますが、この2つはただ適当に使えるわけではありません。
idは対象のページで一度だけしか使えないという特性があり、classはいくつでも使えます。
ただし、処理速度や優先度はidの方が高く、classの方が低くなります。
このためどちらも利用できるような場合は、なるべくidを利用する事で処理速度を高める事ができます。
スタイルシートの class と id の使い分け
CSSの初期化（CSSリセット）
CSSリセットとはブラウザ固有のCSSのデフォルト値をリセットする手法です。
ブラウザはそれぞれCSSのデフォルト値を持っており、CSSで指定しないとこの値が利用されます。
また、このデフォルト値はブラウザによって異なるため、混乱を招く要因にもなります。
そこで考案されたのがCSSリセットという手法ですが、色々なタイプがあるので自分に合ったものを利用してください。
ただし、「*」を利用した全称セレクタはCSSの速度低下に繋がるため、現在では好ましくない方法とされています。
p {margin:0px; padding:0px;}
複数のclassを同時に指定する方法
複数のclassを同時に指定する場合は、1つの書式で間に「半角スペース」を入れて指定するだけです。
<div class="1つ目のclass 2つ目のclass">