こんにちは。あきです。
前回先輩よりテーブルタグについて学び
今日はＣＳＳ（スタイルシート）について学びます。
アキヒロ：
「先輩。今日はスタイルシートです。
お願いします。」
先輩：
「また来たのか。たまには休ませてくれよ。」
アキヒロ：
「いいじゃないですか。どうせ暇なんだから。」
先輩：
「うるさい。仕方がない。それでは教えてやろう。」
アキヒロ：
「お願いします。」
先輩：
「まずＣＳＳとはCascading Style Sheetsの略だ。」
アキヒロ：
「で、直訳すると？」
先輩：
「知らん。英語は嫌いだ。お前英語勉強してるんだろ。訳してみろよ。」
アキヒロ：
「うーん。分かりません。」
先輩：
「なんだ。お前。何年勉強してるんだ？」
アキヒロ：
「むっ！おそらくですな。
作業を段階的に行う見栄えの紙だから…。
『見栄えを段階的に設定するファイル』
じゃないっすかね。」
先輩：
「これはWebページのレイアウトを定義する為の規格です。」
アキヒロ：
「ちっ。知ってるなら言わせるなよ。」
先輩：
「なんか言ってかね？」
アキヒロ：
「いえ。続けてください。」
先輩：
「ＨＴＭＬのタグにフォントサイズや色をいちいち設定するのは面倒だろ。」
アキヒロ：
「確かに記事の文章や見出しなんかのスタイルは一括で管理して指定したいですね。」
先輩：
「このＣＳＳを使うと複数のＨＴＭＬのデザインをまとめて調整する事が可能になるのだ。どうだすごいだろ。」
アキヒロ：
「これは使えますね。先輩は別にすごくないけど」
先輩：
「いつもそれだな。一言多いんだよな。お前は。まあそれでだ。スタイルシートの指定方法には３種類ある。」
アキヒロ：
「３種類？」
先輩：
「そうだ。
・インラインスタイルシート ・埋め込みスタイルシート ・外部スタイルシート
の３つだ。ほとんどのブログで使われてるのは外部スタイルシートだな。」
アキヒロ：
「詳しく教えてください。」
先輩：
「まずインラインスタイルシートだがこれは各タグに style=”” と属性を設定する事でフォントサイズなどを指定できる。」
アキヒロ：
「はあ。」
先輩：
「ブログのタイトルに使われる見出しタグ<h1>を例にすると」
<h1 style=”font-size:80px;”>こんにちは</H1>
先輩：
「と設定するとこんな感じで特大のこんにちはが表示できる。」
こんにちは
アキヒロ：
「うわっ！うっとうしい。でもこれタグ毎に設定するんですよね。」
先輩：
「まあな。これじゃあ一括設定できるＣＳＳの良さが活かされないな。次は結構使えるぞ。」
アキヒロ：
「埋め込みスタイルシートですか。」
先輩：
「これは各ＨＴＭＬの<head>～</head> 内に
記述するんだ。」
<HEAD>
<STYLE type=”text/css”>
<!–
h2{
font-size : 12px;
}
–>
</STYLE>
</HEAD>
先輩：
「この様に記述する事でこのＨＴＭＬで<h2>タグを使用した文字列は全てフォントサイズが12pxになる。」
アキヒロ：
「なるほど。これを指定したＨＴＭＬファイル内でのみ有効なんですね。」
先輩：
「そういうことだ。そして最後が外部スタイルシート。」
アキヒロ：
「はい。」
先輩：
「これは完全に独立したスタイルシートファイルを作るのだ。こうする事で複数のＨＴＭＬのスタイル情報を一括で管理できる。」
アキヒロ：
「これが通常使われている方法か。」
先輩：
「ただのテキストファイルにスタイルを設定し拡張子を.cssにすれば作成できる。」
アキヒロ：
「ずいぶん簡単ですね。」
先輩：
「うむ。そしてそのスタイルを適用したいＨＴＭＬにスタイルシートを読み込みますよ。と以下の様に設定する事でＨＴＭＬとＣＳＳが関連付けられるのだ。」
<head>
<link href=「スタイルシートのファイル名」
rel=”stylesheet” type=”text/css” />
</head>
アキヒロ：
「なるほど。なるほど。良くわかりました。で今日の小技は。」
先輩：
「結局それが目的かよ。しょうがない。それじゃリンク文字にマウスを置くと色が変わる方法を教えよう。」
a:hover { color:#FF0000; }
a:hover { background:#FF0000; }
先輩：
「上が単純にリンク文字の色下は背景式の色が変わる。スタイルシートにこれらを設定するとリンク文字全てに適用される。」
アキヒロ：
「おお。面白い。今日も色々ありがとうございました。」
