CSSの勉強 3 : どこにCSSを書いておくか

- 5月 21, 2019

このブログ記事は個人的な勉強のメモ書き、覚え書き程度のものです。内容の正確性などあまり当てにならない面が多いので、ちゃんとしている情報を知りたい場合は他のサイトを探して下さい。

CSSをどこに記述しておけばよいか

CSSをただファイルに書いていっても、それだけではなにもならない。ブラウザの方にCSSを適用して表示させるには、HTMLファイルの方にCSS読み込みの設定を書いておく必要がある。

CSSを適用する3つの方法

CSSを読み込んで適用するのにはいくつか方法がある。以下、1つずつ取り上げていく。

CSSファイルに書いておく

CSSを書いて次のファイルとして保存する。

style.css

そして、それを適用するHTMLファイルの<head>タグ内に
<link href="style.css" rel="stylesheet" type="text/css"></link>
という記述を書いておく。ここではHTMLファイルとCSSファイル(style.css)は同じディレクトリに置いておく(パスは要確認)。
HTMLファイルをブラウザで開けば、CSSに書いたスタイルが適用される(はず)。

HTMLファイル内に<style>タグで内部スタイルシートとして記述する

こちらの方法はHTMLファイル内にCSSに関する記述を書いておくというもの。ファイルが1つで済むので管理が楽ですね、というわけでもなく、複数のHTMLファイルに1つのCSSファイルを適用するという管理には向かないと思われる。始めは楽だけど、拡張していくと後々めんどうになりそう。
方法としてはHTMLファイルの<head>タグ内に<style>タグを作り、その中にCSSに関する記述をする。

HTMLの各要素にStyleとして個別に適用する

この方法ではHTMLの各要素に対して以下のように個別にCSSを適用する。
<h1 style="color:blue;">タイトル</h1>
個々の要素に設定出来るためカスタマイズ性が高い。その反面、後から一括して設定を適用することには向かない。

まとめ

後々のことを考えると、1番始めのCSSファイルを別個に作って書いていくのがめんどうが少なくなりそう。2、3番目の方法もピンポイントで使うことを意識して使えば、それはそれで便利かなと。また、レンタルブログなど、CSSは使えるけれどCSSファイルを作ることが出来ないような場合では2、3番目の方法もまた必要になると思われる。

このブログを検索

ゆたりんブログ