【完全保存版】CSSプロパティ網羅リスト＆初心者がハマるレイアウトの壁を徹底解説

公開日2025年12月1日
最終更新2025年12月2日
読了目安約5分

「CSSのプロパティ、多すぎて覚えきれない！」と悩んでいませんか？
実は、プロのエンジニアも全てを暗記しているわけではありません。
本記事では、実務で頻繁に使うCSSプロパティをカテゴリ別に網羅した「チートシート」と、多くの初心者が挫折する「position・Flexbox・Grid」の重要ポイントをセットで解説します。これさえあれば、もう迷いません。

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

この記事はSpanishへの翻訳作業中のため、日本語で表示されています。

はじめに：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設計や、メンテナンス性の高いコーディング規約の策定については、ぜひ専門家にご相談ください。