CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

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

CSSをHTMLページに組み込む方法は、大きく分けて次の3つがあります。

  • インライン（Inline）：要素のstyle属性に直接スタイルを指定する方法です。手軽に使えますが、コードの保守性や再利用性を考えると、内部参照または外部参照の利用が推奨されます。
  • 内部参照（Internal）：HTMLドキュメントの<head>タグ内に配置した<style>タグの中に、CSSの定義をまとめて記述する方法です。
  • 外部参照（External）：<link>タグを使って、ローカル環境やサーバー上に置かれた.cssファイルを読み込む方法です。CSSを外部ファイルとして切り出しておけば、複数のWebページで共通のスタイルシートを再利用でき、サイト全体のメンテナンス性が大幅に向上します。

基本構文

HTMLにCSSを組み込む際の基本的な構文は以下の通りです。

/* インライン */
<element style="/*declarations*/"></element>

/* 内部参照 */
<head>
<style>
/*declarations*/
</style>
</head>

/* 外部参照 */
<head>
<link rel="stylesheet" href="#location">
</head>

記述例

ここからは、それぞれの方法について具体的なコード例と表示結果を見ていきましょう。

1. インラインCSS

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div style="background-color:mistyrose; height: 50px;"></div>
<p style="letter-spacing: 16px; font-size: 1.3em;">
<u>Demo text here</u>
</p>
</body>
</html>

出力結果

上記のコードは、次のように表示されます。

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

2. 内部参照

<!DOCTYPE html>
<html>
<head>
<style>
table, table *{
    border: 5px double green;
    margin: auto;
    padding: 20px;
}
tr {
    box-shadow: 0 0 0 3px red;
}
td {
    border-color: blue;
}
</style>
</head>
<body>
<table>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>

出力結果

上記のコードは、次のように表示されます。

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

3. 外部参照

HTMLファイル

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div>
<div></div>
<div>
<div></div>
</div>
<div></div>
</div>
</body>
</html>

CSSファイル（style.css）

div {
    margin: auto;
    padding: 15px;
    width: 33%;
    border: 2px solid;
    border-radius: 50%;
}
div > div {
    border-color: green;
}
div > div > div {
    border-color: red;
}

出力結果

上記のコードは、次のように表示されます。

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

まとめ

インラインCSSは特定の要素だけを手軽に装飾したい場合に、内部参照はそのページだけで完結するスタイル定義に、そして外部参照は複数ページでスタイルを共有したい場合に適しています。プロジェクトの規模や目的に応じてこれらの方法を使い分けることで、効率的で保守しやすいWeb開発を実現できます。

  1. CSSを使ってユーザー評価スコアカードを作成する方法

    CSSとFont Awesomeのアイコンフォントを組み合わせれば、レビューサイトやECサイトでおなじみの「ユーザー評価」スコアカードを簡単に作成できます。平均評価を示す星アイコンと、各星の評価件数を視覚化したプログレスバー（進捗バー）を並べることで、訪問者にとって直感的に分かりやすい評価パネルを実現できます。 実装例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"

  2. CSSでメモ（注釈）ボックスを作成する方法

    Webページでは、ユーザーに注意喚起や補足情報を伝えるための「メモ」や「アラートボックス」を表示したい場面がよくあります。CSSを使えば、background-colorとborder-leftを組み合わせるだけで、視覚的に分かりやすいメモボックスを簡単に作成できます。 CSSでメモを作成するサンプルコード 以下のコードでは、3種類のメモスタイル（danger／success／info）を定義しています。 <!DOCTYPE html> <html> <head> <meta name="viewport" content=&quo