CSSファイルの外部読み込み:CSS入門

ブログが作りたい!CSS入門 > CSSファイルの外部読み込み:CSS入門

CSSファイルの外部読み込み:CSS入門

CSSファイルを外部読み込みする方法:CSS入門

CSS入門(3)

今回は、実際にCSSファイルを作成し、HTMLファイルから呼び出してみます。頭だけでなく、手を動かしていきましょう。

「難しそう?んなこたぁない」(タモさん風に言ってみた)と言うわけで、お話は、次の順番で進みます。

▲ページの先頭に戻る

CSSファイルの外部読み込み

HTMLファイルから、CSSファイルを読み込んでみましょう。

1:HTMLファイルを準備する

(01)

記事「HTML入門まとめ」にて作成したHTMLファイルと、画像(キャプ画)は、準備できているかしら?

今後使っていくので、作成しておく方が話が分かり良くってよ。

適当なフォルダにHTMLファイルと画像を準備する

私の場合は、次のような形でファイルを2つ作成しました。

HTMLファイル

matome.html

画像

matome.gif

HTMLコードは、次のようにしました。

ちなみに、ブラウザで表示すると、次のようにもっさりした感じです。

HTML入門の総決算

▲ページの先頭に戻る

2:CSSファイルを準備する

(02)

それでは、さっそくCSSファイルを作成しましょう。背景を黄色にするCSSを、セットしてみます。次のコードをコピーしてください。

