CSS

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の基本的な書式は以下のようになります。
記号はわかりやすくするために全角にしていますが、記述時は半角にしてください。
書式の基本

  1. 基本書式:セレクタ(要素) {スタイル(プロパティ:値);}
  2. class指定(要素の頭に記述):要素
  3. id指定(要素の頭に記述):要素
  4. 要素間の区切り(要素間に記述):.要素.要素
  5. プロパティと値の区切り(プロパティと値の間に記述):プロパティ
  6. スタイルの区切り(スタイルの最後に記述):スタイル
  7. 要素の範囲(対象要素に対するスタイルを全て囲む):.要素スタイル;スタイル;

HTML要素のスタイル指定

HTML要素のほとんどは、CSS要素としてスタイル指定が可能です。
その際は頭に何も付加せずにHTML要素を要素として指定します。

  1. 書式:HTML要素 {プロパティ:値;}
  2. 例: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">

CSSの編集テクニック

CSSを頻繁に編集するような場合は、毎回フォルダを開いてファイルを探すのは面倒だと思います。
そんな時はブラウザのブックマークに登録しておけば、編集はソースの編集から簡単にできるので便利です。

コメントの利用方法

CSSでコメントを利用する場合は以下のように記述します。
ここに記述した内容はブラウザに対して非表示になります。

/*コメント*/

オンラインPC館