CSS の概要

レクチャー 1: CSS の概要

「Basic to Brilliance」の最初の講義へようこそ - CSS をマスターする旅はここから始まります!

---

CSS とは何ですか?

CSS (Cascading Style Sheets) は、Web ページのプレゼンテーションを記述するために使用される言語です。 HTML は構造とコンテンツを提供しますが、CSS は Web ページを魅力的でユーザーフレンドリーに見せるものです。レイアウト、色、フォント、間隔などを制御します。

CSS はなぜ重要ですか?

• 関心事の分離: CSS を使用すると、コンテンツ (HTML) をプレゼンテーション (CSS) から分離できるため、コードがクリーンになり、保守が容易になります。
• 一貫性: 単一の CSS ファイルをリンクすることで、複数の Web ページに一貫したスタイルを適用できます。
• レスポンシブ デザイン: CSS は、デスクトップからスマートフォンまで、すべてのデバイスで見栄えの良い Web サイトを作成するために不可欠です。

基本的な CSS 構文

CSS は、HTML 要素を対象とするルールで構成されます。各ルールはセレクターと宣言ブロックで構成されます。

selector {
  property: value;
}

• セレクター: スタイルを設定する HTML 要素をターゲットにします。
• プロパティ: 変更したい要素の側面 (色、フォントサイズなど)。
• 値: プロパティに適用する特定の値。

例:

すべての

の色を変更するとします。要素を青にします。

HTML:

<h1>Hello, World!</h1>

CSS:

h1 {
  color: blue;
}

この単純なルールは、テキストをすべて

に変換します。要素を青にします。

HTML への CSS の追加

HTML ドキュメントに CSS を追加するには、主に 3 つの方法があります:

1. インライン CSS: HTML 要素内に直接。

   <h1 style="color: blue;">Hello, World!</h1>

1. 内部 CSS: