【初心者向け】CSS入門講座｜CSSとは？基本の書き方とWeb制作に役立つ知識を解説

CSSは、Webサイトの文字の色や大きさ、レイアウト、アニメーションなどのデザインを指定するための言語です。HTMLで作成したWebページにCSSを適用することで、見やすく魅力的なデザインに仕上げることができます。

このCSS入門講座では、CSSとは何かという基礎知識から、セレクタやプロパティの基本構造、実際の書き方まで初心者向けにわかりやすく解説します。

CSSには数多くのセレクタやプロパティが存在しますが、すべてを覚える必要はありません。まずは基本を理解し、少しずつ使いながら覚えていくことが大切です。

基礎知識を学んだあとは、ページ下部にあるCSS入門問題にも挑戦し、理解度を確認してみましょう。

CSSとは
【入門講座】CSSでできること
【入門講座】CSSの開発環境を整えよう
【入門講座】CSSの基本構造
【入門講座】CSSの書き方
CSS入門講座（18問）
CSS入門に関するよくある質問
【入門講座】CSSの学習方法
CSS入門講座まとめ

CSSとは

CSS（Cascading Style Sheets：カスケーディング・スタイル・シート）とは、Webページのデザインやレイアウトを指定するための言語です。「CSS（シーエスエス）」や「スタイルシート」と呼ばれています。

HTMLがWebページの構造を作る役割を担うのに対し、CSSは文字の色や大きさ、背景色、余白、レイアウトなどの見た目を指定する役割を担います。現在多くのWebサイトで利用されており、あなたが今見ているページのデザインもCSSによって作られています。

CSSを活用することで、Webサイトのデザインを自由に調整できるだけでなく、スマートフォンやタブレットなど様々なデバイスに対応したWebページを作成できます。
なお、CSSはプログラミング言語ではなく「スタイルシート言語」に分類されます。HTMLなどで作成された文書の表示方法を指定し、Webサイトの見た目を管理するために使用されます。

CSSを学ぶメリット

CSSを学ぶことで、Webサイトのデザインやレイアウトを自由に調整できるようになります。文字の色や大きさの変更だけでなく、レスポンシブ対応やアニメーションの実装なども可能になり、ユーザーが使いやすいWebサイトを作成できます。
また、CSSはHTMLと並ぶWeb制作の基礎スキルとして、多くの副業案件やフリーランス案件で求められています。これからWeb制作を学びたい方にとって、最初に身につけておきたい重要なスキルのひとつです。

CSSの特徴

HTMLは

<title>

のようにタグを使用してWebページの構造を作成します。一方CSSでは、「セレクタ」と呼ばれる仕組みを使ってデザインを適用する対象を指定し、文字の色やサイズ、背景色、余白などのスタイルを設定します。

例えば、見出しだけ文字色を変更したり、特定のボタンだけデザインを変更したりすることも可能です。CSSを利用することで、Webサイト全体のデザインを統一しながら効率よく管理できます。

HTMLの基礎を学びたい方は、忍者コードのHTML入門講座をご覧ください！

レスポンシブに対応できる

現在はパソコンだけでなく、スマートフォンやタブレットからWebサイトを閲覧するユーザーが増えています。そのため、デバイスごとに最適なレイアウトを表示する「レスポンシブデザイン」への対応が重要です。

CSSでは「メディアクエリ」という機能を利用することで、画面サイズに応じてレイアウトやデザインを変更できます。例えば、パソコンでは横並びに表示し、スマートフォンでは縦並びに変更するといった設定も可能です。
ユーザーが利用するデバイスに合わせて見やすいWebサイトを作成できることも、CSSの大きな特徴のひとつです。

＼CSSについてもっと詳しく知りたい方必見！／

これからWEB制作を学ぶ方には、Web制作コースの独学プランがおすすめです!

WEB制作コースの詳細はこちら

【入門講座】CSSでできること

