トップページ > サイト作成 > スタイルシート > ウェブサイトのスタイルシート（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 の基本的な使い方と実際に指定するプロパティの一覧を紹介する。
作業効率アップとアクセス数アップにつながるウェブサイト作成のソフトウェア
ウェブサイト作成
ウェブサイト（ホームページ）は専用のソフトウェアを利用しなくても作成することができるが、作成ソフトを利用することで作成に必要な時間が大幅に短縮されるとともに検索サイトからのアクセス数アップにもつながる点について紹介する。
検索結果で自身のサイトが上位に表示されやすくする SEO の方法
ウェブサイト作成
インターネット上に公開した自身のウェブサイトやブログへアクセスしてもらうためには Google や bing など検索サイトから誘導する手段があり、検索結果の上位に表示されるとアクセス数が増えるため、その上位に表示させるための施策（SEO）の方法について紹介する。
スマホサイトで用いられるハンバーガーメニューの作成方法とサンプル
ウェブサイト作成
スマートフォンやタブレットなど小型の携帯端末向けのウェブサイトは画面を縦向きで利用されることが多いため、サイトのデザインと操作性も縦方向で利用されることを想定して横方向（水平方向）に画像を並べたり配置することを避けるが、縦にスクロールせずとも横方向に展開するハンバーガーメニューの作成方法について紹介する。
スマホやタブレット用ウェブサイトの横幅の比較と CSS でのレイアウト切り替え方法
ウェブサイト作成
ウェブサイトやアプリを作成する際にパソコンだけでなくスマートフォンやタブレットを利用する人ではどのように画面に表示されるか配慮する必要があり、利用される端末ごとにディスプレイのサイズが異なるため各端末の横幅の比較と CSS で端末ごとにレイアウトを切り替える方法について紹介する。
