CSSの書くところは大きく分けて３つある。
インラインで書く
HTMLファイルに直接記述する。
インラインで書く場合、なるべく「head」内にスタイルを記述。
「head」内に書かなくてもスタイリングできるけど、コードが読み辛くなるのでなるべくね。
インラインの良い所は、ページを読み込む時に別ファイルを読み込まないので表示速度が速いと言われている。
インラインの悪い所は、ページが複数あるサイトの場合メンテナンスがし辛くなる。
<head>
<style>
p {
font-size: 24px;
color: gray;
}
</style>
</head>
<body>
<p>テキスト</p>
</body>
HTMLタグに直接書く
HTMLファイルに直接記述する。
タグに直接書く場合、タグの中に「style」で記述する必要がある。
ウェブの標準化を目指す団体のバリデーションサービスでは、タグに直接スタイルを記述することを認めていない。
タグに直接書く良い所は、・・・あまりない。
悪い所は、HTMLコードが長くなるのでメンテナンスが手間になり、HTMLを読みづらくさせる。
さらにタグに直接スタイルを書くと優先順位がかなり上になるため、普通にインラインや別ファイルでスタイリングしても、タグに直接書いたCSSの効き目には勝てない。
<p style="font-size: 24px;color: gray;"> テキスト </p>
別ファイルに書く
HTMLファイルとCSSファイルを別に用意する。
最も一般的なやり方で、管理しやすい方法。
別ファイルにCSSを記述する場合、「head」内にリンクでCSSファイル（style.css）を呼び出す。
悪い所は、インラインで記述するより読み込み速度が遅い（コンマ何秒の遅延）と言われているが体感で遅いと感じることはほとんどない。
良い所は、HTMLファイルとは別になるため、どのページからも呼び出せて、複数ページのスタイルも記述することができるためメンテナンス性に優れているし最も一般的な方法なので、
CSSを書く時はどんな場合であっても別ファイルに記述した方がイイと思います。
// HTMLファイル <head> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <p>テキスト</p> </body>
// CSSファイル（style.css）
p {
font-size: 24px;
color: gray;
}
まとめ
CSSファイルを書く場合は、どんなことがあっても別ファイルに書いた方が良いです！
wordpressで作っているこのブログや他のサイトのソースを見ると、インラインで書いてありますが、やっぱり見辛いですね。
コメント