CSSは、HTMLで作成したWebページの見た目を整えるための言語です。文字の色や大きさの変更はもちろん、背景色の設定、レイアウトの調整、ボタンの装飾、アニメーションの追加などを行えます。HTMLがWebページの構造を作る役割を持つのに対し、CSSはデザインやレイアウトを指定する役割を持っています。CSSを活用することで、見やすく使いやすいWebサイトを作成できるようになります。ここでは、CSSでできる代表的な機能について見ていきましょう。

Webサイトのデザインを変更できる

CSSを使用すると、Webサイトの見た目やレイアウトを自由に変更できます。文字や背景のデザインだけでなく、要素の配置やボタンの装飾なども行えます。

文字や背景のデザインを変更する

CSSでは、文字の色や大きさ、フォントの種類を変更できます。また、背景色や背景画像の設定も可能です。企業サイトやECサイトでも、ブランドイメージに合わせたデザインを実現するために活用されています。

レイアウトを調整する

CSSを使用すると、要素の配置や余白を自由に調整できます。現在のWeb制作ではFlexboxやGridレイアウトが広く利用されており、パソコンやスマートフォンなど異なる画面サイズにも対応しやすくなっています。

枠線や装飾を追加する

CSSでは、要素に枠線（border）や角丸（border-radius）、影（box-shadow）などの装飾を追加できます。これらを活用することで、情報の区切りを分かりやすくしたり、デザイン性の高いWebサイトを作成したりできます。実際のWebサイトでも、ボタンやカードデザインなどで広く利用されています。

リンクやボタンを装飾する

CSSでは、リンクやボタンの色、大きさ、余白、マウスを重ねた際の見た目（ホバー効果）などを変更できます。クリックできる要素を分かりやすくすることで、ユーザーが操作しやすいWebサイトを作成できます。ECサイトや企業サイトでも、コンバージョン率向上のために重要な要素となっています。

以上が、CSSでできる主なことです。これらの機能を組み合わせることで、見やすく使いやすいWebサイトを作成できるようになります。

CSSの基礎を身につけたい方は、無料問題集にも挑戦してみましょう。実際に手を動かしながら学習することで、CSSの理解をより深めることができます。

CSSアニメーションを作成できる

CSSでは、要素に動きを加えるアニメーションを作成できます。ボタンにマウスを合わせた際の動きや、画像のフェードイン表示などを実装できるため、ユーザーの視線を集めたり操作性を向上させたりする際に活用されています。

基本構文

CSSアニメーションは、@keyframesとanimationプロパティを使用して作成します。@keyframesではアニメーションの動きを定義し、animationプロパティで対象の要素へ適用します。

@keyframes  animationName {

               from {

               /* 開始時のスタイル */

               }

               to {

               /* 終了時のスタイル */

               }

              }

この例では、要素が徐々に表示されるフェードインアニメーションを実装しています。

CSSアニメーションの活用例

作成したアニメーションは、animationプロパティを使って要素に適用します。

@keyframes  slideIn {

               from {

                transform: translateX(-100%);

               }

               to {

                transform: translateX(0);

               }

              }

              .element {

                animation: slideIn 1s ease;

              }

この例では、要素が画面の左側から右方向へスライドしながら表示されます。CSSアニメーションは、ボタンのホバー演出や画像のフェードイン、ページ読み込み時の動きの追加など、ユーザー体験の向上に活用されています。

注意点

CSSアニメーションは、Webサイトに動きを加えてユーザー体験を向上させる便利な機能ですが、多用しすぎるとページが見づらくなったり、表示速度に影響したりする場合があります。
また、スマートフォンなどの端末ではアニメーションが多いと動作が重くなることもあるため、必要な箇所に絞って活用することが大切です。
アニメーション終了後の状態を維持したい場合は、`animation-fill-mode: forwards;`を使用できます。
まずはシンプルなアニメーションから作成し、実際にブラウザで動作を確認しながら学習を進めましょう。

【入門講座】CSSの開発環境を整えよう

CSSを学習するためには、コードを書くためのテキストエディタと、作成したWebページを確認するためのブラウザを準備しましょう。

テキストエディタ

