ホームページマスターTOPページへ
初心者の為のホームページ作成支援サイト powerd by Google
HOME >@importで読み込む

@importでCSSファイルを読み込む

CSSファイルの読み込みは
<link rel="stylesheet" href="style.css" type="text/css"> 以外に @importでCSSファイルを読み込むこともできます。 style.cssという外部ファイルに記述されているCSSをHTMLファイルに 読み込みます。 @imoprtでCSSファイルを読み込む場合、 @import url("ファイル名"); をCSSの先頭に 記述する必要があります。

style.css

p{color:green;}

HTMLソース

<HTML>
<HEAD>
<TITLE>ホームページ</TITLE>
<style type="text/css">
<!--
@import url("style.css");
-->
</style>
</HEAD>
<BODY>
<p>緑色です。</p>
</BODY>
</HTML>

■ CSSファイルに別のCSSファイルを読み込む

@importでCSSファイルに別のCSSファイルを読み込むこともできます。 これにより複数のCSSファイルを基盤となるCSSファイルに呼び込めます。 下の例では 基盤となるstyle.cssに別のCSSファイルであるstyle2.cssを読み込みます。
style.css

p{color:green;}


style2.css

p{font-size:30px;}


これをstyle.cssに追加すると
style.css

@import url("style2.css");
p{color:green;}


HTMLソース

<HTML>
<HEAD>
<TITLE>ホームページ</TITLE>
<link rel="stylesheet" href="style.css" type="text/css">
</HEAD>
<BODY>
<p>文字の色が緑色で文字のサイズが30pxになりました。</p>
</BODY>
</HTML>

■ その他の項目

スタイルシートの記述方法
スタイルシートの記述場所
個別にCSSを指定する
複数のセレクタで指定
外部ファイルのコメント

スタイルシート一覧のページに行く


HOME

Copyright (C) 2003-2012 ホームページマスター All rights reserved.