【保存版】CSSコード一覧：よく使うプロパティと使い方まとめ

HTMLでホームページを作るとき、見た目を整えるのに欠かせないのが**CSS（シーエスエス）**です。

でも、実際にCSSを書いていると「あのプロパティ、何だったっけ？」「毎回同じようなコードを検索している」「もっと効率的な書き方があるはず」と感じることはありませんか？

実は、Web制作者の多くがよく使うCSSプロパティは全体の20%程度で、残りの80%の作業を占めています。つまり、この核となるプロパティをしっかり覚えておけば、CSS作業の効率が劇的に向上するんです。

この記事では、実務でよく使うCSSコードを体系的に一覧でまとめて紹介します。

CSS基本構造の確認

CSSの書き方の基本

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

実例

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

よく使うセレクタ一覧

セレクタ	意味	例
.class	クラス	.container
#id	ID	#header
element	要素	div, p, h1
*	全要素	*
:hover	ホバー時	.btn:hover
:focus	フォーカス時	input:focus
::before	疑似要素	.icon::before

レイアウト関連のCSSコード

display プロパティ

基本的な表示方法

/* ブロック要素（縦に並ぶ） */
.block-element {
  display: block;
  width: 100%;
  height: 50px;
  background: #e74c3c;
  margin-bottom: 10px;
}

/* インライン要素（横に並ぶ、幅・高さ指定不可） */
.inline-element {
  display: inline;
  background: #3498db;
  padding: 5px 10px;
}

/* インラインブロック要素（横に並ぶが幅・高さ指定可） */
.inline-block-element {
  display: inline-block;
  width: 100px;
  height: 50px;
  background: #2ecc71;
  margin-right: 10px;
}

/* 非表示 */
.hidden {
  display: none;
}

Flexbox レイアウト

基本的なフレックスコンテナ

.flex-container {
  display: flex;
  justify-content: center;    /* 水平方向の配置 */
  align-items: center;        /* 垂直方向の配置 */
  gap: 20px;                  /* 要素間の間隔 */
  min-height: 100vh;          /* 画面の高さ全体 */
}

.flex-item {
  flex: 1;                    /* 等分割 */
  padding: 20px;
  background: #f39c12;
  text-align: center;
}

よく使うFlexboxパターン

/* 横並び・中央寄せ */
.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 両端寄せ */
.flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 縦方向レイアウト */
.flex-column {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* レスポンシブ対応 */
.flex-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.flex-wrap > * {
  flex: 1 1 300px; /* 最小幅300px */
}

Grid レイアウト

基本的なグリッド

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3等分 */
  grid-gap: 20px;
  padding: 20px;
}

.grid-item {
  background: #9b59b6;
  padding: 20px;
  text-align: center;
  color: white;
}

レスポンシブグリッド

.responsive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

position プロパティ

/* 通常の配置 */
.static {
  position: static; /* デフォルト */
}

/* 相対位置（元の位置から移動） */
.relative {
  position: relative;
  top: 10px;
  left: 20px;
}

/* 絶対位置（親要素基準） */
.absolute {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 中央配置 */
}

/* 固定位置（画面基準） */
.fixed {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 1000;
}

/* スティッキー（スクロールで固定） */
.sticky {
  position: sticky;
  top: 0;
  background: white;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

サイズと余白のCSS

width と height

/* 基本的なサイズ指定 */
.size-example {
  width: 300px;           /* 固定幅 */
  height: 200px;          /* 固定高さ */
  max-width: 100%;        /* 最大幅 */
  min-height: 300px;      /* 最小高さ */
}

/* レスポンシブ対応 */
.responsive-size {
  width: 100%;            /* 親要素の100% */
  max-width: 800px;       /* 最大800px */
  height: auto;           /* 高さ自動調整 */
}

/* ビューポート単位 */
.viewport-size {
  width: 90vw;            /* 画面幅の90% */
  height: 100vh;          /* 画面高さの100% */
}

margin と padding

/* 外側の余白（margin） */
.margin-example {
  margin: 20px;                    /* 全方向20px */
  margin: 10px 20px;              /* 上下10px 左右20px */
  margin: 10px 15px 20px 25px;    /* 上右下左（時計回り） */
  margin-top: 30px;               /* 上だけ */
  margin: 0 auto;                 /* 左右中央寄せ */
}

/* 内側の余白（padding） */
.padding-example {
  padding: 15px;                  /* 全方向15px */
  padding: 10px 20px;            /* 上下10px 左右20px */
  padding-left: 25px;            /* 左だけ */
}

/* 組み合わせ例 */
.card {
  width: 300px;
  margin: 20px auto;              /* 中央寄せ + 上下余白 */
  padding: 30px;                  /* 内側余白 */
  border: 1px solid #ddd;
  border-radius: 8px;
}

背景・枠線・装飾のCSS

background 関連

/* 基本的な背景 */
.bg-basic {
  background-color: #3498db;
  background-image: url('image.jpg');
  background-size: cover;          /* 画像を拡大縮小してカバー */
  background-position: center;     /* 画像を中央配置 */
  background-repeat: no-repeat;    /* 画像の繰り返しなし */
}

/* ショートハンド */
.bg-shorthand {
  background: #f39c12 url('pattern.png') repeat-x center top;
}

/* グラデーション */
.bg-gradient {
  background: linear-gradient(45deg, #667eea 0%, #764ba2 100%);
}

/* 複数背景 */
.bg-multiple {
  background: 
    url('overlay.png') repeat,
    linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)),
    url('main-bg.jpg') center/cover;
}

