外部のCSSファイルを読み込む方法

CSSを記述する時に、記述する場所は大きく分けて2つあります。HTMLと同じファイル内に書き込む方法と、別のファイルに記述したものをHTML内で呼び出して適用する方法です。

CSSの記述の量が増えるとコードがややこしくなってしまいますし、外部ファイルにすることで別のHTMLファイルからも簡単に利用することができます。

とても簡単に出来るので、必ず覚えておくようにしましょう。今回は外部ファイルのスタイルシートを呼び出す方法をご紹介します。

HTMLファイルを作る

とりあえず、HTMLファイルを作ります。内容はこんな感じです。

スクリーンショット 2016-03-01 14.04.31このままだと表示はこの様になっています。

CSSファイルを作る

次に、HTMLファイルとは別のファイルにcssを記述して.cssで保存します。今回はtest.cssで保存しました。

スクリーンショット 2016-03-01 14.11.32

この様になりました。cssのファイルには、見出しをデザインする記述をしてみます。

これで準備は完了です。後は、htmlファイルからスタイルシートを呼び出すだけです。

cssファイルを呼び出す

HMTLファイル内に、cssファイルを呼び出す記述を追加します。

この記述を<head></head>内に追加します。

href=“test.css”の箇所に、cssファイルの場所と名前を記述します、今回は同じファイル内に作成したので名前だけで大丈夫です。

追加するとこうなります。表示を確認してみましょう。

スクリーンショット 2016-03-01 14.29.39

外部ファイルで記述したcssが適用されました、呼び出す方法は、以上の記述を追加するだけです。大量のページを作る際には不可欠なので、覚えておきましょう。


Welcome to UX MILK

UX MILKはより良いサービスやプロダクトを作りたい人のためのメディアです。

このサイトについて