スタイルシート３つの書き方
上部
スタイルシートの書き方について説明していくよ。スタイルシートの書き方は次の３種類あるんだ。
- HTMLファイルと別のスタイルシートファイルに記載する
- HTMLファイルの<head>〜</head>に記載する
- タグに記載する
学
なるほど〜。
上部
例えば学君の自己紹介で、「見出し２」の文字色を赤色にする場合、
３つの方法で書くとどうなるか説明していこう。
HTMLファイルと別ファイルに記載する
上部
この方法を使う場合は、スタイルシートファイルを作る事と、HTMLファイルにそのスタイルシートのファイルの場所を教えてあげる事の２つが必要になるんだ。
まずは、メモ帳を使って、HTMLファイルと同じフォルダに「style.css」というスタイルシートファイルを作ってみよう。ファイルの名前は自由に付けて大丈夫だけど拡張子は「.css」にしようね。
学
はい。作ってみました。中身はまだ空っぽです。
上部
次に、今作ったスタイルシートファイルに次の記載をして保存しよう。
h2{color:red;}
スタイルシートでは、「何に対して」 「 { 」 「何を変更するか」 「 :（コロン） 」 「どのように変更するか」 「 ;（セミコロン） 」 「 } 」 という順番で書くのがルールなんだよ。これは、「見出し２」に対して「文字の色」を「赤色」にするという意味だよ。
学
はい。ＯＫです！
上部
では、今作ったスタイルシートファイルの場所をHTMLファイルに教えてあげるためにHTMLファイルの<head>〜</head>に次の記載を追加してあげよう。
<link rel="stylesheet" type="text/css" href="style.css">
学
はい。できました〜。
上部
では、ブラウザで表示してみよう！
学の自己紹介を新しいウィンドウで開く
学
おお〜！「見出し２」の文字が全部赤色になってますよ！
HTMLファイルの<head>〜</head>に記載する
上部
この方法の場合は、HTMLファイルの<head>〜</head>に次のように書くんだよ。
<style type="text/css">
<!--
ここにスタイルの内容を記載します
-->
</style>
学
ほー、なるほど。って事は、「見出し２」の文字色を赤色にする場合は、<head>〜</head>に次のように書けばいいわけですね。
<style type="text/css">
<!--
h2{color:red;}
-->
</style>
上部
うん。その通り！
タグに記載する
上部
この方法の場合は、スタイルを適用したいタグにそれぞれ次のように記載していくんだよ。
<h2 style="ここにスタイルの内容を記載します">〜</h2>
学
ほー、なるほど。って事は、「見出し２」の文字色を赤色にする場合は、次のように書けばいいわけですね。
<h2 style="color:red;">〜</h2>
上部
うん。その通りだよ！
スタイルの優先順位
学
所で、３つの書き方で同じタグに別々のスタイルを指定した場合はどうなっちゃうんですか？
上部
いいところに気が付いたね。３つの書き方で指定したスタイルには次の優先順位があるんだよ。
- タグに記載する
- HTMLファイルの<head>〜</head>に記載する
- HTMLファイルと別のスタイルシートファイルに記載する
学
３つの書き方のうちでは、一番便利な「HTMLファイルと別ファイルに記載する」方法を使うのおすすめだよ。ここからの説明はその方法で進めていくよ。