border 関連

/* 基本的な枠線 */
.border-basic {
  border: 2px solid #e74c3c;
  border-radius: 5px;
}

/* 個別指定 */
.border-detailed {
  border-top: 3px solid #3498db;
  border-right: 1px dashed #2ecc71;
  border-bottom: 2px dotted #f39c12;
  border-left: 4px double #9b59b6;
}

/* 角丸バリエーション */
.border-radius-examples {
  border-radius: 10px;           /* 全ての角 */
  border-radius: 10px 0;         /* 左上・右下のみ */
  border-radius: 10px 20px 30px 40px; /* 個別指定 */
  border-radius: 50%;            /* 円形 */
}

shadow 関連

/* ボックスシャドウ */
.shadow-examples {
  /* 基本の影 */
  box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
  
  /* 複数の影 */
  box-shadow: 
    0 1px 3px rgba(0,0,0,0.12),
    0 1px 2px rgba(0,0,0,0.24);
  
  /* 内側の影 */
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
}

/* テキストシャドウ */
.text-shadow-examples {
  text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
  text-shadow: 2px 2px 0 #fff, 4px 4px 0 #333; /* 重ね影 */
}

テキスト・フォント関連のCSS

フォント設定

.font-examples {
  /* 基本設定 */
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 18px;
  font-weight: 600;              /* 100-900 または bold */
  font-style: italic;
  line-height: 1.6;             /* 行間 */
  
  /* テキスト配置 */
  text-align: center;           /* left, right, center, justify */
  vertical-align: middle;        /* top, middle, bottom */
  
  /* テキスト装飾 */
  text-decoration: underline;    /* none, underline, line-through */
  text-transform: uppercase;     /* lowercase, uppercase, capitalize */
  
  /* 文字間隔 */
  letter-spacing: 1px;          /* 文字間 */
  word-spacing: 2px;            /* 単語間 */
  
  /* テキストの切り抜き */
  text-overflow: ellipsis;      /* はみ出し部分を ... で表示 */
  white-space: nowrap;          /* 改行しない */
  overflow: hidden;             /* はみ出し部分を隠す */
}

レスポンシブフォント

.responsive-font {
  /* ビューポート単位 */
  font-size: 4vw;              /* 画面幅の4% */
  
  /* clamp()関数（最小・推奨・最大） */
  font-size: clamp(16px, 4vw, 32px);
}

/* メディアクエリでの調整 */
@media (max-width: 768px) {
  .responsive-font {
    font-size: 14px;
    line-height: 1.4;
  }
}

アニメーション・エフェクトのCSS

transition（変化の滑らかさ）

.transition-examples {
  /* 基本的なトランジション */
  transition: all 0.3s ease;
  
  /* 個別指定 */
  transition: 
    background-color 0.3s ease,
    transform 0.2s ease-out,
    opacity 0.4s linear;
}

/* ホバーエフェクト */
.hover-effects {
  background: #3498db;
  transform: translateY(0);
  transition: all 0.3s ease;
}

