CSS 初級チュートリアル

必要な基本的な知識

学習を続ける前に、以下の基本的な知識が必要です：

  • HTML
  • XHTML

これらのプロジェクトを最初に学びたい場合は、 ホームページ 関連するチュートリアルにアクセスしてください。

CSS概要
  • CSSはカascading Style Sheets（Cascading Style Sheets)
  • スタイル定義どのように表示されるか HTML要素
  • スタイルは通常、スタイルシート中
  • HTML 4.0にスタイルを追加することは、内容と表現の分離問題を解決するため
  • 外部スタイルシート非常に効率を向上させることができます。
  • 外部スタイルシートは通常、 CSSファイル中
  • 複数のスタイル定義が階層一

スタイルは一般的な問題を解決しました。

HTMLタグは元々、ドキュメントの内容を定義するために設計されました。例えば<h1>、<p>、<table>などのタグを使って、HTMLは「これはタイトル」、「これは段落」、「これはテーブル」といった情報を表現するために期待されていました。ドキュメントのレイアウトは、フォーマットタグを使用せずにブラウザが完了することを期待していました。

二つの主要なブラウザ（NetscapeとInternet Explorer）が新しいHTMLタグや属性（フォントタグや色属性など）をHTML規範に追加し続けるため、コンテンツとレイアウトの層を分離したままのサイトを作成するのが難しくなっています。

この問題を解決するために、非営利の標準化組織である万維網連盟（W3C）がHTML標準化の使命を負い、HTML 4.0の他にSTYLES（スタイル）を創出しました。

主要なブラウザすべてがカascading Style Sheetsをサポートしています。

スタイルシートは作業効率を大幅に向上させます。

HTML要素の表示方法を定義するスタイルシート。HTML 3.2のスタイルでは、フォントタグや色属性などの属性は通常、外部の.cssファイルに保存されます。シンプルなCSSドキュメントを編集するだけで、外部スタイルシートを使って、サイト内のすべてのページのレイアウトの外観を同時に変更することができます。

複数のページのスタイルとレイアウトを同時に制御できるため、CSSはWEBデザイン分野における一つの進歩と称できます。ウェブ開発者として、各HTML要素にスタイルを定義し、それを任意のページに適用することができます。全体の変換が必要な場合は、スタイルを簡単に変更するだけで、ウェブサイト内のすべての要素が自動的に更新されます。

多重スタイルは層を重ねて

スタイルシートはスタイル情報を規定するためのさまざまな方法を提供します。スタイルは単一のHTML要素に規定されることができます、HTMLページのヘッダー要素に規定されることができます、または外部のCSSファイルに規定されることができます。また、単一のHTMLドキュメント内で複数の外部スタイルシートを参照することもできます。

層積順序

同じHTML要素が複数のスタイルで定義されている場合、どのスタイルを使用しますか？

一般的に、すべてのスタイルは以下のルールに従って新しい仮想スタイルシートに層を重ねられます。その中で数字4が最も高い優先権を持ちます。

  1. ブラウザのデフォルト設定
  2. 外部スタイルシート
  3. 内部スタイルシート（<head>タグ内に位置）
  4. インラインスタイル（HTML要素内に）

したがって、インラインスタイル（HTML要素内に）は最も高い優先権を持ち、これは以下のスタイル宣言を優先することを意味します：<head>タグ内のスタイル宣言、外部スタイルシートのスタイル宣言、またはブラウザのスタイル宣言（デフォルト値）。