HTMLにCSSを組み込む
HTMLにCSSを組み込む方法は、大きくわけて３つあります。
使いどころやメンテナンス性が異なるので、それらの特徴を理解しよう。
３つの組み込み方
リンク
『リンク』とは、CSSをHTMLとは別の外部ファイルとして作成し、HTMLファイル内からlink要素で参照する方法です。
CSSをファイルとして外部に置くことで、複数のHTMLに対して同じCSSを適用することができます。
この方法では、HTMLのhead要素に、
「<link rel=”stylesheet”href=”style.css”type=”text/css”>」
のように記述します。
エンベット
『エンベット』とは、HTMLの中に直接CSSを記述する方法です。
head要素内にstyle要素でCSSを指定します。
「<style> ～ </style>」
のように記述し、その中でCSSの指定を行います。
インライン
『インライン』もHTMLの中に直接CSSを記述する方法ですが、こちらは要素ごとにstyle属性でCSSを指定します。
body要素の全てのタグに対して使用できます。
例えば、ある段落の文字色をピンポイントで赤にする場合、
「<p style=”color:#ff0000;”> ～ </p>」
と記述します。
CSS適用方法の選択
link要素で指定する方法
CSSの組み込みは、link要素を使って外部から読み込むのが一般的です。
これは、ページを追加したり、Webサイト全体に共通のスタイルを適用させる場合に、
外部CSSだけを編集すればいいからです。
style要素で指定する方法
style要素で指定すると、そのWebページにだけ適用されます。
これは、各ページごとにCSSを記述しているため、ページ数が多くなるとメンテナス効率は低下します。
style属性で指定
style属性で指定したスタイルは、link要素を使って読み込んだCSSよりも優先されます。
しかし、これはソースコードが複雑になり、スタイル管理も大変になります。
まとめ
- CSSは、「リンク」、「エンベット」、「インライン」で適用
- style属性は優先してスタイルをつけたい場合に使う
- link要素でCSSを適用するのが一般的
