初心者も安心！webサイトとcssの基本使い方完全ガイド

2025 11/29

2025/11/29

はじめに

Webサイトを作るとき、見た目や使い勝手を整えるのがCSSの役割です。本書は、CSSの基礎をわかりやすくまとめた入門ガイドです。初めて触る方でも理解しやすいように、定義や文法、よく使うプロパティ、HTMLとの関係、適用方法、学習のコツまで順を追って説明します。

なぜCSSを学ぶのか

見た目を整えるとユーザーにとって使いやすくなります。たとえば文字の色や大きさ、余白、配置を変えるだけで読みやすくなります。
デザインを一元管理でき、後から修正しやすくなります。複数のページの見た目をまとめて変えられます。

この章での位置づけ

本書は全8章で構成します。次章からはCSSの定義と役割、制御できる要素、文法、代表的なプロパティ、HTMLとの関係、適用方法、最後に初心者向けの学習ポイントを順に扱います。実例を交えながら進めますので、実際に手を動かしながら読み進めてください。

CSSの基本的な役割と定義

CSSとは

CSS（Cascading Style Sheets）は、Webページの見た目を指定するための言葉です。HTMLがページの骨組み（見出しや段落、画像など）を決めるのに対し、CSSは色・文字の大きさ・余白などの見た目を指定します。

CSSの主な役割

見た目の指定：文字色やフォント、背景色を決めます。
レイアウト調整：要素の並び方や幅、高さを整えます。
視認性・使いやすさの向上：読みやすさや操作しやすさを高めます。

具体例でわかりやすく

たとえば、HTMLで「

こんにちは

」と書いたとします。CSSを使えば、その文字を赤くしたり、文字を大きくしたり、余白を広くして読みやすくできます。ボタンに影を付けたり、画像の周りに余白を作ることも簡単です。

基本の仕組み（簡単に）

CSSは「選ぶ対象（セレクター）」と「設定（プロパティ: 値）」の組み合わせで書きます。複数のルールが当たるときは優先順位（カスケード）で決まります。継承という仕組みで親要素の一部のスタイルが子要素に引き継がれます。

使うときのメリットと注意点

CSSを使うとHTMLと見た目を分けられ、保守や再利用が楽になります。ただし、異なるブラウザで見え方が微妙に変わることがあるため、確認を忘れないでください。

CSSで制御できる要素

テキスト（文字）

文字の色やフォント、サイズ、行間、字間、太さ、装飾などを細かく変えられます。例えば、見出しを大きく太くし本文を読みやすく整えることで、情報の優先度が分かりやすくなります。

背景と装飾

背景色や背景画像、グラデーション、境界線、角丸、影などで見た目を整えます。ボタンに影を付けると立体感が出てクリックしやすく見えます。

レイアウトと配置

要素の並びや配置、幅・高さ、余白（margin・padding）を指定します。flexboxやgridで複雑なレイアウトも作れ、レスポンシブ対応で画面幅ごとに配置を変えられます。

表示・非表示と重なり

要素の表示・非表示、透明度、オーバーフロー（はみ出し処理）、重なり順（z-index）を制御します。モーダルやツールチップに役立ちます。

アニメーションと遷移

要素の状態変化にアニメーションやスムーズな遷移を付けられます。ホバー時の色変化やフェードインなど、操作感を向上させます。

擬似クラス・擬似要素

hoverや: focus、::beforeや::afterなどで状態や装飾を追加できます。HTMLを変えずに見た目を強化できる便利な手段です。

これらを組み合わせて、使いやすく見栄えの良いWebページを作ります。具体的なプロパティは次章で詳しく説明します。

CSSの基本構造と文法

基本の書き方

CSSはルールベースの言語で、基本形は「セレクタ { プロパティ: 値; }」です。たとえば

p { color: blue; }

は段落（p要素）を青くします。プロパティと値の組み合わせを宣言と呼び、中括弧で囲んだ部分を宣言ブロック、全体をルール（ルールセット）と呼びます。

セレクタの種類（簡単な例）

