CSSとは？HTMLとの違いや書き方を初心者向けにわかりやすく解説

CSSとは、Webページの見た目を整えるための言葉です。

文字の色を変えたり、余白を作ったり、見出しやボタンの形を整えたりできます。

この記事では、CSSの意味、HTMLとの違い、基本の書き方を初心者向けにわかりやすく解説します。

ほかのIT用語も知りたい方は、初心者向けのIT用語辞典もあわせてご覧ください。

CSSとは？かんたんに言うとWebページの見た目を整える言葉

CSSとは、Webページの見た目を決めるための言葉です。

Webページとは、インターネットで見る1つのページのことです。

たとえば、会社のサイト、ブログ、通販サイトなどがWebページです。

CSSを使うと、文字の色、大きさ、背景の色、余白、線、並び方などを変えられます。

CSSの意味

CSSは「Cascading Style Sheets」の略です。

日本語では、Webページの見た目を整えるための指定、と考えると分かりやすいです。

ここでいう見た目とは、文字の色、大きさ、余白、配置などのことです。

まずは「CSSはWebページを見やすくするもの」と覚えるとよいです。

身近な例でいうと服や飾りつけのようなもの

身近な例でいうと、HTMLは文章の中身、CSSは服や飾りつけのようなものです。

同じ文章でも、文字の大きさや色、余白が変わると、読みやすさが変わります。

ただし、CSSは本当に服を着せるものではありません。

IT用語としてのCSSは、Webページの見た目を整えるために使う言葉です。

CSSでできること

CSSを使うと、Webページの見た目をいろいろ変えられます。

初心者の方は、まず次のようなことができると考えると分かりやすいです。

• 文字の色を変える
• 文字の大きさを変える
• 背景の色を変える
• 文章や画像の周りに余白を作る
• 線をつける
• 画像やボタンの並び方を整える
• 見出しやボタンの見た目を整える

CSSを使うと、ただ文字や画像を置くだけでなく、読みやすいページにできます。

HTMLとCSSの違い

HTMLとCSSは、どちらもWebページを作るときに使います。

ただし、役割は違います。

HTMLは、Webページの中身を作るための言葉です。

CSSは、その中身の見た目を整えるための言葉です。

HTMLはページの中身を作る

HTMLは、Webページに何を置くかを決めるために使います。

たとえば、見出し、文章、画像、リンク、表などを置くときに使います。

HTMLだけでもページは作れます。

ただし、見た目はシンプルになりやすいです。

CSSはページの見た目を整える

CSSは、HTMLで作った中身を見やすく整えます。

たとえば、見出しを大きくしたり、文章の色を変えたり、画像の周りに余白を作ったりできます。

HTMLが「何を表示するか」を決めるものなら、CSSは「どう見せるか」を決めるものです。

HTMLだけの場合とCSSを使った場合の違い

HTMLだけのページは、文字や画像が並んだだけの見た目になりやすいです。

CSSを使うと、色、大きさ、余白、配置を整えられます。

そのため、CSSを使うと、読みやすく分かりやすいWebページを作れます。

CSSの説明でよく出てくる言葉

CSSの書き方を学ぶ前に、よく出てくる言葉を確認しておきましょう。

ここを先に知っておくと、このあとの説明が読みやすくなります。

要素とはページの中にある部品のこと

要素とは、Webページの中にある部品のことです。

たとえば、見出し、文章、画像、ボタン、リンクなどが要素です。

CSSでは、この要素に対して見た目を指定します。

セレクタとは見た目を変えたい場所を選ぶ書き方

セレクタとは、CSSを使って見た目を変えたい場所を選ぶための書き方です。

たとえば、「すべての文章を変える」「この見出しだけ変える」といった指定に使います。

プロパティとは何を変えるかを表す項目

プロパティとは、「何を変えるか」を表す項目です。

たとえば、文字の色を変えるならcolor、文字の大きさを変えるならfont-sizeを使います。

値とはどのように変えるかを表す内容

値とは、「どのように変えるか」を表す内容です。

たとえば、文字の色ならred、文字の大きさなら18pxのように書きます。

pxとは画面上の大きさを表す単位の一つ

pxは、画面上の大きさを表す単位の一つです。

文字の大きさや余白の大きさを指定するときによく使います。

CSSの基本の書き方

CSSの基本の書き方は、次の形です。

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

この形で、「どこを」「何を」「どのように」変えるかを指定します。

CSSの基本形

たとえば、文章の色を赤にしたい場合は、次のように書きます。

p {
  color: red;
}

これは、「pという文章の文字色を赤にする」という意味です。

pは、HTMLで文章を表すときに使う目印です。

セレクタの例

見出しの見た目を変えたい場合は、見出しを表すセレクタを書きます。

h2 {
  color: green;
}

この例では、h2という見出しの文字色を緑にしています。

