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

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

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

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

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

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

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

CSSの書き方その1(基本)

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

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

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

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

【HTMLファイル】

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

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

【CSSファイル】

【表示結果】

Hello HTML

Hello CSS

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

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

CSS 書き方の解説画像

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

\文字より動画で学びたいあなたへ/

Udemyで講座を探す >

CSSの書き方その2(style属性を使う方法)

CSSの書き方の2つ目は、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の書き方3つ目は、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の書き方を紹介しました。

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