完全ガイド：CSSの基本と応用

CSS（Cascading Style Sheets）は、ウェブデザインにおける重要な要素で、ウェブページの見た目やレイアウトを管理するために使われます。CSSはHTMLと連携して、ウェブページの構造にスタイルを適用するためのものです。この記事では、CSSの基本的な使い方から高度な技術までを詳しく解説します。

1. CSSの基本構造

CSSは基本的に「セレクタ」と「プロパティ」と「値」から成り立っています。以下はその基本的な書き方の例です。

css
CopyEdit
セレクタ {
    プロパティ: 値;
}

例えば、ページの背景色を変更する場合：

css
CopyEdit
body {
    background-color: lightblue;
}

この例では、bodyがセレクタ、background-colorがプロパティ、lightblueがその値です。

2. セレクタの種類

CSSにはさまざまなセレクタがあり、それぞれ特定のHTML要素をターゲットにするために使われます。

• 要素セレクタ：HTMLタグに基づいて選択

  css
  CopyEdit
  p {
      font-size: 16px;
  }
  

  この例では、すべての

  タグにフォントサイズ16pxが適用されます。

• クラスセレクタ：特定のクラス名を持つ要素を選択

  css
  CopyEdit
  .example {
      color: red;
  }
  

  クラス名がexampleのすべての要素に対して、文字色が赤くなります。

• IDセレクタ：特定のIDを持つ要素を選択

  css
  CopyEdit
  #header {
      background-color: blue;
  }
  

  IDがheaderの要素に背景色が青く設定されます。

• 属性セレクタ：特定の属性を持つ要素を選択

  css
  CopyEdit
  input[type="text"] {
      border: 1px solid black;
  }
  

  type属性がtextのタグに黒い枠線を適用します。

3. CSSの書き方

CSSの記述方法にはいくつかのスタイルがあります。これらのスタイルは、どのようにCSSをHTMLに適用するかによって異なります。

• インラインCSS：HTMLタグ内で直接スタイルを設定

  html
  CopyEdit
  <p style="color: green; font-size: 20px;">このテキストは緑色で、フォントサイズは20pxです。p>
  

• 内部CSS：HTMLファイル内の