外部ファイルによるスタイル適応について - 33歳主婦プログラマーを目指す

本日の教材動画はこちら

今日はいよいよ最後のスタイル適応方法である、「外部ファイルを読み込んでCSSを適応させる」を勉強していきたいと思います！

CSSファイルを用意し、それをページに読み込ませるにはLinkタグを使います。使い方はheadの中に＜link rel="stylesheet" type="text/css" href="外部ファイル名"＞を記載してあげるだけでOK。外部ファイル名は任意でいいが拡張子は .css となる。

外部ファイルを適応するために準備する物は、適応させたいページ（〇〇.html）とスタイルを書き込んだCSSファイル（〇〇.css）のみ。

中身の書き方は前回勉強したstyleタグと同じでOK！こんな感じで対応させたいセレクタとその中身（プロパティと値）を書いていく。

適応したいスタイルの内容を書いたら名前を付けて保存（拡張子は .css ）。場所は任意でOK。あとでリンクを貼る必要がある為自分の管理しやすいところでいいんじゃないでしょうか。

準備したスタイルを適応させたいページには、head内にLinkタグを書き込む。

hrefのリンク部分は相対パスと絶対パスによって違ってきます。今回私は適応ページと同フォルダにいれたので相対パスにしファイル名だけ記載しました。

適応させたいページに外部ファイルを読み込ませた結果が下記になります。

外部CSSファイル内にはもっとあれこれ書き込まないといけないのかな？と思っていたんですが、拍子抜けするくらい中身はシンプルだったためちょっと安心しました！

外部CSSは複数読み込ませたり、外部CSSに更に外部CSSを読み込ませたりといろいろできるようですが、おそらく私は1個しか管理できなさそうなので今日のお勉強は一旦これにて終了！

【参考サイト】