CSSコード一覧｜初心者がよく使うプロパティを目的別にサンプル付きで解説

CSSを書いていると、「文字を中央にするコードは？」「横並びにするプロパティはどれ？」と何度も調べますよね。

CSSはすべて暗記する必要はありません。目的に合うプロパティを探し、値の意味を確認して、実際の画面で試すことが大切です。

この記事では、初心者がよく使うCSSコードを、文字、余白、背景、Flexbox、Grid、画像、レスポンシブ、操作・アニメーションへ分類して一覧にしました。後半には、コピーして試せるボタン・カード・画像・メニューのサンプルも掲載します。

CSSコード一覧の使い方

CSSは「対象を選ぶセレクター」「変更する項目を示すプロパティ」「具体的な設定を示す値」で書きます。

.card {
  color: #1e293b;
  background-color: #ffffff;
  padding: 1.5rem;
}

この例では.cardがセレクター、colorやpaddingがプロパティ、その右側が値です。プロパティと値をコロンでつなぎ、最後にセミコロンを書きます。

一覧の値は、使い方を理解するための例です。そのまま使うだけでなく、色や大きさをページに合わせて調整してください。

上の図は、この記事で扱うCSSの主なカテゴリーです。中央のWebページに対し、周囲の文字、ボックス、色、レイアウト、端末表示、操作の指定が反映されます。

文字・フォントのCSSコード一覧

見出しや本文の色、大きさ、太さ、行間、揃え方を整えるプロパティです。

本文はline-height: 1.6〜1.8程度から試すと、複数行でも読みやすく調整できます。文字サイズを固定しすぎず、remなどの相対単位も活用しましょう。

.article-title {
  color: #172554;
  font-size: clamp(2rem, 6vw, 3.5rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.02em;
}

clamp()は最小値、画面幅に応じた値、最大値をまとめて指定する関数です。この例では見出しを2rem未満・3.5rem超にせず、その間を画面幅に合わせて変化させます。

幅・高さ・余白のCSSコード一覧

要素を四角い箱として考え、内容の大きさ、内側の余白、外側の余白を調整します。これをボックスモデルと呼びます。

width: 100%と固定のpaddingを組み合わせると、要素が親からはみ出すことがあります。全要素へbox-sizing: border-boxを指定すると、paddingとborderを指定幅に含めて計算できます。

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

.container {
  width: min(100% - 2rem, 72rem);
  margin-inline: auto;
}

背景・枠線・影のCSSコード一覧

カードやボタンのまとまり、背景画像、角丸、影などの視覚的な装飾を作ります。

opacityは子要素の文字や画像もまとめて透明にします。背景色だけを半透明にしたい場合は、rgb(37 99 235 / 60%)のように色側へ透明度を含めます。

.notice {
  padding: 1.5rem;
  background: linear-gradient(135deg, #eff6ff, #eef2ff);
  border: 1px solid #bfdbfe;
  border-radius: 1rem;
  box-shadow: 0 12px 30px rgb(30 64 175 / 12%);
}

表示・非表示のCSSコード一覧

内容を視覚的に隠しつつ読み上げには残したい場合は、単純なdisplay: noneではなく、アクセシビリティ用の専用classを使います。目的によって隠し方を選びましょう。

FlexboxのCSSコード一覧

Flexboxは、子要素を横または縦の一方向へ並べるレイアウトです。ナビゲーション、ボタン列、アイコンと文章の配置などに向いています。

.button-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

orderは見た目だけを変え、HTMLやキーボード操作の順序は変えません。意味のある順番はHTML側で整え、安易に入れ替えないようにします。

CSS Gridのコード一覧

CSS Gridは、行と列の二方向に要素を並べます。カード一覧やページ全体のレイアウトに向いています。

.card-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 1.5rem;
}

この書き方では、利用できる幅に応じて列数が自動で変わります。カードが16remより狭くなりにくく、狭い画面では1列へ収まります。

位置指定のCSSコード一覧

position: absoluteを使うときは、基準にしたい親要素へposition: relativeを指定します。位置指定だけでページ全体を組むと、文字量や画面幅の変化ではみ出しやすいため、基本レイアウトにはFlexboxやGridを使いましょう。

画像のCSSコード一覧

img {
  display: block;
  max-width: 100%;
  height: auto;
}

.card__image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 0.75rem;
}