CSSはWindowsの「メモ帳」やMacの「テキストエディット」でも作成できますが、効率よく開発を進めるためにはテキストエディタの利用がおすすめです。
初心者の方には、Microsoftが提供している無料のテキストエディタ「Visual Studio Code（VS Code）」がおすすめです。VS Codeは世界中のWeb開発者に利用されており、コード補完機能や拡張機能が充実しているため、HTMLやCSSの学習を効率よく進められます。
また、Web制作だけでなくJavaScriptやPHPなど、さまざまなプログラミング言語の開発にも対応しています。

Visual Studio Codeダウンロードページ

ブラウザ

ブラウザは、作成したWebページの表示を確認するために使用します。
Windowsには「Microsoft Edge」、Macには「Safari」が標準でインストールされていますが、Web制作では「Google Chrome」が広く利用されています。
Google Chromeには開発者向けツール（デベロッパーツール）が搭載されており、HTMLやCSSの確認や修正を簡単に行えます。そのため、これからWeb制作を学ぶ方にはGoogle Chromeがおすすめです。
また、「Firefox」も開発者向け機能が充実しており、多くのエンジニアに利用されています。

まずはVS CodeとGoogle Chromeをインストールし、CSSの学習環境を整えましょう。

＼CSSについてもっと詳しく知りたい方必見！／

これからWEB制作を学ぶ方には、Web制作コースの独学プランがおすすめです!

WEB制作コースの詳細はこちら

【入門講座】CSSの基本構造

CSSは「セレクタ」「プロパティ」「値」の3つの要素で構成されています。
まずはCSSコードがどのような仕組みで動作するのかを理解しましょう。

CSSでは「どの要素に」「何を」「どのように適用するか」を指定することでデザインを変更します。

セレクタ

セレクタは、CSSを適用する対象を指定するためのものです。
「どの要素にデザインを適用するのか」を決める役割があり、h1やpなどのHTMLタグ、class属性やid属性を指定できます。
例えばh1を指定すると、ページ内のすべてのh1タグにスタイルを適用できます。

プロパティ

プロパティは、「何を変更するのか」を指定するためのものです。
例えば文字色を変更したい場合は「color」、文字サイズを変更したい場合は「font-size」を指定します。
CSSには数多くのプロパティが用意されており、Webサイトのデザインやレイアウトを細かく調整できます。代表的なプロパティには、文字色を変更する「color」、背景色を変更する「background-color」、文字サイズを変更する「font-size」などがあります。
この後のセクションでは、実際によく使われるCSSプロパティの書き方について詳しく解説します。

値

値は、プロパティをどのように変更するのかを指定するためのものです。
例えばcolorプロパティであれば「red」や「blue」、font-sizeプロパティであれば「16px」や「24px」などを指定します。
プロパティによって指定できる値は異なるため、セットで覚えることが大切です。

【入門講座】CSSの書き方

CSSはHTMLと組み合わせて使用し、Webサイトのデザインやレイアウトを指定するための言語です。文字色や背景色の変更、サイズ調整、枠線の追加など、さまざまなデザインを実現できます。
CSSを記述する方法には、HTMLに直接書き込む方法や外部ファイルに記述する方法などがあります。それぞれ特徴や用途が異なるため、まずは基本的な書き方を理解しておきましょう。
このセクションでは、CSSを記述する3つの方法と、実際によく使われる代表的なCSSプロパティについて解説します。

HTMLの基礎を学びたい方は、忍者コードのHTML入門講座をご覧ください。

CSSの基本的な書き方

CSSは「セレクタ」「プロパティ」「値」を組み合わせて記述します。

h1 {
 color: red;
}

上記は「h1タグの文字色を赤色にする」という意味です。

h1 → セレクタ（対象を指定）
color → プロパティ（何を変更するか）
red → 値（どのように変更するか）

まずはこの基本構造を理解することが、CSS学習の第一歩です。

インラインで書き込む

インラインとは、HTMLタグに直接CSSを書き込む方法です。style属性を使用して指定します。

<p style="color: red;">

