基本的な部分であるCSSの適用方法について。
適用方法は、以下の3通り＋2通り。
- style属性を用いて、各要素に直接指定する
- （X）htmlのhead要素の範囲内に指定する
- head要素の範囲内で、link要素によって外部ファイルを読み込む
上記3つだけ覚えておけば特に困らない感じ。
むしろ、3の外部ファイルを読み込む方法だけ分かってれば良いと思う。
1、2のようにhtml文書内にそのままCSSを記述していく方法は非推奨とされてます。
なので、3の外部ファイルを読み込む方法が推奨されます。
大まかな理由としては、文章構造と表現（見栄え）部分の分離が目的の一つなのに、html文章内に書いちゃったら、通常通りhtmlにfont color="red"とかって書くのと変わらないから意味が無くなってしまう。
特に1を使う理由は殆ど無いので、使わないようにするのがええと思います。
使うとしたら、アフィリエイトとか広告のタグ中に入ってたりするのが浮かぶけど通常の用途だとまず必要性は無いかな。
2に関しては、サンプルとか何かしらで外部に書けない場合に使ったりする（と思う）
一応後の2つ。
- head要素の範囲内で、@importによって外部ファイルを読み込む
- xml-stylesheet処理命令で外部ファイルを読み込む
後の2つの方法は、分かる人だけ使えばいいので、特別な事でも無ければ覚える必要は無いかと。
むしろ、ボクが必要としてる段階の人じゃないので書けません。。。
ってことで、上の3つについてを追記にて。
style属性を用いて、各要素に直接指定する
記述方法
<p style="color:red">例 - 文字が赤くなります。</p>
↑こんな感じで、適用させたい要素にstyle=""ってな感じで書いていく。
まぁ冒頭で書いたように非推奨となってますので、ご利用はしないように。
（X）htmlのhead要素の範囲内に指定する
記述方法
<style type="text/css">
p {
margin-left:10px;
color:green;
}
</style>
↑こんな感じで、どんどんhead要素の範囲内に書いていく。
コレだとファイル容量も増えちゃうし、当然bodyがすごい下に来るのでSEO的にもいけてないと思います。
使う場合は、ご利用は計画的に。
head要素の範囲内で、link要素によって外部ファイルを読み込む
記述方法
<link href="./css/style.css" rel="stylesheet" type="text/css" />
↑こんな感じで。
通常のリンクと同じように、href属性でURLを指定して読み込ませて上げます。
通常はこの方法になりますのでCSSを適用させる場合はコレで。
外部ファイルを読み込んでいる訳ですから、勿論外部にCSSファイルを用意して上げなくちゃいけません。
通常、CSSを保存する場合の拡張子は.cssです。
非常に分かりやすくて逆に困った懐かしきあの頃...そう、あの頃はファイル名が浮かばなくて、css.cssって付けたかった(笑
とまぁ、ソレはどーでも良いとして、、、
新しくCSSファイルを作成する場合は、テキトーに右クリックして、テキスト ドキュメントを作成し拡張子を.cssにすれば立派なCSSファイルの出来上がり。
後はそのファイルにガツガツスタイルを書いていく感じ。
以下は、CSSを適用させる上で知っておくべきことです。
スタイルシート言語の指定について
CSSを適用する方法に関わらず、html文書でCSSを使う場合はスタイルシート言語のMIMEタイプっていうのをhead要素の範囲内に指定しておかなければなりません。<meta http-equiv="Content-Style-Type" content="text/css" />
↑こんな感じで。
MIMEタイプっていうのは、、、、
Webの世界では拡張子という概念と、もうひとつ『MIMEタイプ』という概念があります。MIMEタイプとは「タイプ名/サブタイプ名」の形式の文字列で、WEBサーバーとウェブブラウザの間はこのMIMEタイプを用いてデータの形式を指定しています。
だそうです。
まぁ、ようするに、「コレは何よ？」『コレはー、text/cssってタイプのデータだょ☆』
っていう感じ。
書かなくてもブラウザその辺頭良いので、表示されないとかは無いと思いますけど、ソコはやっぱりちゃんと書くべきですね。
ふと、書いてて思ったことが。
すっごぃコレって自分の勉強になりますね。
エントリーに時間は掛かるけど、有意義な時間だと思う。