CSS チートシート

セレクタは、どのHTML要素にスタイルを適用するかを指定するために使用されます。基本的なものから複雑な組み合わせまで様々です。

すべてのHTML要素は、長方形のボックスとして描画されます。ボックスモデルは、これらのボックスの寸法（コンテンツ、パディング、ボーダー、マージン）を定義します。

*,
*::before,
*::after {
  box-sizing: border-box;
}

要素の表示形式や配置方法を制御し、ページの構造を作り上げます。主要なレイアウト手法には、displayプロパティ、positionプロパティ、float、そしてモダンなFlexboxとGridがあります。

基本 (display, position, float)

📦 Flexbox (Flexible Box Layout)

一次元のレイアウトモデルで、コンテナ内のアイテム間のスペース配分や整列を容易にします。

フレックスコンテナ (親要素) のプロパティ

フレックスアイテム (子要素) のプロパティ

🏁 Grid Layout

二次元のレイアウトシステムで、行と列の両方で要素を配置できます。複雑なレイアウト構造に適しています。

グリッドコンテナ (親要素) のプロパティ

グリッドアイテム (子要素) のプロパティ

フォント、色、サイズ、行間、配置など、テキストに関する様々なスタイルを設定します。

要素の見た目を豊かにするために、背景色、背景画像、グラデーション、そして境界線のスタイルを細かく設定できます。

背景 (Background)

ボーダー (Border)

基本的なボーダープロパティ (border, border-width, border-style, border-color, border-radius) については、「ボックスモデル」セクションを参照してください。

transform で要素を移動、回転、拡大縮小、傾斜させ、transition でこれらの変化や他のスタイルの変更に時間的な効果を加えることができます。

変形 (Transform)

トランジション (Transition)

.button {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border: none;
  transition: background-color 0.3s ease, transform 0.2s ease-out; /* 変化を滑らかに */
}

.button:hover {
  background-color: darkblue;
  transform: translateY(-2px); /* ホバー時に少し上に移動 */
}

@keyframes ルールでアニメーションの途中経過を定義し、animation プロパティで要素にそのアニメーションを適用します。

キーフレーム定義 (@keyframes)

@keyframes ルールを使って、アニメーションの名前と、そのアニメーション中の特定の時点（キーフレーム）でのスタイルを定義します。

@keyframes slidein {
  from { /* 0% と同じ */
    transform: translateX(-100%);
    opacity: 0;
  }

  75% {
     transform: translateX(10px);
     opacity: 1;
  }

  to { /* 100% と同じ */
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

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

メディアクエリ (@media) を使用して、特定の条件下（画面幅、画面の向き、解像度など）でのみ適用されるCSSルールを定義します。

メディアクエリ (@media)

@media ルールは、特定のメディアタイプやメディア特性に基づいてスタイルを適用します。

/* 基本的な構文 */
@media media-type and (media-feature) {
  /* 条件に一致した場合に適用されるCSSルール */
  .selector {
    property: value;
  }
}

/* 例1: 画面幅が600px以下の場合 */
@media (max-width: 600px) {
  nav ul {
    flex-direction: column; /* ナビゲーションを縦並びに */
  }
  .main-content {
    width: 100%; /* メインコンテンツを全幅に */
  }
  .sidebar {
    display: none; /* サイドバーを非表示に */
  }
}

/* 例2: 画面幅が768px以上の場合 (min-widthは「以上」) */
@media (min-width: 768px) {
  .container {
    max-width: 720px; /* コンテナの最大幅を設定 */
    margin-left: auto;
    margin-right: auto;
  }
}

/* 例3: 画面幅が992px以上、1200px未満の場合 */
@media (min-width: 992px) and (max-width: 1199.98px) {
  body {
    font-size: 18px;
  }
}

/* 例4: 印刷時 (メディアタイプ指定) */
@media print {
  body {
    font-family: serif;
    color: black;
  }
  a::after {
    content: " (" attr(href) ")"; /* リンクのURLを表示 */
  }
  .no-print {
    display: none; /* 印刷しない要素を非表示 */
  }
}

/* 例5: 画面の向きが横向きの場合 */
@media (orientation: landscape) {
  .photo-gallery {
    grid-template-columns: repeat(4, 1fr); /* 横向きなら列数を増やす */
  }
}

/* 例6: 高解像度ディスプレイ (Retinaなど) */
@media (min-resolution: 2dppx), (-webkit-min-device-pixel-ratio: 2) {
  .logo {
    background-image: url('logo@2x.png');
    background-size: contain;
  }
}

主要なメディア特性 (Media Features)

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