CSSの紹介

CSSは、Webサイトの外観を設計および美化する上で最も重要なツールの1つです。 CSSの基本と使い方をお教えします

CSSはHTMLビューティースタイルを変更できます



CSSは、Webページのスタイル設定に使用する言語です。

CSSとは何ですか？


  • CSSはCascadingStyleSheetsの略です
  • CSSは、HTML要素が画面、紙、またはその他のメディアにどのように表示されるかを説明します
  • CSSは多くの作業を節約します。複数のWebページのレイアウトを一度に制御できます
  • 外部スタイルシートはCSSファイルに保存されます


CSSデモ-1つのHTMLページ-複数のスタイル！

ここでは、4つの異なるスタイルシートで表示された1つのHTMLページを示します。以下の「スタイルシート1」、「スタイルシート2」、「スタイルシート3」、「スタイルシート4」のリンクをクリックして、さまざまなスタイルを確認してください。


なぜCSSを使用するのですか？


CSSは、さまざまなデバイスや画面サイズのデザイン、レイアウト、表示のバリエーションなど、Webページのスタイルを定義するために使用されます。
body {
background-color: lightblue;
}

h1 {
color: white;
text-align: center;
}

p {
font-family: verdana;
font-size: 20px;
}

CSSは大きな問題を解決しました


HTMLは、Webページをフォーマットするためのタグを含むことを意図したものではありませんでした。

HTMLは、次のようなWebページのコンテンツを説明するために作成されました。

<h1> これは見出しです </h1>

<p> これは段落です。</p>

<font> のようなタグや色の属性がHTML3.2仕様に追加されたとき、それはWeb開発者にとって悪夢のようになりました。フォントと色の情報がすべてのページに追加される大規模なWebサイトの開発は、長くて費用のかかるプロセスになりました。

この問題を解決するために、World Wide Web Consortium（W3C）がCSSを作成しました。

CSSはHTMLページからスタイルフォーマットを削除しました！

CSSは多くの作業を節約します！


スタイル定義は通常、外部の.cssファイルに保存されます。

外部スタイルシートファイルを使用すると、1つのファイルを変更するだけで、Webサイト全体の外観を変更できます。

CSS構文


CSSルールは、セレクターと宣言ブロックで構成されます。


セレクターは、スタイルを設定するHTML要素を指します。

宣言ブロックには、セミコロンで区切られた1つ以上の宣言が含まれます。

各宣言には、CSSプロパティ名と値がコロンで区切られて含まれています。

複数のCSS宣言はセミコロンで区切られ、宣言ブロックは中括弧で囲まれています。
p {
color: red;
text-align: center;
}

例の説明



  • p はCSSのセレクターです（スタイルを設定するHTML要素を指します： <p>）。
  • color はプロパティであり、 redはプロパティ値です
  • text-align はプロパティであり、 centerはプロパティ値です

CSSの紹介