HTMLスタイル

Q: インライン、内部、外部スタイルの違いは何ですか？

3つのアプローチがあります：1）インラインスタイル（ style 属性）は現在の要素にのみ影響し、HTMLタグ内に記述します；2）内部スタイル（ <style> タグ）は現在のページに影響し、 <head> 内に記述します；3）外部スタイル（ .css ファイル、 <link> で読み込み）は参照するすべてのページに影響します。優先順位：インライン > 内部 > 外部。実際には、95%の場合は外部スタイルシートを使用します。

Q: スタイルの優先順位はどのように計算されますか？

優先順位は高い方から低い方へ：1） !important （慎重に使用し、優先順位を乱す）；2）インラインスタイル（ style 属性）；3）IDセレクタ（ #id ）；4）クラスセレクタ（ .class ）、属性セレクタ、擬似クラス；5）要素セレクタ（ p 、 div ）、擬似要素；6）ユニバーサルセレクタ（ * ）、継承されたスタイル。同じ優先順位の場合：後のルールが前のルールを上書きします。 !important を乱用せず、セレクタの詳細度で優先順位を制御することをお勧めします。

Q: インラインスタイルはいつ使うのですか？

インラインスタイルの使用シーンは非常に限られています：1）JavaScriptが動的にスタイルを変更する場合（ element.style.color = 'red' ）；2）迅速なデバッグ（一時的なプレビュー）；3）メールテンプレート（メールクライアントは <style> を十分にサポートしていません）。それ以外のすべての場合は、内部または外部スタイルシートを使用すべきです。インラインスタイルの欠点：メンテナンスが難しい、再利用できない、優先順位が高すぎて上書きが困難。

HTMLはウェブページの構造を担当し、CSS（Cascading Style Sheets）はその見た目を担当します。HTMLでスタイルを記述する方法は3つあります：インラインスタイル、内部スタイルシート、外部スタイルシートです。

インラインスタイル

要素の style 属性に直接CSSを記述します ― その特定の要素にのみ影響します。

サンプル

HTML

<p style="color: blue; font-size: 18px;">
これは大きな青いテキストの段落です。
</p>
<div style="background: #f0f0f0; padding: 20px; border-radius: 8px;">
これは角丸のグレーカードです。
</div>

▶ 試してみよう

💡 使用どき：インラインスタイルは最も優先度が高く、簡易テストやJavaScriptで動的にスタイルを変更するシーンに最適です。ただし、本番環境ではメンテナンスが難しいため避けるべきです。

内部スタイルシート

<head> 内の <style> タグでスタイルを定義します ― ページ上のすべての要素が参照できます。

サンプル

HTML

<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: Arial, sans-serif; }
h1 { color: #333; text-align: center; }
.card {
background: #fff;
border: 1px solid #ddd;
padding: 16px;
border-radius: 8px;
}
</style>
</head>
<body>
<h1>マイページ</h1>
<div class="card">これはカードです</div>
</body>
</html>

▶ 試してみよう

外部スタイルシート

CSSを別の .css ファイルに記述し、<link> で読み込みます。これが最も推奨される方法です ― 1つのCSSファイルでウェブサイト全体のスタイルを制御できます。

サンプル

HTML

<head>
<link rel="stylesheet" href="style.css">
</head>

<!-- style.css の内容： -->
<!-- h1 { color: navy; } -->
<!-- .highlight { background: yellow; } -->

▶ 試してみよう

📌 3つの方法の優先順位：インラインスタイル > 内部スタイルシート > 外部スタイルシート > ブラウザデフォルトスタイル。同じ要素に複数の方法でスタイルが適用された場合、優先度の高いものが有効になります。

よく使われるCSSプロパティ一覧

以下はHTMLで最もよく使われるCSSプロパティです ― これらをマスターすれば、見栄えの良いページを作成できます。

color ― 文字色
background-color ― 背景色
font-size ― フォントサイズ
font-weight ― フォントの太さ（bold = 太字）
text-align ― テキストの配置（left/center/right）
padding ― 内側の余白（コンテンツとボーダーの間）
margin ― 外側の余白（要素間のスペース）
border ― 枠線
width / height ― 幅と高さ
display ― 表示モード（block/inline/flex/none）

❓ よくある質問

Q インライン、内部、外部スタイルの違いは何ですか？

A 3つのアプローチがあります：1）インラインスタイル（style属性）は現在の要素にのみ影響し、HTMLタグ内に記述します；2）内部スタイル（<style>タグ）は現在のページに影響し、<head>内に記述します；3）外部スタイル（.cssファイル、<link>で読み込み）は参照するすべてのページに影響します。優先順位：インライン > 内部 > 外部。実際には、95%の場合は外部スタイルシートを使用します。

Q 外部スタイルシートが推奨されるのはなぜですか？

A 外部スタイルシートには4つの主要な利点があります：1）再利用可能で、複数のページが1つのCSSファイルを共有し、1箇所を変更するとすべてが更新される；2）キャッシュ可能で、ブラウザがCSSファイルをキャッシュし、 subsequentページの読み込みが高速化される；3）分離されており、HTMLは構造を担当し、CSSはスタイルを担当し、責任が明確でメンテナンスが容易；4）コラボレーション可能で、フロントエンド開発者が並行して作業でき、競合しない。インラインスタイルはデバッグとエッジケースのみに使用します。

Q スタイルの優先順位はどのように計算されますか？

A 優先順位は高い方から低い方へ：1）!important（慎重に使用し、優先順位を乱す）；2）インラインスタイル（style属性）；3）IDセレクタ（#id）；4）クラスセレクタ（.class）、属性セレクタ、擬似クラス；5）要素セレクタ（p、div）、擬似要素；6）ユニバーサルセレクタ（*）、継承されたスタイル。同じ優先順位の場合：後のルールが前のルールを上書きします。!importantを乱用せず、セレクタの詳細度で優先順位を制御することをお勧めします。

Q インラインスタイルはいつ使うのですか？

A インラインスタイルの使用シーンは非常に限られています：1）JavaScriptが動的にスタイルを変更する場合（element.style.color = 'red'）；2）迅速なデバッグ（一時的なプレビュー）；3）メールテンプレート（メールクライアントは<style>を十分にサポートしていません）。それ以外のすべての場合は、内部または外部スタイルシートを使用すべきです。インラインスタイルの欠点：メンテナンスが難しい、再利用できない、優先順位が高すぎて上書きが困難。

📖 まとめ

スタイルを記述する3つの方法：インライン（style属性）、内部（<style> タグ）、外部（<link> で.cssファイルを読み込み）
外部スタイルシートがベストプラクティス ― 再利用可能、キャッシュ可能、構造とプレゼンテーションを分離
スタイルの優先順位：インライン > 内部 > 外部 > ブラウザデフォルト
CSSプロパティは「プロパティ名: 値」のペアで構成され、セミコロンで区切る

📝 練習問題

スタイル練習： HTMLページを作成し、異なる要素に3種類のスタイリング方法をすべて使ってみてください。優先順位の効果を観察してください。
カードデザイン： インラインスタイルを使って、タイトル、画像の説明、ボタンを持つカードコンポーネントを作成してください。
外部スタイル： style.css ファイルを作成し、<link> で読み込んで、ページ上の複数の要素にスタイルを適用してください。