第8節 スタイルシート講座 後編

  前節でスタイルシートの雰囲気は解ってきたね。
  ところでスタイルシートの言葉なんだけど、
  「スタイル」はデザインする事から、想像もできるんだけど、
  「シート」の方はどこから来たのかな?
  この節でスタイルシートの基本が見えて来るようだ!
  もう少し頑張って、スタイルシートをモノにしましょう!



 @ スタイルシートの私的概念
 A ボーダー(枠線)の指定
 B マージンとパディングを指定
 C スタイルシートの大きさの指定
 D 座標による位置の指定
 E 重ね合わせる順序の指定
 F クラス指定
 G スタイル指定ファイルを作る



@ スタイルシートの私的概念

冒頭のコメントでも話したけど、「スタイルシート」の「スタイル」はわかるけど、何故「シート」が付くんだろう?
どうも、タグに張り付いた、デザインを設定した長方形の「シート」を想像すればいいようです。

スタイルシートのイメージを図にしたのが下図です。

一番外側が、ブラウザのウインドウ(スクロールして見える全範囲)とします。
この色の部分が、スタイルシート全体です。
この色の部分が、スタイルシート内容部分(要素)です。
margin
padding

スタイルシートの内容 = 「要素」と言う
padding
margin
border
border
スタイルシートの形状に関する説明をします。
スタイルシートの枠線の部分が (ボーダー) border です。
スタイルシートの外側の、ウインドウとの隙間が マージン margin です。
スタイルシートの内側の、その要素との隙間が パディング padding です。
次にスタイルシートの性質をを説明します。
デザインの指定 タグを補助してデザインを付け加える。
形状・大きさ 長方形で、幅・高さ共に指定可能。
背 景 背景無指定の場合は透明。 色・画像共に指定可能。
配 置 自由に指定できる。
重ね合わせ 何枚でも重ねられ、その順序も指定可能。

スタイルシートは「タグを補助する」という性質上、タグの持つ本来の性質を受け継ぎます。
そしてタグは、その性質上で、2つに分類されます。 「インライン要素」と「ブロック要素」です。
インライン要素 と ブロック要素
共に何も指定しないタグspan タグと div タグがありましたが、これらの差は「インライン要素」と「ブロック要素」の違いなのです。

当然、 span タグと div タグのどちらを使うかで、デザインが違ってきます。
私的な区分ですが、この2タグの使用上の違いを揚げてみました。

  span と div の違い
タグ名 要素名 改 行 特 徴
span インライン要素 前後で改行しない 高さ(行数)が1の長方形。
幅は任意幅を使用
範囲はポイント単位で指定。
div ブロック要素 前後で改行する 高さがある長方形。
幅は行幅全部を使用。
範囲は行単位で指定。

私的定義文だけではわかりにくいので、例を示して説明しましょう。
スタイルシートの範囲を見るため、ボーダーを付け、文字を赤にします。

メモ帳
  <b>まず span タグを使います</b><br><br>
spanの前<span style="border-style:solid; color:red">
    spanの内部です</span>spanの後<br><br>

  <b>途中で改行します</b><br><br>
spanの前<span style="border-style:solid; color:red">
    spanの<br>内部です</span>spanの後<br><br>


  <b>次に div タグを使います</b><br><br>
divの前<div style="border-style:solid; color:red">
    divの内部です</div>divの後<br><br>

  <b>途中で改行します</b><br><br>
divの前<div style="border-style:solid; color:red">
    divの<br>内部です</div>divの後
これをHTMLファイルにして、ブラウザで表示すると,次のようになります。
赤枠で囲われた部分が、スタイルシートを設定した部分です。
また、コメントも状況に即して入れられています。
まず span タグを使います

spanの前spanの内部ですspanの後

途中で改行します

spanの前spanの
内部です
spanの後

次に div タグを使います

divの前
divの内部です
divの後

途中で改行します

divの前
divの
内部です
divの後


改行の様子や、使用幅について前述した性質は、例を見て戴ければ一目瞭然ですね。

