【初心者向け】CSSについて書き方や優先順位などを解説

更新日:2021年11月26日 /  投稿日:2020年07月8日

【初心者向け】今更でも知っておきたいCSSについて

WEBページを表示するにはHTMLという言語が必要になりますが、ユーザーが見やすいレイアウトに整えるためにはCSSという言語が必要となり、現在のWEBページの多くはHTMLとCSSを組み合わせによって構成されています。

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

関連記事:CSSが適用されない原因とは?反映されないときの対処法を解説!

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

HTMLとCSSにはそれぞれ役割というものがあり、その役割にそってWEBページが作られています。
ここでは、その役割について分かりやすくご説明していきます。

HTMLについて

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

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

<例>

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

CSSについて

CSS=Cascading Style Sheetsという頭文字を取ったものになります。
CSSファイルを作成すると「任意のファイル名.css」と最後が.cssという拡張子になります。

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

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

<!-- htmlの内容 -->
<p>この文字は赤くなります。<p/>
/* cssの内容  */
p{
  color: red;
}

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

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

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

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

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

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

<例>

<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タグ・SECTIONタグなど、そのタグに対してスタイルの値を入力していきます。

<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のスタイルには優先順位あがり、このルールを無視した形でスタイリングを行うと、うまく反映されません。

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

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

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

CSSについてのまとめ

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

この記事を書いた人

KNOWLEDGE BASEの中の人

KNOWLEDGE BASEの中の人

2013年よりWEB制作会社に入社し、デザイン・コーディングからディレクションと幅広く従事。

その他の関連記事はこちら