コース紹介

CSS入門｜Webページの見た目を変える基本をやさしく解説

By Hatch - YU

本コースの概要

HTMLがWebページの「骨格」なら、CSS（Cascading Style Sheets）はその見た目を整える「服」や「化粧」のような存在。色やフォント、レイアウトを指定し、ページを美しく魅力的に見せるために使います。

本記事では、CSSの基本的な役割、書き方、よく使うプロパティを初心者にも分かりやすく解説します。

コース完了後に目指す姿

この記事では以下のスキルが身についていることを目指します。

  • CSSの基本的な書き方を理解する
  • 色やフォント、余白を変更できる
  • HTMLとCSSを組み合わせて簡単なデザインを作れる
  • レイアウトの基礎を身につけ、次の学習（FlexboxやGrid）に進める

CSSとは？

CSSはスタイルシート言語で、HTMLで作られた要素の見た目を指定します。例えば、文字を赤くしたり、背景に色を付けたり、画像や文章の配置を変えたりできます。

HTML → 構造、CSS → 見た目、という役割分担を覚えると整理しやすいです。

CSSの書き方

CSSは「セレクタ」と「宣言」で構成されます。

セレクタ {
  プロパティ: 値;
}

例：文字色を赤にする場合

p {
  color: red;
}
  • セレクタ：どの要素にスタイルを適用するか（例：pは段落）
  • プロパティ：変更したい見た目（例：colorは文字色）
  • 値：具体的な設定（例：red）

よく使うCSSプロパティ

  1. 色と背景
color: blue;        /* 文字色 */
background-color: yellow; /* 背景色 */
  • 文字の大きさと種類
font-size: 20px;
font-family: Arial, sans-serif;
  • 余白
margin: 20px;  /* 要素の外側の余白 */
padding: 10px; /* 要素の内側の余白 */
  • 枠線
border: 1px solid black;

HTMLとCSSを組み合わせる方法

  1. HTML内に直接書く（インラインスタイル）
<p style="color:red;">赤い文字</p>
  • HTML内にまとめて書く（内部スタイルシート）
<style>
p { color: red; }
</style>
  • 外部ファイルに分ける（外部スタイルシート）※推奨
<link rel="stylesheet" href="style.css">

初心者がつまずきやすいポイントと対策

  • セレクタの指定ミス → 適用されない
  • 優先順位（CSSのカスケード）を理解していない → 思った通りに表示されない
  • pxや%など単位の混乱

CodeNestで学習を始めよう！

CSSは「試して結果をすぐ見る」ことで理解が早まります。CodeNestならブラウザ上でCSSを書き、即座に見た目を確認できます。

  • 色や余白の変更をリアルタイムで確認
  • 小さな課題をクリアしながら進めるので達成感がある
  • HTMLとCSSを一緒に練習できる

CodeNestではあなたの理解度に合わせた完全オリジナル教材で学習を進めることができます！今まで独学にチャレンジして挫折した人もうまく進められるはず、さぁまずは無料の会員登録から。

https://codenest.hatch-it.jp

まとめ

CSSはWebページを美しく見せるための必須スキルです。HTMLだけのページに色やレイアウトを加えると、一気に「作品」らしくなります。毎日少しずつスタイルを試し、感覚的に使いこなせるようになりましょう。