序章

このチュートリアルでは、CSSの歴史的起源を簡単に紹介し、CSSがHTMLでどのように機能するかについての概要を説明します。 このチュートリアルでは、先のチュートリアルの実践的な演習とWebサイト構築プロジェクトに従う準備をします。

CSSの歴史

CSSは、WorldWideWebの発明者であるTimBerners-Leeと一緒にEuropeanOrganizationfor Nuclear Research(CERN)で働いていたときに、1994年にHåkonWiumLieによって最初に導入されました。 当時、Webページは通常、1990年代にBerners-Leeが開発したハイパーテキストマークアップ言語であるHTMLのみを使用して作成されていました。 ただし、HTMLは、スタイルの指示を提供するのではなく、Webドキュメントのコンポーネント(見出しや段落など)のセマンティクスを記述するために開発されました。 Webページのスタイルを設定するためのHTMLの使用がますます扱いにくくなるにつれて、HTMLと組み合わせてWebサイトの表示とレイアウトをスタイル設定するためのより効率的な方法を提供するためにCSSが導入されました。

CSSがHTMLでどのように機能するか

HTMLとCSSで構築されたWebサイトは、通常、テキスト、画像リンク、HTMLタグなどのコンテンツを含むHTMLファイルと、HTMLコンテンツに適用されるスタイルルールを含むCSSファイルで構成されます。 たとえば、HTMLファイルにはヘッダーテキスト(HTMLタグ<h1>でマークアップ)と段落テキスト(HTMLタグ<p>でマークアップ)が含まれる場合があります。 対応するCSSファイルには、すべてのヘッダーテキストのサイズを20ピクセルにし、すべての段落テキストを青色にするようにブラウザーに指示するルールが含まれている場合があります。 これらのCSSスタイルルールは、HTMLドキュメントにスタイルの指示を毎回追加しなくても、HTMLドキュメントに表示されるすべてのヘッダーと段落のテキストに適用されます。

CSSは、Webサイトのコンテンツを配置するための強力なツールでもあります。 HTML要素にサイズ、色、およびその他のプロパティを指定することにより、CSSを使用して、Webページのレイアウトを構造化およびスタイル設定するコンテンツボックスを作成できます。

結論

今後のチュートリアルでは、CSSを使用して、テキスト、画像、その他のHTML要素のスタイルを設定したり、Webページのレイアウトをスタイル設定および制御したりします。 開始するには、最初に、HTMLおよびCSSコードの記述を練習するいくつかのファイルとフォルダーを作成する必要があります。 次のチュートリアルでは、無料で入手できるコードエディター Visual StudioCodeを使用してCSSおよびHTMLプロジェクトをセットアップする手順を説明します。