- オススメCSS解説本
- CSSのメリット
- 利用手順
- HTMLとCSSの関係
- スタイル設定
- 継承
- カスケード
- 疑似クラスと疑似要素
- マージンとパディング
- 数値単位
- メニュー作成
- コンテンツ作成
- タイトル作成
HTMLでCSSを使おう！ HTMLとCSSの関係
CSSをHTMLに取り込む
実際に、CSSを利用するには、次の方法があります。それらは、１つのHTMLの中で同時に利用出来ます。
style要素を利用して、HTML内にスタイル指定
スタイル要素とは、<style>〜</style>のことで、<head>〜</head>内に記述します。ここで注意することは、スタイル設定の箇所を、< !--comments-- >で囲うことです。スタイル要素の中（<style>〜</style>）では、コメントアウトは /* comments */ になります。
<head>
<meta http-equiv="Content-Type" content="text/html;charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>CSSを利用する</title>
<style type="text/css">
<!--
h1{
font-size:20px
}
p{
font-size:12px
}
-->
</style>
</head>
<body>
<h1>このフォントサイズは２０ｐｘで表示されます</h1>
<p>このフォントサイズは１２ｐｘで表示されます</p>
</body>
タグのstyle属性に直接スタイル指定
<h1 style="color:#336633">ここの文字は、緑色になります。</h1>
このように、HTML上の開始タグに、直接スタイルを指定して表示させる方法です。直接指定出来るので、簡単ですが、最終的にソースが複雑になり、分かりにくくなる可能性があります。
<meta http-equiv="Content-Type" content="text/css>
上記をまとめて記述すると下記のようになります。
<head>
<meta http-equiv="Content-Type" content="text/html;charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>CSSを利用する</title>
</head>
<body>
<h1 style="color:#336633">ここの文字は、緑色になります。</h1>
</body>
外部ファイルのスタイルシートを読み込む
スタイルを別ファイルに指定し、HTMLにそのファイルを読み込むものです。
<head>
<meta http-equiv="Content-Type" content="text/html;charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<link rel="Stylesheet" href="common.css" type="text/css">
<title>CSSを利用する</title>
</head>
<body>
</body>
上記赤字部分が、外部スタイルシートの名前です。任意のため、名前は自由に設定できますが、拡張子は「.CSS」とします。また、複数の外部スタイルシートを取り込みたい時は、スタイルシートごとに、LINK要素で取り込みます。下記に例を示します。
<head>
<meta http-equiv="Content-Type" content="text/html;charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<link rel="Stylesheet" href="common.css" type="text/css">
<link rel="Stylesheet" href="local.css" type="text/css">
<title>CSSを利用する</title>
</head>
<body>
</body>
@import
複数の外部スタイルシートを取り込みたい時に便利です。取り込みたい複数のCSSファイル名を、１つのCSSファイルに記述します。HTML上では、
<head>
<meta http-equiv="Content-Type" content="text/html;charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>CSSを利用する</title>
<style type="text/css">
<!--
@import "css/style.css";
-->
</style>
</head>
<body>
</body>
赤字部分が複数のスタイルシートの名前が指定されたCSSファイルです。CSSフォルダ内のstyle.cssというファイル名です。
スタイル効果の優先順位について
<head>
<meta http-equiv="Content-Type" content="text/html;charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<link rel="Stylesheet" href="common.css" type="text/css">
<title>CSSを利用する</title>
<style type="text/css">
<!--
@import url "css/style.css";
h1 {
color : blue
}
-->
</style>
</head>
<body>
<h1>headline is blue</h1>
<p style="color : yellow">while the paragraph is green.</p>
</body>
上記、赤字スタイルの優先順位
color : yellow ＞ color : blue ＞ css/style.css ＞ common.css
つまり、
開始タグのstyle属性＞style要素＞＠import規則＞外部スタイルシート（link rel=・・・）
という優先順位になります。