CSSの書き方3選！外部・内部・インラインの使い方を初心者向けに徹底解説
生徒
「CSSって、どうやってHTMLに適用するんですか？」
先生
「良い質問ですね。CSSをHTMLに適用する方法は3つあります。」
生徒
「3つもあるんですか？それぞれどう違うんですか？」
先生
「それじゃあ、わかりやすく順番に説明していきましょう！」
1. 外部スタイルシートを使う方法（おすすめ）
まず最初に紹介するのは「外部スタイルシート」です。これはCSSファイルを別に作って、そのCSSファイルをHTMLに読み込ませる方法です。初心者の方には少しだけ難しく感じるかもしれませんが、実際にはとても整理しやすくて便利な方法です。
たとえば、style.cssという名前のCSSファイルを作り、次のようなスタイルを記述します。
<style>
h1 {
color: red;
}
</style>
<h1>こんにちは！</h1>
そして、このCSSファイルをHTMLに読み込ませます。次のように<head>タグの中に<link>タグを書きます。
<link rel="stylesheet" href="style.css">
こうすることで、HTML全体にこのstyle.cssのスタイルが適用されます。
この方法のメリットは、HTMLファイルとCSSファイルが分かれているため、管理がしやすいことです。たくさんのページに同じデザインを適用したいときにも便利です。
2. 内部スタイルシートを使う方法
2つ目は「内部スタイルシート」です。これはHTMLファイルの中に、直接CSSを書く方法です。HTMLの<head>タグの中に<style>タグを使って記述します。
<style>
p {
color: green;
}
</style>
<p>これはパラグラフです。</p>
この方法は、1つのHTMLファイルだけで完結するので、簡単なページを作るときには便利です。ただし、ページが増えてくると、管理が大変になります。
色（カラー）を変えるときや、文字サイズ、背景色などもこの方法で設定できます。
3. インラインスタイルを使う方法
最後に紹介するのが「インラインスタイル」です。これは、HTMLタグの中に直接CSSを書いてしまう方法です。style属性を使います。
<p style="color: blue;">これは青い文字です。</p>
インラインスタイルは、1つの要素だけにCSSを適用したいときに便利です。ただし、たくさん使うとコードがごちゃごちゃして読みにくくなってしまいます。
たとえば、文章の中で1つだけ色を変えたいときなどに使うと便利です。
4. CSSを適用する3つの方法を比較してみよう
初心者の方が混乱しやすいので、3つの方法を簡単に比較しておきましょう。
- 外部スタイルシート：別ファイルで管理。複数ページに使えて整理しやすい。
- 内部スタイルシート：HTMLファイル内で完結。小さなプロジェクトに向いている。
- インラインスタイル：1つのタグにだけ使える。使いすぎ注意。
CSS（Cascading Style Sheets）とは、「カスケーディング・スタイル・シート」と読みます。HTMLに見た目のデザインを加えるための言語です。たとえば、文字の色やサイズ、行間、背景の色、配置などを設定することができます。
CSSを書くことで、Webページがぐっと見やすく、オシャレになります。逆に、CSSがなければ、すべての文字や画像がただ並ぶだけの地味なページになってしまいます。
初心者の方でも、まずはこの3つのCSSの書き方を理解しておくことで、今後の学習がとてもスムーズになります。
まとめ
ここまでで三つの書き方を見比べながら学んできたことで、ひとつのページに同じ内容が書かれていても、どのようにCSSを書くかによって作業のしやすさや見た目の整え方が大きく変わるという感覚がつかめてきたはずです。外部スタイルシートは少し準備が必要ですが、ひとたび仕組みが整ってしまえば多くのページに同じデザインを繰り返し適用できる心強い方法であり、内部スタイルシートは一枚きりの小さなページやちょっとしたサンプルに向いた気軽な方法、インラインスタイルはここだけ変えたいという細かな調整に向いた方法だというイメージがはっきりしてきたのではないでしょうか。
初めてCSSを書くときは、どの方法を選んでも文字の色が変わったり背景色がついたりするので、違いがわかりにくく感じてしまいます。しかし実際にファイルを増やしながら練習していくと、外部スタイルシートにしておくと後からのデザイン変更がとても楽であることや、逆にインラインスタイルの指定を増やしすぎるとどこで何を指定したのか探すだけで時間がかかってしまうことに自然と気づきます。そうした小さな気づきの積み重ねが、実務で通用するレイアウトづくりにつながっていきます。
また、どの書き方を選ぶにしても、共通して大切になるのがHTMLの構造を意識することです。見出しには見出しのタグ、本文には段落のタグ、強調したい箇所には強調のタグというように、意味に合わせてマークアップしておくと、外部スタイルシートでも内部スタイルシートでも同じクラス名で装飾を再利用できるようになります。今回の記事では見出しや説明文にクラスを付けてデザインしていましたが、同じような考え方で自分のページにもクラス名を付けておくと、色や余白を変える作業が一気に楽になります。
さらに、外部スタイルシートを使うときにはファイル名やフォルダ構成も重要になります。練習のうちは適当な場所にファイルを置いても動きますが、現場ではヘッダーやフッターなどの共通部分をまとめるファイル、ボタンやカードなどコンポーネントのためのファイル、ページごとの細かな調整用のファイルというように役割を分けて管理することが多くなります。今のうちからフォルダ構成とファイルの分け方を少しだけ意識しておくと、あとから学ぶレイアウトやレスポンシブ対応にもスムーズに進めます。
一方で、内部スタイルシートは学習時の確認用としてとても便利です。ひとまずひとつのファイルだけで完結するため、ファイルの読み込みに失敗しているのか、CSSの書き方を間違えているのかといった原因を切り分けやすくなります。まず内部スタイルシートで試して、思いどおりにできたら同じルールを外部スタイルシートへ移動するという流れで練習すると、書き方を変えながら仕組みの違いも自然と理解できるようになります。
インラインスタイルは、使いどころを見極めておくことが大切です。一文字だけ色を変えたいときや、メール本文のように外部ファイルを用意しにくい場面ではとても役立ちますが、全体の装飾をすべてインラインスタイルで書いてしまうと、同じ指定を何度も繰り返すことになり、変更したくなったときに全てのタグを探して書き直さなければならなくなります。今回のサンプルのように、ここぞというときのアクセントとして使うという意識を持っておくと、インラインスタイル本来の良さを引き出しやすくなります。
もう一つ意識しておきたいのは、三つの書き方を組み合わせて使うという考え方です。基本的な色やフォント、レイアウトは外部スタイルシートでまとめて定義し、ページごとのちょっとした違いは内部スタイルシートで調整し、ごく一部の特別な箇所だけインラインスタイルで変える、といった使い方をすると、それぞれの長所を生かしながら短所を補い合う構成になります。一つの方法にこだわりすぎず、ページの目的や規模に合わせて柔軟に選べるようになると、デザイン全体を安心して任せられるようになります。
また、CSSは見た目を整える道具ではありますが、読みやすさや操作のしやすさにも大きく関わります。文字サイズの差をきちんとつけて見出しの階層をはっきりさせたり、余白をゆったりと取って文章を読みやすくしたり、ボタンの大きさや色を工夫してどこがクリックできるのかを分かりやすく示したりといった工夫は、どの書き方でも同じように必要です。今回学んだ三つの書き方を意識しながら、レイアウトやタイポグラフィの工夫も少しずつ取り入れていくと、印象に残るページ作りにつながっていきます。
これから練習を重ねていくと、同じようなデザインを繰り返し使う場面や、あとから色だけ変えたい場面、スマートフォンとパソコンで見た目を変えたい場面など、さまざまな状況に出会います。そのときに「ここは外部スタイルシートにしておいた方が後が楽そうだな」「この一箇所だけはインラインスタイルで素早く対応してしまおう」といった判断が自分でできるようになっていれば、ページの規模にかかわらず落ち着いて対応できるようになります。今回の内容はその第一歩として、とても大切な土台になります。
三つの書き方を組み合わせた簡単なサンプル
さいごに、外部スタイルシートと内部スタイルシート、インラインスタイルの役割をまとめて確認できる小さなサンプルを用意しました。全体の雰囲気は外部ファイルで整えつつ、ページ内だけで完結させたい調整を内部スタイルで書き、一部分だけ強調したい場所をインラインスタイルで指定する流れをイメージしてみてください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSSの書き方おさらいサンプル</title>
<link rel="stylesheet" href="style.css">
<style>
.summary-title {
font-size: 1.4rem;
margin-bottom: 0.5rem;
}
.summary-lead {
line-height: 1.8;
}
.summary-point {
padding: 0.5rem 1rem;
border-left: 4px solid #0d6efd;
background-color: #f8f9fa;
margin-bottom: 0.75rem;
}
</style>
</head>
<body>
<h2 class="summary-title">外部・内部・インラインの使い分け</h2>
<p class="summary-lead">
外部スタイルシートで全体のデザインを管理しつつ、ページごとの細かな違いは内部スタイルシートで調整します。
</p>
<div class="summary-point">
このボックスは内部スタイルシートのクラスで装飾しています。
</div>
<p style="color: red;">
ここだけはインラインスタイルで特別に文字色を赤にしています。
</p>
</body>
</html>
実際にファイルを用意してこのサンプルを試してみると、外部ファイルで決めた基本の雰囲気を崩さずに、内部スタイルシートで要点にだけ装飾を足し、さらにインラインスタイルで一点だけ目立たせる流れが体感できます。ここでのクラス名や構造を、自分が作りたいページの内容に置き換えて練習してみると、三つの書き方のバランスがつかみやすくなります。
生徒
「最初はどれを使えばいいのか分からなかったんですけど、だんだんと場面ごとの使い分けが見えてきました。」
先生
「そう感じられていれば十分です。大事なのは、いつも同じ書き方だけを選ぶのではなく、ページの規模や目的に合わせて選び分けられることですよ。」
生徒
「大きめのサイトとか、ページが増えていく前提なら外部スタイルシート、練習用の小さいページや試したいときは内部スタイルシート、ほんの一箇所だけ強調したいときはインラインスタイルっていう感じで考えればいいんですよね。」
先生
「その理解でばっちりです。さらに言うと、基本は外部スタイルシートで整えておいて、どうしても個別対応が必要なときだけ内部やインラインを少し足す、という意識を持っておくとコードが散らかりにくくなります。」
生徒
「なるほど、今日は色を変えることよりも、あとから直しやすい書き方を考えるのが大事なんだなって分かりました。クラス名もちゃんと考えて付けた方が後々楽になりそうですね。」
先生
「その通りです。クラス名の付け方やファイルの分け方は、少しずつ工夫していけば上達します。今回学んだ三つの書き方を意識しながら、自分のページで何度も試してみてください。経験を重ねるうちに、自然と一番しっくりくる組み合わせが見えてきますよ。」
生徒
「はい、まずは外部スタイルシートを基本にして、内部とインラインは必要なところだけ足していくように練習してみます。」
先生
「とても良い目標ですね。少しずつでも続けていけば、見た目の整ったページを自分の力で作れるようになりますよ。」
この記事を読んだ人からの質問
