CSSでできること7選｜初心者向けにコードと画面の変化を解説

CSSを学び始めると、「文字の色を変える以外に何ができるの？」「HTMLやJavaScriptとはどう違うの？」と疑問に感じますよね。

CSSでできるのは、Webページの装飾だけではありません。要素の配置、スマートフォン対応、マウスやキーボード操作に応じた変化、アニメーション、印刷時の見せ方まで指定できます。

この記事では、CSSでできる代表的なことを、初心者向けの短いコード例と一緒に解説します。CSSだけではできないことも整理するので、HTML・CSS・JavaScriptの役割分担も分かります。

CSSはWebページの見た目と配置を指定する言語

CSSは「Cascading Style Sheets（カスケーディング・スタイル・シート）」の略です。HTMLで作った見出し、文章、画像、リンクなどに対して、ブラウザでどのように見せるかを指定します。

たとえばHTMLが家の柱や部屋を作る設計なら、CSSは壁の色、家具の配置、部屋ごとの広さを決める役割です。役割を分けることで、同じCSSを複数のページで使い回しやすくなります。

CSSの仕組みそのものを先に知りたい人は、次の記事も参考にしてください。

CSSでできること一覧

CSSの代表的な機能をまとめると、次の7つです。

1. 文字の見た目を整える
2. 色・背景・枠線・影を付ける
3. 要素の幅・高さ・余白を調整する
4. 要素を横並びやグリッド状に配置する
5. 画面幅に合わせてレスポンシブ対応する
6. 操作に応じて見た目を変える
7. アニメーションや印刷用の表示を作る

上の図では、同じWebページを中心に、CSSで変更できる内容を分けて示しています。ここからは、それぞれを実際のプロパティと一緒に見ていきましょう。

文字の色・大きさ・太さ・行間を整える

CSSを使うと、文章の色、大きさ、太さ、フォント、行間、文字間隔などを変更できます。読みやすい本文と、目に入りやすい見出しを作る基本の機能です。

.page-title {
  color: #1e3a8a;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.04em;
}

colorは文字色、font-sizeは文字サイズ、font-weightは文字の太さを指定します。line-heightで行間を広げると、複数行の見出しや本文が読みやすくなります。

ただし、文字を極端に小さくしたり、背景に近い色へ変えたりすると読みにくくなります。見た目だけでなく、ズームしても読める文字サイズと十分な色の差を意識しましょう。

背景・枠線・角丸・影で部品を作る

背景色、グラデーション、枠線、角丸、影を組み合わせると、お知らせ、カード、ボタンのような部品を作れます。

<section class="notice">
  <h2>お知らせ</h2>
  <p>新しい教材を公開しました。</p>
</section>

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

変更前は文字が縦に並ぶだけですが、CSSを追加すると、淡い背景と枠線が付いた1つのカードとして見えるようになります。paddingは枠線と内容の間にある内側の余白です。

装飾は情報のまとまりを伝えるために使います。すべての部品へ強い影や派手な色を付けると、どこが重要か分かりにくくなるので注意してください。

幅・高さ・余白を調整する

Webページの要素は、基本的に四角い箱として扱われます。これを「ボックスモデル」と呼び、内容の大きさ、内側の余白、枠線、外側の余白をCSSで調整します。

.article-card {
  width: min(100%, 42rem);
  margin-inline: auto;
  padding: 1.5rem;
  box-sizing: border-box;
}

widthは幅、marginは枠線の外側、paddingは枠線の内側の余白です。この例では、カードを親要素より大きくせず、最大42remにして中央へ配置しています。

box-sizing: border-boxを指定すると、幅の計算にpaddingとborderが含まれます。指定した幅から要素がはみ出すトラブルを減らせるため、実際の制作でよく使われます。

FlexboxとGridでレイアウトを作る

CSSでは、要素を横並びにしたり、複数の列へ分けたりできます。現在の基本となる方法は、Flexbox（フレックスボックス）とCSS Grid（グリッド）です。

<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(3, minmax(0, 1fr));
  gap: 1rem;
}

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

CSSを追加する前は3つの記事が縦に並びます。追加後は、同じ幅の3列へ並び、gapでカード同士の間隔も作られます。

Flexboxの基本を詳しく試したい場合は、次の記事で横並びの考え方から確認できます。

画面幅に合わせてレスポンシブ対応する

レスポンシブ対応とは、パソコン、タブレット、スマートフォンなど、異なる画面幅でも読みやすく操作しやすい表示を作ることです。

先ほどの3列カードを、狭い画面では1列へ変更してみましょう。@media（メディアクエリー）を使うと、条件に合うときだけCSSを適用できます。

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

画面幅が48rem以下になると、カードは横3列から縦1列へ変わります。文字やボタンが小さくなりすぎないように、実際のスマートフォン幅で確認することが重要です。

画像にはmax-width: 100%を指定すると、親要素より大きくなる場合に縮小できます。レイアウトだけでなく、画像、文字、余白も合わせて確認しましょう。

マウスやキーボード操作に応じて見た目を変える

