300以上のホームページ制作案件に携わってきました。豊富な経験とお客様目線のホームページ制作、SEOを考慮した提案が強みです。茨城に寄り添ったサービスを多く展開してまいります。

お問い合せ・ご相談

LINEで相談

CSSとは？カスケーディングルールを知らないとCSSが効かない！？

このページは、CSS（Cascading Style Sheets）についての基礎からHTMLにCSSを組み込む方法を解説し、最後にカスケーディングルールについて解説します。

CSSカスケーディングルールは複雑ではないものの、経験豊富な開発者でさえ完全には理解していないことが多いトピックです。Web制作の現場では、カスケーディングルールが適切でないことが理由で、スタイルが期待通りに適用されないことが多くあります。CSSカスケーディングルールを理解することは、作業スピードを高めるだけではなくCSS初心者がまず覚えるべき重要なルールです。

CSSとは？

「CSS」はウェブページの見た目やレイアウトを設定するための言語の一つです。正式には「Cascading Style Sheets（カスケーディング・スタイル・シート）」と呼びます。

WEBページは主に「HTML」で作られますが、HTMLはページの内容や構造を表現するものです。そこで、HTMLで作られたWEBページの見た目を美しく、見やすくするためにCSSが使われます。

CSSは非常に強力で、色、レイアウト、フォント、アニメーションなど、ページのほぼすべての視覚的要素を制御することができます。

CSSはHTMLと一緒に記述することもありますが、基本的にはHTMLとCSSを別々のファイルに書いて、それぞれの役割をはっきりさせることが一般的です。この場合、HTMLファイルからCSSファイルを参照するように設定します。

HTMLのみの場合は、画面上にYOCHITECとしか表示されないけど…

▼

CSSを加えることで、Webページに装飾を加えることができました！

CSSの基本的な書式

このCSSの部分では、h1タグに適用されるスタイルを定義しています。

セレクタ … これはどのHTML要素にスタイルを適用するかを指定します。この例ではh1がセレクタで、h1タグにスタイルを適用することを意味します。
プロパティ … これは変更を加える要素の種類を指定します。ここではfont-sizeがプロパティで、文字の大きさを指定するために使われます。
値 … これはプロパティに設定する具体的な値です。この例では32pxが値で、文字の大きさを32ピクセルに設定しています。

CSSをHTMLに適用する方法

CSSをHTMLに適用するには主に3つの方法があります。

インラインスタイルシート

インラインスタイルシートは、HTML要素のstyle属性を使用して直接スタイルを適用します。これは特定の要素に対してすばやく簡単を行うのに便利ですが、スタイルの再利用性は低くいのでWebサイト全体で使うのには不向きです。また、@media クエリを使用することはできません。

<p style="color: red; font-size: 20px;">期間限定50%OFF!!</p>

使用例

期間限定のバナーや特定のキャンペーンなどのコンテンツは、その期間が終了すればウェブサイトから削除されます。インラインスタイルを使用すると、そのHTML要素を削除するだけで関連するスタイルも同時に削除されるため、後処理が簡単になります。

内部スタイルシート

内部スタイルシートは、HTMLドキュメント内のheadセクションにstyleタグを使用して記述されます。これはページ固有のスタイルを定義するのに適しており、そのHTMLファイル内でのみ有効です。

<!DOCTYPE html>
<html>
<head>
  <style>
    body { background-color: lightblue; }
    h1   { color: red; margin-left: 20px; }
  </style>
</head>
<body>
  <h1>これは内部スタイルシートの例です</h1>
</body>
</html>

外部スタイルシート

外部スタイルシートは、別のファイルにCSSコードを記述し、HTMLドキュメントからリンクする方法です。これは一貫性のあるスタイリングを複数のページにわたって適用するのに最適で、メンテナンスや再利用性に優れています。

CSSファイルの例 (styles.css)

body {
  background-color: lightgray;
}
h1 {
  color: green;
}

HTMLドキュメントの例

<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>

