CSSファイルの外部読み込み：CSS入門
CSS入門（3）
今回は、実際にCSSファイルを作成し、HTMLファイルから呼び出してみます。頭だけでなく、手を動かしていきましょう。
「難しそう？んなこたぁない」（タモさん風に言ってみた）と言うわけで、お話は、次の順番で進みます。
CSSファイルの外部読み込み
HTMLファイルから、CSSファイルを読み込んでみましょう。
1：HTMLファイルを準備する
（01）
記事「HTML入門まとめ」にて作成したHTMLファイルと、画像（キャプ画）は、準備できているかしら？
今後使っていくので、作成しておく方が話が分かり良くってよ。
私の場合は、次のような形でファイルを2つ作成しました。
HTMLファイル | matome.html |
|---|---|
画像 | matome.gif |
HTMLコードは、次のようにしました。
ちなみに、ブラウザで表示すると、次のようにもっさりした感じです。
2：CSSファイルを準備する
（02）
それでは、さっそくCSSファイルを作成しましょう。背景を黄色にするCSSを、セットしてみます。次のコードをコピーしてください。
body { background-color: #ffff00; }
（03）
テキストエディタを起ち上げて、前述（02）のCSSコードを貼り付けましょう。
（04）
CSSファイルとして、保存しましょう。画像、HTML、CSSの3つのファイルが並びます。
CSSのファイル名は、「matome.css」にしてみました。
ファイル名は、何でも構いませんが、後述（05）にて使用するので、CSSファイル名は覚えておいてください。
3：HTMLからCSSを呼び出す
（05）
HTMLファイルに、CSSファイルを呼び出す HTMLコードを追加します。
href属性は、リンクさせる<a>タグでも出てきたので推測できると思いますが、ファイルがある場所（リンク先URL）を記述します。
ここでは、前述（04）で作成したCSSファイル名のみ記述すれば、OKです。
HTMLコードを追加する場所は、<head>〜</head>内ならどこでも良いのですが、<title>タグの下あたりに入れておきましょう。
同じフォルダ内にあるので、ファイル名だけで済みます。<img>タグのsrc属性で説明しましたけれど、覚えていたかしら？
4：ブラウザで表示
（06）
ブラウザで表示してみましょう。背景がまっ黄色になりました。つまり、CSSの読み込みが成功したわけです。
CSSを読み込むHTMLコード
CSSを読み込むHTMLコードを、改めて簡単に見ておくことにしましょう。
使用するHTMLタグは、<link>というタグです。これは、そのHTMLファイルに関係する外部ファイルを定義します。
おまけで属性も書いておきますが、適度に読み飛ばしてください。超CSS入門ですので、href属性のみ、気にかけてあげれば問題ありません。
rel | relには、関係（relation）を表す値を指定します。 |
|---|---|
type | リンク先のリソースのMIMEタイプを指定します。 |
href | ファイルの場所（URL）を指定します。 |
media | メディアの種類を指定します。 |
href以外の属性は気にしないで完全コピー（そのまま）で OKです。後々、機会があればmedia属性については、解説するかもしれません。
CSSをHTMLファイル内に書く方法
CSSコードを、HTMLファイル内に書く方法は二通りあります。
1：CSSをHTMLファイル内に書く方法 2つ
（1）HTMLタグに書き加える方法
HTMLタグに「style="（CSS内容）"」として書くことが出来ます。例えば、次のようになります。
<body style="background-color: #ffff00;">
FC2ブログのプラグイン（HTML）で使っている場合があるので、覚えてはおいた方が良いかもしれません。
（2）<head>タグ内につらつら書く方法
<head>〜</head>内に、CSSを書く方法です。でも、お薦めしません。
2：CSSをHTMLファイル内には書かない方が良いんだ
たしかに、CSSコードは、HTMLファイル内に書くこともできます。
でもね、HTMLファイル内にCSSを書いてしまったら、それは構造と表現の分離が出来ていないということです。
それじゃあ、意味がないのです。
完全に分離することは、なかなか難しいですけれど、出来るだけ CSSは外部ファイルで済ますようにしましょう。（自戒を含めて書いています）
構造と表現の分離のメリットについては、記事「CSS入門 はじめました」で書いています。
次回予告
さて、CSSを使う上で最低限のことを知ることが出来ました。これで、準備は整いましたよ。
次回から本格的にCSSに取り組んでいきます。まずは、今回登場した背景色ついて書いてみようかと思います。
関連記事
CSSに関連する記事を、ご紹介します。
1：カスタマイズ前
2：CSSの基本的なこと
- CSS入門 はじめました
- CSSの書き方
- CSSファイルの外部読み込み（この記事です）
3：色の指定
4：罫線の指定
5：間隔（余白）の指定
6：継承と子孫セレクタ
7：箇条書き（リスト）
8：文字（フォント）の指定
9：idセレクタ、classセレクタ
10：文章を読みやすくする
11：文字の中央揃え（センタリング）
12：レイアウト
13：tableの中央揃え（センタリング）
14：CSSで飾る
15：まとめ
作成日：2008/04/09 更新日：2008/04/25
« 「CSSの書き方」｜「背景色の変更【background-color】」 »
コメントありがとうございます。
現在、コメントさんも、お休みしています。
こんにちは！
コピーコピー
コメントありがとうございます。
そうですねぇー。
私は、tableレイアウトを止めたときに、ごっそり減る感じがしました。
んでも、まだ完全に分離できていないんだなぁ。
100ページに1回しか使わないようなコードは、
「style=""」で書いてしまいます。面倒くさい・・・。
属性は、コピーコピーで済んでしまいますよね。
変えるのは、hrefくらいだもの。
あとは、CSSハックで、mediaを意識的に変えたりするみたいだけれど、
やはり、コピーコピーで済んでしまいますよね。
わかる･･･
自分もサイト全体で一回しか出番がないスタイル、
一応css側に書いたりもするけど、後で
「あいつはどこだー」ってｃｓｓスクロールしまくったりします。
コメントつければいいのに・・・
tableはすごいですよね。
ほんと一列一行増えるだけですごい量だし。
テーブルレイアウトでサイト作った事もあるけど、完成後は
怖くてどこにも触れなかった！
ほんとごっそりですよね。
あれはすごいと思う・・・。
そうやってスッキリ感を味わうと、もうどこまでもhtmlはシンプルに
したくなりますよね。
それなりに作ったサイトを開いて、ブラウザでｃｓｓオフにした時、
ものすごいシンプルになってると一人喜んでしまう・・・。
そしてｃｓｓオンにしてその違い見て大喜び、とか、結構暗い自分ですが
これからも宜しくお願いします。
（何この締め方・・・）
CSSマスターひろこさん
うんうん。(・∀・)
CSSも多くなると探すのが大変だったりしますね。
特に、CSSファイルを複数に分けると、検索もややこしくて、
「どれだったかしらん？」なんてことは、よく・・・。げふっ
tableでレイアウトすると、当然、table入れ子になるから、
もう、検索エンジンからは嫌われまくるんですよね。
先日、どこかで読んだのだけれど、検索エンジンは、
一度、最下層のtdタグに行ってから、
戻りつつ？だったかな、読むんだって。
「うへっ！」って感じがした。
そりゃ嫌われるは。可愛いあの娘に、嫌われるは。
でも、ごそっとCSS化で減ったような気もするけれど、
今度は、div病になったりしてね。
必要以上に、divで囲んでいるかもしれません。(´Д｀;)とほほ
うーん、さすがCSSマスターひろこさんだなぁ。
CSSオフにしても、きれいに見えちゃうんだ。すごいな。
私は試したことないけれど、完璧に自信ない！（きっぱり）
こんな私がCSS入門だなんて、笑かすけれども、
今後も宜しくお願い致します。
ひぃ
全然マスターじゃないです、ド素人です。
div病は、ちょっと自分でも大丈夫かな・・・と思っているところです。
どこに使えばいいか、ちょっとわかんなくなってます。
もしかして自分はdiv病かも。
ｃｓｓオフにしてもきれいに、というか、まんまテキスト状態になるっていうか
そんな感じです。
で、オンにすると背景バシー！アイコンバッシーン！ガシーンガシーンって
感じで、全然別みたいに見えるからおもしろいのです。
テーブルで組んでて、画像とかも全部html側に直書きだった頃は、
ｃｓｓをオフにしても全然変わらなかったです。
ｃｓｓ使ってないんだから、変わりようがない、みたいな。
多分、文字の大きさとか色しか変わってなかったと思う＾＾；
KumaCrowさんの講座は、いろんなところが抜け落ちている自分にとって
すごくありがたい講座です。何よりわかりやすいのです。
ｃｓｓファイル、複数にわけた事ない！
今度やってみよ〜＾＾
1本うんこ
シロウトでもプロでも、関係ないんだな。
マスターはマスターだよぉ。(・∀・)/ヨッ、マスター
レイアウトでfloatを使っていると、clearの位置の関係上、
崩れることが多かったので、何かと「divで囲っておけば」みたいな、
特に意味のない囲い込みを増やす癖がついてしまっています。
最近ちょっと、中毒状態からは脱却できたかも・・・以前よりは。(´Д｀;)
> ｃｓｓオフにしてもきれいに、というか、
> まんまテキスト状態になるっていうかそんな感じです。
>
それこそが、理想じゃないですか。
適切なコーディングが出来ているということですよ！(・∀・)素晴らしい
CSSファイルは、大きいサイトになってくると、かなり長くなってしまうから、
1本うんこじゃあ、ちょっと無駄が多い場合もあるんですよね。
1つのページでしか使っていないCSSコードを、
全ページで読み込む必要はないものなぁ。
でも、管理が大変かも・・・最初のルール次第なのかな。
長めの
タイトルを「長めのうんこ」にしようかと思ったけど、
あんまりかと思ってやめました。
テキスト状態になるって、そういう事だったんですか！
わあ、ちょっと自信がつきました、嬉しいな＾＾
ほんとにそうですね。
いろいろ指定すると、ｃｓｓはほんっとうに長くなりますよね。
うん、確かに無駄が多いです。
やっぱり必要な分だけのｃｓｓを読む込む様にすれば、
表示も速くなるのかなあ。
基本的な指定（文字の大きさ、背景色、とか？）と、
レイアウトのｃｓｓをわけるだけでも、結構管理は楽そうですね。
今度是非試してみようと思います！
で、なぜか囲うと安心するんですよね。
なんだろうこれは･･･ダンボールとかに子供の頃入って遊びましたが
（現在はやりません）
なんか安心するんですよね。その心理でしょうか・・・
今回これを考えていて、明らかにいらないdivを発見できました。
次からはそれ削ってみるか・・・
中身までクールなサイトを作りたいですね！
エド・はるみさん
あら、「うんこ」だなんて、ひろこさんてば、お下品だわ。
悪い仲間と付き合っているのじゃないかしら。(;´・ω・)(・ω・`;)ねー
そういう事だったのです。
CSSをオフにしている人も、Lynxなどを使っている人も、
違和感なく普通に読めるのだものバッチリでグーなわけですよ。
それはもう、エド・はるみさんだって踊りだします。
CSSは、閲覧者がサイト開いた一度目にごそっと読み込んで、
あとはキャッシュするそうだから、
大切な一度目の印象が良くなるかもしれないですよね。
まだまだ、厳しい回線で接続している人もいらっしゃるので、
軽くしておくことに越したことはないです。
私も見直してみようかな。
半分くらいになるかもしれない。(´Д｀;)うーん
まあ・・・
どちらかと言うと便ですわよね。
（つーか便のほうがやだ・・・！なんかやだ・・・！）
ほうほう、ｃｓｓは、一度読み込むと後はパパッと表示してくれるんですね。
べんり〜
あ、それで結構凝ったデザインなのに表示が速い、なんてのがあるんですね。
なるほど！
記述がシンプルになるのの他に、こういう面があるから
ｃssを使うメリットってのは本当にすごいですよね。
ブラウザごとの表示の違いで苦労する事はあれど、
解決策がないわけじゃないからやっぱり使わない手はないですね。
人がwebサイトで表示を待てるのは８秒までとか聞いた事ありますが、
自分はそれ以下でも去ってしまう事があります。
気が短すぎるみたいだ＾＾；
3秒ルール
うんこちんちん。
CSSは、太古の昔から「良い」と言われていたのだけれど、
そうなの、ブラウザがついて来れなかったのよね。
IEなんか、いまだに勝手なことばかりしているし。
当初、表示待ちは10秒なんて言われていました、
それがだんだん短くなって、8、7、6・・・。
最近は、3秒を基準にするみたいですよ。
私は、6秒くらいは待ちますけどねー。(´ー｀)
ひろこさんのブログは速いですよね。1、2秒です。
（emoやresearch-artisanで引っ掛かるときがあるけれど）
うちなんか、普段でも10秒前後かかるものなぁ。
AdSense、カウンター、アクセス解析3ヶ・・・重いのよね。
減らさなきゃ。
こんばんは！
うちのブログはやいんですか！意識したことなかった！
KumaCrowさんのところも、そんなに待ったことないですよ。
１〜２秒くらいで表示されます。
これは、環境にもよるんだろうか・・・？
あと、やっぱりアクセス解析などは影響しますよね。
自分はリサーチアルチザンなんですけど、たまーにすっごい重い事があって、
イライラするので、<head>のすぐ下につけていたのを、
</body>の上に、つける位置を下げてみました。
そしたら、あんまり表示にてこずる事はなくなったけど、もしかしたら解析は
時々とりこぼしてるかも！
忍者ツールのアクセス解析は、時々忍者さんはサーバーが落ちたりするので
そんな時<head>直下につけてる人は、ページ自体表示されなくなるみたいで、
</body>の真上、ページの下側につけてる人は、解析はされないけど、
ページ自体は表示できるみたいです。
つける位置でページ自体の表示速度もちょっと変わるみたいですね。
ところで人が待てる秒数、８秒じゃなくなってたんですね！
３秒か・・・
すごいなあ、どんどん早くなってゆく・・・
ところで、一人でうんこちんちんで楽しむなんて！
自分だって言いたい！
うんこちんちん！
良かった
あーそうか、うちの環境は遅い方かもなぁ。
パソコンも古いしなぁ。
とりあえず、それほどお待たせしていないようで、良かったです。
アクセス解析のコードは、</body>前に張ると、
すぐに出て行ってしまう人がカウントされなかったりしますね。
精神衛生上は、良いかも。
最近のユーザは、見切りが早くなっているみたいです。
昔は、そのサイトを見ないと、他には見つからないかも、
と言うことで待ったけれど、今は、そうでもないですものね。
（ ￣O￣）ホォォォー（ ￣O￣）ヘェェェー
（ ￣O￣）ホォォォー（ ￣O￣）ヘェェェー
の連続ですねぇ。いいですねぇーーー。
それにしても、ちんOんとか、うんOとか、
下品な人たちねぇ〜。いやだわぁ〜。
お母さん、つよしちゃんにはあそこの家の子とは遊んで欲しくないわぁ〜。
お下品
コメントありがとうございます。
現在。「お下品 of the Year」でグランプリを取るべく、
日々、お下品にみがきをかけています！頑張ります！(・∀・)/チーンチーン
トラックバック
http://kumacrow.blog111.fc2.com/tb.php/261-010c6aab
外部css、というかcssと言う言葉の意味を知るまでは、全部自分にとって
文字色、大きさなど、デザインに関係するcssも全てhtmlと同じものだと思ってました。
だから、htmlがすごい事になってたんですが、外部ｃｓｓを知って実行した時、
あまりにhtmlがシンプルになって驚いた思い出があります。
管理も楽になったし・・・。
ただ、乗り換えるのがえらい大変でした＾＾；
スタイルシートへのリンクの属性、正直なんだろうこれ、と今までコピーコピー
でしたが、解説されてて感動しました。
勉強勉強！