注目して欲しいのは、途中で改行を入れ、2行になった時です。
div では、内部で改行して、高さが2行のスタイルシートになりました。
一方 span では、スタイルシートごと、途中で改行されて、その高さ(行)は1行のままです。

インライン要素の span と、ブロック要素の div の違いのニュアンスを掴んで戴けましたか。
これからは、状況に応じて使い分けしながら、徐々に慣れて行きましょう。


A ボーダー(枠線)の指定

まずは、スタイルシートのボーダー(枠線)に関する、属性の一覧を揚げます。
属 性 属性名 属性値 デザインの種類
枠線の種類 border-style none 枠線なし
dotted 点 線
dashed 粗い点線
solid 直 線
double 二重線
groove 谷 線
ridge 山 線
inset 凹 線
outset 凸 線
枠線の太さ border-width 太さを指定 枠線の太さを、ピクセル値等で指定
枠線の色 border-color 色を指定 枠線の色を、色名やRGB値で指定
ボーダーの種類
枠線の種類の指定には、「 border-style 」属性を使います。
  ■ ボーダーの種類の指定値
border-style:**
  ** // ボーダーの種類を下記より指定
        none (枠線なし)   dotted(点線)     dashed(粗い点線)
        solid(直線)       double(二重線)   groove(谷線)
        ridge(山線)       inset (凹線)     outset(凸線)
  ※ groove , ridge , inset , outset は同形状で影の付き方の差
次例は、谷線のボーダーを指定する場合です。
style="border-style:groove"
この枠線の種類は、デザイン性が強いので、実例で見ましょう。
枠幅を 8 ピクセル、色は#d0d080で表示します。

dotted dashed solid double
あいうえお
かきくけこ
あいうえお
かきくけこ
あいうえお
かきくけこ
あいうえお
かきくけこ
groove ridge inset outset
あいうえお
かきくけこ
あいうえお
かきくけこ
あいうえお
かきくけこ
あいうえお
かきくけこ
ボーダーの太さ・色の指定
枠線の太さの指定には、「 border-width 」属性を使います。
一方、枠線の色の指定には、「 border-color 」属性を使います。
  ■ ボーダーの太さの指定値
border-width:**
  ** // ボーダーの太さを、ピクセル値 等で指定

  ■ ボーダーの色の指定値
border-color:**
  ** // ボーダーの色を、色名 や RGB値 で指定
     ※ 省略した場合、文字の色と同じになります。
次例は、山線で、太さが5ピクセル、緑のボーダーを指定する場合です。
style="border-style:ridge; border-width:5; border-color:green"
定型の指定ルールに付き、一目瞭然ですね。
ボーダーの一括指定
最後に、ボーダー(枠線)関連属性の一括指定を説明します。
  ■ ボーダーの一括指定
border:** ** **
  ** // ボーダーの種類、太さ、色の属性値を指定
        各属性値を半角スペースで区切る。 順番は任意。
  ※ 属性は全種類指定する必要はない。「枠線の種類」だけでも使用可能。
  ( Netscape では一括指定は使えないようです )
次例は、2重線で、太さが3ピクセル、青のボーダーを指定する場合です。
style="border:double 3 blue"
この一括指定では、随分簡単に指定できますね。



B マージンとパディングを指定

@項で出てきた、残りのマージンとパディングの指定法を説明します。

 スタイルシートの内外の隙間に関する、属性一覧
属 性 属性名 属性値 デザインの種類
枠線の外の隙間 margin 幅を指定 隙間の幅を、ピクセル値等で指定
枠線の内の隙間 padding 幅を指定 隙間の幅を、ピクセル値等で指定
この2つは、共に隙間を設定するものですが、@項の表で解るように、マージンは枠線の外の隙間で、これはスタイルシートの配置に使えますね。
一方パディングは枠線の内の隙間で、見た目のバランスを調整に役立ちます。

マージン、パディングの属性は marginpadding を使い指定します。
  ■ マージンの指定値
margin:**
  ** // ボーダーの外側の間隔をピクセル値 等で指定

  ■ パディングの指定値
