CSSを触り始めたとき、
悩む人思った通りにデザインが変わらない
悩む人どこに書けばいいの？
と手が止まってしまった経験はありませんか。ルールを知らないまま手探りで書くほど、余計に混乱しやすいのがCSSです。
読み終える頃には、CSSの全体像がスッとつながり、迷わず書ける土台が手に入ります。
- CSSの役割
- CSSをどこに書くのか
- CSSの基本の書き方
- よく使うセレクタ・プロパティ
- CSSが適用される優先順位（!important含む）
CSSとは？
Webサイトを見たときに「読みやすい」「きれい」「使いやすい」と感じる背景には、必ずといっていいほどCSSの存在があります。
CSSは一見すると難しそうな印象を持たれがちですが、役割や基本を押さえれば、初心者でも確実に扱えるようになります。
ここでは、CSSの役割やHTMLとの違い、そしてCSSで実現できることを整理しながら、これから学ぶ内容の土台を固めていきましょう。
CSSとHTMLとの違い
CSS（Cascading Style Sheets）は、Webページの見た目やデザインを指定するための言語です。
一方でHTMLは、文章や画像、リンクなどの構造や意味を定義する役割を担っています。
たとえばHTMLが「これは見出し」「これは段落」と骨組みを作るのに対し、CSSは「文字を赤くする」「余白を広げる」「中央に配置する」といった装飾を担当します。
このように、HTMLとCSSは役割を分けて使うことで、管理しやすく柔軟なWeb制作が可能になります。
CSSでできることは？
CSSを使うことで、Webページの見た目を細かくコントロールできます。単に色を変えるだけでなく、レイアウト調整や動きのある表現まで実現できる点が大きな特徴です。
ここでは、初心者がまず知っておきたい代表的な機能を見ていきます。
レイアウトや余白の調整
CSSを使えば、要素の配置や間隔を自由に調整できます。文章同士の間隔を広げたり、画像を横並びに配置したりすることも可能です。
レイアウトを整えることで、情報が伝わりやすいページになります。
See the Pen 「CSS 書き方 基本」レイアウトや余白の調整 by kasuga (@kntkfmgf-the-vuer) on CodePen.
文字の種類・色・太さ・行間・行揃えの指定
フォントの種類や文字サイズ、色、太さなどもCSSで指定できます。行間や文字の揃え方を調整することで、読みやすさが大きく変わります。
デザイン性だけでなく、ユーザー体験の向上にも直結します。
See the Pen 「CSS 書き方 基本」レイアウトや余白の調整 by kasuga (@kntkfmgf-the-vuer) on CodePen.
背景や枠線などの指定
背景色や背景画像、枠線の太さや色などもCSSの得意分野です。ボックスの区切りを明確にしたり、デザインにメリハリをつけたりできます。
視覚的に整理されたページを作るために欠かせない要素です。
See the Pen 「CSS 書き方 基本」文字の種類・色・太さ・行間・行揃えの指定 by kasuga (@kntkfmgf-the-vuer) on CodePen.
アニメーションやホバーエフェクトの指定
CSSでは、要素に動きをつけることもできます。マウスを乗せたときに色が変わるホバーエフェクトや、滑らかなアニメーションも実装可能です。
適度に取り入れることで、洗練された印象のWebサイトになります。
See the Pen 「CSS 書き方 基本」レイアウトや余白の調整 by kasuga (@kntkfmgf-the-vuer) on CodePen.
CSSはどこに書く？（3つの方法）
CSSは「どう書くか」だけでなく、「どこに書くか」も非常に重要です。同じCSSでも記述場所によって管理のしやすさや使い勝手が大きく変わります。
ここでは、CSSを記述する代表的な3つの方法と、それぞれの特徴を理解し、状況に応じた使い分けができるようにしていきましょう。
1.インラインスタイルとして書く
インラインスタイルは、HTMLタグの中に直接CSSを書く方法です。
<p style="color: red;">テキスト</p>
このように、その要素だけにスタイルを適用できます。手軽に見た目を変更できる反面、CSSがHTMLに混ざるため管理しづらくなります。基本的にはテストや一時的な調整で使われる方法です。
2.headタグ内に書く
HTMLファイルのheadタグ内にstyleタグを使ってCSSを書く方法もあります。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSSの基本の書き方</title>
<style>
p {
color: red;
}
</style>
</head>
<body>
<p>サンプルテキスト</p>
</body>
</html>
ページ全体にCSSを適用できるため、インラインよりは管理しやすくなります。ただし、HTMLファイルが長くなりやすく、大規模サイトには向いていません。
3.外部ファイルとして読み込む
CSSを専用の外部ファイル（例：style.css）として作成し、読み込む方法です。。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<title>CSSの基本の書き方</title>
</head>
<body>
<!--メインのコンテンツ-->
</body>
</html>
HTMLとCSSを完全に分離できるため、最も一般的で推奨される書き方です。複数ページで同じCSSを使い回せる点も大きなメリットになります。
CSSを書く場所による向き・不向き（メリット・デメリット表）
| 書く場所（方法） | 向いている（メリット） | 向いていない（デメリット） |
|---|---|---|
| インラインスタイル（style属性） | ・その場で即反映できる ・特定の要素だけに当てやすい | ・HTMLが読みづらくなる ・同じ指定を繰り返しやすい ・修正漏れが起きやすい |
| headタグ内（styleタグ） | ・1ページ内で完結できる ・ページ全体にまとめて適用できる | ・複数ページで使い回しにくい ・ページが増えると管理が大変 |
| 外部ファイル（.cssを読み込み） | ・複数ページで共通化できる ・保守・管理がしやすい ・HTMLと役割分担できる | ・読み込み設定が必要 ・ファイルが増えると整理が必要 |
CSSの基本的な書き方
CSSは決まったルールに沿って「どこを」「何に」「どうするか」を指定していくイメージです。最初に仕組みさえ理解できれば、見た目を変える作業がぐっと楽しくなります。
ここではCSSの基本構造を、セレクタ・プロパティ・値に分けて整理し、迷わず書ける土台を作っていきましょう。
CSSの基本の型を覚える
CSSの基本構造にセレクタ・プロパティ・値があるとお伝えしましたが、CSSを書く時の一番基本の型をまずは覚えましょう！
セレクタの後に中かっこを書く
セレクタはそのまま書きますが、その後に「{}」（中かっこ）を書きます。これが一番最初の基本形です。
かすが「{}」 のことを「中かっこ」というようです！ブレースとも言うらしいですが、おしゃれ過ぎて伝わらないと思い、「中かっこ」と書くことにしました。
中かっこの中にプロパティと値を書く
プロパティと値は中かっこの中に書いていきます。またプロパティと値の間には必ずコロン（ : ）を入れます。
プロパティを複数書く場合はセミコロン（ ; ）で区切る
プロパティは複数書くことができます。1つのプロパティと値のセットの最後には必ずセミコロン（ ; ）で区切ります。
セミコロンがないとエラーになり、CSSが反映されないので注意しましょう。
かすがプロパティと値のセットが1つだけならセミコロン（ ; ）は不要ですが、必ず書くクセをつけておいた方が良いですよ。
コードの途中に改行や半角スペース、tabを入れてもOK
CSSはコードの途中で改行したり、プロパティと値の間に半角スペースを入れてもエラーになりません。逆に言うと、すべてなしで1行で書くこともできます。
かすが上の2つのコードはどちらも正しく反映されますが、コードの見やすさは一目瞭然ですよね。
CSSは自分が後で見てもわかりやすように書くことと、実際の制作現場では複数人で作業することが多いので、現場のルールに従って書いていくことが大事になります。
セレクタ
セレクタは、どのHTML要素にスタイルを適用するかを指定する部分です。たとえば段落（p）を指定するなら、次のように書きます。
p {
color: red;
}
この例では「pタグに対して色を赤にする」という意味になります。まずは「セレクタ＝対象を決めるもの」と覚えると理解がスムーズです。
プロパティ
プロパティは、何を変更するかを指定する項目です。文字の色ならcolor、文字サイズならfont-size、余白ならmarginのように、目的ごとに名前が決まっています。
p {
font-size: 16px;
}
ここでは「pタグの文字サイズを16pxにする」という指定です。CSSを書けるようになる近道は、よく使うプロパティから少しずつ覚えることにあります。
値
値は、プロパティをどう変更するかを具体的に指定する部分です。
たとえばcolorの値にはredや#ff0000、rgb(255, 0, 0)などが使えます。
p {
color: #ff0000;
}
「プロパティ：値;」のセットを積み重ねていくことで、デザインが形になります。
よく使う値の単位
CSSでは数値に単位をつけて指定することが多く、代表的な単位は次のとおりです。
| 単位 | 説明 |
|---|---|
| px（ピクセル） | 固定サイズ（例：16px） |
| %（パーセント） | 親要素に対する割合（例：50%） |
| em（エム） | 親要素の文字サイズ基準（例：1.2em） |
| rem | ルート（html）の文字サイズ基準（例：1rem） |
CSSのコメントアウトの書き方
CSSのコメントアウトは、コードの説明を書いたり、一時的に指定を無効化したりするために使います。書き方は/* */で囲むだけです。
/* 文字色を赤にする */
p {
color: red;
}
/* 下の指定は一時的に無効化 */
/*
h1 {
font-size: 32px;
}
*/
よく使うCSSのセレクタ5つ
ここでは初心者が最初に覚えるべき代表的なセレクタを、実例つきで整理していきます。
タグ名で指定
タグ名セレクタは、HTMLタグそのものを指定する方法です。同じタグすべてにスタイルが当たるため、ページ全体の基本デザインを整えるときに便利です。
p {
line-height: 1.8;
}
この例では、すべてのpタグに行間が適用されます。
idで指定
idセレクタは、id属性を持つ要素を指定します。基本的にidは1ページ内で重複させないため、「ここだけ装飾したい」という場合に向いています。
#を付けるのがポイントです。
<p id="lead">導入文</p>
#lead {
font-weight: bold;
}
classで指定
classセレクタは、class属性を持つ要素を指定します。同じclass名を複数の要素に付けられるので、使い回しやすく実務でも最頻出です。
.を付けて指定します。
<p class="note">注意書き</p>
.note {
color: #d00;
}
セレクタを複数指定
同じスタイルを複数の要素に当てたいときは、カンマ区切りで並べます。まとめて指定できるため、CSSがスッキリします。
h1, h2, h3 {
font-weight: 700;
}
子孫セレクタで指定
子孫セレクタは「ある要素の中にある特定の要素」を指定する方法です。スペースで区切って書きます。
article p {
color: #333;
}
この例では、articleの中にあるpだけに適用されます。全体のpに影響させたくないときに便利な指定方法です。
よく使うCSSのプロパティ4つ
ここでは、まず覚えておくと便利なプロパティを「テキスト」「背景」「余白」「サイズ」に分けて紹介します。
テキスト関連のプロパティ
文字の見た目は、サイトの印象や読みやすさを左右します。まずは基本となるプロパティから押さえましょう。
font-family
フォントの種類を指定します。
body {
font-family: "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
}
日本語フォントは環境差が出やすいので、複数指定して保険をかけるのが定番です。
font-size
文字サイズを指定します。
See the Pen 「CSS 書き方 基本」 by kasuga (@kntkfmgf-the-vuer) on CodePen.
まずはpxで調整し、慣れたらemやremに広げると扱いやすくなります。
font-weight
文字の太さを指定します。
See the Pen 「CSS 書き方 基本」font-size by kasuga (@kntkfmgf-the-vuer) on CodePen.
「bold」でも指定できますが、フォントによっては数値の方が細かく調整できる場合があります。
line-height
行間を指定します。
See the Pen 「CSS 書き方 基本」font-weight by kasuga (@kntkfmgf-the-vuer) on CodePen.
pxなどの単位を指定することもできますが、値を数値だけで書くと、文字サイズに応じて自動調整されるため便利です。
color
文字色を指定します。
See the Pen 「CSS 書き方 基本」line-height by kasuga (@kntkfmgf-the-vuer) on CodePen.
色の英語名で指定する
黒：black、赤：red、緑：green、青：blueのように指定
カラーコードで指定する
6桁もしくは3桁のカラーコードで指定します。アルファベットは大文字でも小文字でもOKです。最初に「#」をつけます。（例：#ffffff、#333）
RGB・RGBAで指定する
赤・緑・青の値で指定するのがRGBです。（例：rgb(255,255,255) ）
赤・緑・青・透明度の値で指定するのがRGBです。（例：rgb(255,255,255,0.5) ）
かすが一般的にはカラーコードで指定することが多いです。ただ、色見てカラーコードわかる人いないと思うので、デザインソフトからコードをコピペすることが多いです。
text-align
文字の揃え方を指定します。
See the Pen 「CSS 書き方 基本」text-align by kasuga (@kntkfmgf-the-vuer) on CodePen.
かすが何も指定しないと「text-align: left;」（左揃え）になります。
背景関連のプロパティ
背景はページの雰囲気を決める要素です。最初は色と画像の指定を覚えると応用しやすくなります。
background-color
背景色を指定します。
See the Pen 「CSS 書き方 基本」text-align by kasuga (@kntkfmgf-the-vuer) on CodePen.
background-img
背景に画像を指定するプロパティです。
See the Pen 「CSS 書き方 基本」background-color by kasuga (@kntkfmgf-the-vuer) on CodePen.
画像の繰り返しや表示位置まで調整したい場合は、background-repeatやbackground-positionもあわせて使います。
余白関連のプロパティ
余白はデザインの「読みやすさ」に直結します。そのため、必須と言えるほどよく使うプロパティです。
margin
要素の外側の余白を指定します。
See the Pen 「CSS 書き方 基本」background-image by kasuga (@kntkfmgf-the-vuer) on CodePen.
padding
要素の内側の余白を指定します。
See the Pen 「CSS 書き方 基本」background-color by kasuga (@kntkfmgf-the-vuer) on CodePen.
ボックスサイズ関連のプロパティ
要素の大きさを指定できるようになると、レイアウトの自由度が一気に上がります。
height
高さを指定します。
width
横幅を指定します。
See the Pen 「CSS 書き方 基本」padding by kasuga (@kntkfmgf-the-vuer) on CodePen.
CSSが適用される優先順位
CSSを書いていると「同じ要素に指定したのに反映されない」「色が変わらない」といった場面に必ず出会います。
これは多くの場合、CSSがバグっているのではなく、優先順位（どの指定が採用されるか）のルールで説明できます。
ここでは、初心者がつまずきやすいCSSの優先度を整理し、狙ったデザインを確実に反映することを身につけます。
CSSを書いた順番による優先度
同じ詳細度（同じ強さ）の指定が並んだ場合、後に書いたCSSが優先されます。「上書きされる」というイメージを持つと理解しやすいです。
p {
color: blue;
}
p {
color: red;
}
この場合、最終的にpの文字色は赤になります。反映されないときは、後ろで別の指定が上書きしていないか確認すると解決しやすいです。
CSSを書いた場所による優先度
CSSは書く場所によっても優先度が変わります。基本的には、次の順で強くなります。
外部CSS == head内CSS ＜ インラインCSS
外部CSSとhead内に書いたCSSは優先度は同じです。なので後に書いた方が優先されます。
外部CSSとhead内CSSより優先度が高いのはタグに直接書いたインラインCSSになります。
たとえば外部ファイルでcolor: blue;と書いていても、HTML側でインラインにcolor: red;が入っていれば、赤が優先されます。
「なぜか効かない」と感じたら、まずインライン指定が混ざっていないか見ると原因を特定しやすくなります。
CSSの詳細度による優先度
最も重要なのが、セレクタの詳細度（specificity）です。ざっくり言うと「より具体的に指定している方が勝つ」というルールになります。
優先されやすさの目安は次の順です。
例として、次のようなHTMLのタグとCSSの指定があるとします。
<p id="lead" class="note">導入文</p>
p {
color: blue;
}
.note {
color: green;
}
#lead {
color: red;
}
同じ要素にこれらが全部当たる状況なら、最終的に#leadの赤が採用されます。
!importantが指定されたスタイル
CSSには、指定を強制的に優先させる !important という仕組みがあります。
プロパティの値の末尾に付けることで、通常の優先順位（順番・場所・詳細度）よりも強く適用されます。
p {
color: blue !important;
}
.note {
color: red;
}
この場合、.noteの方が詳細度は高いものの、!importantが付いた青が優先されます。
ただし、!importantを多用すると「どの指定が効いているのか」が追いにくくなり、保守性が一気に下がります。
そのため基本は、セレクタの設計やCSSの整理で解決し、最後の手段として使うのが定番です。
かすが「!important」はどうしても上書きできない外部ライブラリのスタイルを上書きしたいときなど、限定的な場面だけで使うようにしましょう！
WEBデザイナー・フロントエンドのスキルを確実に身につけたい方へ
「WEBデザインやフロントエンドを学びたい」と思い立ったとき、多くの方がまず独学を選びます。
しかし、独学では「何をどこから学べばいいかわからない」「つまずいたときに誰にも聞けない」といった壁にぶつかることも少なくありません。
一方、スクールで学べば、正しい順序で、現場で使えるスキルを効率よく習得することができます。最短ルートでスキルを身につけたい方には、スクール学習がおすすめです。
かすが私は26歳で印刷業からWEBデザイナーを目指して学び始めましたが、やはり独学に限界を感じ短期スクールで学びました。本気でスキルを身につけたいならスクールはマジで行った方が良いです！
- カリキュラムが体系化されているため、基礎から応用まで無駄なく学べる
- 現役のプロから実践的なフィードバックを受けられる
- わからないことをすぐに質問・解決できる環境がある
- 制作課題を通じて、ポートフォリオが作成できる
- 学習仲間や講師とのつながりが、モチベーション維持につながる
- カリキュラムが現場で必要とされる技術に対応しているか
- 現役デザイナー・エンジニアが講師として在籍しているか
- ポートフォリオ制作のサポートが充実しているか
- 卒業後の就職・転職支援が用意されているか
- オンライン・通学など、自分の生活スタイルに合った受講形式か
遠回りせず、確実にスキルを身につけたいなら、プロに教わるのが一番の近道です。
WEBデザイナー・フロントエンドエンジニアとして一歩踏み出したいあなたにぴったりのスクールを、下記の記事でご紹介しています。ぜひチェックしてみてください。
cssの基本的な書き方まとめ
CSSは、HTMLで作った「構造」に対して見た目を整えるための言語です。最後に、この記事で押さえたポイントを負担なく振り返られるように整理します。
- HTML：見出し・段落・画像など、ページの「骨組み」を作る
- CSS：色・文字・余白・配置など、ページの「見た目」を整える
- レイアウトや余白の調整（配置・間隔のコントロール）
- 文字の指定（フォント、サイズ、太さ、色、行間、揃え）
- 背景や枠線の指定（背景色・背景画像・区切り）
- アニメーションやホバー表現（動きのあるUI）
- インライン：すぐ反映できるが管理が難しい（基本は一時的な調整向け）
- head内：1ページ完結なら便利だが使い回しに弱い
- 外部ファイル：最も一般的で管理しやすく、複数ページで再利用できる
- セレクタ：どこに当てるか（例：p、.class、#id）
- プロパティ：何を変えるか（例：color、font-size、margin）
- 値：どう変えるか（例：red、16px、1.8）
- よく使う単位：px / % / em / rem
- コメントアウト：/* … */（メモや一時無効化に便利）
- タグ名：同じタグすべてに適用（例：p { … }）
- id：1点狙いで強め（例：#lead { … }）
- class：使い回しやすく実務で頻出（例：.note { … }）
- 複数指定：h1, h2, h3 { … }
- 子孫セレクタ：特定の範囲だけ狙う（例：article p { … }）
- テキスト：font-family / font-size / font-weight / line-height / color / text-align
- 背景：background-color / background-image
- 余白：margin / padding
- サイズ：width / height
- 同じ強さなら「後に書いた方」が勝つ（上書きされる）
- 書く場所の優先度：外部CSS ＜ head内 ＜ インライン
- 詳細度の優先度：タグ ＜ class ＜ id
- !important：通常のルールより強制的に優先（多用は避け、最終手段にする）
CSSは、仕組みと優先順位さえ分かれば、難しくはありません。
まずは外部CSSで書く習慣をつけ、セレクタ・プロパティ・値の基本を繰り返しながら手を動かしていきましょう。
