最終更新日：2022.12.05　
公開日：2022.11.30

CSSとは？使い方や書き方、初心者向けの学習方法をわかりやすく解説

Webサイトの作成を考えている方は「CSS」という言葉を聞いたことがあると思います。

CSSはスタイルシートとも呼ばれ、Webサイトのレイアウトやデザインを決めるために使用されます。

WebサイトはHTMLで基本を作り、CSSで見栄えをよくすることで普段私たちが見ている形になっています。

しかし「CSSについてよくわからない」という方も多いと思います。

この記事ではCSSとHTMLの関係、CSSの使い方や実際の書き方、初心者の方向けの学習方法を紹介します。

CSSとは？
CSSとHTMLの関係性は？
CSSでできることは？
CSSの書き方は？
CSS初心者の学習方法は？
CSSのまとめ

CSSとは？

CSSとはWebサイトなどのレイアウトやデザインを整えることができる言語のことです。

HTMLというWebサイトの基本を作る言語と組み合わて使用していきます。

ほとんどのWebサイトに使用されていて、現在ご覧になっているこのWebサイトもHTMLとCSSを組み合わせてつくられています。

CSSはWebサイト作成の基本となる言語のため、プログラミング初心者が学ぶことも多くあります。

関連ページ

HTMLとは？できることや簡単なタグの例などをわかりやすく解説

CSSの例

実際HTMLにCSSを組み合わせるとどのように変わるのか見てみましょう。

まずはHTMLのみで作ったWebページがこちらです。

次にCSSを組み合わせた画面がこちらです。

見た目が大きく変わっているのがわかるかと思います。

この画像ではCSSの機能を目立たせるように色や画像サイズを変えていますが、実際はWebサイトのコンセプトに合わせて自然なデザイン・レイアウトになるように仕上げていきます。

CSSの特徴

CSSは正式には「Cascading Style Sheet」（カスケーディング・スタイル・シート）という名称です。単に「スタイルシート」と呼ばれることもあります。

CSSは主にWebサイトのレイアウトやデザインを指定するために使用します。

HTMLのみで作られたWebサイトはシンプルなものなので、ほとんどの場合はCSSを使ってWebサイトの見栄えを整えていきます。

CSSを使用することで

文字の大きさや色などの変更
レイアウト・サイズ調整
アニメーションの追加

といったことができます。CSSでできることの詳細はのちほど紹介します。

また、CSSはプログラミング言語と間違われることがありますが、CSSはスタイルシート言語といってまた別の言語となります。

プログラミング言語は計算などの処理をおこなうのに対して、CSSはレイアウトやデザインを表現することを目的とした言語です。

関連ページ

プログラミング言語とは？種類や一覧、初心者が選ぶときのポイントを解説します

CSSとHTMLの関係性は？

CSSとHTMLの関係性や役割について紹介します。

大まかにわけると

HTML：構造などWebサイトの基本的な部分を設計する
CSS：HTMLで作られたWebサイトの見栄えを調整する

といった役割の違いがあります。

まずはじめにHTMLでWebサイトの基本を作り、次にCSSで装飾していくという関係性です。

HTMLでテキストや画像などWebサイトに表示させる内容を決め、CSSでその内容をどのような見た目で表現するかを決めていきます。

CSSとHTMLはWebサイト作成において組み合わせて使用するため、Webサイトの作成やWebエンジニアなどを目指している方は両方を学んでおくことが重要です。

関連ページ

HTMLとは？できることや簡単なタグの例などをわかりやすく解説

CSSでできることは？

ここではCSSはどのようなことができるのか紹介します。

Webサイトをデザイン（装飾）できる

CSSでよく使う機能としてWebサイトの見た目をデザイン（装飾）することが挙げられます。

背景やテキストに色を付けたり、リンクが貼られている箇所をボタンとして目立たせるなど、Webサイトにメリハリをつけることができます。

CSSで装飾することでメリハリがつくだけでなく、Webサイトには目的に沿った印象を与えることも可能です。

例えばカフェのWebサイトであれば、CSSによって暖色を多めに入れた装飾を施すことで「暖まる場所」だということを視覚的に伝えることができます。

レイアウトやサイズの調整ができる

CSSはWebサイト内のレイアウトの調整といったこともできます。

例えばWebサイトの文字がすべて同じ大きさや色だと、メリハリがなく単調な印象になってしまいます。

そこでCSSを使用して「タイトルだけ中央にして、本文は左揃えにする。」「本文中の重要な言葉はサイズを大きくする」といったことをおこないます。

簡単なアニメーションをつける

CSSでは簡単なアニメーションをつけることも可能です。

例えば、画像にカーソルを合わせると淡く光ってクリックできることを知らせてくれる機能などがあります。

CSSでつけるアニメーションは「いつ始まっていつ終わるか」といったタイミングや、再生する時間などを指定することができます。

アニメーションをつけることによって、Webサイトを訪れた方がどこをクリックしたら欲しい情報が手に入るかわかりやすくなります。

