CSSとは？HTMLとの違いから使い方まで徹底解説!!

2024年2月16日

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（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つの要素を使用します。

セレクタは、スタイルを適用するHTML要素を指定します。つまり、HTML内の「どこの見た目を変えるか」を指定します。例えば、「h1」は全てのh1要素にスタイルを適用します。

プロパティは、スタイルの設定内容を指定します。つまり、セレクタで指定した部分の「何を変えるのか」を指定します。例えば、「color」は文字の色を指定するプロパティです。

値は、プロパティに適用する具体的な値を指定します。つまり、指定された部分を「どのように変えるのか」を指定します。例えば、「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/) にアクセスします。画面左側に表示されている「ダウンロード」のボタンをクリックし、インストールに必要なファイルをダウンロードしてください。

ブラウザとはWebページを表示するためのツールです。Windowsでは標準で「Internet Explorer」または「Microsoft Edge」がインストールされています。また、「Google Chrome」なども利用している方が多いです。

フォルダ・ファイルの用意

これから作成するファイルを格納するためのフォルダを作成します。その後、先ほどダウンロードしたVSCodeの「open folder」をクリックします。その後、フォルダー横の「New File」を選択します。「index.html」というファイル名を作成します。このファイルにHTMLを記述していきます。次に、同じく「open folder」をクリックします。その後、「stylesheet.css」というファイル名を記載します。これで開発環境の作成は完了です。