body { background-color: #ffff00; }

(03)

テキストエディタを起ち上げて、前述(02)のCSSコードを貼り付けましょう。

(04)

CSSファイルとして、保存しましょう。画像、HTML、CSSの3つのファイルが並びます。

CSSファイルとして保存

CSSのファイル名は、「matome.css」にしてみました。

ファイル名は、何でも構いませんが、後述(05)にて使用するので、CSSファイル名は覚えておいてください。

▲ページの先頭に戻る

3:HTMLからCSSを呼び出す

(05)

HTMLファイルに、CSSファイルを呼び出す HTMLコードを追加します。

href属性は、リンクさせる<a>タグでも出てきたので推測できると思いますが、ファイルがある場所(リンク先URL)を記述します。

ここでは、前述(04)で作成したCSSファイル名のみ記述すれば、OKです。

HTMLコードを追加する場所は、<head>~</head>内ならどこでも良いのですが、<title>タグの下あたりに入れておきましょう。

HTMLコードを追加する場所

同じフォルダ内にあるので、ファイル名だけで済みます。<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の基本的なこと

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】」 »

コメントありがとうございます。

お手数ですが、コメント前に留意事項をご覧くださいませ。

また、現在ご質問にお答えする余裕がない状態にあります。よろしくお願いいたします。

こんにちは!

こんにちは!
外部css、というかcssと言う言葉の意味を知るまでは、全部自分にとって
文字色、大きさなど、デザインに関係するcssも全てhtmlと同じものだと思ってました。
だから、htmlがすごい事になってたんですが、外部cssを知って実行した時、
あまりにhtmlがシンプルになって驚いた思い出があります。
管理も楽になったし・・・。
ただ、乗り換えるのがえらい大変でした^^;

スタイルシートへのリンクの属性、正直なんだろうこれ、と今までコピーコピー
でしたが、解説されてて感動しました。
勉強勉強!

コピーコピー

ひろこさん、こんにちは。
コメントありがとうございます。

そうですねぇー。
私は、tableレイアウトを止めたときに、ごっそり減る感じがしました。

んでも、まだ完全に分離できていないんだなぁ。
100ページに1回しか使わないようなコードは、
「style=""」で書いてしまいます。面倒くさい・・・。

属性は、コピーコピーで済んでしまいますよね。
変えるのは、hrefくらいだもの。

あとは、CSSハックで、mediaを意識的に変えたりするみたいだけれど、
やはり、コピーコピーで済んでしまいますよね。

わかる・・・

こんばんは!
自分もサイト全体で一回しか出番がないスタイル、
一応css側に書いたりもするけど、後で
「あいつはどこだー」ってcssスクロールしまくったりします。
コメントつければいいのに・・・

tableはすごいですよね。
ほんと一列一行増えるだけですごい量だし。
テーブルレイアウトでサイト作った事もあるけど、完成後は
怖くてどこにも触れなかった!

ほんとごっそりですよね。
あれはすごいと思う・・・。

そうやってスッキリ感を味わうと、もうどこまでもhtmlはシンプルに
したくなりますよね。
それなりに作ったサイトを開いて、ブラウザでcssオフにした時、
ものすごいシンプルになってると一人喜んでしまう・・・。
そしてcssオンにしてその違い見て大喜び、とか、結構暗い自分ですが
これからも宜しくお願いします。
(何この締め方・・・)

CSSマスターひろこさん

ひろこさん、こんばんは。

うんうん。(・∀・)
CSSも多くなると探すのが大変だったりしますね。
特に、CSSファイルを複数に分けると、検索もややこしくて、
「どれだったかしらん?」なんてことは、よく・・・。げふっ

tableでレイアウトすると、当然、table入れ子になるから、
もう、検索エンジンからは嫌われまくるんですよね。

先日、どこかで読んだのだけれど、検索エンジンは、
一度、最下層のtdタグに行ってから、
戻りつつ?だったかな、読むんだって。

「うへっ!」って感じがした。
そりゃ嫌われるは。可愛いあの娘に、嫌われるは。

でも、ごそっとCSS化で減ったような気もするけれど、
今度は、div病になったりしてね。

必要以上に、divで囲んでいるかもしれません。(´Д`;)とほほ

うーん、さすがCSSマスターひろこさんだなぁ。
CSSオフにしても、きれいに見えちゃうんだ。すごいな。

私は試したことないけれど、完璧に自信ない!(きっぱり)
こんな私がCSS入門だなんて、笑かすけれども、
今後も宜しくお願い致します。

ひぃ

こんにちは
全然マスターじゃないです、ド素人です。

div病は、ちょっと自分でも大丈夫かな・・・と思っているところです。
どこに使えばいいか、ちょっとわかんなくなってます。
もしかして自分はdiv病かも。

cssオフにしてもきれいに、というか、まんまテキスト状態になるっていうか
そんな感じです。
で、オンにすると背景バシー!アイコンバッシーン!ガシーンガシーンって
感じで、全然別みたいに見えるからおもしろいのです。

テーブルで組んでて、画像とかも全部html側に直書きだった頃は、
cssをオフにしても全然変わらなかったです。
css使ってないんだから、変わりようがない、みたいな。
多分、文字の大きさとか色しか変わってなかったと思う^^;

KumaCrowさんの講座は、いろんなところが抜け落ちている自分にとって
すごくありがたい講座です。何よりわかりやすいのです。

cssファイル、複数にわけた事ない!
今度やってみよ~^^

1本うんこ

ひろこさん、こんにちは。

シロウトでもプロでも、関係ないんだな。
マスターはマスターだよぉ。(・∀・)/ヨッ、マスター

レイアウトでfloatを使っていると、clearの位置の関係上、
崩れることが多かったので、何かと「divで囲っておけば」みたいな、
特に意味のない囲い込みを増やす癖がついてしまっています。

最近ちょっと、中毒状態からは脱却できたかも・・・以前よりは。(´Д`;)

> cssオフにしてもきれいに、というか、
> まんまテキスト状態になるっていうかそんな感じです。
>
それこそが、理想じゃないですか。
適切なコーディングが出来ているということですよ!(・∀・)素晴らしい

CSSファイルは、大きいサイトになってくると、かなり長くなってしまうから、
1本うんこじゃあ、ちょっと無駄が多い場合もあるんですよね。

1つのページでしか使っていないCSSコードを、
全ページで読み込む必要はないものなぁ。

でも、管理が大変かも・・・最初のルール次第なのかな。

長めの

こんにちは。
タイトルを「長めのうんこ」にしようかと思ったけど、
あんまりかと思ってやめました。

テキスト状態になるって、そういう事だったんですか!
わあ、ちょっと自信がつきました、嬉しいな^^

ほんとにそうですね。
いろいろ指定すると、cssはほんっとうに長くなりますよね。
うん、確かに無駄が多いです。
やっぱり必要な分だけのcssを読む込む様にすれば、
表示も速くなるのかなあ。

基本的な指定(文字の大きさ、背景色、とか?)と、
レイアウトのcssをわけるだけでも、結構管理は楽そうですね。
今度是非試してみようと思います!

で、なぜか囲うと安心するんですよね。
なんだろうこれは・・・ダンボールとかに子供の頃入って遊びましたが
(現在はやりません)
なんか安心するんですよね。その心理でしょうか・・・

今回これを考えていて、明らかにいらないdivを発見できました。
次からはそれ削ってみるか・・・
中身までクールなサイトを作りたいですね!






エド・はるみさん

ひろこさん、こんにちは。

あら、「うんこ」だなんて、ひろこさんてば、お下品だわ。
悪い仲間と付き合っているのじゃないかしら。(;´・ω・)(・ω・`;)ねー

そういう事だったのです。
CSSをオフにしている人も、Lynxなどを使っている人も、
違和感なく普通に読めるのだものバッチリでグーなわけですよ。
それはもう、エド・はるみさんだって踊りだします。

CSSは、閲覧者がサイト開いた一度目にごそっと読み込んで、
あとはキャッシュするそうだから、
大切な一度目の印象が良くなるかもしれないですよね。

まだまだ、厳しい回線で接続している人もいらっしゃるので、
軽くしておくことに越したことはないです。

私も見直してみようかな。
半分くらいになるかもしれない。(´Д`;)うーん

まあ・・・

うんこなんて本当にいやですわね。
どちらかと言うと便ですわよね。
(つーか便のほうがやだ・・・!なんかやだ・・・!)

ほうほう、cssは、一度読み込むと後はパパッと表示してくれるんですね。
べんり~
あ、それで結構凝ったデザインなのに表示が速い、なんてのがあるんですね。
なるほど!

記述がシンプルになるのの他に、こういう面があるから
cssを使うメリットってのは本当にすごいですよね。

ブラウザごとの表示の違いで苦労する事はあれど、
解決策がないわけじゃないからやっぱり使わない手はないですね。

人がwebサイトで表示を待てるのは8秒までとか聞いた事ありますが、
自分はそれ以下でも去ってしまう事があります。
気が短すぎるみたいだ^^;

3秒ルール

ひろこさん、こんにちは。
うんこちんちん。

CSSは、太古の昔から「良い」と言われていたのだけれど、
そうなの、ブラウザがついて来れなかったのよね。

IEなんか、いまだに勝手なことばかりしているし。

当初、表示待ちは10秒なんて言われていました、
それがだんだん短くなって、8、7、6・・・。

最近は、3秒を基準にするみたいですよ。
私は、6秒くらいは待ちますけどねー。(´ー`)

ひろこさんのブログは速いですよね。1、2秒です。
(emoやresearch-artisanで引っ掛かるときがあるけれど)

うちなんか、普段でも10秒前後かかるものなぁ。
AdSense、カウンター、アクセス解析3ヶ・・・重いのよね。
減らさなきゃ。

こんばんは!

こんばんは!
うちのブログはやいんですか!意識したことなかった!
KumaCrowさんのところも、そんなに待ったことないですよ。
1~2秒くらいで表示されます。
これは、環境にもよるんだろうか・・・?

あと、やっぱりアクセス解析などは影響しますよね。
自分はリサーチアルチザンなんですけど、たまーにすっごい重い事があって、
イライラするので、<head>のすぐ下につけていたのを、
</body>の上に、つける位置を下げてみました。
そしたら、あんまり表示にてこずる事はなくなったけど、もしかしたら解析は
時々とりこぼしてるかも!

忍者ツールのアクセス解析は、時々忍者さんはサーバーが落ちたりするので
そんな時<head>直下につけてる人は、ページ自体表示されなくなるみたいで、
</body>の真上、ページの下側につけてる人は、解析はされないけど、
ページ自体は表示できるみたいです。
つける位置でページ自体の表示速度もちょっと変わるみたいですね。

ところで人が待てる秒数、8秒じゃなくなってたんですね!
3秒か・・・
すごいなあ、どんどん早くなってゆく・・・

ところで、一人でうんこちんちんで楽しむなんて!
自分だって言いたい!
うんこちんちん!

良かった

うんこちんちんひろこさん、こんばんは。

あーそうか、うちの環境は遅い方かもなぁ。
パソコンも古いしなぁ。
とりあえず、それほどお待たせしていないようで、良かったです。

アクセス解析のコードは、</body>前に張ると、
すぐに出て行ってしまう人がカウントされなかったりしますね。

精神衛生上は、良いかも。

最近のユーザは、見切りが早くなっているみたいです。
昔は、そのサイトを見ないと、他には見つからないかも、
と言うことで待ったけれど、今は、そうでもないですものね。

(  ̄O ̄)ホォォォー(  ̄O ̄)ヘェェェー

このCSS入門は、
(  ̄O ̄)ホォォォー(  ̄O ̄)ヘェェェー
の連続ですねぇ。いいですねぇーーー。

それにしても、ちんOんとか、うんOとか、
下品な人たちねぇ~。いやだわぁ~。
お母さん、つよしちゃんにはあそこの家の子とは遊んで欲しくないわぁ~。

お下品

清音さん、こんにちは。
コメントありがとうございます。

現在。「お下品 of the Year」でグランプリを取るべく、
日々、お下品にみがきをかけています!頑張ります!(・∀・)/チーンチーン

承認待ちコメント

このコメントは管理者の承認待ちです

承認待ちコメント

このコメントは管理者の承認待ちです

コメントの投稿

内緒のときは、チェックしてください。

トラックバック

http://kumacrow.blog111.fc2.com/tb.php/261-010c6aab
 | トップページ | 

FC2ブログの作り方・作成

GIMP2で画像を編集しよう

イラストが描ける Inkscape

初心者のためのSEO対策

Google Analytics入門

アクセス解析QLOOK

アイデアの作り方

超ビギナー向けHTML入門

超ビギナー向けのCSS入門

FC2ブログのカスタマイズ

初心者向けのCSS小技

Web制作に役立つ本

ブログでお小遣い稼ぎ

これはうまい!

誰にでも才能はあるのです

RSSフィード

プロフィール

KumaCrow(クマクロ)

KumaCrow

FC2ブログによるブログの作り方をご紹介しています。「初心者の人にも分かりやすく!」がモットーです。

Twitter KumaCrow

リンクフリー♪
フォローも、ふりっふり~

伝わる文章を書くコツ

最近の記事

最近のコメント

パソコン入門

アクセスの多かった記事

先月アクセスが多かった記事を、ご紹介します。

【1位】
GIMP2の使い方
【2位】
プリントスクリーンの方法
【3位】
GIMP2 パスの使い方
【4位】
GIMPとは?
【5位】
レイヤーとは?

初心者のデジカメ撮影術

ホームページ制作にJimdo

このブログの評価

自分を見つめなおす

ブログランキング

クリックしちゃいなよ!You、クリックしちゃいなよ!そして、Canして、Doしちゃいなよ!

FC2ブログランキングに参加してみませんか?見に来てくれる人が少しだけ増える・・・かもしれません。

FC2カウンター

ブログ開始(2007年7月)から、ユニークユーザ数が「のべ240万人」に達しました。いつもご覧いただきまして、ありがとうございます。(2011/01/05、FC2カウンター故障・データ消失により、10万人分くらいマイナスとなりました)

子どもの教育

最近のトラックバック

+++ お友達のブログ・お世話になっているサイトさま +++

ふわふわふわりん
無料ウェブ素材 Tyto-Style
海外のSEO対策・SEOツールをわかりやすく解説するブログ
日南商工会議所による情報化支援ブログ
気になるけど
聞き捨てならん!!
かちびと.net
ありのごとくあつまりて