【初心者向け】CSSとは？書き方や優先順位などを解説

更新日：2022年12月1日 / 投稿日：2020年07月8日

WEBページを表示するにはHTMLという言語が必要になりますが、ユーザーが見やすいようにWEBページのレイアウトを整えるためにはCSSという言語が必要となります。

今回はこのCSSについてご紹介していきたいと思います。

～目次～

1 HTMLとCSSのそれぞれの役割について
- 1.1 HTMLについて
- 1.2 CSSについて
2 CSSの使い方(HTMLに反映させる方法)
3 CSSの書き方
- 3.1 直接タグにスタイルをあてる
- 3.2 クラス・アイディ属性を使う
4 CSSのスタイルが適応される優先順位
- 4.1 スタイルが優先される順番
5 CSSについてのまとめ

HTMLとCSSのそれぞれの役割について

HTMLとCSSにはそれぞれ役割というものがあり、その役割について分かりやすくご説明していきます。

HTMLについて

HTML=Hyper Text Markup Languageの頭文字を取ったもので、マークアップ言語となります。
このHTMLファイルは「任意のファイル名.html」と最後が.htmlという名前の拡張子になります。

関連記事：WEBページの裏側、ソースコードとHTMLの簡単な説明

HTMLの特徴を分かりやすく説明すると、タグによる文章構造を示す言語となり、例えば見出しには「h1～h6」という見出しタグが用意され、それぞれ開始タグと終了タグで見出しの文章を囲い使用します。

＜例＞

<h1>これは見出しレベル1のタグになります。</h1>

CSSについて

CSS＝Cascading Style Sheetsという頭文字を取ったものになります。

また、CSSはHTMLのようなマークアップ言語やプログラミング言語ではなく、スタイルシート言語と呼ばれています。

CSSファイルを作成すると「任意のファイル名.css」と最後が.cssという拡張子になります。

CSSの特徴を分かりやすく説明すると、文章の構造を示すHTMLに対して装飾などのデザインをしてユーザーにより見やすいレイアウトに整える言語となります。

＜例＞
例えばpというタグの文字を赤くするには、以下のようになります。

<!-- htmlの内容 -->
<p>この文字は赤くなります。<p/>

/* cssの内容  */
p{
  color: red;
}

以下は上で記述したcssの実行結果になります。

表示結果→この文字は赤くなります。

CSSの使い方(HTMLに反映させる方法)

使い方その1：外部ファイルを読み込む

CSSはファイルを作成しただけではHTMLに反映されません。
CSSは、HTMLファイルとリンクさせる必要があり、以下のように設定します。

＜例＞

<html lang="ja">
  <head>
    <link rel="stylesheet" href="style.css">  
  </head>
  <body>
  </body>
</html>

上のコードで解説しますとHTMLとCSSをlinkタグを使い、連結させます。
このlinkタグはheadタグの中に記述します。
そしてlinkタグのhref属性はCSSファイルまでのルート(パス)を入力します。

無事読み込まれるとHTMLとCSSがリンクされ、CSSで記述したスタイルが反映されるようになります。

使い方その2：headタグに直接書き込む

もう一つの方法は、HTMLファイルのheadタグに直接書き込む方法があります。
この場合styleタグを使い、CSSを記述していきます。

＜例＞

<html lang="ja">
  <style>
    h1{
      font-size: 32px;
    } 
  </style>
  <body>
    <h1>見出しテキスト</h1>
  </body>
</html>

使い方その3：タグに直接記述する

CSSはHTMLタグに直接記述する事も可能です。

※現在の制作手法ではよほどの理由がない限りは、おすすめはしないです。

＜例＞

<p style="font-size: 24px;">本文テキスト</p>

CSSの書き方

CSSの書き方については、いくつかの方法があります。
ここでは、代表的なCSSの書き方について見ていきましょう。

直接タグにスタイルをあてる

上の例にもあったように、タグに対して直接スタイルを書く方法があります。
pタグ・divタグ・sectiionタグなど、そのタグに対してスタイルの値を入力していきます。

<CSSの書き方例>

div{
  width: 100%;
  margin: 0 auto;
}

p{
  fotn-size: 24px;
  font-weight: 600;
}

クラス・アイディ属性を使う

HTMLのタグには、クラス属性・アイディ属性を付ける事ができます。
この2つの属性を使ってスタイルを付ける事が可能ですが、以下のような注意が必要となります。

クラス属性

1つのページの中で繰り返し使用が可能。ただし、基本の優先順位としてID属性の方が優先順位が高いため、スタイルが重複すると反映されない。

クラス属性の使用例：CSSファイル

CSSでクラス属性を定義する時はクラス名の前に「.」をつけます。

.sample{
  font-size: 24px;
}

クラス属性の使用例：HTMLファイル

<p class="sample">クラス属性は何度も使用が可能。</p>

アイディ属性

1つのページで1回のみ使用が可能。スタイルがクラス属性と重複する場合、アイディ属性の方が優先して反映される。

アイディ属性の使用例：CSSファイル

CSSでクラス属性を定義する時はクラス名の前に「#」をつけます。

#sample{
  font-size: 24px;
}

アイディ属性の使用例：HTMLファイル

<p id="sample">アイディ属性は1つのページにつき1つだけ可能。</p>

※アイディ属性の補足

アイディ属性は1つのページにつき、1つのみ使用が可能と説明しましたが、同一のアイディ属性に限り、そのルールが適応されます。

アイディ属性の使用例：良い例

1つのページに異なる名前のアイディ属性なので問題ありません。

<section id="box">
  <h1 id="title">見出しテキスト</h1>
  <p>本文テキスト</p>
</section>

アイディ属性の使用例：悪い例

1つのページにアイディ属性は2回使う事は出来ません。

<section id="sample">
  <h1 id="sample">見出しテキスト</h1>
  <p>本文テキスト</p>
</section>

CSSのスタイルが適応される優先順位

実際にCSSを記述して表示を確認した時に、何故か反映されず、プロパティを確認してもキャッシュを削除しても変化が無い時は、以下の事に注意してみて下さい。
CSSのスタイルには優先順位あがり、このルールを無視した形でスタイリングを行うと、うまく反映されません。

スタイルが優先される順番

スタイルが適応される順番は上から順に優先されていきます。

!important
要素に直書き(例：<p style=”color: #f00;”>テキストは赤になる</p>)
IDセレクタ
クラスセレクタ、属性セレクタ
要素セレクタ
ユニバーサルセレクタ(*)

CSSについてのまとめ

以上、CSSについて簡単にご紹介させて頂きましたが、いかがだったでしょうか？
ちなみに、CSSは現在ではバージョン3となっていて使えるプロパティもどんどん増え、ますます使いやすさも上がっています。
今回は基本的な事を、分かりやすくご紹介いたしましたが、また機会があれば、もう少し詳しくCSSについてご紹介していきたいと思います。