【初心者必見】今さら聞けない！CSSとは？HTMLとの違いから使い方まで徹底解説!!

2025年7月29日2024年2月16日

生徒

ペン博士！HTMLは少しわかってきたんですけど、よく『CSS』って言葉も聞くんです。これって何なんですか？

ペン博士

お、いいところに気づいた。CSSは、Webページの見た目を整えるために使う“おしゃれ担当”の言語なんじゃ。詳しく解説するからよーく聞くんじゃぞ！

生徒

ありがとうございます！お願いします！

「学習→収入」につなげた受講生のリアルな体験談も公開中！
働き方を変えたい方にも響くストーリーです。

O.Yさん
子育てと両立できる働き方を目指し、プログラミングの学習を開始する。独学での学習に限界を感じ、WithCodeの副業コースの受講を決意。最終目標から逆算した学習計画のもとスキルを習得し、卒業後に初案件を担当。現在は実案件サポートのもと、複数案件を担当しています。

詳しくはこちらの記事をご覧ください。

CSSとは？

ペン博士

CSS（Cascading Style Sheets）とは、Webページのスタイル（文字の大きさ・色・背景・配置）を設定する言語じゃ。Webサイトは基本的にHTMLで記述されており、HTMLとCSSを組み合わせて使用することで、Webサイトのデザインやレイアウトなどの見た目を装飾できるぞ！

CSSの主な役割

CSSの主な役割は以下になります。

外部スタイルシートによる一括適用
CSSは外部のスタイルシートファイルとして定義することができ、HTMLの複数のページで同じスタイルを一括で指定することができます。

見た目のカスタマイズ
CSSを使用することで、文字の色やサイズ、背景色や背景画像、ボーダーや角丸の指定など、Webページの見た目を簡単にカスタマイズすることができます。

レイアウトの調整
CSSを使用することで、要素の位置や大きさ、余白などを調整することができます。レイアウトの自由度が高く、柔軟なデザインが可能です。

アニメーションの追加
CSSのアニメーションを活用することで、ボタンのホバーエフェクトやスライドショーなど、動きのある要素を簡単に作成することができます。

レスポンシブデザインの実現
CSSを使用することで、モバイル端末に対応したレスポンシブデザインを実現できます。異なる画面サイズに対応するためのスタイルを指定することが可能です。

このようにCSSを使用することで、Webサイトのデザインやレイアウトを自由にカスタマイズすることができます。

HTMLとCSSの違い

ペン博士

ここでは、HTMLとCSSの違いについて解説するぞ！

HTML（HyperText Markup Language）は、Webページの構造を定義するための言語です。

これによって、見出しや段落、リンク、画像などの要素を指定することができます。HTMLは、Webページの基本的な構造を作るためのものであり、情報の体系化を可能にします。例えば、<h1>○○</h1>とすると、この<h1>～</h1>の間にある、「○○」までが見出しであると定義しています。

一方、CSS（Cascading Style Sheets）は、Webページのスタイルを指定するための言語です。

文字の色やサイズ、レイアウトの変更、装飾の追加など、見た目に関連する要素を指定します。CSSは、HTMLがWebページの構造を定義するのに対して、見た目を整えるために使用されます。例えば、h1{ color : blue; }とすると、HTMLでh1と指定されている文章が青色になります。

CSSの記述方法

ペン博士

次に、CSSの基本的な記述方法について解説するぞ！

基本の文法

CSSの基本的な書き方は、セレクタ、プロパティ、値の3つの要素を使用します。

1. セレクタ（Selector）

スタイルを適用したいHTML要素を指定する
「どこにスタイルを当てるか」を決める
例：h1 → すべての<h1>要素にスタイルを適用

2. プロパティ（Property）

スタイルの内容（見た目の種類）を指定する
「何を変えるか」を決める
例：color → 文字の色を指定するプロパティ

3. 値（Value）

プロパティに対して適用する具体的な値を指定
「どのように変えるか」を決める
例：red → 文字の色を赤にする

セレクタの指定方法

セレクタは、タグ名、id名、class名などを使用して、どこの見た目を変えるか指定することができます。

タグ名

タグ名を指定する場合は、「タグ名{~}」とすることで指定できます。

p {
  color: red;
}

上記のCSSは、全てのp要素に対してスタイルを適用します。

id名

id名を指定する場合は、「#id名{~}」とすることで指定できます。

#title {
  color: blue;
}

上記のCSSは、id属性が「title」である要素に対してスタイルを適用します。

class名

class属性を指定する場合は、「.class名{~}」とすることで指定できます。

.title {
  color: blue;
}

上記のCSSは、class属性が「highlight」である要素に対してスタイルを適用します。

プロパティと値の設定

プロパティと値の設定は、セレクタの後に中括弧で囲まれた部分で行います。プロパティは半角のコロン「:」で値と区切り、セミコロン「;」でプロパティの終わりを示します。値はプロパティに適用する具体的な値を指定します。

p {
  color: red;
}

上記のCSSは文字の色を赤色に指定します。

HTML・CSSの開発環境準備

ペン博士

CSSを書く際には、HTMLもセットで記述することが基本じゃ。ここでは、HTML・CSSの開発環境作成手順を解説するぞ！

ツールのインストール

HTML・CSSを使いWebページの制作をするために必要なツールは、「テキストエディタ」と「ブラウザ」の2つです。

テキストエディタとは、文字や記号などのテキストで構成されているテキストファイルを編集するソフトのことです。プログラミングでは、プログラム（コンピュータへの命令）をテキストで書いて、実行します。今回は、無料で使用できる便利な機能が複数搭載された「Visual Studio Code（VSCode）」というエディタを使用します。

VSCodeの公式サイト (https://code.visualstudio.com/) にアクセスします。画面右上に表示されている「Download」のボタンをクリックし、インストールに必要なファイルをダウンロードしてください。