第5章　応用テクニックのマスター

6.CSSでテキストを管理する

CSSはカスケーディング･スタイルシートの略称になります。今までWebページは、HTMLで記述していましたが、HTMLだけではWebページのデザインは充分な表現ができません。そこでCSSという記述を使ってフォントの指定などを行い、ブラウザの種類やMacでもWindowsでも同じように表現できるWebページを作成することができます。

では、Netscape Communicator 4.7とInternet Explorer 5.0で実際の見え方の違いを見てみましょう。Netscape Communicator 4.7の場合は初期設定で標準フォントは平成明朝の12ポイントになっています。またIE 5は16ポイントのOsakaフォントになっていますね。スタイルシートを使わない場合は下図のように見えるはずです。

どうです?　両ブラウザで文字の大きさを含め見え方がかなり異なっていますよね。

では、スタイルシートで指定した例を見てみましょう。

どうです?　両ブラウザが同じような感じで見えると思います。また、行間が開いていて、読みやすい日本語になっています。

1.タグセレクタについて

CSSの記述の方法には、HTMLのタグを補足する機能があります。PageMillで作成したWebページをソースモードで見ると<>で囲まれた単語があります。このことをタグと読んでいます。この囲まれた範囲をCSSで指定します。

ではタグセレクタを使って行と行の間隔を170%に設定してみます。PageMIllのHTMLソースモードを使います。

※ここで「option」と「コマンド(リンゴマーク)」キーを押しながら「H」を押すと、HTMLソースモードのウィンドウが新規に作成されて、ちょっとだけ便利です。

(1)BODY

PageMillで作成されたWebページを見てみると、テキストは<BODY></BODY>に囲まれています。この囲まれた範囲のテキストの行間を変えてみます。下記内容は行間を1.7文字分に変更したCSSです。

　<HEAD>
　<META NAME="GENERATOR" CONTENT="Adobe PageMill 3.0J Mac">
　<META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=Shift_JIS">
　<TITLE>Untitled Document</TITLE>
　<STYLE TYPE="text/css">
　<!-- body { line-height: 1.7em } -->
　</style>
　</HEAD>

このように、<HEAD></HEAD>に先に記述します。まず、赤字の1行目<STYLE>は、CSSを使いますという宣言で</STYLE>で終わります。2行目が、bodyで囲まれた範囲の、行間を1.7文字分(em:エム)にする。といったことを記述しています。これ以降にbodyで囲まれた範囲というのは、他のWebページをソースモードで見てみると<BODY>から</BODY>の「タグ」で囲まれた範囲に文章が書かれていることがわかります。その間に記載されたフォントの指定を右にしているということです。

CSSの機能がないブラウザやスタイルシートの機能をオフにしているブラウザで、エラーにならないのはフォントサイズの指定が「<!--」から「-->」で囲まれているからです。「<!--」「-->」で囲まれた範囲をブラウザではコメントとして扱い、スタイルシートの機能があるブラウザは、その指定で表示します。

(2)TD

BODYに囲まれた範囲のテキストの行間が1.7文字分開いたことを確認していただけたと思います。でも、テーブル(表)でレイアウトしたテキストは従来のままですね。bodyもテーブル内のテキストも、行間を指定するのは、HTMLソースモードで眺めてみると、テーブルは<TD></TD>の「タグ」で囲まれていることがわかります。

<!-- td,body { line-height: 1.7em } -->

上記のように設定すれば、テーブルで囲まれたテキストも行間が指定されたように変更されるのがおわかりになると思います。このようにHTMLの<>で挟まれたテキストをCSSで設定することを「タグセレクタ」と呼びます。

2.フォントの大きさを指定する

行間はline-height: 1.7emで指定できました。次は、フォントの大きさを指定してみます。ただし、PageMillでフォントサイズを+1等のように指定していると、HTMLの方が優先されることがあります。もしうまくCSSで指定したサイズにならないときはHTMLソースモードで<font Size>の記述がないか確認して下さい

<!-- body,td { font-size: 12px ; line-height: 1.7em } -->

上記のように、font-sizeを記述します。この指定例では、12ピクセルという単位で指定しています。ワープロでは、フォントの大きさは12ポイントのようにポイントで指定しますが、ポイントで指定すると解像度の関係でMacとWindowsの文字の大きさが異なっています。そこでピクセルという単位で指定するとMacとWindowsでの違いは少なくなります。次はフォントの種類を指定してみましょう。

3.見出しのフォントサイズを指定する

見出しのフォントを指定してみます。

　h1 { font-size: 20px; line-height: 1.7em; text-decoration: underline }
　h2 { font-size: 18px; line-height: 1em; text-decoration: underline }
　h3 { font-size: 16px; line-height: 1.7em; font-family: Osaka }
　h4 { font-size: 14px; line-height: 1.7em; font-family: Osaka }
　h5 { font-size: 12px; line-height: 1.7em; font-family: Osaka }

見出し1で指定されたWebページをHTMLソースモードで見てみると<h1></h1>で囲まれていることがわかりますね。上記のように設定すれば、それぞれの見出しで囲まれた範囲のフォントを指定できます。上記例では、見出し1と見出し2は、下線を引くよう指定しています。

