1999.7.13 更新

・・・ インスタントCSS ・・・

    CSSとはカスケードスタイルシートの頭文字で、IE4、ネットスケープ4から加わった新機能である。しかし、どちらのブラウザも少々機能がことなり、互換性を保ったまま高度な機能を使うのは難しい。ここではCSSを利用してフォントを細かく指定する方法を紹介する。これは互換性の問題はなく、しかも対応していない古いブラウザではすんなりと無視されるので、使って損することはない。IEの「マウスをポイントしたときに下線が表示される」という特殊効果もCSSで実現可能である。


基本は.cssファイル

    このページもCSSを使っているが、それはcss.cssというファイルに情報が収められている。そのファイルの内容は:

TD {font-family: "MS UI Gothic"; font-size: 12pt;}
P {font-family: "MS UI Gothic"; font-size: 12pt;}
A:link {text-decoration: none; color: #990000;
  font-weight: normal; font-size: 12pt;}
A:visited {text-decoration: none; color: #000099;
  font-weight: normal; font-size: 12pt;}
A:hover {text-decoration: underline; color: #990000;
  font-weight: normal; font-size: 12pt;}
#menu { font-size: 10pt;}
#size11 { font-size: 11pt;}

    ようするに、ひとつひとつのタグの性質を指定できるようになる。テーブルを多く使う人はわかると思うが、テーブルの中身のフォントを一度に指定する方法はない。個々の<td>タグに<font>タグを埋め込むしかない。しかし、CSSを利用すれば、外から<td>タグ内のフォントが指定できるようになる。

    相変わらず全て英語なのはさすがに残念だが、とりあえず説明を加えておく:

  • font-family: フォント名の指定
  • font-size: フォントの大きさ。12ptなどとポイント単位で指定が可能。
  • font-weight: フォントの「重さ」。normal, boldなどの値がある。
  • text-decoration: テキストの修飾。
  • color: 色の指定
  • A:link リンク。
  • A:visited すでに訪問したリンク。
  • A:hover IE4以降でマウスがリンクの上にきた状態。

    上のサンプルコードを見てくれればわかると思うが、A:linkとA:visitedではtext-decoration: none;を指定しているにも関わらず、A:hoverはtext-decoration: underline;になっている。こうすることでマウスが重なったときに下線が表示されるようになる。


各HTML文書と結びつける方法

    HTMLファイルとCSSファイルを結びつけるには、HTMLファイルの<head>...</head>に以下を加えよう:

<LINK REL=STYLESHEET HREF="css.css" TYPE="text/css">

   ポイントは「HREF="..."」。ここに.cssファイルの場所を入れてリンクさせる。複数のHTMLファイルに同じCSSファイルを利用することで、フォントに関する修正が容易にできる。



copyright 1999, Keinosuke Miyanaga. all rights reserved.