CSS を外部ファイルに記述
外部スタイルシートを使ってスタイルシートを設定すと、複数のページで共用できます。また、外部スタイルシートを使っている HTML なら、HTLM のソースを修正せずにレイアウトも含むスタイルの変更が一度にできます。 「ext_css.css」という外部ファイルを読み込む場合は、<head>～</head> 内 で次のように記述します。スタイルシートは複数呼んでも大丈夫ですので、「ext_css2.css」というファイルも同時に呼びたい場合は、次のように複数行記述します。
<link rel="stylesheet" href="ext_css.css" type="text/css">
<link rel="stylesheet" href="ext_css2.css" type="text/css">
<link rel="stylesheet" href="ext_css2.css" type="text/css">
CSS 外部ファイルの例
具体的に、外部スタイルシートを使用する例を２つ示します。この2つの例は、読み込んでいる外部 CSS ファイル名を除いて HTLM のソースコードは全く同じです。CSS を変えるだけで、デザインやレイアウトを変えることが出来ます。
クリックして、ご確認ください。
サンプル： CSS 外部ファイルのサンプル
サンプル： CSS 外部ファイルのサンプル2
参考までに、ソースコードは次の通りです。
CSS 外部ファイルの HTLM ソースコード
<html>
<head>
<title>CSS 外部ファイルのサンプル</title>
<link rel="stylesheet" href="ext_css.css" type="text/css">
</head>
<body>
<div>
<h1><h1> 見出し</h1>
<h2><h2> 見出し</h2>
<p>
<p> で書かれた段落。
CSS 外部ファイルは、ext_css.css 。
</p>
<!-- ここはコメントです。Web ブラウザには表示されません。-->
<ol>
<li><ol> 箇条書き１</li>
<li><ol> 箇条書き２</li>
</ol>
</div>
</body>
</html>
<head>
<title>CSS 外部ファイルのサンプル</title>
<link rel="stylesheet" href="ext_css.css" type="text/css">
</head>
<body>
<div>
<h1><h1> 見出し</h1>
<h2><h2> 見出し</h2>
<p>
<p> で書かれた段落。
CSS 外部ファイルは、ext_css.css 。
</p>
<!-- ここはコメントです。Web ブラウザには表示されません。-->
<ol>
<li><ol> 箇条書き１</li>
<li><ol> 箇条書き２</li>
</ol>
</div>
</body>
</html>
ext_css.css のソースコード
/* CSS サンプル */
div {
background-color : pink ;
width : 500px ;
height :300px ;
}
h1 {
color : green
}
p {
background-color : yellow ;
width : 200px;
}
ol {
background-color : lime ;
width : 200px;
}
div {
background-color : pink ;
width : 500px ;
height :300px ;
}
h1 {
color : green
}
p {
background-color : yellow ;
width : 200px;
}
ol {
background-color : lime ;
width : 200px;
}
ext_css2.css のソースコード
/* CSS サンプル 2 */
div {
background-color : pink ;
width : 500px ;
height :300px ;
}
h1 {
color : blue /* 変更 */
}
p {
background-color : yellow ;
width : 200px;
float : left /* 追加 */
}
ol {
background-color : lime ;
width : 200px;
float : right /* 追加 */
}
div {
background-color : pink ;
width : 500px ;
height :300px ;
}
h1 {
color : blue /* 変更 */
}
p {
background-color : yellow ;
width : 200px;
float : left /* 追加 */
}
ol {
background-color : lime ;
width : 200px;
float : right /* 追加 */
}
レンタルサーバーは、高機能なのに236円/月～
