Webページを作っていると、「HTMLとCSSってどうやって組み合わせるの？」と迷うことありますよね。
見た目を変えたいのに、どこに何を書けばいいのか分からないと、とても不安になります。
この記事では、HTMLとCSSの埋め込み方法について、やさしくくわしく解説します。
基本的な書き方から、使い分けのコツ、便利な管理方法まで紹介していきます。
どの方法を選べばよいかが分かるようになると、キレイで見やすいWebページをすぐに作れるようになります。
はじめての方でも安心して読める内容になっていますので、ぜひ最後まで読んで参考にしてください。
HTML/CSSをWebページに埋め込む基本的な方法
HTMLに直接CSSを記述する方法（インラインスタイル）
HTMLにCSSを直接書く方法のひとつが「インラインスタイル」です。
これはHTMLタグの中にスタイルを指定する方法で、初心者でもすぐに使うことができます。
たとえば、文字の色やサイズを一時的に変えたいときなどに便利です。
インラインスタイルを使うには、HTMLのタグにstyle属性を追加します。
以下は基本的な記述例です。
<p style="color: red; font-size: 18px;">これは赤い文字です</p>
使うときのポイントは次の通りです。
- 一部だけデザインを変えたいときに使う
- HTMLタグの中に
style="プロパティ: 値;"という形で書く - ファイル数が増えないので手軽
- ほかのCSSに影響されにくい
ただし、たくさん使うとコードがごちゃごちゃになりやすいため、使いすぎには注意が必要です。
小さな変更やテストには便利ですが、全体のデザインには向いていません。
HTML内にCSSを組み込む方法（内部スタイル）
HTMLファイルの中にまとめてCSSを書く方法が「内部スタイルシート」です。
この方法では、<head>タグの中に<style>タグを使ってCSSを記述します。
この方法が向いているケースは以下のような場合です。
- 1つのHTMLファイル内でデザインを完結させたい
- インラインスタイルでは書きにくい複雑なスタイルを使いたい
- 小規模なページで手早くスタイルを設定したい
- ファイルを増やしたくないとき
例えば次のように書きます。
<style>
p { color: blue; font-size: 16px; }
</style>
この方法なら、複数のタグに同じスタイルを適用できるので、インラインスタイルよりも整理しやすくなります。
ただし、スタイルが長くなるとHTMLとCSSの境界がわかりづらくなるため、注意しましょう。
外部CSSファイルをリンクする方法
もっともよく使われているのが、HTMLから外部のCSSファイルを読み込む方法です。
<link>タグを使ってCSSファイルを指定します。
大きなサイトや管理しやすさを重視する場合におすすめです。
以下のような特徴があります。
- 複数ページで同じCSSを使える
- HTMLとCSSを別ファイルに分けるので見やすくなる
- 変更時にCSSファイルだけ直せば全ページに反映される
- SEOやページ速度の最適化に有利
使い方の例は次の通りです。
<link rel="stylesheet" href="style.css">
この方法はWeb制作の現場でも基本とされており、今後たくさんのページを作るなら最初からこの方法を覚えておくと安心です。
styleタグの使い方と注意点
内部スタイルやテスト用のCSSを書くときに使うのが<style>タグです。
このタグは<head>の中に入れて、HTMLの中に直接CSSを記述できます。
以下のようなポイントを覚えておくと便利です。
- スタイルの対象を
pや.class、#idなどで指定できる - セレクタとプロパティの関係を覚えると応用がきく
- 長くなりすぎるとHTMLが読みにくくなる
- テストや1ページ完結型サイトに向いている
例としては次のように書きます。
<style>
.box { background-color: yellow; padding: 10px; }
</style>
<style>タグはとても便利ですが、複雑なデザインやページ数が増える場合には、外部CSSに切り替えるのが望ましいです。
埋め込み方法ごとのメリットとデメリット
それぞれの方法には良い点と悪い点があります。
使い方を間違えると、Webページの管理が難しくなってしまいます。
ここでは代表的な3つの方法について、メリット・デメリットをまとめます。
- インラインスタイル：
【メリット】すぐに使える、小さな修正に便利
【デメリット】たくさん使うと見づらくなる - 内部スタイル：
【メリット】1ページ内でまとめて管理できる
【デメリット】他のページに使い回せない - 外部スタイル：
【メリット】複数ページで使い回せる、管理が楽
【デメリット】リンクミスがあるとスタイルが反映されない
使い分けのコツとしては、「少しだけ変えたいならインライン」「ページ内で完結させたいなら内部」「複数ページや将来の管理を考えるなら外部」と覚えておくとよいでしょう。
用途別に見るHTML/CSSの埋め込みパターン
ランディングページでのスタイル埋め込みの最適解
ランディングページは訪問者に行動を促す大事なページなので、表示スピードや見た目のインパクトがとても重要になります。
そのため、CSSの埋め込み方法も目的に合わせて選ぶ必要があります。
具体的には、次のようなポイントを意識しましょう。
- インラインスタイルを使えば、すぐに読み込まれるので初速が速い
- 内部スタイルは1ページで完結する設計に最適
- 外部スタイルは再利用性は高いが読み込みに時間がかかることがある
ランディングページでは表示スピードを優先し、<style>タグやインラインCSSを使うことが多いです。
特に上部にある「ヒーロー画像」や「ボタン」に関しては、ユーザーの第一印象を左右するため、デザインと読み込み速度のバランスがとても大切です。
ブログや記事コンテンツでの使い分け
ブログやニュース記事のようなコンテンツでは、ページごとに構造が似ているため、スタイルの使い方も統一するのが望ましいです。
外部CSSを使って全体のスタイルを一括管理すると便利です。
よく使われる方法には以下のようなものがあります。
- 共通スタイルを
style.cssとして読み込む - 記事固有のデザインだけ内部スタイルで追加する
- 画像や見出しの装飾はクラス名を使って統一する
例えば、見出しの装飾は次のようにCSSを記述しておくと便利です。
h2.title {
color: #333;
border-left: 4px solid red;
padding-left: 10px;
}
このように、ブログでは再利用しやすさと読みやすさを意識したスタイル設計が大切です。
JavaScriptと併用する場合の埋め込み方法
HTML/CSSとJavaScriptを一緒に使うと、動きのあるWebページを作ることができます。
このとき、CSSの埋め込み方法にも気を配る必要があります。
なぜなら、JavaScriptでスタイルを変更したり、追加したりすることがあるからです。
以下のような工夫をすることで、トラブルを防ぐことができます。
- CSSクラス名をわかりやすく、統一しておく
- JavaScriptで操作する部分には専用クラスを使う
- 外部CSSで基本のデザインを整えておく
- インラインスタイルはJavaScriptの動作確認に便利
たとえば、ボタンをクリックして色が変わる動作は以下のように実装できます。
// HTML
<button class="btn">クリック</button>
// CSS
.btn { background-color: blue; color: white; }
.btn.active { background-color: red; }
// JavaScript
document.querySelector(“.btn”).addEventListener(“click”, function() {
this.classList.toggle(“active”);
});
JavaScriptとCSSの連携では、クラスの命名と管理がとても大切になります。
CMS（WordPressなど）での埋め込み手法
CMS（コンテンツ管理システム）を使う場合、HTMLやCSSの書き方も少し変わってきます。
とくにWordPressでは、テーマやプラグインとの相性を考えながらスタイルを追加する必要があります。
以下のような場面ごとに使い分けるのが基本です。
- 全体のデザイン：テーマの
style.cssを編集 - 記事ごとの装飾：カスタムHTMLブロックでインラインCSS
- 動的コンテンツ：プラグインのカスタムCSSエリアを使う
- サイト全体の追加CSS：管理画面の「追加CSS」機能を使う
WordPressの場合、無理にテンプレートを壊して書き換えると、更新時に不具合が出ることがあります。
できるだけ外部ファイルやカスタムCSSを使って管理するのが安心です。
メールマガジンでのHTML/CSSの使い方
メールマガジンで使うHTMLは、Webページとは少し違ったルールがあります。
多くのメールソフトが外部CSSを正しく読み込めないため、インラインスタイルが基本になります。
安全に表示させるために気をつけるポイントは次の通りです。
- すべてのCSSはインラインで記述
<style>タグや<script>タグは使わない- テーブルレイアウトを使う
- 画像には
alt属性を入れる - スマホでも読めるように幅を調整する
たとえば、次のように書くと安心です。
<table width="100%" style="background-color:#f5f5f5;">
<tr>
<td style="padding:20px; font-size:16px;">こんにちは！新しい商品を紹介します。
</td>
</tr>
</table>
メール用のHTMLは制限が多いですが、その分確実に届いて読まれる工夫が大切です。
フォームやボタンデザインのための埋め込み方法
フォームやボタンは、ユーザーとWebページがやりとりをする大事な場所です。
ここでのCSSの使い方によって、使いやすさや印象が大きく変わります。
次のような点を意識してデザインしましょう。
- クリックしやすいサイズにする
- 色や形で目立たせる
- 押したときの変化（ホバー・アクティブ）をつける
- フォームは枠や余白で見やすくする
- レスポンシブ対応でスマホでも使いやすくする
ボタンの基本スタイルの例は以下の通りです。
.button {
background-color: green;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
フォームやボタンは見た目だけでなく、操作のしやすさも意識して作ると、ユーザーが行動しやすくなります。
デバイス別に最適化するための工夫
スマートフォンやタブレットなど、いろいろなデバイスでWebページを見てもらうためには、CSSでの工夫が欠かせません。
特にレスポンシブデザインを取り入れることが基本となります。
そのために使う主な方法は次の通りです。
@mediaクエリを使って画面幅ごとにスタイルを変更- 文字やボタンのサイズを%やemなどで柔軟に設定
- 画像サイズは
max-width: 100%で制限する - レイアウトはFlexboxやGridで調整する
以下のようなコードでスマホ対応ができます。
@media screen and (max-width: 600px) {
.container { flex-direction: column; }
}
どんなデバイスでも読みやすく、操作しやすいことは、今のWeb制作においてとても重要な要素です。
管理しやすいHTML/CSS埋め込みのコツ
ファイル構成とフォルダ整理の基本
Webサイトを作るとき、たくさんのファイルを使います。
そのため、どこに何があるかをわかりやすくしておくことがとても大切です。
整理されたフォルダ構成は作業の速さにもつながります。
基本的な整理方法は以下の通りです。
- HTMLファイルはプロジェクトのルートに置く
- CSSファイルは
cssフォルダにまとめる - 画像ファイルは
imagesフォルダに入れる - JavaScriptは
jsフォルダに保存 - フォルダ名や
ファイル名は半角英数字でわかりやすく
このように決めておくと、あとから見返したときも迷わずにすみます。
見た目が整っていることは、コードの品質にもつながります。
クラス名・IDの命名ルールと設計思想
CSSを書くときに必要なのが、クラス名やID名です。
わかりやすくて一目で役割がわかる名前をつけると、あとで修正したり他の人と作業したりするときにとても便利です。
命名のコツは以下の通りです。
- 英単語や略語を使って意味のある名前にする
- スネークケース（
main_title）やケバブケース（main-title）を統一する - 見た目ではなく役割で名付ける（例：
btn-primary） - 同じ要素にIDとクラスを混在させない
- 必要以上に細かく分けない
クラス名やIDはサイト全体の設計に関わるため、最初にルールを決めておくことでトラブルを防げます。
可読性・保守性を高めるためのポイント
Webサイトを長く使っていくためには、コードが「読みやすくて直しやすい」ことがとても大切です。
これを「可読性（読みやすさ）」と「保守性（修正のしやすさ）」といいます。
どちらも高めるために気をつけることは次のようなことです。
- スペースやインデントを使って整える
- 1つのルールは1行で書く
- 似たスタイルはまとめてクラス化する
- 不要なコードは削除する
!importantはできるだけ使わない
このように書いておくと、自分だけでなく他の人にもわかりやすくなり、バグが起きてもすぐに見つけられるようになります。
CSSの重複や競合を防ぐ方法
大きなWebサイトでは、同じようなクラス名やIDがたくさん出てきます。
これが重なったりすると、どのスタイルが効いているのかわからなくなってしまいます。
これを「スタイルの競合」といいます。
競合を防ぐための方法は以下の通りです。
- BEM（Block Element Modifier）という命名ルールを使う
- スタイルの影響範囲を狭くする（子要素にだけ効くようにする）
- ページごとにクラス名を変える
- IDやクラスを重ねて指定しない
- 共通パーツは再利用できるように設計
たとえば、BEMなら.menu__item--activeのように書きます。
この方法を使うことで、どのCSSがどこに効いているかが一目でわかります。
コメントアウトとドキュメント化の重要性
CSSやHTMLを書いていると、どこで何をしているのか分からなくなることがあります。
そんなときのために、「コメント」を書いておくととても便利です。
コメントを使うポイントは次の通りです。
/* メニュー部分のスタイル */のようにセクションごとに説明を書く- やっていることや理由を書く
- 消すかどうか迷うコードはコメントアウトで残す
- CSSファイルの先頭に使い方や概要を書く
コメントは/* */で囲みます。
たとえば次のように書きます。
/* ヘッダーの背景色設定 */
header { background-color: #fff; }
コメントを使えば、あとから見たときに自分の書いたコードがすぐ理解できて、修正がとても楽になります。
共通パーツの管理と再利用のテクニック
ヘッダー、フッター、ボタンなど、よく使うパーツは何度も出てきます。
毎回同じスタイルを書くのは大変なので、「共通パーツ」として管理しておくと便利です。
再利用のためには、次のような工夫をしましょう。
- 共通のCSSクラスを作っておく
- ファイルを分けて
common.cssなどにまとめる - 必要な場所でだけ読み込むようにする
- 変数（カスタムプロパティ）を使って色やフォントを管理
- パーツごとに命名ルールをそろえる
例として、共通ボタンのスタイルは次のように書きます。
.button-common {
background-color: #007BFF;
color: #fff;
border-radius: 4px;
padding: 10px 15px;
}
共通パーツをしっかり管理しておけば、見た目がそろって作業も早くなり、ミスも少なくなります。
チーム開発でのスタイル統一の工夫
チームでWeb制作をするときは、みんなが同じ書き方でCSSを書くことが大切です。
スタイルがバラバラだと、あとで直すときに時間がかかってしまいます。
統一のために必要な工夫を紹介します。
- 命名ルールをチームで決める
- どこに何を書くかのガイドラインを作る
- 共通ファイルを使っておく
- レビューでルールをチェックする
- コメントをしっかり残して共有する
たとえば、button-mainやheader-logoなど、使い方がわかる名前をみんなで使うだけでも、全体の統一感が出て、ミスも減ります。
SEOと表示速度を意識したHTML/CSS埋め込み戦略
インラインCSSのSEO・パフォーマンスへの影響
インラインCSSは簡単に使える一方で、SEOやページの読み込みスピードに影響を与えることがあります。
特に、検索エンジンがHTMLを読み込む際に、スタイル情報が多いと本来のコンテンツが見づらくなるため、注意が必要です。
SEOや表示速度の観点から見たインラインCSSの特徴をまとめます。
- HTMLファイルが重くなりやすい
- 同じスタイルを何度も書くとコード量が増える
- キャッシュが使えないため毎回読み込みが発生する
- コンテンツとデザインが混ざるためSEO評価が下がる可能性がある
- メンテナンスが難しくなり、保守性も低くなる
インラインCSSは一部の場面では便利ですが、SEOを意識するなら基本的には避けるのが安全です。
特別な理由がない限り、外部CSSや内部スタイルを使うようにしましょう。
外部CSSの遅延読み込みと先読みテクニック
外部CSSは管理しやすくSEOにも有利ですが、読み込みのタイミングによってはページの表示速度を遅くしてしまうことがあります。
そこで、「遅延読み込み」や「先読み」を活用することで、パフォーマンスを改善することができます。
以下に、外部CSSの読み込み改善テクニックを紹介します。
rel="preload"を使って優先的に読み込ませるmedia="print"とonloadを使って非同期読み込みするrel="prefetch"で次のページのCSSを先に読み込ませるrel="preconnect"で外部ドメインの読み込みを速くする- JavaScriptで
link要素を動的に追加する方法もある
たとえば、CSSを非同期に読み込むコードは以下のように書きます。
<link rel="stylesheet" href="style.css" media="print" onload="this.media='all'">
このような工夫をすることで、ページの読み込みが速くなり、ユーザー満足度や検索順位の向上にもつながります。
モバイル対応とレスポンシブデザインの実装
スマートフォンでWebページを見る人が増えた今では、モバイル対応がとても大切です。
画面サイズに応じてレイアウトを変える「レスポンシブデザイン」をCSSで取り入れることで、どんなデバイスでも快適に見られるページを作ることができます。
以下のような方法でレスポンシブ対応が可能です。
@mediaクエリで画面サイズごとにスタイルを変更- 横幅や高さを
%やvwなどの相対値で設定 - 画像は
max-width: 100%で横幅に合わせる - フォントサイズを
emやremで柔軟に設定 - FlexboxやGridでレイアウトを調整
例えば、スマホ画面のときにだけメニューを縦並びにするコードは次の通りです。
@media screen and (max-width: 768px) {
.nav { flex-direction: column; }
}
モバイル対応は今や必須の施策であり、検索順位にも影響するため、確実に対応しておくべきポイントです。
コードの最適化と圧縮のポイント
CSSファイルが大きいと読み込みに時間がかかり、ページ表示も遅くなります。
そのため、CSSを「最適化」や「圧縮」して軽くすることが大切です。
これはSEOやパフォーマンス改善にとって非常に有効な方法です。
コードを軽くする方法をまとめます。
- 不要なスペースや改行を削除する
- 同じスタイルはまとめて共通クラスにする
- 未使用のCSSは削除する（ツールで自動化も可能）
- CSSファイルをminify（圧縮）する
- できるだけ短く、意味のあるクラス名にする
たとえば、以下のようなCSSは
body {
background-color: #ffffff;
color: #000000;
}
圧縮後は次のようになります。
body{background-color:#fff;color:#000}
このようにCSSを軽くすることで、サーバーへの負担も減り、ユーザーの読み込みストレスもなくなります。
レンダリングブロックの回避とパフォーマンス改善
外部CSSを読み込むタイミングによっては、ページの表示が止まってしまうことがあります。
これを「レンダリングブロック」といいます。
ページ表示の妨げにならないように工夫することが重要です。
次の方法でレンダリングブロックを防げます。
media="print"で読み込みを遅らせ、後からmedia="all"に変更- 必要なスタイルだけを
headに置き、残りは遅延読み込み - 重要なCSSはHTMLにインラインで先に書く
- 使っていないCSSの削除
rel="preload"で優先読み込み
実際のコード例は以下の通りです。
<link rel="stylesheet" href="style.css" media="print" onload="this.media='all'">
レンダリングブロックを回避することで、ファーストビューの表示が速くなり、ユーザーの離脱を防ぐことができます。
重要コンテンツの上位表示を狙う埋め込み設計
検索結果で上位に表示されるには、HTMLとCSSの埋め込み方にも工夫が必要です。
特に、重要なコンテンツが早く読み込まれるように設計することが大切です。
次のような点を意識すると、SEOにも効果があります。
- 最初に表示したい部分のスタイルはインラインで書く
- 本文より前に不要なスクリプトや重いスタイルを置かない
- タイトルや見出しに装飾だけでなく意味のあるHTMLタグを使う
- 読み込み順序を工夫して必要な情報から表示
- 画像や動画の読み込みは遅延させる
たとえば、メインの見出し部分は次のようにインラインスタイルで先に表示します。
<h1 style="font-size:24px; color:#333;">今すぐ知っておきたい最新情報</h1>
このように、検索エンジンが最初に読み込む情報に価値があると判断されやすい設計にすることが、SEO対策の第一歩です。
Core Web Vitals対策とスタイル設計の工夫
Googleが重視している「Core Web Vitals（コアウェブバイタル）」は、ユーザー体験を評価する指標です。
ページの読み込み速度や操作のしやすさがスコアに関係してくるため、CSSの書き方にも工夫が必要です。
対策として有効な方法をまとめます。
- CSSファイルをできるだけ小さくする
- 重要な部分だけ先に表示させる
- フォントの読み込みは非同期化する
- レイアウトシフトを防ぐために画像サイズを明示
- Webフォントでは
font-display: swapを指定
たとえば、フォントの読み込みを最適化するには以下のようにします。
@font-face {
font-family: 'MyFont';
src: url('myfont.woff2') format('woff2');
font-display: swap;
}
Core Web Vitalsに対応することで、SEO評価だけでなく、ユーザーにとっても快適なページを作ることができます。
まとめ
HTMLやCSSの埋め込み方法にはいろいろなやり方がありますが、使う場所や目的に合わせて選ぶことが大切です。
今回の内容をもう一度ふりかえって、大事なポイントをおさらいしましょう。
- インラインCSSは少しの変更に便利だが多用は避ける
- 内部スタイルは1ページ完結に向いている
- 外部CSSは管理や再利用に最適
- 整理された構成で作ると保守が楽になる
- SEOと表示速度を意識して読み込みを工夫する
今回学んだ内容を実際の制作に取り入れて、読みやすく、わかりやすく、管理しやすいWebページを作ってみましょう。
