トップページ > サイト作成 > スタイルシート > ウェブサイトのスタイルシート（CSS）の 3 つの書き方
ウェブサイトのスタイルシート（CSS）の 3 つの書き方
[初回公開] 2013年05月22日
ウェブサイトで利用するスタイルシート（CSS）には 1 つのファイルに CSS まとめたり、ページごとや HTML のタグごとに記載するといった 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}:{値};" >
関連記事
スタイルシート（CSS）で多用しないが知っていると便利なプロパティ
ウェブサイト作成
スタイルシート（CSS）はウェブサイトの装飾やレイアウトの位置付けに利用されるプログラムの一種で、その CSS でデザイン可能な中から多用されないが知っておくと利用する場面があるかもしれないプロパティを紹介する。
ウェブサイト作成
スタイルシート（CSS）はウェブサイトの装飾やレイアウトに利用されるプログラムの一種で、CSS の基本的な使い方と実際に指定するプロパティの一覧を紹介する。
ウェブサイト作成
スタイルシート（CSS）はウェブサイトの装飾やレイアウトの位置付けに利用されるプログラムの一種で、その CSS でデザイン可能な中から余白や回り込みなどレイアウト設定する使い方と実際に指定するプロパティを紹介する。
ウェブサイト作成
スタイルシート（CSS）はウェブサイトの装飾やレイアウトの位置付けに利用されるプログラムの一種で、その CSS でデザイン可能な中からリストタグの形式や配置を設定する使い方と実際に指定するプロパティを紹介する。
ウェブサイト作成
スタイルシート（CSS）はウェブサイトの装飾やレイアウトの位置付けに利用されるプログラムの一種で、その CSS でデザイン可能な中から枠線の色や太さを設定する使い方と実際に指定するプロパティを紹介する。
