CSSリファレンス

color

テキストの色を指定します。

使用例：

p {
  color: #ff0000;  /* 赤色 */
}

h1 {
  color: rgb(0, 128, 0);  /* 緑色 */
}

値：

• カラーネーム: red, blue, green など
• 16進数: #ff0000, #00ff00 など
• RGB: rgb(255, 0, 0)

font-family

テキストのフォントを指定します。

使用例：

body {
  font-family: "Helvetica Neue", Arial, sans-serif;
}

font-size

テキストのサイズを指定します。

使用例：

h1 {
  font-size: 24px;
}

p {
  font-size: 1em;
}

値：

• px: ピクセル単位
• em: 親要素のフォントサイズを基準とした相対的な値
• rem: ルート要素のフォントサイズを基準とした相対的な値
• %: 親要素のフォントサイズに対する割合

background-color

背景色を指定します。

使用例：

div {
  background-color: #f0f0f0;
}

border

要素の境界線（ボーダー）を指定します。

使用例：

div {
  border: 1px solid black;
}

/* 個別指定も可能 */
div {
  border-width: 1px;
  border-style: solid;
  border-color: black;
}

主要なボーダースタイル：

• solid: 実線
• dashed: 破線
• dotted: 点線
• double: 二重線

display

要素の表示方法を指定します。

使用例：

div {
  display: flex;
}

span {
  display: inline-block;
}

主要な値：

• block: ブロックレベル要素として表示
• inline: インライン要素として表示
• inline-block: インラインブロック要素として表示
• flex: フレックスコンテナとして表示
• grid: グリッドコンテナとして表示
• none: 要素を非表示にする

position

要素の配置方法を指定します。

使用例：

div {
  position: relative;
  top: 10px;
  left: 20px;
}

主要な値：

• static: デフォルトの配置（top, left などのプロパティは無視される）
• relative: 通常の位置を基準に相対配置
• absolute: 最も近い位置指定された親要素を基準に絶対配置
• fixed: ビューポートを基準に固定配置（スクロールしても位置は変わらない）
• sticky: スクロールに応じて相対配置と固定配置を切り替える

flexbox

柔軟なレイアウトを実現するためのプロパティ群です。

使用例：

/* コンテナ要素 */
.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

/* 子要素 */
.item {
  flex: 1;
}

主要なflex関連プロパティ：

• flex-direction: フレックスアイテムの並ぶ方向（row, column など）
• justify-content: 主軸に沿ったアイテムの配置（flex-start, center, space-between など）
• align-items: 交差軸に沿ったアイテムの配置（flex-start, center, stretch など）
• flex-wrap: アイテムを折り返すかどうか（wrap, nowrap）
• flex: 子要素の伸縮比率を指定（flex-grow, flex-shrink, flex-basis の一括指定）

transition

プロパティの変化を滑らかに行うためのアニメーション効果を指定します。

使用例：

button {
  background-color: blue;
  transition: background-color 0.3s ease;
}

button:hover {
  background-color: darkblue;
}

主な構成要素：

• transition-property: アニメーション対象のプロパティ
• transition-duration: アニメーションの時間
• transition-timing-function: アニメーションの進行パターン（ease, linear など）
• transition-delay: アニメーション開始までの遅延時間

animation

複数のスタイル間を遷移するアニメーションを定義します。

使用例：

/* アニメーションのキーフレームを定義 */
@keyframes bounce {
  0% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
  100% { transform: translateY(0); }
}

/* 要素にアニメーションを適用 */
.bouncing-element {
  animation: bounce 2s infinite ease-in-out;
}

主な構成要素：

• animation-name: 対象のキーフレーム名
• animation-duration: アニメーションの時間
• animation-timing-function: アニメーションの進行パターン
• animation-delay: アニメーション開始までの遅延時間
• animation-iteration-count: 繰り返し回数（infinite で無限）
• animation-direction: アニメーションの方向
• animation-fill-mode: アニメーション開始前・終了後のスタイル

transform

要素の形状を変形させます。

使用例：

div {
  transform: rotate(45deg) scale(1.5);
}

主な変形関数：

• translate(x, y): 移動
• scale(x, y): 拡大・縮小
• rotate(angle): 回転
• skew(x-angle, y-angle): 傾斜

media queries

ビューポートのサイズなどの条件に応じてスタイルを適用します。

使用例：

/* デスクトップ向けスタイル */
.container {
  width: 1200px;
}

/* タブレット向けスタイル */
@media (max-width: 992px) {
  .container {
    width: 90%;
  }
}

/* モバイル向けスタイル */
@media (max-width: 576px) {
  .container {
    width: 100%;
  }
}

主なメディア機能：

• min-width: 指定幅以上の場合にスタイル適用
• max-width: 指定幅以下の場合にスタイル適用
• orientation: デバイスの向き（portrait/landscape）
• prefers-color-scheme: システムのカラースキーム設定（light/dark）

viewport関連メタタグ

レスポンシブデザインのためのビューポート設定です。

使用例：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

主な設定値：

• width=device-width: デバイスの画面幅に合わせる
• initial-scale=1.0: 初期表示の拡大率
• user-scalable=no: ユーザーによる拡大縮小を禁止（アクセシビリティの観点から非推奨）