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">