×

[PR]この広告は3ヶ月以上更新がないため表示されています。
ホームページを更新後24時間以内に表示されなくなります。

ホームページの作り方 >> ホームページ作成編 >> CSSファイルの役割

ホームページ作成編 06.CSSファイルの役割

HTMLファイルが表示する文字や画像を綺麗に配置したり、
文字を装飾(大きくしたり色をつけたり)する役割を
CSSファイルが担当しています。
スタイルシートと呼ばれてるスゴイやつです!

CSSファイルで見た目を劇的に変化させよう!

料理の味は見た目で決まるわけじゃないですよね。
一見、全然美味しくなさそうな料理でも食べてみたら「う〜ん、旨い!」なんてこともしばしば!
その逆も然りですね。でも食べにくかったり、あまりに見た目が悪いとどんなに美味しくても、味見もしてもらえません。
HTMLの美味しさをCSSが上手に演出するってことですかな!

1.CSSファイルの役割を実感しよう!

CSSの本名はCascading Style Sheetといいます。
2種類のファイル のページでもいいましたが、CSSは、HTMLで記された文章や画像の配置や装飾を担当しています。

このようなことを担当しているファイルをスタイルシートといい、スタイルシートにも何種類かあるそうです。
CSSもそのうちの1つなのですが、世の中の多くのブラウザ(インターネットを表示する画面)はCSSに対応しているので、このホームページでは、スタイルシート=>CSSとして書いておりますです・・・

「百聞は一見にしかず」なのでまず、サンプルページ を見てくださいな。
どこかで読んだ文章が並んでますね。
それぞれのソースを見ても分かりますが、(ソースを見るには画面の適当なところで「右クリック」→「ソースの表示」でしたよね。)実は、サンプルページの画面はあなたが今読んでいるこのページ(「CSSファイルの役割」)のHTMLファイルhead部にある

<meta http-equiv="Content-Style-Type" content="text/css">
<link rel=stylesheet href="style.css" type="text/css">

の二つのタグをを取っちゃっただけなんです。
このタグ、なんだか分かりますよね!前ページで出てきましたもんね!
つまり、スタイルシートを使わずに画面表示させてみたんです。

ここで感じて欲しいことは、
同じHTMLファイル(内容--コンテンツ)を作ってもCSSというお化粧によって見た目は、全然変わってくる
ということなんです。

検索エンジン的にいうとサンプル画面のページこのページ「CSSファイルの役割」のページも書いてある文章、その位置関係、それぞれの言葉や文章の重要度の割り当ては、全く同じなので、両者とも同じように、認識します。(たぶん・・・)

でも、人がそれを見たときは、かなり違って見えますよね!
繰り返しになりますが、このページとサンプルページのHTMLファイルは同じです。つまり内容(コンテンツ)は全く変わらないのです。
このページとサンプルページの違いがスタイルシートがやっていることなんです。
スタイルシートってすごいですね!

HTMLファイルとCSSファイルの役割の違い、分かりましたね!

2.フォルダを作って画像をしまっておこう!

2-1.画像の取り込み方法

スタイルシートを作る前にちょっと準備をしておきましょうか。
下の画像が気になりますが、その前に「homepage」フォルダの中に「img」という名前のフォルダを作って下さい。
やり方は、「index.html」や「css.style」を作った時と同じです。・・・というか「homepage」フォルダを「マイドキュメント」(ちなみにマイドキュメントもMy Documentsという立派なフォルダです。)の中に作ったあなたにならもう簡単な作業ですね!
もし、忘れちゃった人がいたらそぉ〜と 「フォルダを作ろう」のページ を読みましょう。

そして、さっきから気になっていたピンク丸、白丸の変な画像を「img」フォルダに取り込みます。
これ、やりかたまちがえないでくださいねっ!!

壁紙

上の画像にカーソルを持っていって右クリック→「名前を付けて画像を保存」をクリック
保存する場所は「マイドキュメント」の中の「homepage」の中の「img」なので、保存する場所(I)を「img」とします。

