CSSを記述する専用のcssファイルを作成して、作成したHTMLファイルにcssファイルを読み込ませることでスタイルを適用していくことができます。
HTML文章にインラインで直接cssを記述するのでもなく、headやbodyにstyle要素を使用してcssを記述するのでもなく、cssをまとめて管理できる専用のCSSファイルを作成してHTMLファイルに読み込ませる方法を説明します。
HTMLにCSSを読み込ませるファイル作成
CSSを読み込むためのHTMLファイル作成と読み込ませるCSSファイルの作成から説明します。
初歩的な作業からの説明ですがHTMLファイルもCSSファイルも拡張子をつけ忘れないことがファイル作成のポイントです。
また、これから作成するHTMLファイルとCSSファイルは１つのフォルダに入れて管理するのでデスクトップあたりでフォルダを作成しておきます。
CSSファイルを作成
HTMLファイルに読み込むためのCSSファイルを作成します。
使用してるテキストエディタで新規ファイルを開いて、ファイル名を決めます。ファイル名の後ろの拡張子は必ず「.css」にして「ファイル名.css」と作成します。
またCSSファイル作成のときにテキストエディタで以下のようにbody要素が良いですが、背景色を指定するだけにして簡単なcssを記述しておきます。
body {
background: gray;
}
HTMLファイルでCSSファイルを読み込ませてから、問題なく読み込むことができているか確認用のcss記述なのでコピペして使ってください。
これでHTMLに読み込ませるCSSファイルを作成することができました。
CSSを読み込むHTMLファイルを作る
CSSファイルを作成した次は、作成したCSSファイルを読み込むHTMLファイルを作ります。
HTMLファイルの作り方もCSSファイルと同様に、使用してるテキストエディタで新規ファイルから作成します。
HTMLファイルの拡張子は「.html」です。「ファイル名.html」と作成します。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>css読み込みページ</title>
</head>
<body></body>
</html>
作成したHTMLファイルにはテキストエディタで上記コードのように簡単でいいのでHTML構造をマークアップしておきます。マークアップした要素でCSSファイルの読み込みが問題ないか確認するためです。
CSSファイルを読み込むHTMLファイルを作ることができたので、HTMLファイルにCSSファイルを読み込ませる準備は完成です。
HTMLファイルに外部cssとして読み込む
HTMLファイルにCSSファイルを読み込むということは、「cssを外部からHTMLファイルに読み込む」ということになります。
外部cssをHTMLファイルに読み込ませてHTMLページに適用するにはHTMLファイルと外部CSSファイルをHTMLファイル側で外部CSSファイルをリンクさせます。
CSSのファイルを外部に作成して読み込むと、style要素やインラインcssのように、要素ごとやHTMLファイルごとにcssを記述することなく、HTMLファイルに適用させたいcssの記述をまとめて管理しておくことができます。
外部CSSファイルの読み込ませ方
外部CSSファイルの読み込ませ方は、HTMLのlink要素を使用して、HTMLファイルの<head></head>の間で外部のCSSファイルを読み込ませます。
以下がlink要素の見本です。
<link rel="stylesheet" href="style.css">
<link>タグにrel属性とhref属性を記述して、rel属性の属性値に”stylesheet”と記述。href属性には外部のCSSファイルとして読み込ませたいCSSファイル名を拡張子付きで記述します。
<link>タグには終了タグは必要ありません。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>css読み込みページ</title>
<link rel="stylesheet" href="style-test.css">
</head>
<body></body>
</html>
link要素の見本を元に先ほど作成したHTMLファイルにCSSファイルを読み込ませてみます。上のコードように<head></head>の間にlink要素を記述します。
そしてlink要素の中では、htmlファイルでリンクするのが外部のstylesheetだと分かるように、rel属性で”stylesheet”を指定、herf属性には作成しておいた外部のstylesheetのファイル名「”style-test.css”」を記述して外部のCSSファイル先を指定しています。
HTMLファイルの<head></head>にCSSファイルをlink要素で読み込ませて、HTMLファイルをプレビューすると、CSSファイルに記述した確認用のbody背景色グレーのcssが適用されるのでcssファイルの読み込みが問題いことが確認できます。
読み込んだCSSファイルでcssの書き方
読み込ませたcssファイル内で実際のcssの書き方は、説明の必要がないかもしれませんが、インラインやstyle要素で書くことが多い場合は、少しcssの書き方が違うので説明します。
外部のCSSファイルでは、基本的にHTMLファイルでマークアップしてるタグやクラス名、id名をセレクタにして、波括弧の中でプロパティと値の指定をします。
セレクタ {
プロパティ: 値：
}
インラインcssならHTMLで直接マークアップしたタグの開始タグにcssを書くのでセレクタが必要ありませんが、外部cssの場合はHTMLファイルに記述しないので、「どの要素に適用するcssなのか」セレクタが必要です。
style属性で記述し、style要素にcssを記述するなら<style>タグが必要ですが、外部cssの場合は、「stylesheet(css専用ファイル)」なので<style></style>タグをマークアップする必要がありません。
書き方の違いは少しですが、CSSファイルで外部cssの書き方と他の書き方が混同しないように注意してください。
HTMLファイルにCSSファイルを読み込むパス
CSSファイルをHTMLファイルで読み込むときlink要素のhref属性に読み込ませるCSSファイルのパスを指定します。
このときファイルまでの経路を示すパス指定方法には、絶対パスと相対パスがありますが、絶対パスに比べて、現在いるフォルダからの経路で指定できる相対パスは記述が短くて済みます。
<link rel="stylesheet" href="style-test.css">
上のHTMLで読み込んでるCSSファイルの相対パスの場合は読み込ませたHTMLファイルとCSSファイルが同じ階層に配置しているパスです。
しかし、相対パスはCSSファイルの配置場所でパスが変化するので、読み込みできないとか、リンクできないという悩みが増えます。
サイトのフォルダ構成によってパス経路は違うので、2つの例だけですが紹介したいと思います。
一つ下の階層のCSSファイルのパス
たとえばルートフォルダの下の階層にHTMLファイル(index-test.html)とCSSファイル(style-test.css)が一つずつあって、作成したCSSファイルをCSSフォルダを作成した中に配置する場合。
CSSファイルは、作成したCSSフォルダの中に入ることで一つ下の階層に下がるので、HTMLファイルと同じ階層にあったときのhref=”style-test.css”ではcssが読み込めません。
階層を一つ下げたCSSファイルを相対パス指定する場合は
<link rel=”stylesheet” href=”./css/style-test.css”>
とパス指定します。
CSSファイルを読み込むHTMLファイルから、読み込ませるCSSファイルまでのファイル経路にしなければいけません。
cssフォルダを作成して一つ下の階層に落ちたcssファイルまでの経路には、一つ下に下がった意味を持つ「./」と、下がった後の通過点にあるcssフォルダ名「./css/」を加えて道を作り、cssフォルダの中にある「./css/style-test.css」で相対パス指定になるのですね。
一つ上の階層のCSSファイルのパス
もう一つは、ルートフォルダの下に、HTMLファイルもCSSファイルも別々にフォルダ分けしている場合があるとします。
このようなフォルダ構成の場合、CSSファイルを読み込ませるHTMLファイルからみて、一つ上の階層を辿った経路の相対パスになります。
一つ上の階層を表す../を記述してからCSSフォルダに上がり、CSSフォルダを経由してcssファイルへとパスを繋ぎます。
<link rel=”stylesheet” href=”../css/style-test.css”>
まとめ
HTMLファイルにCSSファイルを読み込ませる方法で難しく思う作業は、HTMLファイルに読み込ませるCSSファイルまでの相対パス指定する部分だと思います。
私の場合、どうしても相対パスが通らないときは、手当たり次第指定して「なるほど、このフォルダ構成の場合はこうなるんだ」と経験パターンで覚えるようにしています。
相対パスの指定以外では、HTMLのlinkタグを使用するというのを覚えておけばいいので簡単かと思うので、あとは色々な読み込む階層パターンの経験を増やすことで理解を深めてみてください。
