メインコンテンツまでスキップ

CSS

CSSは、HTMLで作ったWebページの見た目を整えるスタイルシート言語です。色、文字の大きさ、余白、配置、アニメーション、スマホ対応などを指定できます。

何ができる？​

  • 文字の色や大きさを変える
  • ボタンやカードを見やすくする
  • 画面を横並び・縦並びに配置する
  • スマホとPCでレイアウトを変える
  • ホバー時の動きや簡単なアニメーションを作る

学習ゴール​

このページでは、次の状態を目指します。

  • HTMLにCSSを読み込める
  • セレクタでスタイルを当てる対象を選べる
  • 色、余白、文字サイズ、枠線を調整できる
  • FlexboxとGridの使いどころを説明できる
  • スマホ対応の基本を書ける

開発環境の準備​

CSSを学ぶときは、HTMLファイルとCSSファイルを分けて作ると理解しやすくなります。

my-profile/
  index.html
  styles.css

index.html の head にCSSを読み込みます。

<link rel="stylesheet" href="styles.css" />

基本の書き方​

CSSは「どの要素に」「どんな見た目を」「どう変えるか」を書きます。

h1 {
  color: #2563eb;
  font-size: 2rem;
}

この例では、h1 の文字色と文字サイズを指定しています。

HTMLとのつなぎ方​

HTMLからCSSファイルを読み込むには、head に link を書きます。

<link rel="stylesheet" href="styles.css" />

セレクタ​

セレクタは、スタイルを当てる対象を選ぶ書き方です。

セレクタ例意味
タグpすべての段落
クラス.cardclass="card" の要素
ID#main-titleid="main-title" の要素
子孫.card p.card の中にある p
状態button:hoverボタンにマウスを乗せたとき

よく使うプロパティ​

プロパティ役割
color文字色
background背景
font-size文字サイズ
margin外側の余白
padding内側の余白
border枠線
display要素の並べ方
gap要素同士の間隔

ボックスモデル​

CSSでは、要素を箱として考えます。

名前意味
content文字や画像など中身の部分
padding中身と枠線の間の余白
border枠線
margin要素の外側の余白
.card {
  padding: 1rem;
  border: 1px solid #d1d5db;
  margin-bottom: 1rem;
}

padding は箱の内側、margin は箱の外側です。ここを区別できると、レイアウトの理解が一気に進みます。

レイアウトの基本​

横並びや中央寄せには、flex がよく使われます。

.cards {
  display: flex;
  gap: 1rem;
  align-items: center;
}

カードを格子状に並べるときは、grid が便利です。

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

Flexboxは「横一列に並べたい」「中央に寄せたい」ときに便利です。Gridは「カードを2列・3列に並べたい」ときに便利です。

スマホ対応​

画面幅に応じてデザインを変えるには、メディアクエリを使います。

@media (max-width: 768px) {
  .gallery {
    grid-template-columns: 1fr;
  }
}

フレームワーク・関連ツール​

技術できること
Tailwind CSSクラス名を組み合わせて素早くデザインする
Sass変数や入れ子を使ってCSSを書きやすくする
CSS Modulesコンポーネントごとにスタイルを分ける
Figmaデザイン案を作る

フレームワークの選び方​

状況おすすめ
まずCSSの仕組みを理解したい素のCSS
素早くデザインを整えたいTailwind CSS
変数や入れ子を使いたいSass
Reactなどで部品ごとに管理したいCSS Modules

初心者の最初の学習では、いきなりフレームワークに頼りすぎず、素のCSSで color、padding、display などを試すのがおすすめです。

最初に作るもの​

HTMLで作った自己紹介ページを、CSSで見やすく整えてみましょう。

  • 背景色を変える
  • 見出しを目立たせる
  • カード風のプロフィール欄を作る
  • スマホでも読みやすくする

実用的な例として、IT1-CODE-POCKET では、スマホでも押しやすいボタン、読みやすい解説、学習しやすい画面レイアウトをCSSとTailwind CSS CDNで整えています。

ミニ演習: プロフィールカード​

次のHTMLにCSSを当てて、カード風のデザインにしてみましょう。

<section class="profile-card">
  <h1>山田 太郎</h1>
  <p>Web制作を学んでいます。</p>
  <a href="https://example.com">ポートフォリオを見る</a>
</section>
.profile-card {
  max-width: 480px;
  padding: 1.5rem;
  border: 1px solid #d1d5db;
  border-radius: 16px;
  background: #ffffff;
}

.profile-card h1 {
  margin-top: 0;
  color: #2563eb;
}

.profile-card a {
  color: #2563eb;
  font-weight: bold;
}

慣れてきたら、背景色、余白、枠線、ホバー時の色を自分で変えてみましょう。

つまずきやすいところ​

  • margin と padding の違いが分かりにくい
  • どのセレクタが効いているか分からなくなる
  • 横並びが思った通りにならない
  • スマホで横にはみ出す

よくあるエラーと直し方​

困ったこと原因の例確認すること
CSSが効かないファイルが読み込めていないlink の href
一部だけ効かないセレクタが違うクラス名のスペル
横にはみ出す幅が固定されているmax-width や overflow
中央寄せできない親要素に指定していないdisplay: flex の場所
スマホで崩れるメディアクエリ不足画面幅ごとの表示

チェックリスト​

  • HTMLにCSSを読み込める
  • クラスセレクタを書ける
  • margin と padding を説明できる
  • Flexboxで横並びを作れる
  • Gridでカード一覧を作れる
  • メディアクエリでスマホ対応できる
  • ブラウザの開発者ツールでCSSを確認できる

次に学ぶこと​

CSSで画面を整えられるようになったら、JavaScriptでボタン操作や画面更新を学びましょう。