図解で簡単！CSSの書き方4つが初心者でも5分で理解できる！

CSSの書き方について、HTML/CSS初心者向けに丁寧に解説します。

Web開発経験のある筆者が、わかりやすいコードを使いながらCSSの書き方に解説しているので、安心してご覧ください。

CSSの書き方は主に４つあります。その４つについて順番に解説していきます。

本記事を読み終える頃には、HTML/CSS初心者でもCSSの書き方が理解できているでしょう！

５分程度で読める内容ですので、ぜひ最後まで読んで、CSSの書き方を理解してください！

※CSSの基本を理解したい人は、CSSについて詳しく解説した記事をご覧ください。

CSSの書き方その1（基本）

まずはCSSの書き方１つ目（セレクタに対してCSSを適応する方法）です。

HTMLでは、「タグ」という概念がありましたね。

※「タグ」とは何かを忘れてしまった人は、HTMLについて詳しく解説した記事をご覧ください。

例えば、HTMLファイルに以下のようなコードが書かれているとします。

【HTMLファイル】

では、以上の「Hello HTML」という文字の色を赤に、「Hello CSS」という文字を青にしてみます。

今回は<h1>を赤に、<p>を青にしたいので、以下のようにCSSを記述します。

【CSSファイル】

【表示結果】

Hello CSS

これで、【表示結果】のように、文字に色が付きます。

ちなみに、CSSファイルで指定するHTMLのタグを「セレクタ」、どんな内容のデザインを施すのかを示すのが「プロパティ」、そのプロパティをどうするのかを指定するのが「値」です。

以上のように、HTMLのタグを指定してCSSを記述するのがCSSの書き方の１つ目です。

CSSの書き方その2（style属性を使う方法）

CSSの書き方の２つ目は、HTMLファイルで、「style属性」を使用する方法です。

先ほどはHTMLファイルにはHTMLを、CSSファイルにはCSSを記述していましたね。

HTMLファイルで「style属性」というのを使えば、CSSファイルを使わずにCSSを適応することができます。

※「style属性」を詳しく学習したい人は、style属性について詳しく解説した記事をご覧ください。

では、例を見てみます。

【HTMLファイル】

【表示結果】

こんばんは

「style属性」を使えば、CSSファイルを使わずにCSSが書けます。

「style=””」の「””」内に、先ほどと同様にCSSのプロパティと値を書きます。簡単ですよね？

しかし、一般的にはHTMLファイルとCSSファイルを用意して、HTMLはHTMLファイルに、CSSはCSSファイルに書くのが好ましいです。

CSSの書き方その3（classを指定する方法）

CSSの書き方３つ目は、HTMLのタグに「class」を指定する方法です。

※「class」を詳しく学習したい人は、classについて解説した記事をご覧ください。

では、例を見てみます。

【HTMLファイル】

【CSSファイル】

【表示結果】

udemyで学習しよう！

classはHTMLのタグに付ける名前のようなものです。今回は<p>タグに対して「sample」というclass名（名前）を付けたのです。

そして、CSSファイルで、「sampleという名前」に対してプロパティと値を指定しています。

classを使用した場合、CSSファイルではclassの前に「.（ドット）」を付けることを忘れないようにしてください。

次の章では、「class」に似たものである「id」を使ったCSSの書き方を解説していきます。

CSSの書き方その4（idを指定する方法）

最後に紹介するのは「id」です。

「id」は先ほど学習した「class」と似ているので注意が必要です。

では、例を見てみましょう。

【HTMLファイル】

【CSSファイル】

【表示結果】

CSSを学ぼう！

「id」も「class」と同様にHTMLのタグに付ける名前のようなものです。

今回は<p>タグに対して「demo」という名前（id）を付けました。

ただし、CSSを記述するときは、classとは違いid名（名前）の前に「#（シャープ）」が付くことに注意しましょう。

※classのidの違いが知りたい人は、classについて解説した記事の「HTML div classとdiv idの違い」の章をご覧ください。

いかがでしたか？

CSSの書き方が理解できましたか？今回は4つのCSSの書き方を紹介しました。

中でも１番よく使われるのは「class」と「id」を使ってCSSを書く方法なので、ぜひ覚えておきましょう！