スタイルシートの位置

style 要素

いままでどおりheaderの中のstyle要素(styleタグで囲まれた部分)の中に書く方法

<style type="text/css">
 h1 {color:blue; }
 h2 {color:green;  background-color:palegreen; }
 p  {color:teal; }
 body {background-color:ivory; }
</style>

外部に用意された CSS ファイル

htmlとは別のファイルにスタイルを書いて保存し、htmlファイルにそのファイルを指定する方法。

外部のファイルにはスタイルの指定だけを書きます。たとえば、

 h1 {color:blue; }
 h2 {color:green;  background-color:palegreen; }
 p  {color:teal; }
 body {background-color:ivory; }

htmlファイルにこれを使うことを示すには、head要素の中に次のような記述をする。URLは別ファイルの場所を示す。

<link rel="stylesheet" type="text/css" href="URL">

たとえば、

スタイルのファイルがkihon.cssという名前で、使用するhtmlファイルと同じ場所にある場合は、URLは次のように指定することになります。

<link rel="stylesheet" type="text/css" href="kihon.css">

複数のhtmlファイルに対して共通のデザインを施す場合に便利です。

別ファイルは複数あってもかまいません。そのときは、linkの行を増やせばいいのです。

style 属性

効率の悪い方法。おすすめしないが、一時的に特定の箇所にだけスタイルを適用させる場合に簡便な方法。

開始タグの中に属性として指定する方法です。

<p style="color:red">

この属性を書いたタグの内容にだけ効果がでます。

3つの方法の混在と優先度

まず、別ファイルを指定して、その後にstyle要素で付け加えや訂正をするというのが普通です。

相反しない指定ならば両方有効になります。ぶつかるような指定をした場合は、基本的に後から読み込むものが有効になります。

たとえば、別ファイルで

 h1 {color:blue; }
 h2 {color:green;}
 p  {color:navy; }

その後のstyle要素で、

<style type="text/css">
 h1 {color:#006666; }
 h2 {background-color:#ccffcc; }
 span.chuui  {color:red; }
</style>

とすると、結果としてこのような指定したことになります。

 h1 {color:#006666; }
 h2 {color:green; background-color:#ccffcc;}
 p  {color:navy; }
 span.chuui  {color:red; }

課題 gaibu.html, gaibu.css

(1)次のような内容のファイルを作り gaibu.html という名前で保存する。

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>外部スタイルシート</title>
</head>

<body>
<p><a href="index.html">もくじ</a></p>
<h1>外部スタイルシート</h1>
<h2>gaibu.htmlファイルを作成</h2>
<p>h1, h2, p で構成される内容にする。</p>
<p>head部に、 link rel="stylesheet" の部分を書き加える。</p>
<p>href="URL" のところは、href="gaibu.css" する。</p>
<h2>index.htmlからのリンクを作ってgaibu.htmlを表示</h2>
<p>黒い文字だけのページであることを確認</p>
<h2>gaibu.cssファイル作成</h2>
<p>次のような内容のファイルを作り gaibu.css という名前で gaibu.html と同じ場所に保存する</p>
<p>
h1 {color:#0099ff; }<br>
h2 {color:#ffffff;background-color:#0000ff;}<br>
p  {color:#000099; }<br>
</p>
<h2>もう一度gaibu.htmlを表示(再読込)</h2>
<p>スタイルシートが反映されることを確認</p>

</body>

</html>

(2)head部に、 link rel="stylesheet" の部分を書き加える。

<link rel="stylesheet" type="text/css" href="URL">

(3)href="URL" のところは、href="gaibu.css" する。

(4)ブラウザでgaibu.htmlを表示し、黒い文字だけのページであることを確認する。

(5)次のような内容のファイルを作り gaibu.css という名前で gaibu.html と同じ場所に保存する

h1 {color:#0099ff; }
h2 {color:#ffffff;background-color:#0000ff;}
p  {color:#000099; }

(6)もう一度gaibu.htmlを表示(再読込)し、スタイルシートが反映されることを確認する。

(7)index.htmlからのリンクを作ってgaibu.htmlのリンクは「外部1」とすること。

(8)読み取り許可を与え、課題チェックのリンクから見えることを確認すること。

chmod go+r public_html/*

(9)余裕があればgaibu.cssを使う、もう一つのgaibu2.htmlを作ってみなさい。

(10)index.htmlからのgaibu2.htmlのリンクは「外部2」とすること。

(11)読み取り許可を与え、課題チェックのリンクから見えることを確認すること。