CSSの設定方法
CSSを設定する方法にはいくつかあります。
外部ファイルで管理する
まずは、HTMLファイルと別にCSSファイルを作成し、デザインに関する記述をCSSファイルで管理するというやり方です。
サイトデザインの一括管理が容易になるので、特に複数ページのデザインを一度に管理したい場合は、この方法がメンテナンス性が高いでしょう。
設定方法
外部ファイルで設定する場合は、HTMLの<head>～</head>の中に、どのCSSファイルを読み込むか記述します。
▼記述例
一つのHTMLに対して、複数のCSSファイルを読み込むことも可能です。
その場合は、読み込むCSSファイル毎にタグを記述します。
▼記述例
<link rel="stylesheet" type="text/css" href="example.css">
<link rel="stylesheet" type="text/css" href="example2.css">
ページ内のパーツ毎にCSSファイルを分割して管理をしたい時に効率的な方法です。
HTMLページ内にまとめて記述する
CSSはHTML内にまとめて記述する方法もあります。
その時は<head></head>内に以下のように記述をします。
▼記述例
<style type="text/css">
p{color:#ffffff;
}
</style>
この方法の場合、ページごとの設定となるので、複数ページに記述している場合は、それぞれで設定をする必要があります。
要素に直接記述する
HTML内の要素に対して、直接CSSを記述する方法もあります。
その場合は、要素の開始タグの中に以下のように記述をします。
▼記述例
<h1 style="color: #ff0000;">サンプル</h1>
<p style="color: #808080;">サンプルテキスト</p>
この記述の場合、その要素にのみスタイルが反映されます。