CSSを記述する時に、記述する場所は大きく分けて２つあります。HTMLと同じファイル内に書き込む方法と、別のファイルに記述したものをHTML内で呼び出して適用する方法です。
CSSの記述の量が増えるとコードがややこしくなってしまいますし、外部ファイルにすることで別のHTMLファイルからも簡単に利用することができます。
とても簡単に出来るので、必ず覚えておくようにしましょう。今回は外部ファイルのスタイルシートを呼び出す方法をご紹介します。
HTMLファイルを作る
|
1 2 3 4 5 6 7 8 9 |
<html> <head> <title>UXMILK TEST</title> </head> <body> <h1>テストページです〜</h1> <p>こんにちは</p> </body> </html> |
とりあえず、HTMLファイルを作ります。内容はこんな感じです。
このままだと表示はこの様になっています。
CSSファイルを作る
次に、HTMLファイルとは別のファイルにcssを記述して.cssで保存します。今回はtest.cssで保存しました。
この様になりました。cssのファイルには、見出しをデザインする記述をしてみます。
|
1 2 3 4 |
h1 { padding: .20em 0 .20em .70em; border-left: 8px solid red; } |
これで準備は完了です。後は、htmlファイルからスタイルシートを呼び出すだけです。
cssファイルを呼び出す
HMTLファイル内に、cssファイルを呼び出す記述を追加します。
|
1 |
<link rel="stylesheet" type="text/css" href="test.css" media="all"> |
この記述を<head></head>内に追加します。
href=“test.css”の箇所に、cssファイルの場所と名前を記述します、今回は同じファイル内に作成したので名前だけで大丈夫です。
|
1 2 3 4 5 6 7 8 9 10 |
<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> |
追加するとこうなります。表示を確認してみましょう。
外部ファイルで記述したcssが適用されました、呼び出す方法は、以上の記述を追加するだけです。大量のページを作る際には不可欠なので、覚えておきましょう。
