CSS、Sass、SCSS、LESSを徹底比較！結局どれが良い？
susan すーさんのweblog
【初心者用】CSSをHTMLに読み込む方法は3つ！それぞれについて徹底解説！
susan
記事内に商品プロモーションを含む場合があります
CSSはHTML文書のスタイルやレイアウトを定義し、見た目を美しく整えるために使用されます。
このCSSを利用するためにはHTML文書にCSSを読み込む必要があります。方法は3つあり、それぞれのやり方について理解しておく必要があります。
本記事では、CSSをHTMLに読み込む方法について、初心者でも分かるように詳しく解説してきます。
エンジニアにおすすめのパソコンはこちら！
おすすめのプログラミングスクール
DMM WEB CAMP
未経験者のために開発されたカリキュラムで、現役エンジニアによる充実したサポート体制。最短3ヶ月でITエンジニアへ転職を目指すことが可能。
| 入学金 | 0円 |
| 料金 | 169,800円(税込)〜 |
| 学び方 | オンライン(自習形式) |
| 校舎 | ー |
| 保証制度 | 8日間返金保証 早期卒業返金保証 |
| 就職サポート | ○ |
| 運営会社 | 株式会社インフラトップ |
おすすめのプログラミングスクールに関しては【初心者用】フリーランスも目指せる！おすすめのプログラミングスクール16選で詳しく解説しているので、興味ある方はぜひチェックしてみてください。
あわせて読みたい
【初心者用】フリーランスも目指せる！おすすめのプログラミングスクール16選
フリーランスエンジニアにおすすめのエージェント
レバテックフリーランス
業界最大級の案件数を誇るフリーランスITエンジニア向けのサービス。専門アドバイザーによる案件提案と全面的なサポートを提供。
| 案件数 | 50,000件以上 |
| リモート | ○ （半分くらいがリモート対応） |
| 単価 | 45万 〜 195万円 |
| 稼働日数 | 週5日が多め |
| 福利厚生 | ◎ |
| 運営会社 | レバテック株式会社 |
フリーランスエンジニア向けのおすすめのエージェントに関してはフリーランスエンジニア・プログラマー用エージェントでおすすめはどこ？12社を徹底比較で詳しく紹介してますので、興味ある方はぜひチェックしてみてください。
あわせて読みたい
フリーランスエンジニア・プログラマー用エージェントでおすすめはどこ？12社を徹底比較
Contents
CSSとは
CSS（Cascading Style Sheets）は、HTML文書のスタイルやデザインを指定するためのスタイルシート言語です。
HTMLが文書の構造を定義するのに対し、CSSは見た目やスタイルを制御します。
つまり、HTMLが「何を表示するか」を指定するのに対して、CSSは「どのように表示するか」を指定する役割を担っています。
CSSの「カスケード」機能
CSSはスタイルの「カスケード」という機能を持っています。
カスケードとは、複数のスタイル指定が競合した場合に、どのスタイルが優先されるかを決定する仕組みです。
これにより、異なるスタイルルールが重なった場合に優先順位が自動的に適用され、スタイルの組み合わせや継承が行われます。
CSSとHTMLとの関係
CSSはHTMLと組み合わせて使用されることが多く、HTMLファイル内に<style>タグや外部のCSSファイルを読み込むことで、スタイルの情報を提供します。
これにより、HTML文書の内容を変更することなく、スタイルの変更や修正が可能になります。
webデザインやフロントエンド開発では、CSSの理解と活用が必須です。
適切なCSSの使用によって、webページの見た目やユーザーエクスペリエンスを向上させることができます。
HTMLとCSS学習におすすめの書籍
CSSをHTMLに読み込む際の注意点
CSSをHTMLに読み込む際には、いくつかの注意点があります。
以下の点に注意しておきましょう。
注意点
- ファイルの保存場所とパス
- 文書内での読み込み順序
- CSSの適用範囲
ファイルの保存場所とパス
CSSファイルは、HTMLファイルと同じディレクトリ内に保存することが一般的です。
また、CSSファイルを読み込むためには、正しいファイルパスを指定する必要があります。
相対パスまたは絶対パスを使用して、CSSファイルの場所を正確に指定しましょう。
文書内での読み込み順序
HTMLファイル内でCSSファイルを読み込む順序は重要です。
一般的には、<head>セクション内の<link>要素を使用してCSSファイルを読み込みます。
CSSファイルの読み込みは、HTMLのコンテンツが表示される前に行われるため、適切な順序を保つことが重要です。
CSSの適用範囲
複数のHTMLファイルに同じCSSファイルを使用する場合、CSSが適用される範囲に注意が必要です。
CSSのクラスやIDを適切に指定することで、特定の要素にのみスタイルが適用されるようにします。
また、CSSのセレクタの優先順位にも注意しましょう。
CSSをHTMLに読み込む方法
CSSをHTMLに読み込む方法は主に3つあります。
それぞれの方法について解説します。
3つの方法
- 方法①: インラインで記述する
- 方法②: HTMLのheadタグ内に記述する
- 方法③: 外部のスタイルシートを読み込む
方法①: インラインで記述する
インラインスタイルでは、直接HTMLの要素にスタイルを指定します。
要素のstyle属性内にCSSプロパティを記述することで、スタイルが適用されます。
インラインスタイルの書き方
インラインスタイルは以下のように<div>要素に直接スタイルを適用することができます。
index.html
1<div style="color: red; font-size: 16px;">This is a red text with font size 16px.</div>インラインスタイルの特徴は、個々の要素にスタイルが直接適用されるため、他の要素には影響を与えません。
ただし、スタイルの変更や修正が必要な場合には、個々の要素を修正する必要があります。
インラインスタイルのメリット
メリット
- 即時適用される
- 優先度が高い
- 独立性が高い
ー即時適用される
インラインスタイルはその要素に直接適用されるため、他のスタイルシートの影響を受けずに即時にスタイルを適用できます。
ー優先度が高い
インラインスタイルは他のCSSルールよりも優先されるため、特定の要素に特別なスタイルを適用したい場合に便利です。
ー独立性が高い
インラインスタイルは外部ファイルへの依存がないため、特定の要素に対して独立してスタイルを適用できます。これは特定のページまたは要素でのみ必要な一時的な変更に便利です。
インラインスタイルのデメリット
デメリット
- 再利用の困難さ
- 可読性の低下
- 分離の原則の破壊
- キャッシュの効率
ー再利用の困難さ
インラインスタイルは特定の要素にのみ適用されるため、同じスタイルを複数の要素で使いたい場合には、同じコードを繰り返す必要があります。これはコードの管理が難しくする可能性があります。
ー可読性の低下
インラインスタイルが多用されると、HTMLコードが複雑になり、可読性と保守性が低下してしまいます。
ー分離の原則の破壊
通常、コンテンツ（HTML）、プレゼンテーション（CSS）、および挙動（JavaScript）は分離されるべきとされています。インラインスタイルの使用はこの原則を破壊する可能性があり、長期的にはコード管理を難しくしてしまいます。
ーキャッシュの効率
インラインスタイルは外部CSSファイルのようにキャッシュされないため、ページロードの効率が低下することがあります。
方法②: HTMLのheadタグ内に記述する
HTMLのheadタグ内に記述する場合は<style>タグ内にCSSコードを記述します。
<head>セクション内に<style>タグを追加し、その中にCSSコードを記述します。
headタグ内に記述する書き方
例えば、以下のように<style>タグ内にCSSコードを記述することができます。
index.html
1<head>
2 <style>
3 .my-element {
4 color: blue;
5 font-size: 20px;
6 }
7 </style>
8</head>内部スタイルシートでは、特定のHTMLファイル内でのみ使用するスタイルを指定することができます。
スタイルの変更や修正が必要な場合には、<style>タグ内のCSSコードを編集すれば良いため、複数の要素に一括して影響を与えることができます。
内部スタイルのメリット
メリット
- ページ固有のスタイルの適用
- 外部ファイルなし
- 管理のしやすさ
ーページ固有のスタイルの適用
内部スタイルシートは特定のページに固有のスタイルを簡単に作成できます。異なるページで異なるスタイルを適用する場合に便利です。
ー外部ファイルなし
外部CSSファイルを読み込む必要がないため、一部の状況下ではページのロード時間が短縮されることがあります。
ー管理のしやすさ
そのページ専用のスタイルをすべて一箇所にまとめることができるため、ページ固有の変更を素早く行うことができます。
内部スタイルのデメリット
デメリット
- 再利用性の低下
- キャッシュの効率
- 可読性と保守性
- 組織の問題
ー再利用性の低下
内部スタイルシートはそのHTMLページ内でのみ利用可能であり、他のページで同じスタイルを使用するにはコードのコピーアンドペーストが必要になることが一般的です。これはコードの管理を複雑にしてしまう場合があります。
ーキャッシュの効率
内部スタイルシートは外部CSSファイルのようにブラウザにキャッシュされないため、ユーザーがサイト内の異なるページに遷移する際に効率が低下することがあります。
ー可読性と保守性
もし内部スタイルシートが大規模になると、HTML文書自体が大きくなり、可読性と保守性が低下する可能性があります。
ー組織の問題
複数のページで同じスタイルを使用する必要がある場合、一貫性の維持が困難になる場合があります。
方法③: 外部のスタイルシートを読み込む
外部スタイルシートでは、別のCSSファイルを作成し、HTMLファイルからリンクして読み込みます。
HTMLの<head>セクション内に<link>タグを追加し、href属性でCSSファイルのパスを指定します。
外部のスタイルシートを読み込む場合の書き方
例えば、以下のように<link>タグを使用してCSSファイルを読み込むことができます。
index.html
1<head>
2 <link rel="stylesheet" href="styles.css">
3</head>style.css
1//ここにCSSを記述
2p {
3 color: #000;
4}
外部スタイルシートを使用すると、同じスタイルを複数のHTMLファイルで共有することができます。
また、スタイルの変更や修正が必要な場合には、CSSファイル自体を編集すれば良いため、一括して複数の要素に変更や修正を加えることができます。
外部のスタイルシートのメリット
メリット
- 再利用性が高い
- 保守性・可読性が上がる
- キャッシュの効率が上がる
- 一貫性が保てる
ー再利用性が高い
外部スタイルシートは複数のHTMLページで共有することができます。同じスタイルをサイト全体で使い回すことが可能なため、コードの再利用性が高まります。
ー保守性・可読性が上がる
スタイルが一箇所に集約されるため、変更や更新が必要な場合に一箇所で修正すれば、全ページに反映されるので保守が容易です。CSSとHTMLが分離されるため、コードが整理され、可読性も向上します。
ーキャッシュの効率が上がる
ブラウザは外部スタイルシートをキャッシュすることが一般的なので、ユーザーがサイト内を移動する際に再ダウンロードする必要がなく、ページのロード時間が短縮されます。
ー一貫性が保てる
サイト全体で一貫したデザインを実現できます。一貫性のあるユーザーエクスペリエンスが提供できるため、結果としてユーザビリティが向上します。
外部のスタイルシートのデメリット
デメリット
- 追加のHTTPリクエストが必要
- 依存関係が複雑になることも
- ページ固有のスタイルとの混在
ー追加のHTTPリクエストが必要
外部スタイルシートを読み込むには、追加のHTTPリクエストが必要です。多数の外部ファイルがある場合、ページのロード時間に影響を与える可能性があります。
ー依存関係が複雑になることも
外部ファイルへの依存が発生し、ファイルパスの誤りなどがあると、スタイルが全く適用されない場合があります。
ーページ固有のスタイルとの混在
サイト全体で共有するスタイルシートにページ固有のスタイルを書くと、他のページに不要なスタイルが混入する可能性があるため、構造化に工夫が必要です。
HTMLとCSS学習におすすめの書籍
CSSが読み込まれる優先順位
CSSファイルが複数の方法で読み込まれる場合、優先順位が決まります。
一般的な優先順位は次のとおりです。
優先順位
- インラインスタイル（最も優先度が高い）
- 内部スタイル
- 外部スタイル（最も優先度が低い）
この優先順位によって、同じプロパティに対して異なるスタイルが指定されている場合、優先度の高いスタイルが適用されます。
セレクタにも優先順位があり、以下がその順位です。
セレクタ別の優先順位
- IDセレクタ（最も優先度が高い）
- クラスセレクタ・属性セレクタ・擬似クラス
- タグセレクタ
- その他のセレクタ（最も優先度が低い）
①IDセレクタ（ID Selectors）
IDセレクタは、HTML要素に対して一意のID属性を指定し、CSSでそのIDを指定することでスタイルを適用します。
②クラスセレクタ・属性セレクタ・擬似クラス
クラスセレクタ、属性セレクタ、擬似クラスは、HTML要素に対してクラス名、属性、または特定の状態に基づいてスタイルを指定するためのセレクタです。
③IDセレクタ（ID Selectors）
タグセレクタは、HTML要素そのものを指定してスタイルを適用します。
④その他のセレクタ
上記のセレクタ以外に、複数の要素をまとめて指定するセレクタや子孫要素を指定するセレクタなどがあります。
それぞれの使い分け方
それぞれのCSS読み込み方法には、使い分けるべき場面があります。
| スタイル | 使う場面 |
|---|---|
| インラインスタイル | 特定の要素に一時的なスタイルを適用する場合。 |
| 内部スタイル | 特定のHTMLファイル内でのみ使用するスタイルを指定する場合。 |
| 外部スタイル | 複数のHTMLファイルで共有されるスタイルを管理するために使用する場合。 |
3つの方法でCSSをHTMLに読み込む際、それぞれの方法には使い分けのポイントがあります。
インラインスタイル
こんな時にインラインスタイルはおすすめ！
一つの要素に対して一時的なスタイルを適用したい場合。
優先度が最も高いため、他のスタイルと競合する可能性が低く、即時に結果を確認できます。
ただし、大量の要素に対して同じスタイルを適用する場合には煩雑になるため、適度に使用しましょう。
内部スタイル
こんな時に内部スタイルはおすすめ！
単一のHTMLファイル内でスタイルを適用したい場合。
<style>タグ内にCSSコードを記述するため、HTMLファイル内でスタイルの管理が容易です。
ただし、他のHTMLファイルで同じスタイルを使用する場合には、コードの再利用が難しくなるため、限定的な範囲で使用する場合にはおすすめです。
外部スタイルシート
こんな時に外部スタイルはおすすめ！
複数のHTMLファイルで共有したいスタイルを適用したい場合。
スタイルの一元管理が可能で、複数のHTMLファイルで同じスタイルを簡単に使用できるので、大規模なウェブサイトやプロジェクトに適しており、メンテナンス性が高くなります。
特に指定がない場合はこの外部スタイルシートを利用することがHTML5では推奨されています。
それぞれの使い分け方まとめ
- インラインスタイルは簡易的な修正に便利だが、大規模なスタイリングには向かない。
- 内部スタイルは個別のHTMLファイル内での使用に適している。
- 外部スタイルは複数のHTMLファイルでスタイルを適用する場合に適している。
まとめ
CSSをHTMLに読み込む方法はインラインスタイル、内部スタイルシート、外部スタイルシートの3つがあります。
それぞれの方法には特徴と使いどころがありますので、適切に使い分けることが重要です。
スタイルの適用範囲や読み込み順序に注意しながら、ウェブページのスタイリングを行いましょう。
おすすめのプログラミングスクール
DMM WEB CAMP
未経験者のために開発されたカリキュラムで、現役エンジニアによる充実したサポート体制。最短3ヶ月でITエンジニアへ転職を目指すことが可能。
| 入学金 | 0円 |
| 料金 | 169,800円(税込)〜 |
| 学び方 | オンライン(自習形式) |
| 校舎 | ー |
| 保証制度 | 8日間返金保証 早期卒業返金保証 |
| 就職サポート | ○ |
| 運営会社 | 株式会社インフラトップ |
エンジニアにおすすめのパソコンはこちら！
コーディングやプログラミングを勉強したい方はこちらの記事がおすすめ
レンタルサーバーをお探しの方はこちらの記事がおすすめ
副業案件をお探しの方はこちらの記事がおすすめ！
ABOUT ME
30代web業界未経験
→オーストラリアにIT留学
→現地インターンを1年半経験
→フリーランスwebデザイナー・エンジニアとして活動
→月収80万円達成！
