HTMLドキュメントにCSSを組み込む方法｜インライン・内部・外部の3つの書き方

HTMLドキュメントにCSSを適用するには、大きく分けて「インライン」「内部（head内への埋め込み）」「外部ファイルのリンク」の3つの方法があります。それぞれ特徴や使いどころが異なるため、目的に応じて使い分けることが重要です。

記述方法（基本構文）

各方法の基本的な構文は以下のとおりです。

/* インライン */
<element style="/*宣言*/"></element>

/* 内部 */
<head>
<style>
/*宣言*/
</style>
</head>

/* 外部 */
<head>
<link rel="stylesheet" href="#ファイルの場所">
</head>

方法ごとの比較

方法	特徴	向いているケース
インライン	要素に直接記述。優先度が高いが再利用不可	一時的な調整・メールHTMLなど
内部	head内のstyle要素にまとめて記述	単一ページのサイトや検証用コード
外部	別ファイルに切り出してlinkで読み込み	複数ページで共通デザインを使う実務案件

例1：インラインCSS

インラインCSSは、HTML要素のstyle属性に直接スタイルを記述する方法です。特定の要素だけに手軽にスタイルを適用できますが、コードの再利用性が低く管理も煩雑になるため、多用は避けるのが一般的です。

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p style="font-family: Forte;">デモテキスト</p>
<p style="background-color: lightblue;">これはデモテキストです</p>
<img src="https://www.tutorialspoint.com/memcached/images/memcached.jpg" style="border: 3px groove orange;">
</body>
</html>

出力結果

上記のコードを実行すると、次のように表示されます。

HTMLドキュメントにCSSを組み込む方法｜インライン・内部・外部の3つの書き方

例2：内部スタイルシート

内部スタイルシートでは、<head>タグ内に<style>要素を配置し、その中にCSSを記述します。1つのHTMLファイル内で完結するため、単一ページのサイトや動作確認用のコードに適しています。

<!DOCTYPE html>
<html>
<head>
<style>
div {
    margin: auto;
    padding: 15px;
    width: 33%;
    border: 2px solid;
    border-radius: 5%;
}
div > div {
    border-color: transparent;
    box-shadow: inset 0 0 6px red;
}
div > div > div {
    border-color: red;
}
</style>
</head>
<body>
<div>
<div></div>
<div>
<div></div>
</div>
<div></div>
</div>
</body>
</html>

出力結果

上記のコードを実行すると、次のように表示されます。

HTMLドキュメントにCSSを組み込む方法｜インライン・内部・外部の3つの書き方

例3：外部スタイルシート

外部スタイルシートでは、CSSを別ファイル（例：style.css）として保存し、<link>タグでHTMLから読み込みます。複数ページで共通のデザインを適用でき、修正も1ファイルで済むため、実務では最も推奨される方法です。

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p>デモテキスト</p>
<p>もう一度デモテキスト</p>
</body>
</html>

出力結果

上記のコードを実行すると、次のように表示されます。

HTMLドキュメントにCSSを組み込む方法｜インライン・内部・外部の3つの書き方

読み込まれている style.css の内容は以下のとおりです。

p {
    text-decoration: overline;
    text-transform: capitalize;
}

まとめ

CSSの組み込み方法には「インライン」「内部」「外部」の3種類があり、規模や用途によって使い分けます。小さな調整にはインライン、単一ページには内部、そして本格的なWebサイト開発では外部スタイルシートを選ぶのがベストプラクティスです。

CSSの要素タイプセレクターとは？基本構文と実例をわかりやすく解説

HTMLページにCSSを組み込む3つの方法｜インライン・内部参照・外部参照の違いと書き方

【CSS】Flexboxで作る高度なレイアウト！基本プロパティと実装サンプルを解説
Flexbox（フレックスボックス）とは？ CSS3には「Flexible Box Layout（フレキシブルボックスレイアウト）」と呼ばれるレイアウトモードが用意されており、一般的にはFlexbox（フレックスボックス）として知られています。Flexboxを活用することで、従来のfloatやpositionを使った手法よりもはるかに簡単かつ柔軟に、複雑なWebアプリケーションやWebページのレイアウトを構築できます。 Flexboxは「フレックスコンテナ」（親要素）と「フレックスアイテム」（子要素）という2つの概念で構成されます。親要素にdisplay: flex;を指定するだけで、その直下
CSSだけで実現するスムーススクロールの書き方
CSSのscroll-behaviorプロパティを使うと、アンカーリンクによるページ内移動時のスクロール動作を、JavaScriptに頼ることなく純粋なCSSだけで制御できます。値にsmoothを指定すれば、クリック一つで目的地までなめらかにアニメーションしながらスクロールします。 scroll-behaviorプロパティの主な値 auto:ブラウザの標準動作。リンクをクリックすると瞬時に目的の位置へジャンプします。 smooth:滑らかなアニメーションを伴ってスクロールします。このプロパティはChrome、Firefox、Edge、Safariなどの主要ブ