object-fit: coverは枠を埋めるため、画像の一部が切れる場合があります。顔や商品など重要な部分が欠けていないか、画面幅を変えて確認してください。

レスポンシブ対応のCSSコード一覧

.layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 2rem;
}

@media (max-width: 48rem) {
  .layout {
    grid-template-columns: 1fr;
  }
}

画面幅48rem以下では、2列を1列へ変更します。ブレークポイントは端末名だけで決めず、内容が窮屈になる幅を実際のブラウザで探してください。

操作・アニメーションのCSSコード一覧

.button {
  transition: background-color 0.2s, transform 0.2s;
}

.button:hover {
  background-color: #1d4ed8;
  transform: translateY(-2px);
}

.button:focus-visible {
  outline: 3px solid #f59e0b;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .button {
    transition: none;
  }
}

マウスの:hoverだけでなく、キーボード操作の:focus-visibleも用意します。動きを減らす設定を使う読者へ配慮し、prefers-reduced-motionにも対応しましょう。

コピーして試せるCSSコード例

一覧で確認したプロパティを組み合わせ、よく使う部品を作ります。HTMLとCSSを同じclass名で対応させてください。

ボタン

<a class="button" href="#">詳しく見る</a>

.button {
  display: inline-block;
  padding: 0.75rem 1.25rem;
  color: #ffffff;
  background-color: #2563eb;
  border-radius: 0.5rem;
  text-decoration: none;
  font-weight: 700;
}

.button:hover {
  background-color: #1d4ed8;
}

リンクをボタンらしく見せても、HTML上はリンクです。ページ移動にはa要素、フォーム送信や画面内の処理にはbutton要素を使い分けます。

レスポンシブなカード一覧

<div class="card-list">
  <article class="card">HTML入門</article>
  <article class="card">CSS入門</article>
  <article class="card">制作練習</article>
</div>

.card-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 1.5rem;
}

.card {
  padding: 1.5rem;
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
}

横並びメニュー

<nav aria-label="メインメニュー">
  <ul class="menu">
    <li><a href="#">ホーム</a></li>
    <li><a href="#">サービス</a></li>
    <li><a href="#">お問い合わせ</a></li>
  </ul>
</nav>

.menu {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu a {
  display: inline-block;
  padding-block: 0.75rem;
  color: #1e293b;
}

CSSコードを使うときの注意点

• 値をコピーしたままにせず、実際の画面で余白と文字サイズを確認する
• 固定の幅・高さだけに頼らず、max-widthや自動折り返しを使う
• 色だけで状態やエラーを伝えず、文章やアイコンも組み合わせる
• :hoverだけでなく:focus-visibleも確認する
• 表示順をCSSだけで変えず、HTMLの意味と読み上げ順を保つ
• 古いレイアウト目的のfloatよりFlexboxやGridを優先する

コードが反映されない場合は、保存、CSSファイルのパス、class名、記号、後ろからの上書きを順番に確認します。書き方と外部CSSの接続は、次の記事で実践できます。

CSSコード一覧に関するよくある質問

CSSプロパティは何個ありますか？

CSSには多数のプロパティがあり、新しい機能も追加されます。個数を覚えるより、目的からMDNのCSSリファレンスなどで調べ、対応状況と使い方を確認することが重要です。

初心者が最初に覚えるプロパティはどれですか？

color、background-color、font-size、margin、padding、border、width、display、gapから始めるとよいでしょう。その後、Flexbox、Grid、メディアクエリーへ進みます。

CSSコードはコピーしてもよいですか？

学習用のサンプルはコピーして試せます。ただし、何を変更するコードか理解し、ページのHTML構造やデザインに合わせて値を調整してください。外部サイトのコードを利用するときは、そのサイトの利用条件も確認します。

まとめ

CSSコードは、文字、ボックス、背景、Flexbox、Grid、位置、画像、レスポンシブ、操作・アニメーションの目的別に探すと理解しやすくなります。

一覧を丸暗記する必要はありません。まずはよく使うプロパティをサンプルへ追加し、値を変えながらブラウザの結果を確認してください。

コードが増えたら、関連する指定をまとめ、class名を役割に合わせて付けます。目的から調べ、試し、表示を確認する流れを繰り返すことが、CSSを身に付ける近道です。