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>

この記述の場合、その要素にのみスタイルが反映されます。