トップページ > サイト作成 > スタイルシート > ウェブサイトのスタイルシート(CSS)の 3 つの書き方

ウェブサイトのスタイルシート(CSS)の 3 つの書き方


[初回公開] 2013年05月22日

ウェブサイトで利用するスタイルシート(CSS)には 1 つのファイルに CSS まとめたり、ページごとや HTML のタグごとに記載するといった 3 つの書き方がありそれらについて解説する。

ウェブサイトのスタイルシート(CSS)の 3 つの書き方

1. CSS を外部ファイルにまとめる書き方

ウェブサイトにスタイルシート(CSS)を書く方法の 1 つに、CSS だけを記載したファイルを HTML ファイルとは別に用意して、HTML ファイルはその CSS ファイルを読み込む方法がある。
まず、CSS のファイルには下記のようにタグまたは id、class 指定で記述して拡張子 .css にして保存する。

body {}
#id_01 {}
.class_01 {}

次に HTML ファイルの head タグ内に次のように CSS ファイルを読み込む設定を行う。

<link href="{スタイルシートへのパス}"; rel="stylesheet" type="text/css">

2. CSS をページごとにまとめる書き方

ウェブサイトにスタイルシート(CSS)を書く方法の 1 つに、個々のウェブページとなる HTML ファイルに CSS をまとめて各方法がある。
HTML ファイル内にまとめて記載する場合は下記のように STYLE タグを用いて記載する。

<style type="text/css"> 
body {}
#id_01 {}
class_01 {}
</style>

3. CSS を HTML タグごとに指定する書き方

ウェブサイトにスタイルシート(CSS)を書く方法の 1 つに、HTML タグごとに CSS を指定して方法がある。
例えば img タグに CSS を記載する場合は stype オプションを用いて記載する。
2 つ以上のプロパティを指定したい場合は 1 つのプロパティごとに ;(セミコロン)を付けて連続して記載する。

<img src="{画像のパス}" style="{プロパティ 01}:{値}; {プロパティ 02}:{値};" >

関連記事