Glossary

Webマーケティング用語集

Webマーケティングでよく使われる用語とその解説です。

ホーム 用語集 CSSとは？Webページの見た目を作る言語を発注者向けにわかりやすく解説

CSSとは？Webページの見た目を作る言語を発注者向けにわかりやすく解説

CSSとは、Webページの「見た目」を決める言語のこと

CSS（シーエスエス）とは、Cascading Style Sheets（カスケーディング・スタイル・シート） の略で、Webページの見た目・デザインを定義するための言語です。

文字の色や大きさ、背景色、余白のバランス、画像の配置など、あなたが日頃目にしているWebサイトのビジュアル部分は、ほぼすべてCSSによってコントロールされています。

「プログラミング言語ってよく聞くけど、CSSもそれ？」と思われるかもしれません。厳密には「スタイルシート言語」と呼ばれる分類になりますが、Webページを構成するうえでHTMLと並ぶ基本要素のひとつです。Web制作を発注する際には、CSSを知っておくことで業者との会話がぐっとスムーズになりますよ。

HTMLとCSSの役割分担を理解しよう

CSSを理解するうえで、まず押さえておきたいのが HTMLとの関係 です。

Webページは大きく「構造」と「見た目」の2つで成り立っています。

  • HTML → ページの骨格・構造を定義する（「ここが見出し」「ここが本文」「ここに画像を置く」など）
  • CSS → その骨格に対して見た目を定義する（「見出しは青色・24px」「本文は黒・14px・行間1.8」など）

たとえるなら、HTMLが建物の「間取り図」で、CSSが「内装デザイン」のようなものです。同じ間取りの部屋でも、壁紙や家具の配置で印象がまったく変わりますよね。Webサイトも同じで、HTMLの構造はそのままに、CSSだけを変えることでデザインを全面刷新できます。

CSSが登場する以前は、HTMLの中に色や大きさを直接書き込んでいました。それではページ数が増えるにつれて管理が煩雑になってしまうため、「構造」と「見た目」を分離しようという考え方が生まれ、CSSが普及しました。

CSSがないとWebページはどうなる？

実際にCSSがない状態のWebページを想像してみてください。

  • 文字はすべて黒・同じ大きさ
  • 背景は白一色
  • 画像は文章の流れに沿って配置されるだけ
  • ボタンも装飾なしのグレーのみ

ほぼテキストだけが並んだ1990年代のインターネットのような見た目になります。現代のWebサイトがこれほど見やすく、使いやすく、ブランドらしいデザインになっているのはすべてCSSのおかげです。

発注者として「デザインが気に入らない」「ボタンの色を変えたい」「スマホで崩れている」といった修正が発生したとき、制作会社が動かすのは主にCSSです。修正の規模感や影響範囲を理解するうえでも、CSSの役割を知っておくと役立ちます。

CSSでできること

CSSでできることは非常に広範にわたります。主なものを整理してみましょう。

文字・テキストの装飾

  • フォントの種類・大きさ・色・太さを指定する
  • 行間・文字間隔を調整する
  • テキストに下線・取り消し線を引く
  • リンクの色・ホバー時の変化を設定する

背景・ボーダーの設定

  • 背景色を指定する（白・グレー・グラデーションなど）
  • 背景に画像を表示する
  • 要素に枠線（ボーダー）をつける
  • 角を丸くする（borderRadius）

レイアウト・配置の制御

  • 要素を横に並べたり縦に積んだりする
  • 要素の幅・高さを指定する
  • 余白（padding・margin）を調整してスペースを作る
  • 要素を画面の中央・右寄せ・左寄せに配置する

アニメーション・動き

  • ボタンにマウスをのせたときに色が変わる
  • 画像がゆっくりフェードインする
  • メニューがスライドして開く

レスポンシブデザイン

後述しますが、スマートフォン・PC・タブレットなど異なる画面サイズに合わせて表示を切り替えることもCSSの重要な役割です。

CSSを使う3つのメリット

CSSを適切に活用することで、Webサイトの制作・運用にさまざまなメリットが生まれます。

