CSSは書き方に違いがあるの？
CSSには「インラインスタイル」と「内部スタイルシート」と「外部スタイルシート」の書き方の違いがあります。
書き方・運営の仕方がが全く違うので、状況に合わせて使い分けた方がいいのでしょうか・・・？
一体どれを使えばいいのでしょうか、メリット・デメリットも含めて考えていきましょう。
インラインスタイルで変更してみる
インラインスタイルとは、style属性を使ってHTMLにCSSを追加する事ができる方法です。
個別要素に簡単にCSSを追加する事ができます。
インラインスタイルの基本的な書き方
<p style="color:#3498db">インラインスタイルで文字色を変えてみよう！</p>ブラウザ上での表示
HTMLのP要素に「style属性」を使って、直接書く事で文字色を変えてみました。
以下の様にP以外の要素にも書く事ができます。
<!-- p要素 -->
<p style="color:#3498db">インラインスタイルで文字色を変えてみよう！</p>
<!-- div要素 -->
<div style="width:100px">インラインスタイルで文字色を変えてみよう！</div>
<!-- span要素 -->
<p>インラインスタイルで<span style="color:#3498db">文字色</span>を変えてみよう！</p>内部スタイルシートで変更してみる
内部スタイルシートとは、HTMLファイルの＜head＞タグ内にCSSコードを埋め込む方法です。
内部スタイルシートの基本的な書き方
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>内部スタイルシート</title>
<style>
p {
color: #3498db;
}
</style>
</head>
<body>
<p>内部スタイルシートで文字色を変えてみよう！</p>
</body>
</html>ブラウザ上での表示
HTMLのhead内に＜style＞を使って＜p＞要素の色を変更しました。
外部スタイルシートで変更してみる
外部スタイルシートとは、CSSを別ファイルに記述しCSSファイルをHTMLにリンクして運営する方法です。
HTMLの記述例
<p>外部スタイルシートで文字色を変えてみよう！</p>外部スタイルシートの記述例
p{
color: #3498db;
}内部スタイルシートと似たような書き方になりますが、＜style＞で囲む必要はありません。
それぞれの利点と欠点
インラインスタイル
インラインスタイルの利点
- インラインスタイルを使った際の利点は、簡単に使える。
- HTMLに直書きできるのでその場に合わせて即座にスタイルを適用できる。
- 一部分のみ変更したい場合に即変更可能ですので便利。
など
インラインスタイルの欠点
- 一部分のみの利用になるので再利用性が非常に低く、インラインスタイルで同じコードを書くのは非常に効率が悪い。
- HTMLに直接書くのでHTMLとCSSが混在しコードが非常に読みづらくなる。
- 複雑なCSSを書くのが難しい。
- メンテナンスの点から考えても、複数サイトでのインラインスタイルの使用は推奨できない。
など
内部スタイルシート
内部スタイルシートの利点
- 管理が楽になる。
- 1ページ内に複数同じCSSを設定した際に修正が1度で済むなどメンテナンスが楽になる。
- 修正が簡単になる。
- HTMLに直接書かないのでコードが見やすい。
など
内部スタイルシートの欠点
- 設定しているページにしかCSSが反映しない。
- サイト全体の再利用性が低い。
- 1ページ毎の設定になるので、サイト全体の一貫性を保つのが難しい。
- 外部スタイルシートと比べると作業効率が非常に悪い。
など
外部スタイルシート
外部スタイルシートの利点
- スタイルの再利用性が最も高い。
- 外部ファイルにスタイルを書くので、コードが一切邪魔されない。
- 管理性が非常に高い。
- サイト全体の管理が用意になる。
など
外部スタイルシートの欠点
- 外部ファイルの為、読み込みが遅いとCSSに適応したページ表示が遅い場合がある。
- キャッシュが残りやすく、変更してもすぐに反映されない場合がある。
- 全サイトの管理ができる分、スタイルを管理しやすい様に構造を考えなければならない。
など
3つの書き方を見比べてみると、外部スタイルシートでの運営が一番サイト管理には向いていると考えられます。
インラインスタイルも内部スタイルシートも、書いた部分・書いたページにのみ適応になります。それではサイトのページ数が増えれば増える程統一性やサイト管理が難しくなります。
サイト運営には外部スタイルシートが一番適していると考えられます！