(やり方:例)下の画面のように「マイピクチャ」が出てきた場合
「マイピクチャ」は「マイドキュメント」の中にあるので、上矢印が書いてある小さいフォルダの絵(下画面で言うと「1つ上のフォルダへ」と書いてある上の小さなフォルダの絵(左側)です。)をクリックすると保存する場所(I)がマイドキュメントになります。
するとその下にマイドキュメントの中にあるフォルダやファイルが表示されます。当然先ほど作った「homepage」もここに表示されているはずです。
その「homepage」をダブルクリック→「img」をダブルクリック
今回は、ファイル名は「kabe03」のままでいいので、このまま右下「保存」をクリック
これで、画像を取り込むことが出来ました。よかったよかった・・・

ちなみに「画像」もファイルの一種です。
この場合「kabe03」という名前の「gif」という種類の画像ファイルということになります。
画像ファイルには「gif」「jpg」「png」「bmp」・・・まだまだ色々ありますが、そのうちの一種です。

画像の保存

2-2.画像の取り込み時の注意!

これは、結構大事なことなので、しっかり読んで覚えておいてくださいね!

2-2-1
画像を取り込むときは、上のように対象の画像の上で右クリックのあと
名前を付けて画像を保存
で自分のフォルダーの中に取り込んでそこから呼び出してください。

2-2-2
あなたも今後、すばらしいホームページを作っていき、その時色々な画像を探して、「素材屋さん」を見てまわることと思います。
「素材」を使用させてもらうときは、必ず注意書きを読みましょう。
それぞれの素材屋さんごとにルールが違うのでしっかり読んでルールを守って使用させてもらいましょう。

このホームページの画像も素材屋さんのものを使わせていただいています。
私が指定したもの以外は、このサイトの素材を持ち帰ることは禁止いたします。
ルールを守ってこその楽しくてすばらしいホームページです。よろしくお願いしますね!

※尚、このホームページで使用させていただいた色々な素材は、リンクページ「お世話になったサイト様」でご紹介しております。

それでは、下の画像3点を先ほどの方法で、あなたの「img」フォルダに持ち帰ってください!
名前はそのままで変更しないで使います。

2-3.サンプル画像

下の3点のサンプル画像をお持ち帰り下さい。

実は、HTMLにもCSSの役割と同じことが出来るタグは多数あるんです。例えば色を付ける<font>タグや文字を大きくする<big>タグ、太い文字にする<b>タグ等々・・・
その気になれば、このホームページもHTMLだけで、表面上(見た目)同じに作ることは出来ると思います。でもなぜそうしないのか・・・ホームページを作るってことは、HTMLタグを打ち込んでいき、ソースを作っていく(004「HTMLファイルを作ろう」で少し作りましたよね!−−これをどんどん発展させていきましょうね!)ということは、ご理解いただけたと思いますが、HTMLファイルにスタイルシートの分までタグを打ち込んでいくとソースが物凄く複雑というか、見にくくなってしまうからです。
スタイルシートを使ったこのページのソースを見てもらっても分かるように、body部のタグは10種類くらいしか使ってないので、比較的楽に作ることが出来るんです。
例えば、このホームページの見出し(このページで言うと一番上の「ホームページの作り方(CSSファイルの役割)」)の部分は<h1>でくくってありますが、スタイルシートで、<h1>タグは、この色でこの大きさでアンダーラインを引いて・・と設定してるので、HTMLでは単に<h1>ホームページの作り方(CSSファイルの役割)」</h1>と記述するだけでいいんです。更にスタイルシートは他のページにも有効なので、ページごとにあーだこーだといろんな設定を繰り返す必要もないので、大変手間が省けます。
又、HTMLでは出来ない細かい設定もスタイルシートでは行えるので、CSSの分野はCSSに任せてしまったほうが分かりやすいと思います。
SEO的にもスタイルシートを使ったほうが、良いそうです。
そんなわけで、このホームページでは、本来スタイルシートの役割をするHTMLタグの話は出てきません。そのかわりHTMLとCSSを同時進行的に覚えていきましょう!


kabe01.jpg photo01.jpg photo02.jpg
 
別窓で開く便利な検索窓です。どうぞご利用下さい!
カスタム検索