この例では、pタグの文字色を赤色に変更しています。

インライン形式は直感的で理解しやすく、簡単な動作確認にも便利です。しかし、デザインの変更が発生した場合にHTMLごと修正する必要があるため、管理が複雑になりやすいという欠点があります。
そのため、実際のWeb制作では一時的なスタイル変更を除き、あまり使用されません。

headタグ内に記述する

CSSはHTMLファイルのheadタグ内に記述することもできます。この方法ではstyleタグを使用します。


            <style>

             h1 {

              color: red;

             }

            </style>

headタグ内に記述したCSSは、そのHTMLファイル内でのみ有効になります。
1ページだけにスタイルを適用したい場合には便利ですが、複数ページで同じデザインを使用する場合は、それぞれのファイルを修正する必要があります。そのため、Web制作では外部CSSファイルと組み合わせて利用されることが一般的です。

外部ファイルに記述する

実務のWeb制作では、CSS専用のファイル（.css）を作成し、HTMLから読み込む方法が一般的です。

HTMLファイルでは、headタグ内に以下のように記述してCSSファイルを読み込みます。

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

外部ファイルを利用すると複数ページで同じデザインを共有できるため、修正や管理がしやすくなります。また、デザインの変更をCSSファイル側だけで行えるため、保守性も高くなります。
そのため、実務のWeb制作では外部CSSファイルによる管理が主流です。これからCSSを学ぶ方も、まずは外部ファイルを利用した記述方法を覚えておきましょう。

文字の色を変える「color」プロパティ

CSSで文字の色を変更するには、「color」プロパティを使用します。見出しや本文、ボタンのテキストなど、Webサイト内のさまざまな文字に色を設定できます。


            .test {

             color: red;

            }


            <h1 class="test">

             こんにちは。

            </h1>

実務ではブランドカラーに合わせてカラーコードを使用するケースが多く、Webサイト全体のデザイン統一にも役立ちます。

背景の色を変える「back-ground」プロパティ

CSSで背景色を変更するには、「background-color」プロパティを使用します。ページ全体の背景やボタン、見出しエリアなどの色を設定できます。
色の指定方法は「color」プロパティと同様で、色名やカラーコードを使用できます。

.backcolor {
 back-ground: #ffcc00;
}

<p class="backcolor">
 こんにちは。
</p>

背景色を活用することで、重要な情報を目立たせたり、Webサイトのデザイン性を高めたりすることができます。

文字の大きさを変える「font-size」プロパティ

CSSで文字サイズを変更するには、「font-size」プロパティを使用します。見出しや本文など、それぞれの役割に応じて文字サイズを調整できます。
単位には「px」や「rem」がよく使用されます。初心者のうちはpxを使うと理解しやすいでしょう。

.size-small {
 font-size: 12px;
}

<p class="size-small">
 小さい忍者
</p>

適切な文字サイズを設定することで、読みやすくユーザーに伝わりやすいWebページを作成できます。

要素の大きさを変える「width」プロパティ

CSSで要素の横幅を変更するには、「width」プロパティを使用します。画像やボタン、コンテンツエリアなどの幅を調整できるため、レイアウト作成でよく利用されます。
値には「200px」や「80%」などを指定します。

.adjust-width {
 width: 80%;
}

<img class="adjust-width" src="ninja.png" alt="忍者">

実務では、画面サイズに応じて柔軟に表示を変更できるよう、「%」や「vw」などの相対単位を使用することもあります。

要素の高さを変える「height」プロパティ

CSSで要素の高さを変更するには、「height」プロパティを使用します。
画像やボックス要素の高さを調整したい場合に利用します。単位には「px」や「%」を指定できます。

.adjust-height {
 height: 200px;
}

高さを固定しすぎると、画面サイズによって表示崩れが発生する場合があります。そのため、実務では必要に応じて使用することが一般的です。

枠線を作成する「border」プロパティ

CSSで枠線を表示するには、「border」プロパティを使用します。ボタンや画像、コンテンツの囲み枠などに利用されることが多く、デザインの強調や区切りを表現できます。