padding:**
  ** // ボーダーの内側の間隔をピクセル値 等で指定
次例は、マージンを20ピクセル、パディングを5ピクセルで指定する場合です。
style="margin:20; padding:5"
方向毎に指定を変える
前項の、ボーダーと、マージン・パディングは、スタイルシートの上下左右の4方向で、違う値を設定できます。
その指定法に2つがあります。

(1)場所名を追加して指定する
属性名に場所名を追加して位置を特定し、属性値を指定します。
  ■ 場所名の追加法
border-**-style  ,  border-**-width  ,  border-**-color
margin-**  ,  padding-**
  ** //  top(上側) , bottom(下側) , left(左側) , right(右側)
次例は、下の枠線が点線で、太さが3ピクセル指定法
style="border-bottom-style:dotted; border-bottom-width:3"
上記の指定を、一括指定した場合の指定法
style="border-bottom:dotted 3"
次例は、左のマージンを、20ピクセル空け、下側のパディングを5ピクセル空ける場合の指定法
style="margin-left:20; padding-bottom:5"

(2)すべての方向の属性値を一度に指定する
次に、方向毎に違う属性値を一度に指定する方法を説明します。
  ■ 上下 と 左右 で同じ値の場合
属性:(上下の値) (左右の値)

  ■ 上下左右が違う値の場合
属性:(上の値) (右の値) (下の値) (左の値)
  ※ いずれも、各値の区切りは、半角スペース
 枠線の種類を、上下が直線で、左右は枠線なしの指定法
style="border-style:solid none"
 枠線の外側の隙間(マージン)を、上下が10ピクセル、左右が20ピクセル空ける場の指定法
style="margin:10 20"
 枠線の内側の隙間(パディング)を、左を5ピクセル、他を2ピクセル空ける場合の指定法
style="padding:2 2 2 5"
上→右→下→左の順番は決まり事です。 上から始まり右回りと覚えましょう。


それでは border , margin , padding の使用練習をします。
メモ帳
インライン要素の img タグに凸線を付け、左マージンを50px取りました<br>
<img src="parts/momo.jpg" style="border:outset 5 #aaaaff;
    margin-left:50"><br><br>

<marquee width=500 style="border:inset 3; padding:10;
    background-color:#ffeeee">
枠線は凹線、太さ3ptでパディング10、背景色付きです</marquee><br><br>

ボックス要素の div タグで、赤の下枠だけ付け、マージンを四方向共変えました。
<div style="border-bottom:solid 5 red; font-size:50pt;
    margin:30 50 40 100">下だけの枠線</div>
これをHTMLファイルにして、ブラウザで表示すると,次のようになります。
インライン要素の img タグに凸線を付け、左マージンを50px取りました


枠線は凹線、太さ3ptでパディング10、背景色付きです

ボックス要素の div タグで、赤の下枠だけ付け、マージンを四方向共変えました。
下だけの枠線
margin 属性は、配置に有効に使えますね。


C スタイルシートの大きさの指定

スタイルシートの大きさ、および、内容がその大きさより、あふれる場合の処理の属性の指定法を説明します。

まずは、この関連の属性の一覧を揚げます。
属 性 属性名 属性値 デザインの種類
シートの横の幅 width 横幅を指定 横の幅、ピクセル値等で指定
シートの縦の高さ height 高さを指定 縦の高さ、ピクセル値等で指定
内容があふれる場合 overflow

方向限定
overflow-x
overflow-y
visible シートを広げ、全てを表示 (規定値)
hidden あふれる部分は表示しない
scroll スクロールバーを付ける
auto ブラウザが自動処理

スタイルシートの幅・高さの指定
スタイルシートの幅・高さは、「 width 」、「 height 」属性で指定します。
  ■ スタイルシートの幅の指定値
width:**
  ** // スタイルシートの幅をピクセル値 等で指定

  ■ スタイルシートの高さの指定値
height:**
  ** // スタイルシートの高をピクセル値 等で指定