CSSの擬似クラスを使うと、リンクへマウスを重ねたときや、キーボードでフォーカスしたときに見た目を変えられます。

.button {
  display: inline-block;
  padding: 0.75rem 1.25rem;
  color: #ffffff;
  background-color: #2563eb;
  border-radius: 0.5rem;
  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;
}

:hoverは主にマウスを重ねた状態、:focus-visibleはキーボード操作などでフォーカスが見えるべき状態を表します。操作できる場所が分かるため、デザインとアクセシビリティの両方に役立ちます。

クリック後にデータを保存する、別の情報を読み込むといった処理はCSSだけではできません。CSSが担当するのは、ここでは「状態に応じた見た目の変化」です。

アニメーションを付ける

CSSでは、transitionやanimationを使って要素を滑らかに変化させられます。ボタンの色を自然に変える、読み込み中の印を回転させるといった表現が可能です。

.loading-icon {
  width: 2rem;
  aspect-ratio: 1;
  border: 4px solid #dbeafe;
  border-top-color: #2563eb;
  border-radius: 50%;
  animation: rotate 0.8s linear infinite;
}

@keyframes rotate {
  to {
    transform: rotate(1turn);
  }
}

@media (prefers-reduced-motion: reduce) {
  .loading-icon {
    animation: none;
  }
}

@keyframesで変化の内容を決め、animationで時間や繰り返しを指定します。動きが苦手な読者もいるため、prefers-reduced-motionで端末の「視差効果を減らす」設定にも対応しています。

アニメーションは注目を集めますが、使いすぎると内容を読む邪魔になります。操作結果や読み込み中など、意味のある場所に絞って使いましょう。

印刷用やダークモード用の見た目も指定できる

CSSは画面表示だけでなく、印刷時の表示や端末のカラーモードにも対応できます。

@media print {
  .site-header,
  .site-footer {
    display: none;
  }
}

@media (prefers-color-scheme: dark) {
  body {
    color: #e2e8f0;
    background-color: #0f172a;
  }
}

@media printでは、印刷に不要なメニューやフッターを隠せます。prefers-color-schemeでは、端末がダークモードのときに使う色を指定できます。

ダークモードでは背景色だけを暗くせず、文字、リンク、枠線、画像の見え方も確認してください。明るい画面と暗い画面の両方で、情報が同じように読み取れることが大切です。

CSSだけではできないこと

CSSは多機能ですが、Webサイトのすべてを作れるわけではありません。CSSが苦手な範囲を知ると、次に学ぶ技術を判断しやすくなります。

CSSには文字を表示するcontentプロパティもありますが、主要な本文をCSSだけで用意する使い方には向きません。内容と意味はHTMLに書き、CSSは見た目を担当させます。

また、CSSでボタンのような見た目を作っても、元のHTMLが単なるdiv要素なら、キーボード操作や読み上げでボタンとして扱われません。操作する部品は、目的に合うHTML要素を選ぶことが重要です。

初心者がCSSを学ぶ順番

機能が多くても、すべてのプロパティを暗記する必要はありません。まずは次の順番で、小さなページを作りながら覚えましょう。

1. CSSをHTMLへ読み込む方法を覚える
2. セレクター、プロパティ、値の書き方を理解する
3. 色、文字、背景を変更する
4. ボックスモデルと余白を理解する
5. FlexboxとGridで配置する
6. スマートフォン幅へ対応する
7. hover、focus、アニメーションを加える

最初の練習では、外部CSSファイルを1つ作り、1ページのプロフィールカードを完成させるのがおすすめです。変更するたびにブラウザを再読み込みし、「どの指定で何が変わったか」を確認してください。

CSSの基本的な書き方は、次の記事でセレクターと外部ファイルの読み込みから解説しています。

CSSでできることに関するよくある質問

CSSだけでホームページを作れますか？

CSSだけでは作れません。見出し、文章、画像、リンクなどの内容と構造をHTMLで用意し、その見た目をCSSで整えます。問い合わせ送信やデータ取得などの処理には、JavaScriptやサーバー側の仕組みも必要です。

CSSでクリック処理はできますか？

マウスを重ねたときや、チェックボックスの状態に応じて見た目を変えることはできます。ただし、クリックをきっかけにデータを保存する、APIを呼び出す、複雑に内容を書き換える処理にはJavaScriptなどを使います。

CSSは全部覚える必要がありますか？

すべて暗記する必要はありません。よく使う色、余白、文字、Flexbox、Gridを実際に書き、分からないプロパティはMDNのCSSリファレンスなどで確認する習慣を付けましょう。

まとめ

CSSを使うと、文字や色の装飾、余白、カード、横並び、グリッド、レスポンシブ対応、状態変化、アニメーション、印刷表示などを実現できます。

一方で、内容と構造はHTML、データ取得や複雑な操作はJavaScriptなどが担当します。「HTMLで意味を作り、CSSで見せ方を整える」と覚えると、役割を迷いにくくなります。

まずは短いHTMLへCSSを読み込み、文字色、余白、横並びの順に1つずつ変えてみてください。画面の変化を確認しながら書くことが、CSSを身に付ける近道です。