CSSスキル - 第1章 Lesson6

外部CSSファイルの作成と読み込み方法

   

テクノロジーとクリエイティブのプロを目指す人のためのオンラインスクール
月額2500円で500以上のレッスンが受けられます

このスキルのデータをダウンロード: Windows Mac

外部CSSファイルを作成し、HTMLに読み込ませる方法を初心者向けに解説しています。



この動画で学べること

・外部CSSを読み込ませる方法



外部CSSを読み込ませる方法

今までは、HTMLファイルに直接スタイルを書く方法を学んできましたが、
今回は、外部CSSを読み込ませる方法を見ていきたいと思います。
新しく開いたCSSファイルの1行目に


@charset "utf-8";



と記述します。
これは、CSSファイルに必ず必要になるものなので、1行目に必ず書くようにしてください。



前回書いたインラインCSSのコードをそのままスタイルシートにコピー&ペーストしましょう。
<style>タグはもう必要ないので削除しておきます。
また、HTMLのほうのインラインCSSも削除しておいてください。



では次に、HTMLにCSSを読み込むコードを書いていきましょう。
<head>の中に<link>タグを使って以下のように書きます。


<link type="text/css" href="style.css" media="all">



このコードを書かないと、いくらスタイルシートに書いていてもスタイルの変更はされないので、必ずHTMLにこのスタイルシートを読み込ませるコードを書いてください。
ここまでできたら 、
保存してブラウザで見てみます。
外部CSSが読み込まれてスタイルの変更ができていればOKです。