プロパティと値の例

プロパティと値を組み合わせることで、見た目を指定できます。

p {
  font-size: 18px;
}

この例では、font-sizeがプロパティです。

18pxが値です。

CSSを書く場所

CSSを書く場所には、いくつかの方法があります。

初心者のうちは、CSSだけを書いた別ファイルを使う方法を覚えると分かりやすいです。

HTMLの中に直接書く方法

HTMLの中に、直接CSSを書く方法があります。

短い確認には使えますが、たくさん書くと見づらくなります。

<p style="color: red;">赤い文字です</p>

この方法は、特定の場所だけを少し変えたいときに使われます。

HTMLのhead内に書く方法

HTMLのhead内にCSSを書く方法もあります。

headとは、ページの設定を書く場所のことです。

<style>
p {
  color: red;
}
</style>

1つのページだけにCSSを使いたいときには分かりやすい方法です。

CSSファイルを分けて書く方法

CSSだけを書いた別のファイルを作る方法もあります。

多くのWebサイトでは、この方法がよく使われます。

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

CSSを別ファイルにすると、HTMLとCSSの役割を分けやすくなります。

あとから見た目を直すときにも管理しやすいです。

CSSが使われる場面

CSSは、多くのWebページで使われています。

ふだん見ているサイトの見た目にも、CSSが使われていることが多いです。

文字の色や大きさを変える

CSSを使うと、文字の色や大きさを変えられます。

大事な見出しを大きくしたり、注意書きの色を変えたりできます。

p {
  color: blue;
  font-size: 18px;
}

この例では、文章の文字色を青にし、文字の大きさを18pxにしています。

余白や線を整える

CSSでは、文章や画像の周りに余白を作れます。

余白があると、ページが読みやすくなります。

.box {
  margin: 20px;
  padding: 15px;
  border: 1px solid #333;
}

この例では、箱の外側と内側に余白を作り、線をつけています。

画面の中で要素を並べる

CSSを使うと、文章や画像を横に並べたり、中央に寄せたりできます。

このような並べ方をレイアウトといいます。

レイアウトとは、文字や画像の並べ方のことです。

商品カードを横に並べるときなどにもCSSが使われます。

ボタンや見出しのデザインを整える

ボタンの色や丸み、見出しの線や背景色もCSSで整えられます。

ただし、デザインを増やしすぎると読みにくくなることがあります。

初心者のうちは、読みやすさを優先するとよいです。

初心者がまず覚えたいCSSの基本

CSSには多くの書き方があります。

最初から全部を覚える必要はありません。

まずは、よく使う基本だけを押さえると理解しやすいです。

color：文字の色を変える

colorは、文字の色を変えるために使います。

p {
  color: red;
}

この例では、文章の文字色を赤にしています。

font-size：文字の大きさを変える

font-sizeは、文字の大きさを変えるために使います。

p {
  font-size: 18px;
}

文字が小さすぎると読みにくくなります。

記事では、読みやすい大きさを意識することが大切です。

margin：外側の余白を作る

marginは、箱の外側の余白を作るために使います。

箱とは、文章や画像などを入れるまとまりのことです。

.box {
  margin: 20px;
}

この例では、箱の外側に20pxの余白を作っています。

たとえるなら、marginは箱と箱の間のすき間です。

padding：内側の余白を作る

paddingは、箱の内側の余白を作るために使います。

内側の余白とは、箱の中身と箱のふちの間にできる空きのことです。

.box {
  padding: 20px;
}

たとえるなら、paddingは箱の中身と箱のふちの間のすき間です。

marginは外側、paddingは内側です。

border：線をつける

borderは、文字や箱のまわりに線をつけるために使います。

.box {
  border: 1px solid black;
}

この例では、箱に黒い線をつけています。

1pxは線の太さ、solidは一本線、blackは黒色を表します。

display：表示の形や並び方を決める

displayは、表示の形や並び方を決めるために使います。

たとえば、横並びにしたり、表示しないようにしたりできます。

.box {
  display: flex;
}

flexは、要素を横や縦に並べやすくする仕組みです。

最初は「並べ方を整えるもの」と考えると分かりやすいです。

CSSのコメントアウトの書き方

CSSには、コメントを書くことができます。

コメントとは、あとで見返すためのメモです。

コメントアウトとは画面に出ないメモを書くこと

コメントアウトとは、CSSの中にメモを書いても、ページの見た目には出ないようにすることです。

自分用のメモとして使えます。

たとえば、「ここは見出しのデザイン」などと書いておくと、あとで直しやすくなります。

CSSコメントの書き方

CSSのコメントは、次のように書きます。

/* ここにメモを書く */

例を見てみましょう。

/* 文章の色を青にする */
p {
  color: blue;
}

このように書くと、メモの部分はページには表示されません。

