外部ファイルCSSの書き方

外部ファイルのCSSを設定するHTMLコードの記述です。

HTMLが文字を書く機能とするなら、CSSはデザインをする機能といえます。CSSとはCascadingStyleSheetsの略で、背景や、文字の色など様々なデザインをすることができます。

<link>

外部ファイルにあるCSSをHTMLで読み込むには<head>～</head>内に<link>を使って関係を定義していきます。以下がそれぞれの要素と属性、CSSプロパティの解説です。

要素	解説
<link>	指定した外部ファイルとの関係を定義

下がcssを設定したhtmlの例です。

cssフォルダtest.cssを指定

<html>
<head>
<link rel="stylesheet" type="text/css" href="css/test.css">
</head>
<body>
<p class="bg-red">文字色、背景色、余白を変更。</p>
</body>
</html>

下準備としてcssという名前のフォルダーを作り、その中にtest.cssを作ります。CSSを作るには、まずメモ帳を立ち上げ、CSSテキストを入力します。拡張子をcssにすることを忘れないようにしましょう。

メモ帳のままだと、CSSだとと表示されます。
(OS:Windows7 中アイコンの場合)

今回はp要素の背景色と文字色、内側の余白を設定してあります。

test.css

@charset "utf-8";

p.bg-red {
 color: #ffffff;
 background-color: #ff0000;
 padding: 5px;
}

ブラウザ表示例

文字色、背景色、余白を変更。