【入門】CSSとは？基本知識とセレクタ、詳細度について分かりやすく解説します！

2023.08.18
CSS
CSS入門

はじめに

CSSはウェブページの見た目を定義するための言語であり、ウェブ制作では必須のスキルになります。この記事では、ウェブ制作初心者の方に向けてCSSの基本知識とセレクタやプロパティなどの記述方法、詳細度の概念について学んでいきます。

この記事の対象者

  • ウェブ制作を基礎から学びたい方
  • CSSについて基礎から学びたい方

この記事の目標

  • CSSを外部ファイルとして読み込める
  • 主なセレクタについて理解する
  • スタイルの優先度について理解する

CSSとは

CSS（Cascading Style Sheets）は、ウェブページの見た目を定義するための言語です。

HTMLがウェブページの構造を記述するのに対し、CSSはそれにデザインやスタイルを適用し、コンテンツを美しく整然と表示する役割を果たします。CSSを使用することで、テキストのフォントや色、大きさ、背景画像、要素の表示位置などを指定することができます。

CSSの基本的な書き方

CSSの基本的な構成要素は以下です。

  • セレクタ名：スタイルを適用する要素
  • プロパティ名：スタイルの種類
  • 値：プロバティの値

CSSの基本構文は以下です。

セレクタ名 {
  プロパティ名1: 値;
  プロパティ名2: 値;
   …
}

セレクタ名の後に「{}」を記述し、このセレクタに適用させるスタイルとしてプロパティ名と値のセットを記述していきます。また、{}を宣言ブロックといい、セレクタと宣言ブロックのまとまりをルールセットといいます。

スタイルの指定は、プロパティ名の後にコロン「:」を、その後に値とセミコロン「;」を記述します。半角スペースや改行、インデント（字下げ）はなくても動作しますが、コードを読みやすくするためにも基本的には記述することをオススメします。

簡単な例として、p要素にスタイルを定義してみます。

p {
  color: blue;
  font-size: 16px;
}

上記の例では、p要素に対して「文字色を青」、「文字の大きさを16px」という指定をしています。プロパティは「何を」、値は「どのように」と考えると分かりやすいと思います。このCSSが読み込まれるHTMLの全てのp要素にこのスタイルが適用され、このようなセレクタを「タイプセレクタ」といいます。

セレクタには、タイプセレクタ以外にもクラスセレクタやIDセレクタ、子孫セレクタ、疑似クラスセレクタなどの種類があります。

プロパティや値も様々なものがあり、ブラウザの種類やバージョンによってはサポートされていない場合もあるため、全てを覚えることは困難です。HTMLのタグと同様、経験を積むことで頻出するプロパティなどは調べなくても扱えるようになります。

CSSの記述場所

ウェブページにスタイルを適用するためには、CSSコードを記述する必要があります。CSSコードをどこに記述するかはウェブサイトの保守性に関わり、適切でなければ不具合箇所を特定するのに時間がかかるなど、生産性を損なうこと場合があります。

CSSのコードは主に以下の3か所に記述することができます。

  • インラインスタイル：style属性を使用してHTML要素に記述
  • 内部スタイルシート：styleタグを使用してHTMLファイル内に記述
  • 外部スタイルシート：CSSファイルを作成して記述

結論から述べると、外部スタイルシートとしてCSSファイルを作成する手法が多くの場合で適切です。しかし、プロジェクトやチームでルールが定められており、正しく守られるのであれば他の方法を検討することもできます。

インラインスタイル

インラインスタイルはタグのstyle属性に直接スタイルを記述するため、セレクタの指定が不要です。スタイリングを行う際の最も簡単な方法で、以下のように使います。

<p style="color: blue; font-size: 16px;">これは青いテキストです。</p>

HTMLのほとんどの要素にはstyle属性を指定することができます。この例では、style属性を記述しているp要素に対して「文字色を青」、「文字の大きさを16px」という指定をしています。

インラインスタイルは手っ取り早く挙動を確認できますが、優先的に適用されやすいという特徴があるため、使用するには注意が必要です。基本的には後述する内部スタイルシートや外部スタイルシートで上書きすることが出来ないため、修正を行いたい時に時間が掛かる可能性があります。

内部スタイルシート

HTMLファイル内にstyleタグを使ってCSSコードを記述する方法です。内部スタイルシートはstyleタグを記述したHTMLファイル内の要素にのみ適用され、別のHTMLファイルで読み込むことはできません。

styleタグはheadタグ内に記述します。

<head>
  <style>
    p {
      color: blue;
      font-size: 16px;
    }
  </style>
</head>
<body>
  <p>青いテキストです。</p>
  <p>これも青いテキストです。</p>
</body>

上記の例ではbody内の2つのp要素が青文字になりますが、styleタグ内のスタイルは他のHTMLファイルから読み込むことができないため、複数のページで同じスタイルを適用させたい場合はそれぞれのHTMLファイルに同じ記述をする必要があります。