4.色を指定する

<STYLE TYPE="text/css">
<!-- 　 　
H6{color:black;font-size: 10px; font-family: Osaka; } 　
H5{color:black ;font-size: 12px; font-family: Osaka; }
H4{color:green;font-size: 14px; font-family: Osaka; }
H3{color:brown;font-size: 16px; font-family: Osaka; }
H2{color:orange;font-size: 18px; font-family: Osaka; }
H1{color:black;font-size: 24px; font-family: Osaka; background: darkgray;}
-->
</STYLE>

上記例では、フォントの色を指定しています。また見出し1ではテキストの背景色をも指定しています。

5.フォントファミリー

次のfont-familyはosakaというフォントで表示するということを指定しています。例えばNetscapeというブラウザーの標準に表示されるフォントは平成明朝ですが、Mac OS 9とかですと、Osakaフォントはなめらかに表示されるために、綺麗にフォントが見えます。そこでブラウザーの指定を無視してOsakaで表示しています。

※OsakaフォントはMacだけ(一部Unix用に改造しているユーザーもいます)ですから、Windows用や基本フォントの指定もしておくといいと思います。

font-family: Osaka,"ＭＳ Ｐゴシック",sans-serif;

6.内部スタイルシートと外部スタイルシート

これまで、見出しと段落をスタイルシートにしました。スタイルシートというのは、従来からあった<H1>とか<P>といったタグを、スタイルシートで指定されたタグと関連づけることによって、ブラウザーが表示させる機能になります。これを「タグ」セレクタと呼びます。(他にも「クラス」や「ID」セレクタがあります。もうひとつスタイルシートの種類で、「内部」スタイルシートと「外部」スタイルシートがあります。

(1)内部スタイルシート

内部スタイルシートは、今までの例のようにWebページ内に記述することです。これだと全てのWebページにコピー&ペーストしなくてはいけませんし、もし変更があった場合はまた全部のページを変更しなくてはいけませんね。そこでスタイルシートを一元管理する目的で、外部スタイルシートがあります。

(2)外部スタイルシート

外部スタイルシートでは、例えば、見出しや段落などどのWebページでも共通にしたいことを定義しておきます。あるページだけを特別なフォントで指定したいときに内部スタイルシートを使うといいと思います。

赤線の上に、<LINK REL="stylesheet" HREF="style.css" TYPE="text/css">という記述がありますね。これはこのWebページは、外部スタイルシートstyle.cssにリンクされていますという記述です。

ではリンク先のstyle.cssというファイルはどういう記述になっているのか見てみます。

　td,body { font-size: 14px; line-height: 24px; font-family: Osaka,"ＭＳ Ｐゴシック",sans-serif}
　h2 { font-size: 18px; line-height: 24px; font-family: Osaka,"ＭＳ Ｐゴシック",sans-serif;}
　h3 { font-size: 16px; line-height: 24px; font-family: Osaka,"ＭＳ Ｐゴシック",sans-serif;}
　h4 { font-size: 12px; line-height: 24px; font-family: Osaka,"ＭＳ Ｐゴシック",sans-serif; }
　h5 { font-size: 10px; line-height: 24px; font-family: Osaka,"ＭＳ Ｐゴシック",sans-serif;}

この6行をSimple Text等のテキストエデッターでコピーし、style.cssのファイル名で、あなたのホームページが保存してあるフォルダーに保存して下さい。

そして、<LINK REL="stylesheet" HREF="style.css" TYPE="text/css">の記述をあなたのWebページにコピーしてください。

これで、もしテキストに関することを変更するのであれば、style.cssファイルを開いて修正するだけで、全てのWebページのテキストが変更され一元管理できることになります。

スタイルシートもっともっと機能豊富です。スタイルシートを使えばテーブルやSpace.gifを使わずにWebデザインもできます。

では、多くのWebページで外部スタイルシートが使われています。ちょっと覗いてみましょう。まず、わかりやすいところマックで作られているホームページで代表的なところと言えば「Macお宝鑑定団!!」ですね。http://www.tcp-net.ad.jp/danbo/ここをブラウザで覗いてみましょう。で、表示されたら、「ソース表示」にしてみます。Internet Explorerなら、「表示」メニューから「ソース表示」を選択します。ちょっとややこしそうなHTMLが表示されます。その中に <LINK href=style.css rel=STYLESHEET type=ﾓtext/css>という文がありますね。

この中で、LINK href=style.cssというのが、外部スタイルシートがあるWebページです。では、http://www.tcp-net.ad.jp/danbo/にstyle.cssを足して、http://www.tcp-net.ad.jp/danbo/style.cssとしてブラウザーで表示させてみて下さい。どうです?　覗けたでしょう?　 必要なところをSimple textなどのテキストエデッターへコピー&ペーストして、自分のWebサイトに保存すればOkです。保存先はindex.htmlがあるフォルダと同じところがいいですね。ファイル名の拡張子は.cssにします。このように見ていけばたいへんいい教材があることがわかりますね。

なんとなく、スタイルシートについて、わかってきていると思います。HTMLでは、まだまだ思ったようにデザインできないから、それを補完するのがスタイルシートです。スタイルシートは正確にはCSS(カスケード･スタイル･シート)といって1996年に登場しました。

7.CSSの「C」カスケード

カスケードってのは、よくわかりにくいんだけど、僕は順番になっているって覚えています。なんの順番かというと、優先順位があってそれは次の順番になっています。

(a)ブラウザーの初期設定
(b)外部スタイルシート
(c)内部スタイルシート

大ざっぱにはこうなっていて(本当におおざっぱだけど)、何も指定されていなければ、ブラウザーの初期設定で指定します。スタイルシートの内部でもいろいろ優先順位があります。

8.行頭を一文字字下げ

P{text-indent: 1em; /*　行頭は一文字右へ*/
line-height: 1.5em; /*行幅は1.5文字分*/}
/*で囲むとコメントとして利用できます。

9.色の指定について

orangeとかredとかだけの色だけでもなくいろいろな色が指定できます。こちらのページを参考にして下さいね。例えば色の指定にcolor:#9999ffってやり方もできます。

10.リンクのテキストを、マウスを位置づけると色を変える

これもCSSの機能のひとつで、Internet Explorer 4.5以上で実行されます。残念ながらNetscape 4.xでは変わりません。下記、HTMLの赤字の部分をコピーしてお使い下さい。通常は黒文字のリンクで、マウスを位置づけると赤字に変わります。
<title>i@PageMill</title>
<style media="screen" type="text/css">
<!--
a { color: #000000 }
a:hover { color: #ff0000 }
-->
</style>

</head>

10.マウスを位置付けると色を変える ちょっぴり応用編

背景の色が反転させるのは

a { color: #000000 ; background-color: #ffffff}

これで リンクされた文字の色は黒で背景色は白です。

background-color: transparent にすると透明になります。

a:hover { color: #ffffff ; background-color: #000000}

にすると文字が白で背景色が黒に変わります。

応用編で

a {
color: #000000 ;
background-color: #ffffff
padding: 5px;}

とするとリンクテキストのまわりに5ドットの余白 = 背景色をつけることができます。

だめ押し(?)で

a {
color: #000000 ;
background-color: #ffffff
padding: 5px;
border: 1px solid #9bdfff;
}

とすると罫線枠を引くこともできます。

11. 余白の魔術師

「ここは、もう少し余白を取りたい。」といった場合は、段落であれば改行を幾つか挿入して調整された方が多いと思います。そういった時もCSSを使うと便利です。

■1行目だよ

■2行目です。

上は何も指定しないときです。では、CSSを使うと

■1行目だよ

■2行目です。

のように、2行目の上に100ピクセルの空白を開けたりできます。単位がピクセル(= ドット = 点)ですから微妙に開けることが可能です。

これも、CSSの別な使い方です。「■2行目です。」は、ソースモードでHTMLを修正します。

修正前: <p>■2行目です。</p>

修正後:<p style="margin-top: 100px">■2行目です。</p>

このstyleというのが、HTMLのタグの中に部分的にCSSの指定をする指定です。margin-topが上余白、同じようにmargin-leftは左余白、margin-bottom(下に余白)、margin-right(右に余白)など指定できます。

段落である<p>タグだけでなく、画像である<img>タグにも利用できます。画像を少し右に配置したい場合などにも便利だと思います。

12. 範囲指定

さらに、次のステップに行きます。CSSで例えばリンクテキストの色を変えたとします。でも上側のメニュー部と下側の本文ではリンクテキストの色をわけるには、範囲指定すればいいです。

範囲指定は2種類あります。

1.インライン要素

2.ブロック要素

まずは、インライン要素の説明です。

(1) インライン要素

<p>Macに限らず、パソコンで日本語入力を行うためには「日本語入力システム」というプログラムが必要です。</p>

上では段落(p)タグを例にしましたが、開始タグから終了タグの間を範囲指定をする場合に使います。範囲指定したい最初を<spam class="クラス名">、終わりを</span>で囲ってやればいいです。

で、CSSの外部ファイル名などに“.クラス名 {color: #ff0000}”のように指定します。クラス名は任意の英数字です。

(2) ブロック要素

インライン要素より、こちらのブロック要素をよく使います。

<p>Macに限らず、パソコンで日本語入力を行うためには「日本語入力システム」というプログラムが必要です。</p>

<div class="クラス名"><p>Macに〜</p><p>なんでも</p><p>iMacが欲しくなる!</p></div>

上のように複数のタグを範囲指定できます。範囲指定の開始位置に<div class="クラス名">、終わりに</div>を指定します。

サンプルのソースを見ると理解できると思います。

HTMLの中に<div> 〜 </div>が範囲指定したところです。<head> </head>内のCSS定義に“.sample2”という「クラス」名を付けて定義します。

CSSの指定は、“.”+クラス名+空白+HTMLのタグです。段落タグの場合は“.クラス名 p {color: #ff0000}”です。クラス名は英数字で任意の綴りになります。

| ← | ↑ | → |

Update: Wed, Dec 1, 2004 / 12:39:07 AM