CSS/一般的なプロパティとその値

一般的なプロパティとその値

CSSのプロパティは、要素のデザインやレイアウトを制御するために使用されます。この章では、代表的なCSSプロパティとその値について説明します。プロパティごとに用途や注意点を具体例とともに解説します。

ボックスモデル関連プロパティ

ボックスモデルは、要素のサイズや配置を決定する基礎的な概念です。

• width/height: 要素の幅や高さを指定します。
  • 値: auto (初期値), 長さ単位 (px, %, em など)
  • 例:

    div {
      width: 300px;
      height: 200px;
    }
    

• padding: コンテンツとボーダーの間の内側余白を指定します。
  • 値: 長さ単位, inherit
  • 例:

    div {
      padding: 10px 20px;
    }
    

• margin: ボーダーの外側の余白を指定します。
  • 値: 長さ単位, auto, inherit
  • 例:

    div {
      margin: 0 auto;
    }
    

• border: 要素の枠線を指定します。
  • 値: none (初期値), 枠線の幅、スタイル、色
  • 例:

    div {
      border: 2px solid black;
    }
    

テキスト関連プロパティ

テキストのスタイルや配置を調整するプロパティです。

• color: テキストの色を指定します。
  • 値: カラーコード、キーワード (red, blue など)
  • 例:

    p {
      color: #333;
    }
    

• font-size: テキストのサイズを指定します。
  • 値: 長さ単位, 相対単位 (em, rem)
  • 例:

    p {
      font-size: 16px;
    }
    

• text-align: テキストの水平配置を指定します。
  • 値: left, right, center, justify
  • 例:

    p {
      text-align: center;
    }
    

• line-height: 行間の高さを指定します。
  • 値: 数値, 長さ単位, パーセンテージ
  • 例:

    p {
      line-height: 1.5;
    }
    

レイアウト関連プロパティ

要素の配置やフローを制御するプロパティです。

• display: 要素の表示形式を指定します。
  • 値: block, inline, flex, grid など
  • 例:

    div {
      display: flex;
    }
    

• position: 要素の配置方法を指定します。
  • 値: static (初期値), relative, absolute, fixed, sticky
  • 例:

    div {
      position: absolute;
      top: 50px;
      left: 100px;
    }
    

• z-index: 要素の重なり順序を指定します。
  • 値: 整数値, auto
  • 例:

    div {
      z-index: 10;
    }
    

背景関連プロパティ

要素の背景を装飾するプロパティです。

• background-color: 背景色を指定します。
  • 値: カラーコード、キーワード
  • 例:

    div {
      background-color: lightblue;
    }
    

• background-image: 背景画像を指定します。
  • 値: url() または none
  • 例:

    div {
      background-image: url('example.png');
    }
    

• background-position: 背景画像の位置を指定します。
  • 値: キーワード (top, center など) または数値
  • 例:

    div {
      background-position: center center;
    }
    

アニメーション関連プロパティ

動的なエフェクトを適用する際に使用します。

• animation: アニメーション全体を指定します。
  • 値: アニメーション名、継続時間、タイミング関数など
  • 例:

    div {
      animation: fade-in 2s ease-in-out;
    }
    

注意点

• すべてのプロパティがすべての要素に適用されるわけではありません。一部のプロパティは特定の要素タイプに限定されます。
• 初期値や継承の有無を理解して適切に設定してください。

参考

• MDN Web Docs: CSS