幅が600ピクセル、高さが400ピクセルのシートで、左のマージンが30ピクセルの例です。
style="width:600; height:400; margin-left:30"
内容があふれる場合の指定
次に内容があふれる場合ですが、両方同時指定なら overflow 属性を使います。
  ■ 内容があふれる場合の指定値
overflow:**
  ** // visible : シートを広げ、全てを表示 (規定値)
        hidden  : あふれる部分は表示しない
        scroll  : スクロールバーを付ける(スクロールさせて表示)
        auto    : ブラウザが自動処理
  ※ 片方向のみで指定する場合は、次の属性に変える
      overflow-x : 幅方向のみの指定
      overflow-y : 高さ方向のみの指定

それでは、内容があふれる場合の練習をしてみましょう。
シートの高さは400ピクセル、幅は90ピクセルにしました。
メモ帳
あふれる部分は表示しない<br>
<div style="width:400; height:90; overflow:hidden; background-color:#ffeeee">
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわん0123456789あいうえおかきくけこさしすせそたちつてと </div><br>

両方向とも、スクロールバーを付ける<br>
<div style="border:double 6 green; width:400; height:90; overflow:scroll">
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわん0123456789あいうえおかきくけこさしすせそたちつてと </div><br>

縦方向のみ、スクロールバーを付ける<br>
<div style="border:groove 2 yellow; width:400; height:90; overflow-y:scroll">
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわん0123456789あいうえおかきくけこさしすせそたちつてと </div>
これをHTMLファイルにして、ブラウザで表示すると,次のようになります。
文字の大きさは、あらかじめ 16pt に設定してあります。
あふれる部分は表示しない
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわん0123456789あいうえおかきくけこさしすせそたちつてと

両方向とも、スクロールバーを付ける
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわん0123456789あいうえおかきくけこさしすせそたちつてと

縦方向のみ、スクロールバーを付ける
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわん0123456789あいうえおかきくけこさしすせそたちつてと
付属する属性は、上が背景色を付け、中は枠線が緑の2重線、下は枠線が谷線です。
これでわかるように、スクロールバーは、指定された大きさの内部に付きます。


D 座標による位置の指定

スタイルシートの位置を決める手法は、先項で出てきた margin でも出来ますが、ダイレクトに座標を指定して位置を指定する方法を紹介しましょう。 但し、ブラウザが「 Internet Explorer 」の場合です。( Netscape も Ver.7 は対応してるようです )

まずは座標による位置の指定と、次項で説明する重ね合わせを一緒に、その属性の一覧を揚げます。
属 性 属性名 属性値 デザインの種類
座標による
  位置の指定
position static 本来の位置を示す
relative 本来の位置からの、相対座標を示す
absolute 絶対座標を示す
重ね合わせの順序 z-index 0 以上の整数 小さいほど、下になる

座標による位置の指定は、「 position 」属性を使います。
  ■ 座標による位置の指定値
position:**
  ** // static   : 現在のカーソル位置を指す
        relative : 現在のカーソル位置からの距離を指定(相対位置)
        absolute : 表示画面の端からの距離を指定(絶対位置)
これらは、「相対座標」または「絶対座標」を指定しているだけで、これだけでは位置が決定できません。
これらの指定に続いて、座標を指定する必要があるわけです。
  ■ 座標の指定法
top:**   または  bottom:**   (縦方向)
left:**  または  right:**    (横方向)
  **  // 基準位置からの距離を px 値等で指定
                       ( px のみ単位記入は省略可能)
  ※ 基準位置  top : 上    bottom : 下    left : 左    right : 右
  ※ 座標が指すのは「基準位置」よりスタイルシート迄の空き寸法
現在カーソルより、下へ30ピクセル、右へ100ピクセルの例
style="position:relative; top:30; left:100"
画面の、下端から300ピクセル、右端から200ピクセルの例
style="position:absolute; bottom:300; right:200"

