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

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

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

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

HTMLファイルを作る

<html>
 <head>
  <title>UXMILK TEST</title>
 </head>
 <body>
  <h1>テストページです〜</h1>
	<p>こんにちは</p>
 </body>
</html>

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

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

CSSファイルを作る

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

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

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

h1 {
	padding: .20em 0 .20em .70em;
	border-left: 8px solid red;
}

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

cssファイルを呼び出す

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

<link rel="stylesheet" type="text/css" href="test.css" media="all">

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

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

<html>
 <head>
 <title>UXMILK TEST</title>
 <link rel="stylesheet" type="text/css" href="test.css" media="all">
 </head>
 <body>
 <h1>テストページです〜</h1>
 <p>こんにちは</p>
 </body>
</html>

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

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

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


イベント