.hover-effects:hover {
  background: #2980b9;
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

animation（キーフレーム）

/* アニメーション定義 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

/* アニメーション適用 */
.animated-element {
  animation: fadeIn 1s ease-out forwards;
}

.pulse-element {
  animation: pulse 2s infinite;
}

transform（変形）

.transform-examples {
  /* 移動 */
  transform: translate(50px, 100px);    /* X軸50px, Y軸100px */
  transform: translateX(30px);          /* X軸のみ */
  
  /* 回転 */
  transform: rotate(45deg);             /* 45度回転 */
  
  /* 拡大縮小 */
  transform: scale(1.2);                /* 1.2倍 */
  transform: scaleX(2);                 /* 横のみ2倍 */
  
  /* 傾斜 */
  transform: skew(10deg, 5deg);         /* X軸10度、Y軸5度 */
  
  /* 複数組み合わせ */
  transform: translate(50px, 100px) rotate(45deg) scale(1.2);
}

実用的なパターン集

ボタンのスタイル

/* 基本ボタン */
.btn {
  display: inline-block;
  padding: 12px 24px;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

/* プライマリボタン */
.btn-primary {
  background: #3498db;
  color: white;
}

.btn-primary:hover {
  background: #2980b9;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(52, 152, 219, 0.4);
}

/* アウトラインボタン */
.btn-outline {
  background: transparent;
  color: #3498db;
  border: 2px solid #3498db;
}

.btn-outline:hover {
  background: #3498db;
  color: white;
}

カード型レイアウト

.card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.card-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.card-content {
  padding: 20px;
}

.card-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 10px;
  color: #333;
}

.card-description {
  color: #666;
  line-height: 1.6;
}

フォームスタイル

.form-group {
  margin-bottom: 20px;
}

.form-label {
  display: block;
  margin-bottom: 5px;
  font-weight: 600;
  color: #333;
}

.form-control {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #e1e8ed;
  border-radius: 8px;
  font-size: 16px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.form-control:focus {
  outline: none;
  border-color: #3498db;
  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
}

.form-control:invalid {
  border-color: #e74c3c;
}

レスポンシブデザインのCSS

メディアクエリ

/* モバイルファースト */
.responsive-container {
  padding: 16px;
  font-size: 14px;
}

/* タブレット以上 */
@media (min-width: 768px) {
  .responsive-container {
    padding: 32px;
    font-size: 16px;
  }
}

/* デスクトップ以上 */
@media (min-width: 1024px) {
  .responsive-container {
    padding: 48px;
    font-size: 18px;
    max-width: 1200px;
    margin: 0 auto;
  }
}

/* 高解像度ディスプレイ */
@media (-webkit-min-device-pixel-ratio: 2) {
  .logo {
    background-image: url('logo@2x.png');
    background-size: 200px 50px;
  }
}

Fluid Typography

.fluid-text {
  font-size: clamp(1rem, 2.5vw, 2rem);
  line-height: clamp(1.4, 1.5vw, 1.6);
}

ユーティリティクラス集

スペーシング

/* マージン */
.m-0 { margin: 0; }
.m-1 { margin: 8px; }
.m-2 { margin: 16px; }
.m-3 { margin: 24px; }
.m-4 { margin: 32px; }

.mt-1 { margin-top: 8px; }
.mr-1 { margin-right: 8px; }
.mb-1 { margin-bottom: 8px; }
.ml-1 { margin-left: 8px; }

/* パディング */
.p-0 { padding: 0; }
.p-1 { padding: 8px; }
.p-2 { padding: 16px; }
.p-3 { padding: 24px; }
.p-4 { padding: 32px; }

テキストユーティリティ

/* 配置 */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

/* 色 */
.text-primary { color: #3498db; }
.text-success { color: #2ecc71; }
.text-warning { color: #f39c12; }
.text-danger { color: #e74c3c; }
.text-muted { color: #6c757d; }

/* サイズ */
.text-sm { font-size: 0.875rem; }
.text-base { font-size: 1rem; }
.text-lg { font-size: 1.125rem; }
.text-xl { font-size: 1.25rem; }

表示制御

.show { display: block; }
.hide { display: none; }
.invisible { visibility: hidden; }

/* レスポンシブ表示制御 */
.d-none { display: none; }
.d-block { display: block; }
.d-flex { display: flex; }

@media (max-width: 767px) {
  .d-md-none { display: none; }
  .d-md-block { display: block; }
}

実践的なトリック集

中央寄せテクニック

/* Flexboxで中央寄せ */
.center-flex {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

/* Gridで中央寄せ */
.center-grid {
  display: grid;
  place-items: center;
  min-height: 100vh;
}

/* Position + Transformで中央寄せ */
.center-absolute {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

アスペクト比の維持

.aspect-ratio {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%; /* 16:9 */
}

.aspect-ratio-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 新しいaspect-ratioプロパティ */
.modern-aspect-ratio {
  aspect-ratio: 16 / 9;
  width: 100%;
  object-fit: cover;
}

スクロールバーのカスタマイズ

.custom-scrollbar {
  overflow-y: auto;
  max-height: 300px;
}

.custom-scrollbar::-webkit-scrollbar {
  width: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #555;
}

デバッグ用CSS

/* 全要素にボーダーを表示（レイアウト確認用） */
* {
  outline: 1px solid red !important;
}

/* 特定の要素のみ */
.debug {
  outline: 2px solid blue;
  background: rgba(255, 0, 0, 0.1);
}

/* Grid/Flexboxの確認 */
.debug-grid {
  background-image: 
    linear-gradient(to right, rgba(255,0,0,0.1) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,0,0,0.1) 1px, transparent 1px);
  background-size: 20px 20px;
}

パフォーマンス最適化のCSS

/* GPU加速 */
.gpu-optimized {
  transform: translateZ(0);
  will-change: transform;
}

/* 効率的なアニメーション */
.performant-animation {
  /* transform と opacity のみ使用 */
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* レイアウトシフトを避ける */
.stable-layout {
  /* width/height の代わりに transform を使用 */
  transform: scale(1.1);
  /* レイアウトに影響しない */
}

まとめ

この記事では、実務でよく使うCSSコードを体系的にまとめて紹介しました。

重要なポイント

• レイアウト: FlexboxとGridを使い分ける
• 装飾: シンプルで効果的なスタイリング
• レスポンシブ: モバイルファーストの設計
• パフォーマンス: 効率的なアニメーション

活用のコツ

• まずは基本のプロパティから覚える
• コピペして実際に試してみる
• 段階的に高度なテクニックを習得
• ブラウザの開発者ツールで動作確認