メリット1. デザインの一括変更が容易になる

CSSを使わずにHTMLに直接スタイルを書き込む方法では、100ページあるサイトの見出し色を変えようとすると、100ページすべてを編集する必要があります。

しかしCSSファイルを使えば、1ファイルを変更するだけで全ページに反映できます。サイトのリニューアルや部分的なデザイン変更のコストが大幅に下がるのはこのためです。

メリット2. HTMLのコードがシンプルになる

見た目の指定をCSSに分離することで、HTMLは「構造」の記述だけに集中できます。コードが読みやすくなり、メンテナンスがしやすい状態を保てます。制作会社が変わっても引き継ぎがしやすくなる、というメリットもあります。

メリット3. スマートフォン対応（レスポンシブデザイン）が実現できる

現在のWebサイトの多くは、PC・スマートフォン・タブレットなど様々なデバイスからアクセスされます。CSSの「メディアクエリ」という機能を使うことで、画面サイズに応じて異なるデザインを適用できます。スマホで見たときにレイアウトが崩れるのを防ぎ、快適な閲覧体験を提供できるのもCSSのおかげです。

CSSの基本文法

発注者の方がCSSを書く必要はほぼありませんが、仕組みを知っておくと業者への指示が具体的になります。

CSSの基本構造はシンプルです。

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

この3つの要素で成り立っています。

セレクタ

「どの要素に対してスタイルを適用するか」を指定するものです。

たとえば h1 と書けば「ページ内のすべての大見出し（h1タグ）に対して」、.btn と書けば「btn というクラス名がついた要素すべてに対して」という意味になります。

プロパティ

「どんな見た目の要素を変えるか」を指定します。

  • color → 文字色
  • font-size → 文字の大きさ
  • background-color → 背景色
  • margin → 外側の余白
  • padding → 内側の余白

値

プロパティに対して、「どんな値にするか」を指定します。

  • color: red; → 文字色を赤に
  • font-size: 16px; → 文字サイズを16pxに
  • background-color: #f5f5f5; → 背景をライトグレーに

たとえば「すべての大見出しを青色・24pxにする」なら、次のように書きます。

h1 {
  color: blue;
  font-size: 24px;
}

このように、1つのセレクタに複数のプロパティをまとめて書くことができます。

CSSの記述場所は3種類ある

CSSをHTMLに適用する方法は、大きく3種類あります。それぞれ使い所が異なるため、簡単に把握しておくとよいでしょう。

外部スタイルシート（最もよく使われる方法）

.css という拡張子のファイルを別途作成し、HTMLファイルから読み込む方法です。

<link rel="stylesheet" href="style.css">

HTMLの <head> タグ内にこの1行を書くだけで、そのページにCSSが適用されます。

複数のHTMLファイルから同じCSSファイルを読み込めるため、サイト全体に統一したデザインを効率よく適用できます。制作会社が作るWebサイトでは、この方式が基本になっています。

内部スタイルシート

HTMLファイルの <head> 内に <style> タグを書いて、その中にCSSを記述する方法です。

<style>
  h1 { color: blue; }
</style>

そのページだけに特定のスタイルを適用したいときなどに使われますが、複数ページで管理するには不向きです。

インラインスタイル

HTMLタグに直接 style 属性を書く方法です。

<h1 style="color: blue;">見出し</h1>

一部の要素だけ急ぎで変えたいときに使われることもありますが、コードが煩雑になりやすく、管理しにくいため推奨はされません。もし修正依頼の中で「style属性が多すぎて変更しにくい」という話が出てきたら、このインラインスタイルが乱用されているサインかもしれません。

CSSとレスポンシブデザインの関係

現代のWeb制作において、スマートフォン対応は必須です。日本のWebサイトへのアクセスは半数以上がスマートフォンからとも言われており、スマホで見たときにデザインが崩れているサイトはSEO評価にも悪影響を与えます。