初心者が間違えやすいCSSの注意点

CSSは、基本を知ると少しずつ分かるようになります。

ここでは、初心者がつまずきやすい点を整理します。

marginとpaddingを混同しやすい

marginとpaddingは、どちらも余白に関係します。

しかし、場所が違います。

• margin：箱の外側の余白
• padding：箱の内側の余白

迷ったら、外側がmargin、内側がpaddingと考えると分かりやすいです。

HTMLとCSSの役割を混ぜて考えやすい

HTMLはページの中身を作ります。

CSSはページの見た目を整えます。

この2つを分けて考えると、Webページの仕組みが理解しやすくなります。

同じ場所に複数のCSSを書いて反映されないことがある

CSSでは、同じ場所に複数の指定を書くことがあります。

その場合、「より具体的な書き方」や「あとに書いたもの」が優先される仕組みがあります。

たとえば、まったく同じセレクタで書いた場合は、あとに書いたCSSが優先されます。

ただし、書き方によっては、あとに書いても反映されないことがあります。

「書いたのに変わらない」と感じたときは、同じ場所に別のCSSが当たっていないかを確認するとよいです。

色やサイズを変えすぎると読みづらくなる

CSSを使うと、いろいろな見た目にできます。

しかし、色や大きさを増やしすぎると、かえって読みづらくなります。

大切なのは、目立たせることだけではありません。

読者が迷わず読める見た目にすることです。

CSSと一緒に出てくる言葉

CSSを学んでいると、いくつかの言葉がよく出てきます。

ここでは、初心者向けにかんたんに説明します。

CSSセレクタ

CSSセレクタとは、CSSを当てる場所を選ぶための書き方です。

たとえば、すべての文章に当てるのか、特定の見出しだけに当てるのかを決めます。

CSS Flexbox

CSS Flexboxとは、要素を横や縦に並べやすくするための仕組みです。

カードを横に並べたいときなどに使われます。

CSS Grid

CSS Gridとは、ページの中をマス目のように分けて配置するための仕組みです。

複数の列や行を使ったレイアウトを作るときに使われます。

初心者のうちは、FlexboxとGridは「並べ方を整えるCSS」と考えると分かりやすいです。

CSSアニメーション

CSSアニメーションとは、CSSで文字やボタンなどに動きをつけることです。

たとえば、ボタンにふわっとした動きをつけたり、文字を少しずつ表示したりできます。

ただし、「CSSとは」の学習では、まず基本の書き方を押さえることが大切です。

JavaScript

JavaScriptとは、Webページに動きや反応を加えるための言葉です。

たとえば、ボタンを押したときに表示を変えたり、メニューを開いたりするときに使われます。

CSSでもかんたんな動きはつけられます。

より細かい動きや操作をしたいときは、JavaScriptが使われることがあります。

CSSとは何かに関するよくある質問

CSSは何のために使いますか？

CSSは、Webページの見た目を整えるために使います。

文字の色、大きさ、余白、線、配置などを指定できます。

CSSとHTMLはどちらから学べばよいですか？

先にHTMLを学ぶと分かりやすいです。

HTMLでページの中身を作り、そのあとCSSで見た目を整える流れになるためです。

ただし、CSSだけを少し触ってみても問題ありません。

実際に色や大きさが変わるので、楽しく学びやすいです。

CSSはプログラミング言語ですか？

CSSは、一般的な意味でのプログラミング言語とは少し違います。

計算や命令を順番に動かすというより、見た目を指定するための言葉です。

初心者の方は、「CSSはWebページの見た目を決めるための言葉」と覚えるとよいです。

CSSは初心者でも学べますか？

はい、初心者でも学べます。

最初は、文字の色を変える、文字の大きさを変える、余白を作るところから始めると分かりやすいです。

一度にすべて覚える必要はありません。

少しずつ試しながら覚えるのがおすすめです。

まとめ：CSSとはWebページの見た目を整えるための言葉

CSSとは、Webページの見た目を整えるための言葉です。

HTMLで作った中身に対して、色、大きさ、余白、線、配置などを指定できます。

HTMLはページの中身を作るものです。

CSSは、その中身を見やすく整えるものです。

初心者の方は、まず次のポイントを押さえましょう。

• CSSはWebページの見た目を整える
• HTMLは中身、CSSは見た目を担当する
• 要素とは、見出しや文章や画像などの部品のこと
• CSSは「セレクタ」「プロパティ」「値」で書く
• marginは外側の余白、paddingは内側の余白
• CSSが反映されないときは、ほかのCSSが当たっていないか確認する
• 最初はcolor、font-size、margin、padding、borderから覚えるとよい

CSSを使えるようになると、Webページをより読みやすく、見やすくできます。

まずは短いCSSを書いて、文字の色や大きさを変えるところから試してみましょう。