それでは練習ですが、3枚のシートを作り、その位置を少しずつずらしてみましょう。
大きさは、横300ピクセル、縦200ピクセルで、太さ1の直線で枠線が付いています。
1枚目は、カーソル位置で、規定の文字色(黒)で書かれています。
2枚目はそれより、横に50、縦に20ピクセルづつずらして、青の文字色で書かれています。
3枚目はブラウザ左より150、上より50ピクセルの位置に、赤の文字色で書かれています。
書いてある文字の大きさは、あらかじめ 25pt に設定してあるものとします。
メモ帳
<div style="position:static; border:solid 1; width:300; height:200">
  あいうえおかきくけこ</div>

<div style="position:relative; top:-180; left:50; border:solid 1;
  width:300; height:200; color:blue"> あいうえおかきくけこ</div>

<div style="position:absolute; top:60; left:200; border:solid 1;
  width:300; height:200; color:red"> あいうえおかきくけこ</div>
これをHTMLファイルにして、ブラウザで表示すると,次のようになります。
あいうえおかきくけこ
あいうえおかきくけこ
あいうえおかきくけこ
2枚目のシートの座標で、「 top:-180 」となっているのは、カーソルは、1枚目のシートを表示した後、そのシートの「次の行」の「左端」に移動しているため、シートの高さ分を上に戻して
   top:-180 ( = 20-200 )  と言う訳です。
3枚目のシートは、そのままブラウザの左上隅からの距離だから、解りやすいですね。

各シートは透明で、「posision」の値に「absolute」か「relative」を指定した場合は他のシートに影響なく、内容をダブらせる事が出来ます。
これらの性質を上手に使う事により、自由に配置できるわけです。
また、書いたシートの順に、上に重なっているのを覚えておいて下さい。


E 重ね合わせる順序の指定

前項では、書いたシートの順に、上に重なっていくのが解りましたが、この順番を変える事が出来ます。
重ね合わせの順序を指定する属性「 z-index 」を使います。
  ■ 重ね合わせる順序の指定値
z-index:**
  ** // 0 以上の整数を指定(大きい程、手前に重なる)
  ※ z-index は、 position:relative , position:absolute と同時に
     使用しないと効果はありません
次の例は、シートを一番下に持って来る場合の指定です。
style="z-index:0"

前項の例で、シートの重なりの順番を変えてみましょう。
2番目のシートを一番上に持ってきます。(z-index の値を順番に、 0 , 2 , 1 に設定)
重なりがよく分かるよう、同色系の背景色を付けます。
1シート目が「static」が「relative」に変えているのは「static」では、重ね合わせが出来ないからです。
メモ帳
<div style="position:relative; border:solid 1; width:300; height:200;
  z-index:0; background-color:#dddddd">あいうえおかきくけこ</div>

<div style="position:relative; top:-180; left:50; border:solid 1;
  width:300; height:200; color:blue; z-index:2;
  background-color:#ddddff">
  あいうえおかきくけこ</div>

<div style="position:absolute; top:60; left:200; border:solid 1;
  width:300; height:200; color:red; z-index:1;
  background-color:#ffdddd">
  あいうえおかきくけこ</div>
これをHTMLファイルにして、ブラウザで表示すると,次のようになります。
あいうえおかきくけこ
あいうえおかきくけこ
あいうえおかきくけこ
このように body タグだけでなく、スタイルシートにも背景関連の指定が出来、背景色を付けると、透明なシートが不透明になります。 背景画像を付けても同様です。
上の例では分かりやすいよう、下を少し透けて見せてますが、実際は全く透けません。
重ね合わせ順の応用例
重ね合わせ順の応用例として、画像をバックにして、文字を前に出したい時がありますが、
<img src="**.gif" style="position:** top:** left:**">
このように画像を指定すれば、画像が前面に来て文字を隠します。
この例では、文字と画像の両者をスタイルシートに貼り付け、両者の重ね合わせ順を z-index で指定すればOKですね。
さっそく、これを実際にやってみましょう。

普通に文字を書いた場合です。
メモ帳
文字を先に書いておきます。<br><br>
上から画像を貼り付けます。<br><br>
どうなったでしょうか?<br>