要素セレクタ: h1 { font-size: 24px; }
クラス: .notice { background: #f0f0f0; }
ID: #header { height: 60px; }
属性: a[target] { color: red; }
疑似クラス: a:hover { text-decoration: underline; }

プロパティと値の書き方

各宣言はセミコロンで区切ります。最後の宣言もセミコロンを付ける習慣が安全です。値は単位（px, %, emなど）を必要とするものがあります。

コメントと読みやすさ

コメントは/ コメント /で書けます。複数行に分けて整理し、意味のある名前（.btn–primaryなど）を付けると保守しやすくなります。

カスケードと優先順位の基本

同じ要素に複数ルールが当たると優先順位で決まります。一般的に優先順位は「インライン > ID > クラス > 要素」です。!importantは一時的な手段として使い、乱用は避けます。

継承の簡単な説明

一部のプロパティ（colorやfont-family）は親から子に継承されます。ボックス関連のプロパティ（margin, padding）は継承されません。具体例で確認すると理解しやすくなります。

よく使うCSSプロパティ

テキストと色

色や文字に関する基本は color（文字色）、background-color（背景色）、font-size（文字の大きさ）です。例: color: #333; や font-size: 16px;。文字サイズは px、em、rem などで指定できます。相対単位は画面や親要素に応じて伸縮します。

レイアウト関連

要素の間や内部の余白には margin（外側の余白）と padding（内側の余白）を使います。幅と高さは width、height で指定します。例: margin: 10px 0; padding: 8px; width: 100%;。複数値や省略形を覚えると便利です。

デザイン関連

border で境界線を作れます（例: border: 1px solid #ddd;）。文字の配置は text-align（左寄せ、中央、右寄せ）で調整します。見た目を整えるには影や角丸（box-shadow、border-radius）もよく使います。

使い方のコツ

同じ見た目でもプロパティの組み合わせで可読性や保守性が変わります。まずは個別に試し、ショートハンド（まとめ書き）や相対単位を少しずつ取り入れてください。

HTMLとCSSの関係性

概要

HTMLはページの「骨組み」を作り、CSSはその骨組みに「見た目」を与えます。HTMLだけでは情報はありますが、見た目は素っ気なくなります。CSSを組み合わせることで、読みやすく魅力的なページになります。

役割の違い（簡単な例）

HTML: 見出しや段落を定義します。例：<h1>サイトのタイトル</h1>
CSS: その見出しをデザインします。例：.title { font-size: 32px; color: red; }
このように、HTMLは内容、CSSは表現を担当します。

HTMLとCSSのつなぎ方

要素名で指定：h1 { ... }（全ての見出しに適用）
クラスで指定：<h1 class="title"> と .title { ... }（特定の要素だけ）
idで指定：一つだけに使う時に便利です。

優先順位の仕組み（かんたんに）

複数のルールが競合したら、より具体的な指定（クラスよりid）が優先されます。また、後から読み込んだCSSが勝ちます。

実務での利点

HTMLとCSSを分けると、保守性が高まり、デザイン変更が容易になります。アクセシビリティも向上し、検索エンジンに好まれる構造にできます。

CSSの適用方法

1. 適用方法の種類

CSSは主に3つの方式でHTMLに適用します。
– インラインスタイル：要素の属性に直接書く（例：

）。優先度が高く、すぐ反映されますが管理が難しいです。
– 内部スタイルシート：HTMLの内にでまとめて書く。単一ページ向けで、テストやページ固有の調整に便利です。
– 外部スタイルシート：別ファイルに書きで読み込む。複数ページで共有しやすく、保守性が高いです。

2. 適用の優先順位（カスケード）

ブラウザーはルールを読み、優先順位に従って適用します。一般的な順序は「ブラウザーの初期値 < 外部・内部スタイル < インライン」。ただし、より具体的なセレクターや!importantがあると優先されます。

3. よく使う仕組み

特異性（specificity）：どのルールが強いかを決める指標です。ID > クラス > 要素の順に強くなります。
ソース順：同じ特異性なら後に書いたルールが採用されます。
メディアクエリ：画面サイズなど条件に応じて別のスタイルを適用します。

4. 実務での注意点

可読性を保つため外部ファイルを基本にし、例外的にインラインを使います。重要な調整には!importantを多用せず、特異性を見直してから使ってください。

初心者向けの学習ポイント

はじめに

Webサイト制作を始めると、まずCSSの基本を押さえることが近道です。本章では学習で特に大切な点と、実践に使える進め方をやさしく解説します。

重要な3つのポイント

CSSは見た目をつくる言葉です。色・文字・余白・枠線など、要素の見た目を指定します。例えばボタンの背景色や見出しの文字サイズはCSSで決めます。
記述の基本は「セレクタ」「プロパティ」「値」です。セレクタで対象を指定し、プロパティで何を変えるか決め、値で具体的な数値や色を指定します。例: h1 { color: blue; font-size: 24px; }
上から順に適用されるという優先順位を理解します。同じ要素に複数書くと後に書いた方が優先されます。また、詳しい指定ほど優先されやすい点も覚えてください。