インラインスタイルシート … 特定のHTML要素に直接適用。小規模な変更に適しています。
内部スタイルシート … 同じHTMLファイル内で共有されるスタイル。1ページ限りのスタイルに適しています。
外部スタイルシート … 別のファイルにスタイルを記述し、それをHTMLにリンク。大規模なウェブサイトや一貫性を保つのに最適です。

CSSカスケーディングルール

CSSは「カスケーディング（段階的）」という特性があります。これは、同じHTMLの要素に対して複数のスタイルが適用される場合、どのスタイルが優先されるかを決めるルールがあるということです。具体的には、詳細度（特定性）やソースの種類（スタイルが記述されている場所）、そして記述の順番によって優先順位が決まります。

特定の要素を指すセレクタの優先度が高い

IDセレクタ（#id）は、クラスセレクタ（.class）や要素セレクタ（element）よりも特異性が高いため指定が優先されます。

この例では、div要素はIDセレクタ #uniqueElement、クラスセレクタ .commonClass、そして要素セレクタ divの全てにマッチします。しかし、IDセレクタが最も特異性が高いため、div要素のテキストは青色になります。もしIDセレクタのルールがなければ、クラスセレクタが適用され、赤色になります。さらに、クラスセレクタもなければ、最も一般的な要素セレクタ（緑色）が適用されます。

この次でも少し触れますが、CSSは、同一特異性レベルのセレクタがある場合、通常はファイル内で後に記述されたスタイルが優先され、前に記述されたスタイルを上書きします。これはカスケーディング（段階的適用）の原則に基づいています。

しかし、IDセレクタの高い特異性のために、スタイルの上書きやメンテナンスが困難になる可能性があります。このため、CSSのベストな使い方としては、IDセレクタの使用は慎重に行い、一般的にはクラスセレクタの使用を推奨します。IDセレクタは、ページ内で一度だけ使用されるユニークな要素に対して適用するのが適切です。

IDセレクタのベストな使い方

HTMLにおけるIDセレクタは、ページ内でそのIDを持つ要素が1つである必要があります。言い換えるとそのIDを持つ要素がただ一つであることを保証していると言えます。これにより、ブラウザは特定のIDセレクタ要素をすばやく見つけることができ、これがパフォーマンスの向上に寄与します。

JavaScriptで要素を操作する際にIDセレクタを使用すると、特定の要素に迅速かつ正確にアクセスすることができます。これは、フォーム要素、特定のコンテンツブロック、またはインタラクティブなUIコンポーネントの操作など、特定の要素に対する操作が必要な場合に特に有用です。

どこに記述されているかで優先度が変わる

HTMLのstyle属性に記述されたインラインスタイル→外部CSSファイルに記述されたスタイルの順に優先順位が高くなります。

後に記述されているものの優先度が高い

後に読み込まれたファイル、後に記述されたルールが前に記述されたルールを上書きします。

important規則

スタイル宣言の最後に !important を付けると、他のどのルールよりも優先されます。ただし、これは他のカスケーディングルールを無視するため、必要な場合にのみ慎重に使用しましょう。

JavaScriptを用いてDOM要素にスタイルを適用した場合

JavaScriptを用いてDOM要素にスタイルを適用すると、そのスタイルはインラインスタイルとして要素に追加されます。これによりJavaScriptによるインラインスタイルの適用は、特に動的なウェブアプリケーションやインタラクティブな要素において有用ですが、スタイルの管理とメンテナンスの観点からは慎重な使用が推奨されます。

大規模なアプリケーションでは、スタイルの変更をCSSクラスの追加・削除によって行う方が管理が容易である場合が多いです。

まとめ

このページでは、CSSに関する基本的な情報から、CSSをHTMLに適用する方法、CSSカスケーディングルールなど実践で活かせる実例なも交えながら解説しました。

この内容は、以前まで以下の記事にて掲載しておりましたが、CSSに関する情報だけでお伝えしたい内容が多くあり、CSSの内容だけで用語集に移動してまとめました。

このページの内容が気に入りましたら、以下のページの内容もよかったらご覧ください。

リセットCSSとは？初心者向けリセットCSSのカスタム方法について