Webデザインを始めたばかりの頃、CSSの書き方やプロパティが多すぎて「何をどう使えばいいのかわからない！」と困った経験はありませんか？
「あの効果、どうやって作るんだっけ？」
「よく使うプロパティを忘れてしまう…」
「効率よくCSSを書けるようになりたい」
そんなときに便利なのがCSSチートシートです。
よく使うプロパティや書き方をまとめておくことで、コードを書くときにすぐ確認でき、効率がぐっとアップします。
この記事では、初心者でも迷わず使えるように
- レイアウト（flexbox、position など）
- 文字デザイン（フォント、色、配置など）
- 余白調整（margin、padding）
- ボックスデザイン（背景、枠線、影など）
- アニメーション（hover効果、動きなど）
まで、CSSでよく使う基本＆便利プロパティを、コピペで使える例文とともに一覧で紹介します。
このチートシートの使い方
効率的な活用方法
- ブックマーク推奨： この記事をブックマークして、コーディング中に参照
- 段階的学習： 全部覚えようとせず、必要な部分から徐々に使用
- 実践重視： 実際にコードを書きながら確認
カテゴリ別の優先度
- 最優先： レイアウト、文字デザイン、余白調整
- 次に重要： ボックスデザイン、基本アニメーション
- 応用編： 高度なアニメーション、特殊効果
1. レイアウト調整に使うCSS
Flexbox（最重要）
| プロパティ | 例 | 効果 |
|---|---|---|
display | display: flex; | flexboxレイアウトを開始 |
justify-content | justify-content: center; | 横方向の配置（center, space-between, flex-end など） |
align-items | align-items: center; | 縦方向の配置（center, flex-start, flex-end など） |
flex-direction | flex-direction: column; | 縦並びに変更（デフォルトは row） |
flex-wrap | flex-wrap: wrap; | 要素を折り返し可能にする |
gap | gap: 20px; | 要素間の間隔を一括指定 |
flex | flex: 1; | 余ったスペースを均等に分割 |
よく使う組み合わせ：
/* 中央寄せ */
.center {
display: flex;
justify-content: center;
align-items: center;
}
/* 横並び・均等間隔 */
.spread {
display: flex;
justify-content: space-between;
align-items: center;
}
/* カード並び */
.cards {
display: flex;
gap: 20px;
flex-wrap: wrap;
}
Position（位置調整）
| プロパティ | 例 | 効果 |
|---|---|---|
position | position: relative; | 位置指定の基準を設定 |
position: absolute; | 親要素を基準に自由配置 | |
position: fixed; | 画面に固定（スクロールしても動かない） | |
position: sticky; | スクロール時に指定位置で固定 | |
top | top: 10px; | 上からの距離 |
right | right: 15px; | 右からの距離 |
bottom | bottom: 0; | 下からの距離 |
left | left: 20px; | 左からの距離 |
z-index | z-index: 10; | 重なり順序（数字が大きいほど前面） |
実用例：
/* 右上に固定ボタン */
.fixed-button {
position: fixed;
top: 20px;
right: 20px;
z-index: 100;
}
/* 中央配置 */
.absolute-center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
CSS Grid（格子レイアウト）
| プロパティ | 例 | 効果 |
|---|---|---|
display | display: grid; | gridレイアウトを開始 |
grid-template-columns | grid-template-columns: 1fr 1fr 1fr; | 列の分割（3等分の例） |
grid-template-rows | grid-template-rows: auto 1fr auto; | 行の分割 |
grid-gap | grid-gap: 20px; | グリッド間の間隔 |
grid-column | grid-column: span 2; | 2列分のスペースを占有 |
grid-row | grid-row: span 3; | 3行分のスペースを占有 |
実用例：
/* 基本的な3カラムレイアウト */
.grid-layout {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 20px;
}
/* レスポンシブ対応グリッド */
.responsive-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}
2. 文字デザインに使うCSS
基本の文字プロパティ
| プロパティ | 例 | 効果 |
|---|---|---|
font-size | font-size: 16px; | 文字サイズ（px, em, rem, % が使える） |
color | color: #333; | 文字色（#hex, rgb(), 色名 が使える） |
font-family | font-family: 'Arial', sans-serif; | フォント指定 |
font-weight | font-weight: bold; | 太さ（normal, bold, 100-900 の数値） |
font-style | font-style: italic; | 斜体（normal, italic） |
text-decoration | text-decoration: underline; | 装飾（underline, line-through, none） |
text-transform | text-transform: uppercase; | 大文字変換（uppercase, lowercase, capitalize） |
文字配置・間隔
| プロパティ | 例 | 効果 |
|---|---|---|
text-align | text-align: center; | 横方向の配置（left, center, right, justify） |
line-height | line-height: 1.6; | 行間（1.5-1.8 が読みやすい） |
letter-spacing | letter-spacing: 0.1em; | 文字間隔 |
word-spacing | word-spacing: 0.2em; | 単語間隔 |
text-indent | text-indent: 1em; | 段落の字下げ |
vertical-align | vertical-align: middle; | 縦方向の配置（テーブルセルやインライン要素） |
実用例：
/* 見出しスタイル */
.heading {
font-size: 24px;
font-weight: bold;
color: #333;
text-align: center;
letter-spacing: 0.05em;
}
/* 読みやすい本文 */
.text-body {
font-size: 16px;
line-height: 1.7;
color: #555;
text-align: justify;
}
文字の切り抜き・省略
| プロパティ | 例 | 効果 |
|---|---|---|
white-space | white-space: nowrap; | 改行を防ぐ |
overflow | overflow: hidden; | はみ出しを隠す |
text-overflow | text-overflow: ellipsis; | 省略記号（…）を表示 |
文字省略の組み合わせ：
/* 1行で省略 */
.text-ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* 複数行で省略（Webkit系ブラウザ） */
.text-clamp {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
3. 余白調整（マージン・パディング）
基本的な余白プロパティ
| プロパティ | 例 | 効果 |
|---|---|---|
margin | margin: 20px; | 外側の余白（全方向） |
padding | padding: 10px; | 内側の余白（全方向） |
margin-top | margin-top: 15px; | 上の外側余白 |
margin-right | margin-right: 10px; | 右の外側余白 |
margin-bottom | margin-bottom: 25px; | 下の外側余白 |
margin-left | margin-left: 5px; | 左の外側余白 |
padding-top | padding-top: 8px; | 上の内側余白 |
padding-right | padding-right: 12px; | 右の内側余白 |
padding-bottom | padding-bottom: 8px; | 下の内側余白 |
padding-left | padding-left: 12px; | 左の内側余白 |
便利な余白指定方法
| 書き方 | 例 | 効果 |
|---|---|---|
| 4方向個別 | margin: 10px 15px 20px 5px; | 上 右 下 左 の順 |
| 上下・左右 | margin: 10px 20px; | 上下10px、左右20px |
| 上・左右・下 | margin: 5px 10px 15px; | 上5px、左右10px、下15px |
| 中央寄せ | margin: 0 auto; | 左右を自動調整（中央寄せ） |
実用例：
/* カードのスタイル */
.card {
margin: 20px auto; /* 上下20px、左右中央寄せ */
padding: 15px 20px; /* 上下15px、左右20px */
max-width: 400px;
}
/* ボタンのスタイル */
.button {
padding: 12px 24px; /* 上下12px、左右24px */
margin-bottom: 10px; /* 下に10pxの間隔 */
}
4. ボックスデザインを整えるCSS
サイズ調整
| プロパティ | 例 | 効果 |
|---|---|---|
width | width: 300px; | 幅を指定 |
height | height: 200px; | 高さを指定 |
max-width | max-width: 100%; | 最大幅を制限 |
min-width | min-width: 200px; | 最小幅を指定 |
max-height | max-height: 500px; | 最大高さを制限 |
min-height | min-height: 100px; | 最小高さを指定 |
box-sizing | box-sizing: border-box; | padding/borderを含めたサイズ計算 |
背景デザイン
| プロパティ | 例 | 効果 |
|---|---|---|
background-color | background-color: #f5f5f5; | 背景色 |
background-image | background-image: url('image.jpg'); | 背景画像 |
background-size | background-size: cover; | 背景画像のサイズ（cover, contain, 100% など） |
background-position | background-position: center; | 背景画像の位置 |
background-repeat | background-repeat: no-repeat; | 背景画像の繰り返し |
background | background: #fff url('bg.jpg') center/cover no-repeat; | 背景の一括指定 |
枠線とエフェクト
| プロパティ | 例 | 効果 |
|---|---|---|
border | border: 1px solid #ccc; | 枠線（太さ スタイル 色） |
border-top | border-top: 2px solid #333; | 上の枠線のみ |
border-radius | border-radius: 8px; | 角を丸くする |
box-shadow | box-shadow: 2px 2px 5px rgba(0,0,0,0.2); | 影をつける |
outline | outline: 2px solid #007bff; | アウトライン（レイアウトに影響しない枠線） |
実用例：
/* カードデザイン */
.modern-card {
background: white;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
padding: 20px;
margin: 20px 0;
}
/* ボタンデザイン */
.primary-button {
background: #007bff;
border: none;
border-radius: 6px;
color: white;
padding: 12px 24px;
box-shadow: 0 2px 4px rgba(0,123,255,0.3);
}
表示・非表示
| プロパティ | 例 | 効果 |
|---|---|---|
display | display: none; | 要素を完全に隠す |
display: block; | ブロック要素として表示 | |
display: inline; | インライン要素として表示 | |
display: inline-block; | インラインブロック要素として表示 | |
visibility | visibility: hidden; | 要素を透明にする（場所は確保） |
opacity | opacity: 0.5; | 透明度を調整（0-1） |
overflow | overflow: hidden; | はみ出し部分を隠す |
overflow: scroll; | スクロールバーを表示 | |
overflow: auto; | 必要に応じてスクロールバー |
5. アニメーション・動きを作るCSS
基本のアニメーション
| プロパティ | 例 | 効果 |
|---|---|---|
transition | transition: all 0.3s ease; | 変化をなめらかに（プロパティ 時間 変化方法） |
transform | transform: scale(1.1); | 拡大縮小・回転・移動 |
cursor | cursor: pointer; | カーソルの形を変更 |
Transformの値
| 変形 | 例 | 効果 |
|---|---|---|
scale() | transform: scale(1.2); | 1.2倍に拡大 |
rotate() | transform: rotate(45deg); | 45度回転 |
translate() | transform: translate(10px, 20px); | X軸に10px、Y軸に20px移動 |
skew() | transform: skew(15deg); | 傾斜変形 |
キーフレームアニメーション
/* アニメーションの定義 */
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* アニメーションの適用 */
.fade-in {
animation: fadeIn 0.5s ease-out;
}
よく使うHover効果
/* ボタンのホバー効果 */
.hover-button {
background: #007bff;
color: white;
padding: 12px 24px;
border: none;
border-radius: 6px;
transition: all 0.3s ease;
cursor: pointer;
}
.hover-button:hover {
background: #0056b3;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0,123,255,0.3);
}
/* カードのホバー効果 */
.hover-card {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hover-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}
6. 便利なユーティリティ・その他
よく使う便利プロパティ
| プロパティ | 例 | 効果 |
|---|---|---|
cursor | cursor: pointer; | カーソルを手の形にする |
user-select | user-select: none; | テキスト選択を無効化 |
pointer-events | pointer-events: none; | クリックを無効化 |
resize | resize: none; | 要素のリサイズを無効化 |
scroll-behavior | scroll-behavior: smooth; | スムーズスクロール |
画像関連
| プロパティ | 例 | 効果 |
|---|---|---|
object-fit | object-fit: cover; | 画像をはみ出さずに切り抜く |
object-fit: contain; | 画像全体を表示 | |
object-position | object-position: center top; | 画像の位置調整 |
filter | filter: blur(5px); | ぼかし効果 |
filter: brightness(1.2); | 明度調整 | |
filter: grayscale(100%); | グレースケール |
レスポンシブ対応
/* モバイルファースト */
.responsive-text {
font-size: 14px;
}
/* タブレット以上 */
@media (min-width: 768px) {
.responsive-text {
font-size: 16px;
}
}
/* デスクトップ以上 */
@media (min-width: 1024px) {
.responsive-text {
font-size: 18px;
}
}
7. 実用的なコンポーネント例
モダンなカードコンポーネント
.card {
background: white;
border-radius: 12px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
padding: 24px;
margin: 16px 0;
transition: all 0.3s ease;
border: 1px solid #e5e7eb;
}
.card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}
.card-title {
font-size: 20px;
font-weight: 600;
color: #1f2937;
margin-bottom: 12px;
}
.card-content {
color: #6b7280;
line-height: 1.6;
}
フレックスボックスナビゲーション
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 24px;
background: white;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.nav-brand {
font-size: 24px;
font-weight: bold;
color: #1f2937;
}
.nav-menu {
display: flex;
gap: 32px;
list-style: none;
margin: 0;
padding: 0;
}
.nav-link {
color: #6b7280;
text-decoration: none;
font-weight: 500;
transition: color 0.3s ease;
}
.nav-link:hover {
color: #3b82f6;
}
レスポンシブグリッド
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 24px;
padding: 24px;
}
.grid-item {
background: white;
border-radius: 8px;
padding: 20px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
まとめ：効率的なCSS開発のために
このチートシートを活用するコツ
段階的習得：
- レイアウト（flexbox）を最初にマスター
- 文字デザインと余白調整で見た目を整える
- ボックスデザインでコンポーネントを作る
- アニメーションで動きをつける
実践的な使い方：
- よく使うパターンは自分用のスニペット集を作成
- プロジェクトごとに必要なプロパティを厳選
- ブラウザの開発者ツールで効果を確認しながら調整
覚えておくべき最重要プロパティ
- レイアウト：
display: flex,justify-content,align-items - 文字：
font-size,color,text-align,line-height - 余白：
margin,paddingデザイン：background,border,border-radius,box-shadow - アニメーション：
transition,transform,cursor: pointer
コメント