.border-sample {
 border: 2px solid #333;
}

<p class="border-sample">
 こんにちは。
</p>

borderプロパティでは、枠線の太さ・種類・色を指定できます。Webサイト制作では見出しやボックスデザインなど、さまざまな場面で活用されています。

CSS入門講座（18問）

CSS入門に関するよくある質問

CSSは未経験でも学べますか？

はい、CSSは未経験からでも学びやすい言語です。
CSSはWebサイトの見た目やレイアウトを調整するための言語であり、比較的シンプルな文法で学習を始められます。文字の色や大きさの変更、背景色の設定など、目に見えて変化が分かるため、プログラミング初心者でも学習成果を実感しやすいことが特徴です。
まずはHTMLとあわせて基礎を学び、簡単なWebページを作成しながら学習を進めることで、効率よくCSSを習得できるでしょう。

CSSとHTMLの違いは何ですか？

HTMLとCSSは、どちらもWebサイト制作に欠かせない技術ですが、それぞれ役割が異なります。
HTMLは見出しや文章、画像などの「構造」を作る言語です。一方でCSSは、その構造に対して文字色や余白、レイアウトなどの「見た目」を指定する言語です。
例えば、HTMLで家の骨組みを作り、CSSで外壁や内装をデザインするイメージです。実際のWeb制作ではHTMLとCSSを組み合わせて使用するため、CSSを学ぶ際はHTMLもあわせて学習することをおすすめします。

CSSを学ぶとフリーランスや副業に活かせますか？

はい、CSSは副業やフリーランスのWeb制作案件で活用できる重要なスキルです。
例えば、Webサイト制作やランディングページ（LP）のコーディング、既存サイトのデザイン修正などの案件では、HTMLとCSSの知識が求められます。特にWeb制作の案件では、CSSを使ったデザイン調整やレスポンシブ対応が必要になることも少なくありません。
ただし、実際に案件を受注するためには、CSSだけでなくHTMLやJavaScriptなどの関連スキルもあわせて習得することが大切です。まずはCSSの基礎を身につけ、実際にWebサイトを作りながらスキルアップしていきましょう。

【入門講座】CSSの学習方法

CSSは本や動画で知識を学ぶことも大切ですが、実際にコードを書きながら学習することで理解が深まります。特にWebサイトを模写したり、自分でページを作成したりする実践学習は、CSSの使い方を身につけるうえで効果的です。
独学でも学習は可能ですが、「何から学べばよいかわからない」「エラーの原因がわからない」といった理由で挫折してしまう方も少なくありません。
そのため、CSSを学ぶ際は知識のインプットだけでなく、実際にWebサイトを作りながらアウトプットすることが大切です。HTMLやJavaScriptと組み合わせながら学習を進めることで、Web制作の実践力を身につけられるでしょう。

CSS入門講座まとめ

CSSとは、HTMLで作成したWebページの見た目やレイアウトを指定するためのスタイルシート言語です。文字の色や大きさの変更、背景の設定、レイアウト調整、レスポンシブ対応、アニメーションの追加など、Webサイトのデザインに欠かせない役割を担っています。

Web制作ではHTMLで構造を作り、CSSでデザインを整えることが基本です。そのため、CSSはWeb制作を学ぶうえで必須となるスキルのひとつといえるでしょう。

まずは本記事で紹介したセレクタやプロパティなどの基本文法を理解し、実際にコードを書きながら学習を進めてみてください。基礎を身につけることで、より自由度の高いWebサイト制作ができるようになります。
また、CSSは副業やフリーランスのWeb制作案件でも活用される重要なスキルです。HTMLやJavaScriptとあわせて学習することで、作れるWebサイトの幅も大きく広がります。

Web制作についてさらに学びたい方は、Web制作コースをご覧ください。
「独学で学べるか不安」「自分に合った学習方法を知りたい」という方は、NINJACODEのメンター相談もご活用ください。学習の進め方や目標に合わせたロードマップについて相談することができます。

プログラミング入門講座トップへ戻る