高校生のためのホームページづくり（男の子用）

１０．スタイルシートでデザインしよう！

見出しの設定

左の図を見てね。「見出し」「段落」「引用」「項目」などという要素はその周辺に箱を持っています。画面の端から箱までをマージン（余白）と言います。箱の外側はボーダー（枠線）を設定することができます。（もちろんしないようにもできます。）箱の中の枠線から要素（上の例だと「見出し３」）までをパッディング（隙間）と言います。一番上の「高校生のためのホームページづくり」（見出し１）の例だとマージンは左が画面全体に対して10％、右も同じく10％に設定しています。ボーダーは5ピクセルの幅で色は濃い紺にしています。パッディングは上、下1%にしています。箱の中の色はブルーで文字の色は白にして、文字は中央揃えにしています。「１０．スタイルシートでデザインしよう！」（見出し２）の場合はボーダーは上と下だけで線の種類として点線を選んでいます。私が作った見出しのいろんなパターンを見てね！「見出し設定」という見出し３にスタイルシートを使って影を付けてみました。なかなかかっこいいですね。でも影はインターネット・エクスプローラの新しいバージョンだけでしか表現できないので注意してね。

ボックスのいろいろ

スタイルシートファイルの中身

H1 {margin-left :10%;}　これがスタイルシートの基本となる書式です。「これは見出し１の左マージンは10％にする」ということを意味します。：と；は記号が違うことに注意してください。ただ慣れない間は手書きはあまりお奨めできません。私はスタイルシートを作るのにホームページビルダーの「スタイルシートマネージャー」を使っていました。私の作った「スタイルシートマネージャーの使い方」を参考にしてください。今はプロのウェブデザイナーがよく使うDreamWeaver（ドリームウィーヴァー）でスタイルシートを書いています。（エディタで直接書くこともあります。）フリーソフトでもスタイルシートが簡単に書けるソフトが無料で提供されているのでVECTORで探してみてください。今回５つほど試してみましたが特におすすめできるものが見つかりませんでした。ちなみにスタイルシートファイルというのは普通のテキストで拡張子（ファイル名の . より右側の3文字のこと）がcssとなります。このページの見栄えに影響しているスタイルシートファイル(tama.css)を見てください。

スタイルシートを書く場所

スタイルシートを書く場所は３個所あります。
１．外部スタイルシート〜上で実際の例を見てもらったように外部に書くのがもっとも一般的で有効な活用ができます。後で自分でも解るようにコメントを入れておくと良いです。htmlソースの中でコメントを書く場合は<!--　と　-->で挟みますがスタイルシートの場合は/* と　*/で挟みます。
２．ページのhead内
<style type="text/css">
<!--
h1{font-size:1.2em;}
-->
</style>
基本的にはそのページだけに適用させたいスタイルを書きます。
３．個々のタグ
個々のタグに直接スタイルを指定します。例えば・・・
<p style="color: red">ここはとても重要です。</p>

☆重要　同じ要素に対して３個所でスタイルの指定がある際は3>2>1の優先順位でデザインが適用される。

クラスとID

このホームページでは段落には左と右に10％のマージンを設定しています。左の方に写真を挿入した際には右の段落が画像の右に回り込むようにしなければなりません。floatを使います。その時は例えばスタイルシートで・・・
.gazou{margin-left :10% ; float:left;}としておき、<img class="gazou">のように使います。これをクラス指定と言います。このクラス指定は<img>だけではなく、他の要素にも使えます。クラスは何回でも使えますので外部スタイルシートに記入しておくのが良いでしょう。

ＩＤは固有の指定ですので1回しか使えません。７．「写真を載せてみよう！」のところで写真を載せていますが右の段落は通常よりも写真に合わせて左の余白を37%にしています。スタイルシートで#migi {margin-left : 37%;margin-top :10%;}として<p id="migi"></p>とします。