<img src="parts/kuma.gif"
  style="position:absolute; top:10; left:50">
これをHTMLファイルにして、ブラウザで表示すると,次のようになります。
文字はあらかじめ 16pt に、文字色を「 black 」に設定してあるとします。
文字を先に書いておきます。

上から画像を貼り付けます。

どうなったでしょうか?
次に文字を段落タグ「 p 」に付けたスタイルシートに貼り付け、 z-index を 1 にして、画像の z-index を 0 にします。
メモ帳
<p style="position:relative; z-index:1">
文字を先に書いておきます。<br>
上から画像を貼り付けます。<br>
z-index を設定して、<br>
文字を上にしました。<br>
どうなったでしょうか?
</p>
あああ
<img src="parts/kuma.gif"
  style="position:absolute; top:10; left:50 z-index:0">
これをHTMLファイルにして、ブラウザで表示すると,次のようになります。
文字はあらかじめ 16pt に、文字色を「 black 」に設定してあるとします。

文字を先に書いておきます。
上から画像を貼り付けます。
z-index を設定して、
文字を上にしました。
どうなったでしょうか?

あああ
文字が前に来て、うまく出来ましたね。 まるで背景画像と同じように使えますね。

スタイルを付けているタグが「 p 」なので、前後で「改行」+「空白行」がある事も注目してください。
ただ、段落がスタイルシートの1行目から始まる場合は、何故かその前の行に、空白行は出ないようです。
これらの点が、ただ改行だけする「 div 」タグを使った時と違うところです。

「position:absolute」や「position:relative」を指定したスタイルシートは、重ね合わせと共に、スタイルシートの入れ子の状態をうまく利用すれば、自由自在にホームページをレイアウト出来ます。(逆に言えば、ここがしっかり把握出来てないとチンプンカンプンです。)
また簡単な JavaScript と組み合わせる事で、さらに自在なレイアウトが可能になります。 そのイントロの部分は、いずれまた紹介する事としましょう〜(笑)


F クラス指定

ホームページを作っていれば、頻繁に使うオリジナルのデザインがあります。
たとえば、この学習室で、太字で薄黄色で引かれている、下記のようなマーカーですが

(例) あいうえおかきくけこさしすせそ

これは次の様に書かれています。
あいうえお<span style="font-weight:bold; background-color:#ffffaa">かきくけこ</span>さしすせそ
そこで、スタイル指定の部分
style="font-weight:bold; background-color:#ffffaa"
これをオリジナルのスタイルとして登録出来、簡単に呼び出せれば便利ですよね。
このように使えるのが、これから説明する「クラス指定」です。
まず、このスタイル指定に名前(クラス名)を付けます。 ここでは「 marker 」にします。

次に、前節で習った「タグの共通指定」と同じ <head> 〜 </head> の中に「クラス指定」を宣言します。
  ■ クラス指定法
.クラス名 { スタイル指定 }
  (クラス名の前に付くのは、ピリオド「.」)
  ■ クラスの呼び出し法
