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">

CSS 外部ファイルの例

具体的に、外部スタイルシートを使用する例を2つ示します。この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>&lt;h1&gt; 見出し</h1>
<h2>&lt;h2&gt; 見出し</h2>
<p>
&lt;p&gt; で書かれた段落。
CSS 外部ファイルは、ext_css.css 。
</p>
<!-- ここはコメントです。Web ブラウザには表示されません。-->
<ol>
<li>&lt;ol&gt; 箇条書き1</li>
<li>&lt;ol&gt; 箇条書き2</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;
        }

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   /* 追加 */
        }

PR amazon

author

サイト管理人:パワーデジット
管理人への連絡フォーム

ロリポップ! レンタルサーバーは、高機能なのに236円/月~
月額125円からの「さくらのレンタルサーバ
レンタルサーバー

スポンサード リンク

このページは 

トップページ > CSS > CSS 外部フィル