実際のウェブ制作ではパフォーマンス向上のためにあえて一部のスタイルをhead内に記述することも考えられますが、理解せずに行うとチーム開発では混乱を招く可能性があるのでオススメしません。

ただ、インラインスタイルと同様で手軽に実装できるので、勉強としてCSSの挙動を確認する時には便利です。

外部スタイルシート

外部ファイルとしてCSSファイルを作成し、HTMLファイル内でそれを読み込む手法です。CSSファイルの拡張子は.css（例：”style.css”）です。外部スタイルシートは複数のページで同じスタイルを共有することができ、HTMLとCSSでの役割を切り分けられるので一般的にはこの手法が用いられます。

HTMLファイルからCSSファイルを読み込むには、以下のように記述します。

<head>
  <!-- cssファイルの読み込み -->
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <p>青いテキストです。</p>
  <p>これも青いテキストです。</p>
</body>

head内にlinkタグを配置し、rel=”stylesheet”を指定します。また、href属性には作成したCSSファイルのパスを指定しています。パスの指定方法はimgのsrcやリンクと同じなので、HTMLを学んだ方なら問題ないかと思います。

CSSファイルにスタイルを追加してみます。

/* style.css */
p {
  color: blue;
  font-size: 16px;
}

外部スタイルシートのスタイルは、このファイルを読み込んでいる全てのHTMLファイルに適用されます。

複数ページのウェブサイトでは、ユーザーの混乱を避けるためにヘッダーやフッター、ボタンなどは共通のスタイルを適用することが一般的です。

その他にも、セクションの余白や見出しのデザイン、テキストの行間や字間、フォントなど、ウェブサイト全体で一貫性のあるデザインを保つために必要なスタイルは多く存在します。

外部ファイルとしてCSSを管理することは、保守性や効率の面で効果的です。

セレクタの種類について

CSSでは、スタイルを適用する要素を指定するために「セレクタ」と呼ばれるキーワードを使用します。セレクタは、どの要素にスタイルを適用するかを指定する役割を果たします。ここでは、よく使用されるセレクタの種類について解説します。

タイプセレクタ

要素名を指定してスタイルを適用するセレクタです。例えば、以下のように使用します。

a {
  border-bottom: 1px solid red;
  color: red;
  text-decoration: none;
}

この例では、a要素全てに対して「text-decoration: none」でデフォルトの下線を非表示にしています。また「border-bottom: 1px solid red」で新たに1px幅の赤い実線を描画し、「color: red」で文字色も赤にしています。

タイプセレクタはウェブブラウザ標準で定義されているユーザーエージェントスタイルシートを上書きする際によく使用されます。

クラスセレクタ

要素にクラス名を付け、そのクラス名をセレクタとして使用します。同じクラス名を複数の要素に指定することができます。

<header>
  <h1>LOGO</h1>
  <a class="btn">お問い合わせ</a>
</header>
.btn {
  background-color: black;
  color: white;
}

クラスセレクタはクラス名の前に「.」を記述します。この例では、btnクラスを記述した要素に対して「background-color: black」で背景色を黒にし、「color: white」で文字色を白にしています。

クラスセレクタは、プロジェクト内でのクラスの命名規則がしっかりと整備されていれば堅牢さと柔軟さを確保することができます。もっとも使用頻度の高いセレクタです。

idセレクタ

要素にユニークなidを付け、そのidをセレクタとして使用します。

<header id="header">
  <h1>LOGO</h1>
</header>
#header {
  padding-top: 16px;
  padding-bottom: 16px;
  background-color: gray;
}

idセレクタはid名の前に「#」を記述します。この例では、id属性に「header」を指定した要素に対して「background-color: gray」で背景色を灰色にし、「padding-top: 16px; padding-bottom: 16px」で上下に16pxの余白を指定しています。

HTMLでは1つのページ内で同じid名を複数の要素に指定することはできないため、スタイリングを目的にid属性を指定すると煩雑なコードになりやすいです。

子孫セレクタ

親要素と子要素の関係を指定してスタイルを適用するセレクタです。それぞれの要素はタイプセレクタやクラスセレクタ、idセレクタなど、セレクタであればどのようなものでも指定できます。

.section h2 {
  font-size: 32px;
}

div p {
  font-size: 18px;
}

div div p {
  color: red;
}
<body>
  <section class="section">
    <h2>文字サイズは32pxです</h2>
    <p>スタイルはデフォルトです。</p>
    <div>
      <p>文字サイズは18pxです。</p>
      <div>
         <p>文字サイズは18pxで文字色は赤です。</p>
      </div>
    </div>
  </section>
</body>

子孫セレクタはセレクタ間を半角スペースで区切ることで指定できます。