class = クラス名
今回の場合なら次のようになります。
  <head>
    <style type="text/css">
    <!--
      .marker{font-weight:bold; background-color:#ffffaa}
     -->
    </style>
  </head>
このようにクラス指定があれば、先程の「薄黄色のマーカー入り太字」は次の様に書けます。
あいうえお<span class=marker>かきくけこ</span>さしすせそ
これが「クラス指定」のしくみです。 多くのスタイル指定がある場合に効果的ですね。


このクラス指定を利用して、メニューの選択用のスイッチを作ってみましょう。

スイッチを指定するクラス名は「 switch 」にします。
スイッチは枠線を「 outset 」で太さ 2 ピクセル、文字は太字で中央寄せ、パディングは 5 ピクセル、幅が 100 ピクセル、背景色は #cccc66 にします。 これらをクラス指定しておきます。
このスイッチを、2行3列のテーブルで仕切り、それぞれの間隔は cellspacing 属性で 10 ピクセル空けます。
メモ帳
<html>
  <head>
    <style type="text/css">
    <!--
      .switch { border:outset 2; text-align:center; padding:5;
         font-weight:bold; width:100; background-color:#cccc66 }
     -->
    </style>
  </head>
<body>
  <table cellspacing=10>
  <tr>
    <td> <a href="#dum3" class=switch>選択1</a> </td>
    <td> <a href="#dum3" class=switch>選択2</a> </td>
    <td> <a href="#dum3" class=switch>選択3</a> </td>
  </tr>
  <tr>
    <td> <a href="#dum3" class=switch>選択4</a> </td>
    <td> <a href="#dum3" class=switch>選択5</a> </td>
    <td> <a href="#dum3" class=switch>選択6</a> </td>
  </tr></table>
</body>
<html>
これをHTMLファイルにして、ブラウザで表示すると,次のようになります。
画像バナーを使わなくても、かなりのデザインが作れますね。
他にも、文字の大きさ、書体などもクラス指定の内容を変えるだけで、簡単に変更出来ます。
背景に画像を指定すれば、楽しいものが出来そうですね。


G スタイル指定ファイルを作る

複数のホームページで、同じデザインを使う場合がありますね。
その場合ヘッダー部に同じ事を書くのも大変ですし、変更の際には全部のファイルを修正することになり、数が多くなれば大変ですね。
そんな時に、共通のスタイル設定をファイルにして、これを読み込めばOK・・こうなれば便利です。
実はHTMLには、このような機能が備わっています。

スタイル設定ファイルのルールを揚げます。
    スタイル設定ファイル
■ ファイル名
   ファイルの拡張子を「css」にする。
■ 記入方法
   <style type="text/css"> 〜 </style> の内容のみを書く
■ ファイルの呼び出し法  (<head> 〜 </head> 内に書く)
   <link rel=stylesheet href="ファイル名" type="text/css">
実例として、リンクのデザインと、body table 内の文字の大きさ、背景の設定、ここで練習したクラス指定を、共通のスタイル設定をファイルにまとめましょう。
ファイル名を「style.css」として、その内容を見ましょう。(復習を兼ねてます)
メモ帳
/* ---------- スタイル指定 ---------- */
body {font-size:11pt; background:white url(parts/icho.jpg)
      no-repeat center center}
table,tr,td {font-size:11pt}
a:link    { color:#6666cc; text-decoration:none }
a:visited { color:#4444e0; text-decoration:none }
a:hover   { color:#e02020; position:relative; top:1; left:1}
/* ---------- クラス指定 ---------- */
.marker {font-weight:bold; background-color:#ffffaa}
.switch { border:outset 2; text-align:center; padding:5;
          font-weight:bold; width:100; background-color:#cccc66 }
cssファイルでは、「 /* 」 〜 「 */ 」はコメント文(何も処理されない部分)を意味します。

次に、HTMLソースファイルの実例です。 復習を兼ねて内容を読みとってください。
style.css ファイルはHTMLファイルと同じフォルダにあるとします。
メモ帳
<html>
  <head>
   <link rel=stylesheet href="style.css" type="text/css">
  </head>
<body>

<font size=3>これが本来の標準の文字の大きさです。</font><br><br>
ここからは、スタイル設定による、標準の文字の大きさです。<br><br>

背景を画像一つにし、中央に表示しています。<br><br>

準備完了!<span class=marker>ここからマーカーが引かれます。</span>
  終わりました。<br><br>

リンクに当てると、場所が少しずれる設定にします。<br><br>
 <a href="#ue" class=switch>top</a>
 <a href="#sita" class=switch>bottom</a><br><br>

</body>
<html>
これをHTMLファイルにして、ブラウザで表示すると,次のようになります。
これが本来の標準の文字の大きさです。

ここからは、スタイル設定による、標準の文字の大きさです。

背景を画像一つにし、中央に表示しています。

準備完了!ここからマーカーが引かれます。終わりました。

リンクに当てると、場所が少しずれる設定にします。

 top bottom