インラインCSSとは？Webページへのインラインスタイルの追加方法を徹底解説

インラインCSS（Inline CSS）とは、HTML要素のタグ内に直接CSSスタイルを記述する手法です。style属性を使って要素のスタイルを設定でき、そのルールは要素に直接適用されるため、内部・外部のスタイルシートで定義されたスタイルよりも優先されます。

HTMLはWebページの構造を定義するための言語であり、CSSを使うことでHTML要素に独自のスタイルを加えられます。これにより、Webページ上の要素の見た目を自由にカスタマイズすることが可能になります。

CSSをWebページに適用する方法は主に3つあります。「インラインCSS」「内部CSS」「外部CSS」の3つです。この記事では、その中でもインラインCSSに焦点を当て、基本的な使い方と構文について詳しく解説します。

CSSスタイルの基本

CSSは1996年に登場しました。CSSの登場により、Webサイトの「コンテンツ」と「見た目（プレゼンテーション）」を分離できるようになりました。CSSを使えば、Webページに簡単にスタイルを追加し、特定の要素に対してそのスタイルを適用できます。

Webページにスタイルを適用する方法は、主に以下の3つです。

• インラインCSS：個々の要素に固有のスタイルを直接適用する方法。
• 外部CSS：別途CSSファイルを作成し、Webページのスタイルを一元管理する方法。
• 内部CSS：<style>タグを使って、HTMLファイル内にスタイルを定義する方法。

本記事では、この中からインラインCSSの書き方について詳しく見ていきます。

インラインCSSの使い方

インラインCSSは、HTML要素に対してスタイルを適用する手法です。スタイルを適用したい要素ごとに個別に指定する必要があり、セレクタを使って特定の要素を操作する代わりの手段として利用されます。

たとえば、Webページ上の特定の段落だけ文字色やフォントサイズを変更したい場合を考えてみましょう。別のスタイルシートにルールを書くのではなく、変更したい段落に直接スタイルを追加すれば対応できます。

インラインで適用したルールは、内部・外部のスタイルシートで定義されたスタイルを上書きします。

インラインCSSを使うには、要素の「style」属性に直接CSSスタイルを指定します。具体的な例を見てみましょう。

たとえば、Webページ上の見出しを1つだけ緑色に変更したいとします。その場合は、次のようなコードを書きます。

<h1 style="color: green;">これは見出しです</h1>

上記のコードでは、見出しのフォントカラーを緑に設定しています。このスタイルをこの見出しだけに適用したいため、インラインCSSとして直接記述しているのです。

インラインCSSを使うべき場面

インラインCSSは、主に次のような場面で活用されます。

1. 変更内容のプレビュー

インラインスタイルは、特定の変更を手軽に確認したいときに便利です。CSSセレクタに一致するすべての要素ではなく、特定の要素だけを対象にできるため、スタイルシートを修正することなく変更を試せます。

2. 単一要素へのスタイル適用

インラインスタイルは、Webページ上の1つの要素にCSSルールを追加するときにも使われます。たとえば、ある段落の幅を500pxに設定したい場合などが該当します。ただし、複数の段落に同じ幅を設定したいのであれば、別のスタイリング手法を選ぶべきです。

控えめに使う分には、インラインCSSはWebページの要素へスタイルを適用する有効な方法です。しかし、使いすぎるとコードが煩雑になりやすい点には注意しましょう。

インラインCSSの注意点

インラインスタイルには、更新が難しいというデメリットがあります。スタイルを変更するたびに、該当する箇所をすべて手動で修正しなければなりません。一方、スタイルシート内のスタイルであれば、広範なセレクタを使えるため、HTMLドキュメント内の複数の要素に一度に反映できます。

多くのルールを1つの要素に適用したい場合は、内部CSSまたは外部CSSを使う方が一般的に望ましいでしょう。6〜7個ものCSSプロパティを1つの要素に適用したいなら、インラインCSSの使用は避けた方が無難です。

というのも、前述のとおりインラインCSSの乱用はコードを読みにくくするからです。1つのHTML要素の中に6つものCSSルールが詰め込まれていると、要素そのものがコード上で見えにくくなってしまいます。

まとめ

インラインCSSは、Webページ上の特定の要素にスタイルを適用する手法です。一般的には、変更内容を手軽にプレビューしたいときや、ごく少数の要素だけをスタイリングしたいときにインラインCSSが向いています。1つの要素により多くのスタイルを適用したい場合は、内部または外部のスタイルシートを使うのがおすすめです。

この記事では、例を交えながらCSSスタイリングの基礎と、インラインCSSの使い方を解説しました。これであなたも、プロのWeb開発者のようにインラインCSSを使いこなせるはずです。

CSSの学習をさらに進めたい方は、「CSSの学び方」完全ガイドもぜひ参考にしてください。