会員限定ブラウザで表示

外部CSSファイルで読み込み、ブラウザに反映

このステップでは、外部CSSのスタイルシートを読み込み、ブラウザに反映する方法について学んでいきます。前ステップで学んだCSSの基本構文を踏まえ、ブラウザでその表示を確認してみましょう。

新しいHTMLファイルを作成し、HTMLを記述しよう
Finderでフォルダを新規作成し、Visual Studio Codeを起動してください。
その後、新しいHTMLファイルを作成し、下記のHTMLを記述しておきましょう。
See the Pen 266_ブラウザで表示_001 by Yugo Harima (@yh-dezadezi) on CodePen.
HTMLを記述後、保存してブラウザで表示を確認しましょう。
新しい外部CSSファイルを作成しよう
HTMLファイルと同フォルダ内に新しいCSSファイルを作成しましょう。
外部CSSファイルを<link>タグで読み込ませよう
index.htmlを開き、<head>タグ内に<link>タグを記述して外部CSSを読み込ませます。
外部CSSファイルにスタイルを記述しよう
先ほど作成したCSSファイルに、下記のスタイルを記述しましょう。
See the Pen 266_ブラウザで表示_002 by Yugo Harima (@yh-dezadezi) on CodePen.
ブラウザで表示を確認する
記述したCSSがブラウザで反映されているか確認していきましょう。
下記のようにブラウザが表示されていれば完了です。