本格的にアニメーションをつけたいときは、JavaScript（ジャバスクリプト）といったプログラミング言語を使用します。

CSSの書き方は？

ここでは実際にCSSの書き方を紹介します。

パソコンがあれば実際に試せるCSSのサンプルを掲載しますので、ぜひ試してみてください。

CSSの書き方のルール

CSSは次の3つの要素を組み合わせて書いていきます。

セレクタ：波かっこ　{}　で囲うことで、スタイルを適用する場所を示す。
プロパティ：スタイルの種類を指定する（色を変えるなど）
値：プロパティの具体的な指示をする（色を赤にするなど）

基本的には「セレクタ」で範囲を指定し、「プロパティ」でその範囲に適用するスタイルを指定し、「値」でスタイルの詳細を指定するという順番に書いていきます。

試しに「CSSについて」という文字色をCSSで変更します。

文字を赤くするCSSはこちらです。

h1 {

color: red;

}

このように「CSSについて」という文字が赤くなりました。

いま使用したCSSを「セレクタ」「プロパティ」「値」に分類すると、以下のようになります。

h1 {

color: red;

}

セレクタ：h1{　}（h1の範囲に適用する）
プロパティ：color（スタイル＝色を変える）
値：red（色を赤くする）

となります。

といった具合に、「セレクタで範囲を指定する」「プロパティで何をするかを指定する」「値でプロパティの具体的な表現方法を決める」という流れでCSSを書いていきます。

プロパティと値の例

「color」だけではなくプロパティには数多くの種類があります。

基本的なものを以下にいくつか紹介します。

【プロパティ例】

color・・・文字色
border・・・枠線
font-family・・・文字の種類
background-image・・・背景画像

プロパティ同様に値も多くの種類があります。プロパティ「color」に対しては、

red
blue
yellow

など色の名称で指定するほかに、カラーコード（「#ffffff（白）」といった色を意味するコード）を指定することもできます。

CSSのサンプルコード

Windowsでメモ帳（macでは「テキストエディット」）を使って試していきます。

手順は以下の通りです。

メモ帳を起動する
CSSをコピー＆ペーストする
ファイル名を.htmlに変更する
ファイルをダブルクリックして実行する

ここではCSSを使って以下の3つを実現させます。

背景の色と文字の配置を変える

文字を中央に配置し、背景色を変更するCSSです。

body {　}で全体を範囲指定し

display: grid;

place-items: center;

background: #fffacd;

で全体を真ん中に配置し、背景の色を指定しています。

タイトルを目立たせる

タイトルを黒い線で囲い、中を黄色くして目立たせるCSSです。

h1 {　}

で範囲を指定し

  position: relative;

  padding: 1rem 2rem calc(1rem + 10px);

  background: #fff100;

でボックス内を黄色い色にしています。

続いて

h1:before {　}

で黒い線で囲います。beforeというのは「疑似要素」といって、HTMLにない情報を追加する機能です。

  position: absolute;

  top: -7px;

  left: -7px;

  width: 100%;

  height: 100%;

  content: ”;

  border: 4px solid #000000;

ボタンを設置する

リンクがあることをわかりやすく伝えるため「ボタン」を設置します。

a {　}

で範囲を指定します。

display: inline-block;

padding: 0.5em 1em;

text-decoration: none;

background: #daa520;

color: #ffffff;

border-bottom: solid 4px rgb(134, 132, 132);

border-radius: 3px;

こちらでボタンの設定をしています。

さらにボタンをクリックしたときの動きを付けます。

a:active {　}

まずは「active」を使用し、範囲を指定します。

-webkit-transform: translateY(4px);

transform: translateY(4px);

box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);

border-bottom: none;

クリックしたときの動きを指定します。

実際にWebブラウザに反映させたときに、ぜひボタンをクリックしてみてください。

今説明したCSSのサンプルコードは以下になります。

「メモ帳」にコピー＆ペーストして試してみてください。

<body>

<style>

body {

  display: grid;

  place-items: center;

  background: #fffacd;

}

</style>

</body>

<h1>CSSについて

<style>

h1 {

  position: relative;

  padding: 1rem 2rem calc(1rem + 10px);

  background: #fff100;

}

h1:before {

  position: absolute;

  top: -7px;

  left: -7px;

  width: 100%;

  height: 100%;

  content: ”;

  border: 4px solid #000000;

}

</style>

</h1>

<p>

<a href=”https://wonder.litalico.jp/”>CSSはプログラミング教室で学ぶ方法もあります

<style>

a {

  display: inline-block;

  padding: 0.5em 1em;

  text-decoration: none;

  background: #daa520;

  color: #ffffff;

  border-bottom: solid 4px rgb(134, 132, 132);

  border-radius: 3px;

}

a:active {

  -webkit-transform: translateY(4px);

  transform: translateY(4px);

  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);

  border-bottom: none;

}

</style>

</a>

</p>