サイトアフィリの基本を知ったら、ＣＳＳの基本ぐらいは知ろう！
CSSには３つの使い方があるというお話をさせていただきました。
＜＞類はテンプレに影響するので表示上はカットしています。
１．CSSを外部ファイルにして読み込ませる方法。
２．styleタグとして書く方法。
３．タグの中にstyle属性として書く方法。
これら３つの方法がありますが、これからCSSについてお話するときは、
基本的に外部ファイル化させた使い方を前提として理解しましょう！
これが一番、一般的ですからね。
ホームページには、少なくともHTMLファイルとCSSファイルが
絶対に必要ですというお話は、何度かさせて頂きました。
このCSSファイルというのが、デザイン用のファイルになります。
CSSはファイル形式が「.css」になっているので分かりやすいですね。
一般的には「style.css」というファイル名で保存されることが多いです。
ホームページは、HTMLとCSSがそれぞれ別々のファイルとして
存在しているだけでは、もちろんお互いに関連し合うことはできません。
HTMLファイルの方にデザインを読み込むための設定が必要です！
それがHTMLのhead～/headの中に記入する次のコードです。
link rel="stylesheet" type="text/css" href="style.css" media="all"
はい、全然、意味わかりませんよね。僕も実はよく分かってませんが、
これが、外部のCSSを読み込むためのコードになります。
このコード中で重要なのは、CSSのリンク先となる
href="style.css"の部分です。
なのでここだけ押さえておけば大丈夫です。
実際のソースを表示させたときに、ここがリンクとして有効でなければ
そもそものデザインが反映されません。
確認の仕方は、ページのソースを表示させて「style.css」の部分を
クリックした時に、CSSコードのページが表示されるかどうかで判断します。
（ソースの表示はサイトを表示させて「Ctrl + U」でしたね）
自分でページを作成するときは、特にこのリンク先が間違っていたために
CSSが効かないと悩む場合があるので気をつけましょう。
「CSSが効かない」は、このような基本的なミスが原因のほとんどです。
デザインがうまく効かない時は、基本から見直して行きましょう。
そんな訳でして、CSSファイルを実際に見てみると
ページによって異なりますが、
body{
margin: 0;
padding: 0;
}
h1{
font-size: 100%;
font-weight: bold;
}
こんな感じのコードが並んでいると思います。
これはどういう意味かと言いますと、
body{}
この部分がbodyタグを指定しています。
このカッコ内で指定されたデザイン情報が
body～bodyの中で反映されるという仕組みなんですね。
h1{
font-size: 100%;
font-weight: bold;
}
これも同じです。h1～h1のデザインが指定されます。
この場合、具体的にはフォントのサイズが100％になり、
文字の太さ（font-weight）が
太く(bold)なるという意味です。
このような形でCSS内ではタグの指定と、
デザインの設定をすることでページをデザインしていきます。
簡単にお話させていただくと、CSSというのは、
これだけの仕組みなんです。
思ったよりも簡単だったのではないでしょうか？
逆に難しいと感じた方もいらっしゃるかもしれませんが、
これは慣れていくしかないね～