CSSには「メディアクエリ」という機能があり、これを使って「画面の横幅が768px以下のとき（スマートフォン表示）はこのスタイルを適用する」という条件分岐が書けます。

@media (max-width: 768px) {
  .sidebar {
    display: none; /* スマホではサイドバーを非表示 */
  }
}

この仕組みを使って、1つのHTMLファイルに対してPC用・スマホ用のデザインをCSSで切り替えているのが「レスポンシブデザイン」です。

発注者として「スマホで崩れている」「スマホだとボタンが押しにくい」といった問題を制作会社に伝える際、「レスポンシブのメディアクエリを確認してほしい」と一言添えるだけで、技術的な認識合わせがスムーズになりますよ。

CSSのバージョン「CSS3」について

CSSにはバージョンがあり、現在主流なのはCSS3です。CSS3では、従来のCSSでは難しかった以下のような表現が可能になりました。

  • アニメーション・トランジション（滑らかな動き）
  • グラデーション
  • 角丸（borderRadius）
  • シャドウ（影）
  • フレックスボックス・グリッドレイアウト（複雑な配置）

スマートフォンの普及に伴い、2010年前後からCSS3が急速に広まりました。現在では「CSS3対応のブラウザかどうか」を意識する場面は少なくなっていますが、「CSS3を使いたい」と制作会社に伝えると、モダンなデザイン実装を意図しているとして理解されます。

発注者が知っておくべきCSS関連の用語

Web制作の打ち合わせや修正依頼の場面でよく出てくるCSS関連のキーワードをまとめました。

フォントサイズ・px（ピクセル）

文字の大きさを表す単位です。一般的なWebサイトの本文は14〜16px程度、見出しは20〜32px程度が目安です。「もう少し文字を大きくしてほしい」と伝える際に、「14pxから16pxに変更してほしい」と数値で伝えると制作会社に伝わりやすくなります。

カラーコード

色を16進数で表す表記方法です（例：#3498db = 青色）。「ブランドカラーが #e60000（赤）なので合わせてほしい」という形で使えます。

マージン・パディング

余白のことです。マージンは要素の「外側」の余白、パディングは要素の「内側」の余白を指します。「ボタンとテキストの間にもう少し空白がほしい」というときに関係する概念です。

z-index

要素の「重なり順」を指定するプロパティです。ポップアップが後ろに隠れてしまうといった問題の原因になることがあります。

CSSの優先順位（カスケード）

CSSの「Cascading」（カスケード）という言葉は、「流れ落ちる」という意味です。複数のCSSルールが同じ要素に適用された場合、どちらが優先されるかのルールがあります。

基本的な優先順位は以下の通りです（上ほど優先度が低い）。

  1. ブラウザのデフォルトスタイル
  2. 外部スタイルシート
  3. 内部スタイルシート
  4. インラインスタイル
  5. !important が付いた宣言（最優先）

修正を依頼したのに「CSSが効かない」という場合、この優先順位が原因であることが多いです。制作会社からそのような報告があった場合、「カスケードの問題でインラインスタイルが上書きされている」といった技術的な背景があると理解しておくとよいでしょう。

まとめ

CSSはWebページの「見た目」を作る言語であり、HTML・JavaScriptと並ぶWeb制作の基本要素です。

発注者として知っておくべきポイントを整理すると、次のようになります。

  • HTMLが構造、CSSがデザインを担当する
  • CSSを使うことでデザインの一括変更・管理が容易になる
  • レスポンシブデザインはCSSのメディアクエリで実現されている
  • デザインの修正依頼は「セレクタ・プロパティ・値」の観点で具体的に伝えると伝わりやすい

Webサイトの見た目に関わるあらゆる修正・改善はCSSが起点になります。「デザインの変更=CSSの話」と覚えておくと、制作会社とのやり取りがスムーズになるはずです。

関連用語

"とりあえず相談"も大歓迎です

「何を聞けばいいかわからない」というご相談が最も多いです。資料や決まった要件がなくても大丈夫。まずは現状をお聞かせください。
社内でのご検討用に、会社情報資料もダウンロードいただけます。