The Definitive Guide: Comprehensive CSS Property List & In-depth Explanation of Layout Pitfalls for Beginners

公開日December 1, 2025
最終更新December 2, 2025
読了目安約5分

Are you struggling with the feeling that there are too many CSS properties to remember?
In fact, even professional engineers don't memorize every single one.
This article provides a comprehensive "cheat sheet" of CSS properties frequently used in practice, organized by category, along with a detailed explanation of the key points for "position, Flexbox, and Grid," which are common stumbling blocks for many beginners. With this, you'll no longer be lost.

辞書として活用テキスト、ボックスモデルなど、頻出プロパティを表形式で網羅。困った時のリファレンスに。
positionの鉄則absoluteを使う際は、必ず親要素にrelativeを指定して「基準」を作ることを徹底する。
FlexとGridの使い分け1列のレイアウトはFlexbox、複雑なタイル状の2次元レイアウトはgrid-template-columnsを活用する。

はじめに：CSSは「暗記」じゃなくて「辞書」を持てば勝てる

Web制作の学習を始めたばかりの頃、CSSのプロパティの多さに圧倒されませんか？「text-alignだっけ？vertical-alignだっけ？」と、毎回検索していては時間がいくらあっても足りません。

でも安心してください。実務で使うプロパティはある程度決まっています。この記事の前半は、困った時にすぐ確認できる「頻出プロパティのチートシート（辞書）」として活用してください。そして後半では、その中でも特に難易度が高い「レイアウト手法」について深掘り解説します。

この記事をブックマークしておけば、CSSコーディングのスピードが劇的に上がりますよ！

【保存版】頻出CSSプロパティ完全チートシート

実務で登場頻度が高いプロパティをカテゴリ別にまとめました。

1. テキスト・フォント装飾（Typography）

文字の見た目を整えるための基本プロパティです。

プロパティ名	値の例	説明
color	`#333`, `red`, `rgba(0,0,0,0.5)`	文字の色を指定します。
font-size	`16px`, `1.2rem`, `100%`	文字の大きさを指定します。最近は`rem`推奨。
font-weight	`bold`, `700`, `normal`	文字の太さを指定します。
font-family	`"Helvetica", sans-serif`	フォントの種類（書体）を指定します。
text-align	`center`, `right`, `left`	テキストの水平方向の揃え位置を指定します。
line-height	`1.5`, `24px`	行間（行の高さ）を指定します。単位なし（1.5など）が推奨。
letter-spacing	`0.05em`	文字と文字の間隔を指定します。
text-decoration	`none`, `underline`	下線や取り消し線を制御します。リンクの下線消しによく使います。

2. ボックスモデル（Box Model）

要素のサイズや余白を制御する、レイアウトの基礎です。

プロパティ名	値の例	説明
width / height	`100%`, `300px`, `auto`	要素の幅と高さを指定します。
margin	`0 auto`, `10px 20px`	要素の外側の余白を指定します。
padding	`20px`	要素の内側の余白を指定します。
box-sizing	`border-box`	paddingやborderを幅に含める設定。*全称セレクタ()で必ず指定すべき設定**です。

3. 背景・境界線（Background & Border）

要素の見た目を装飾します。

プロパティ名	値の例	説明
background-color	`#f5f5f5`	背景色を指定します。
background-image	`url(img/bg.jpg)`	背景画像を指定します。
background-size	`cover`, `contain`	背景画像のサイズ調整。`cover`は領域を埋め尽くします。
border	`1px solid #ccc`	境界線（太さ・種類・色）を一括指定します。
border-radius	`4px`, `50%`	角丸を指定します。`50%`で正円になります。

4. 表示・可視性（Display & Visibility）

要素の振る舞いや表示・非表示を切り替えます。

プロパティ名	値の例	説明
display	`block`, `inline-block`, `none`	要素の表示形式。`flex`や`grid`もここで指定します。
opacity	`0.5`, `0`	不透明度。`0`で見えなくなりますが、場所は残ります。
z-index	`10`, `100`	重なりの順序。数字が大きいほど手前に来ます（要position）。

脱・初心者！レイアウトでつまずく「3つの難所」を攻略

基本プロパティは「見て覚える」ことができますが、以下の3つは「仕組みを理解」していないと、レイアウト崩れの原因になります。ここからは、初心者がハマりやすいポイントを重点的に解説します。

難所1：position（配置）の「基準点」迷子問題

position: absolute;（絶対配置）を使うと、要素があさっての方向に飛んでいってしまう経験はありませんか？これは「基準点」の設定忘れが原因です。

NG: 子要素にだけ absolute をつける → 画面全体（body）が基準になってしまう。
OK: 親要素に relative、子要素に absolute をつける。

.parent {
  position: relative; /* ここが基準！動かない */
}
.child {
  position: absolute; /* 親の左上を0として配置 */
  top: 0;
  right: 0;
}

「absoluteを使うときは、親にrelative」を呪文のように唱えましょう。

難所2：Flexbox（1次元）の「軸」勘違い問題

要素を横並びにする display: flex; ですが、中央揃えにする時に justify-content なのか align-items なのか迷うことがあります。

これは「主軸（メインの並ぶ向き）」がどっちか？で決まります。

横並び（初期値）の場合:
- 左右の調整 = justify-content
- 上下の調整 = align-items
縦並び（flex-direction: column）の場合:
- 上下の調整 = justify-content
- 左右の調整 = align-items

軸が90度回転すると、プロパティの役割も入れ替わる点に注意してください。

難所3：CSS Grid（2次元）の「列定義」食わず嫌い問題

「Flexboxでなんとか作れるから、Gridは避けている」という方も多いですが、タイル状のレイアウトにおいてはGridの方が圧倒的に簡単です。

特に grid-template-columns は最強の武器です。

flexboxでタイル配置をする場合...

マージンの計算をして、幅を％で指定して、flex-wrapして...と記述が複雑になりがちです。

Gridならこれだけ！

CSS

.grid-container {
  display: grid;
  /* 1fr(比率)を3回繰り返す ＝ 自動で3列になる */
  grid-template-columns: repeat(3, 1fr);
  gap: 20px; /* 面倒な余白計算は不要！ */
}

これだけで、「均等な3カラム・余白20px」が完成します。レスポンシブ対応も、メディアクエリで repeat(2, 1fr)（2列）などに書き換えるだけで済むため、HTML構造を汚さずに済みます。

まとめ：このページをブックマークして実装のお供に

CSSは丸暗記する必要はありません。「どんなプロパティがあったか」を把握しておき、細かい書き方はこのページのようなチートシートを見ながら書けばOKです。

基本プロパティはコピペで使う
positionは親要素のrelativeを忘れない
Gridはタイル配置で積極的に使う

この3点を意識して、効率よくコーディングを進めていきましょう！

より高度なCSS設計や、メンテナンス性の高いコーディング規約の策定については、ぜひ専門家にご相談ください。