前の記事では、
CSSが Webページの見た目を担当する言語 であり、
HTMLとは役割が分かれていることを学びました。
次に出てくる疑問は、ほぼ確実にこれです。
・CSSはどこに書けばいいのか
・HTMLの中？別ファイル？
・書き方が複数あって混乱する
CSSには、
大きく3つの書き方があります。
この記事では、
それぞれの書き方の特徴と使い分けを整理し、
「実務ではどれを使うべきか」まで明確にします。
この記事で学べること
・CSSの3つの書き方
・それぞれの特徴と違い
・メリット・デメリット
・実務での正しい選択基準
CSSの書き方は3種類ある
CSSには、次の3つの書き方があります。
・inline（インラインCSS）
・internal（内部CSS）
・external（外部CSS）
どれもCSSですが、
書く場所が違う という点が最大の違いです。
inline CSSとは何か
inline CSSは、
HTMLタグに直接CSSを書く方法です。
特徴としては、
・その要素だけに適用される
・HTMLとCSSが混ざる
・最も優先度が高い
という点があります。
inline CSSの特徴
inline CSSは、
・一時的な確認
・ごく小さな修正
には使えますが、
基本的には 常用しません。
理由は、
HTMLが非常に読みにくくなり、
管理が難しくなるためです。
internal CSSとは何か
internal CSSは、
HTMLファイル内にまとめてCSSを書く方法です。
HTMLの head 内に、
スタイルを記述します。
internal CSSの特徴
internal CSSの特徴は次のとおりです。
・1ページ内で完結する
・ファイルが増えない
・小規模なページに向いている
学習初期や、
1ページだけの簡単な検証では
使われることがあります。
external CSSとは何か
external CSSは、
CSSを別ファイルに分けて管理する方法です。
HTMLからは、
そのCSSファイルを読み込みます。
external CSSの特徴
external CSSには、
最も多くのメリットがあります。
・HTMLとCSSを完全に分離できる
・複数ページで使い回せる
・管理・保守がしやすい
そのため、
実務では基本的にこの方法が使われます。
3つの書き方の比較
ここで、
それぞれの違いを整理します。
・inline
最優先で適用される
管理しにくい
・internal
1ページ完結
規模が大きくなると不向き
・external
再利用可能
実務の標準
実務で使うのはどれか
結論は明確です。
実務では external CSS を使います。
inline や internal は、
理由がある場合にだけ使うものです。
初心者のうちから、
external CSSを前提に学習することで、
後から困ることがなくなります。
CSSの適用順序を知っておこう
CSSには、
どのスタイルが優先されるか
というルールがあります。
基本的な考え方は次のとおりです。
・後から指定されたものが優先される
・より具体的な指定が優先される
・inline が最も強い
この「優先順位」の理解は、
次の記事以降で詳しく扱います。
初心者がやりがちなミス
CSSの書き方で、
よくあるミスを整理します。
・どこに書いたCSSか分からなくなる
・inlineとexternalが混在する
・なぜ効いているか説明できない
これらを防ぐためにも、
CSSは1か所にまとめる
という意識が重要です。
学習段階でのおすすめ方針
学習中は、
次の方針をおすすめします。
・CSSは基本 external に書く
・1つのCSSファイルで管理する
・書いた場所を意識する
この習慣が、
実務レベルへの近道になります。
まとめ
CSSには、
3つの書き方があります。
・inline：一時的・例外的
・internal：小規模向け
・external：実務の標準
最初から
external CSSを前提に学習すること
が、最も効率的な進め方です。
次は、
CSSを書くうえで最重要とも言える
セレクタの考え方 に進みます。
次に読むべき記事
▶ 次の記事
4-3 CSSセレクタの基本（class / id / 要素）
▶ 関連記事
4-1 CSSとは何か｜HTMLとCSSの役割分担
コメント