CSSの組み込み方 – regmonkey datascience blog

CSSをHTMLに組み込む方法

Key Takeaways

方法	保守性	再利用性	適している場面
インライン	悪い	なし	一時的・緊急の変更
内部CSS	普通	なし	単一ページのスタイリング
外部CSS	良い	高い	大規模・再利用が前提の開発

CSSをHTMLに組み込む方法として，

インラインCSS
内部参照CSS
外部参照CSS

の3つがあります．それぞれの使い分けも簡潔に解説します．

1: インラインCSS

<p style="color: #ff0000; font-weight: bold;">これは赤い太字のテキストです</p>

HTMLタグのstyle属性に直接書く方法
特定の要素だけ一時的にスタイルを指定したいときに使用するが，構造であるHTMLドキュメントに直接デザインの指定をしてしまうので，多用するとメンテナンスが難しくなります
一時的にテストするとき以外は原則として使用しないこと

セレクタ(selector)とプロパティ(property)

セレクタ: 「どのHTML要素にスタイルを適用するか」を指定する部分
プロパティ: 「何をどうスタイルするか」の内容部分

h1 {
    color:#FF0000;
}

この例では，h1がセレクタ，colorがプロパティ，#FF0000がプロパティに対応するValue

2: 内部参照CSS

<!DOCTYPE html>
<html>
<head>
  <style>
    p {
      color: blue;
      font-size: 18px;
    }
  </style>
</head>
<body>
  <p>これは青いテキストです。</p>
</body>
</html>

HTMLの<head>内に<style>タグでCSSを書く方法
HTMLに直接書き込むスタイルなので，そのHTML1ページだけのスタイル指定(=使い回しができない)
一時的にテストするとき以外は原則として使用しないこと

3. 外部参照CSS

html file

<head>
    <link rel="stylesheet" href="styles.css" media="all">
</head>

style.css

p {
  color: green;
}

HTMLの中に直接スタイルを書くのではなく，別ファイル（.css）として分けて管理し参照するスタイル
複数ページに共通するデザインを一箇所で管理できるため，保守性や再利用性が高い
ブラウザがCSSファイルをキャッシュできるため，2回目以降の読み込みが速い
HTML（構造）とCSS（デザイン）を分離するのはベストプラクティスとされている

外部CSS参照の基本書式

引数	内容
rel属性	外部リソースとの関係性を指定．CSSを読み込む場合は `"stylesheet"`
href属性	読み込むCSSファイルのURLやパスを指定
media属性	スタイルを適用するメディアタイプを指定．通常は `"all"` や `"screen"`