上の例では、「div div p」に対して「color: red」の記述しかしていませんが、実際には「font-size: 18px」も適用されます。このように、子要素だけでなく孫要素にも反映されることに注意しましょう。

疑似クラスセレクタ

特定の状態や要素にスタイルを適用するセレクタです。一つ目の要素のみに別のスタイルを当てたい場合や、リンクにカーソルが当たった時にスタイルを適用するといったことができます。

a {
  color: red;
  text-decoration: none;
}
a:hover {
  color: white;
  background-color: red;
}

この例では、「:hover」という疑似クラスを使用し、a要素にカーソルが当たったときに背景色と文字色を変更するという指定をしています。

疑似クラスは他にも様々なものがあり、使いこなせるとより細かなスタイリングができるようになります。疑似クラスに関する詳しい解説は別途記事を用意します。

スタイルの優先度について

スタイルシートはウェブブラウザにもデフォルトで定義されているものもあり、基本的には上書きが可能な仕様になっています。ここでは、スタイルがどのように適用されるかを理解するための基本的なポイントと、優先度が招く問題について解説します。

後から定義されたスタイルが優先される

CSSは基本的に後から定義されたスタイルが優先されます。

.txt {
  font-size: 16px;
}

.txt {
  font-size: 18px;
}

この例では、.txtは後に記述されている「font-size: 18px」が指定されることになります。このコードの問題点は、.txtのルールセットが2つ存在していることと、プロパティが重複していて値がそれぞれ違うことです。どちらが意図したスタイルかわからず、たとえ意図したスタイルになっていたとしても、記述が増えることでファイルを無駄に肥大化させてしまいます。

この例はシンプルなのでこのようなことは普通起こらないと考えるかもしれません。しかし、実際のウェブ制作では一つのウェブページに複数のCSSファイルが読み込まれることもあり、安易な修正を行うとこれと同じようなことが起こる可能性があります。

詳細度の計算が行われる

CSSは、詳細度というスタイルの優先度を決定するための概念があります。具体的な計算方法は少し複雑なのでここでは解説しませんが、セレクタの種類によってスタイルの優先度が制御されると理解してもらえればとりあえず大丈夫です。

セレクタの種類による優先度は以下のとおりです。

  • idセレクタ：高
  • クラスセレクタ：中
  • タイプセレクタ：低

例を挙げて解説します。

<p id="txt" class="txt">テキストが入ります。</p>
#txt {
  color: green;
}

.txt {
  color: blue;
}

p {
  color: red;
}

この例では「タイプセレクタ」であるpのルールセットが最後に記述されているので、先述した「後から定義されたスタイルが優先される」という仕様に基づけば文字色は赤になります。

しかし、後のスタイルが優先されるのは詳細度が同じである場合に限定されます。この例では、最も詳細度が高い「idセレクタ」で指定した#txtのルールセットが適用されることになります。

インラインスタイルはidセレクタより優先される

もっとも詳細度が高いidセレクタですが、要素そのものにstyle属性で記述を行うとスタイルの上書きをすることが可能です。

<p id="txt" class="txt" style="color: tomato:">テキストが入ります。</p>

しかし、インラインスタイルはこの要素にしか適用することができません。同じインラインスタイルを他の要素に適応すると、修正したい場合に修正箇所が増えるので保守性が下がります。

!importantフラグの使用

!importantフラグを使用することで、インラインスタイルよりも優先させることができます。以下のように記述することで、最も詳細度が低い「タイプセレクタ」であるpのルールセットが適用されます。

#txt {
  color: green;
}

.txt {
  color: blue;
}

p {
  color: red!important;
}

また、!importantが指定されたもの同士では詳細度の高いセレクタが優先されます。

#txt {
  color: green;
}

.txt {
  color: blue!important;
}

p {
  color: red!important;
}

!importantは一見便利に思われますが、ウェブサイトは一度制作して終わりではないので多様すると修正が困難になります。

スタイルの優先度について簡単にまとめると、

  1. !important
  2. インラインスタイル
  3. idセレクタ
  4. クラスセレクタ
  5. タイプセレクタ
  6. 後ろに記述されたルールセット

ということになります。この記事では解説していないセレクタ等もあるので詳細度はもう少し奥が深いですが、安易に詳細度を上げないことや、ルールセットの重複に気を配るだけでも十分に保守性を保つことができます。

最後に

ウェブ制作初心者の方に向けてCSSの基本知識と記述方法、詳細度の概念について解説しました。

セレクタの種類やプロパティの種類とそれぞれの値など、CSSに関する知識は覚えることが多いと感じるかも知れません。しかし、実際は調べながら実装することも多く、あまり使わない技術に関してはその時のブラウザの対応状況も改めて調べ直すことになります。

よく使用されるプロパティは忘れても勝手に覚えると割り切り、とりあえず手を動かし、問題が起きたら調べることを習慣化すると自走力も鍛えられて効率よく学べると思います。

タイトルとURLをコピーしました