WebプログラミングならR-izm

サイトマップ 最初に

CSSの書方

CSSの書き方は主に3つあります。
HTMLファイルと同じ場所に書く方法と外部でCSSファイルを読み込ませる方法です。
書き方の説明はしますが、基本的には後者である外部でCSSファイルを読む方法 で書くようにしましょう。
そうすることで、HTMLファイルの量が少なくすみ、コードも把握しやすいです。

HTMLに直接記入する方法

本内容を内部スタイルシートといいます。
HTMLファイルのheadタグ内に以下のように記入します。
<head>
<title>CSSタイトル</title>
<style type="text/css">
<!--
.style1 {color: #FF00FF}
-->
</style>
</head>
上記のように<head>タグ内にCSSのデザインを直接記述します。 HTMLファイル一つで収まりますが、コードが増えればファイルが重くなります。

外部ファイルとして読み込む方法

本内容を外部スタイルシートといいます。
HTMLファイルのheadタグ内に以下のように記入します。
<head>
<title>CSSタイトル</title>
<link rel="stylesheet" href="ファイル名.css" type="text/css" />
</head>
同じフォルダ(ディレクトリ)にある「ファイル名.css」が読み込まれます。
CSSが書いてある内容がHTMLのデザインに適用されます。
CSSを外部ファイルにまとめておく方が、ページ数の多いサイトのレイアウトの管理や再利用に適しています。
また、この使い方がHTML5で推奨されていますので、こちらを使用しましょう。

直接HTMLタグ内に記述する方法

本内容をインラインスタイルシートといいます。
HTMLタグ内に以下のように記述します。
<p style="color: red;">赤い文字です。</p>
タグ毎に管理ができるのでわかりやすいのですが、再利用に向きません。
また、他のCSSと競合した場合はこちらが適用されます。

CSSの文法に行く

CSSの説明に戻る