CSSの書き方はいくつかあります。
ここではインライン（HTMLのタグの中）に書く方法を紹介したいと思います。
【CSS・インライン】インラインへの書き方
<p style="font-size: 50px;">おんどりゃぁぁぁぁ！</p>HTMLタグの中にstyle=" "と書いてCSSを記述します。
【CSS・インライン】インラインへの書き方のメリット
インラインへCSSを書く方法は最優先で適用されます。
またHTMLに直接書き込んでいるため、どの部分にスタイルが適用されているのか判別がしやすいです。
【CSS・インライン】インラインへの書き方の問題点
- 記述箇所がバラバラなので、メンテナンス性が悪い
- コードが読みにくくなるので、長いCSSを書くわけにいかない
- そのHTMLにしかCSSは適用されないので不便
上記はCSSのインラインへの書き方の問題点です。
インラインへの書き方は優先順位が高いですし「どこにCSSが適用されてるのか？」スグに判別がつくので便利です。
一方で長いCSSを書くとなると、逆にコードが読みにくくなります。1ページ全部、まるまるインラインへCSSを書いて適用させようと思うと、メンテナンスする時も大変になります。
なので、基本的にインラインへCSSを書くのは、開発段階でちょっとした動作確認のために利用するのがベストでしょう。
【CSS・インライン】その他のCSSの書き方
インラインへ書く以外のCSSの書き方を紹介します。
style要素内に書く方法
<head>
<meta charset=”utf-8″>
<title>たこ焼食いたい！</title>
<style>
p{
font-size: 50px;
}
</style>
</head>
<body>
<p>おんどりゃぁぁぁぁ！</p>
</body>HTML内ですが、まとめてCSSを書く方法です。
<head>タグの間に書きますが、この方法だと長いCSSを書いても<body>内のHTMLから分離されていため、HTMLが汚くならずに済みます。
<body>内のHTMLと分離しているとはいえ、1枚のHTMLでまとめてコードを確認できるので、長いCSSを書いて動作を確認する時には便利です。
外部ファイルに書く方法
<head>
<meta charset=”utf-8″>
<title>たこ焼食いたい！</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<p>おんどりゃぁぁぁぁ！</p>
</body>p{
font-size: 50px;
}HTMLとCSSのファイルを完全に分離して書く方法です。
style.cssといったファイルを作り、<link>タグのrel属性とhref属性を利用して外部ファイルであるCSSを読み込みます。
こちらの方法は<link>タグでCSSを読み込む限り、ひとつのCSSファイルで複数枚のHTMLにCSSを適用させることができます。
インラインへ書く方法やstyle要素内に書く方法と違い、いちいちHTMLファイルを開いて記述する必要はありません。
CSSファイルだけを見てコードーを変更したり追加すれば良いので、非常にメンテナンス性が高いです。
まとめ
以上、CSSをインラインへ書く方法を紹介してみました。
ほとんどのWebサイトでは、外部ファイルからCSSを読み込んでいるので、基本的にはHTMLファイルとCSSは分離してコードは書くべきでしょう。
しかし、インラインにCSSを書くと「どこのどの部分にCSSが適用されているのか？」分かりやすいので、複雑なコードを書くときなど動作確認のためには、インラインへCSSを書くのは悪くありません。
