Webプログラミングは,プロはもちろんアマチュアのプログラマの間でも,もはや欠かせない開発ジャンルの一つです。しかし,書籍や雑誌の解説記事のほとんどが,データベースがどうとか,サーバーサイドがどうとか,どうしてもディープな方向に進んでしまう傾向にあります。もちろん,それはそれで大切なことなんですが,いったい何割の人が,その技術を“自分の”ホームページに使っているでしょう。

 最近話題の「リッチ・コンテンツ」にしても同様です。例えばFlash。たしかにActionScriptというスクリプト言語を使えば,動く,鳴る,つながると,いいこと尽くめです。でも,いかんせん「Macromedia Flash MX 2004を買ってきてね」とあっては,皆がみな使えるわけではありません。

 Part1でも解説があったようにblog(ブログ)の認知度が上がり,利用率も増えて,プロバイダからの提供体制も整ってきています。数年前のように「掲示板」や「日記」をCGI*1を使って作る必要もほとんどありません。トップページそのものがブログでいいわけで,そんなホームページはこれからどんどん増えるでしょう。このような時代に,いかに手軽にお安く,しかもほかのサイトに差をつけられるカッコいいホームページを作るか――Part2では,そんなニーズをお持ちの皆さんに,手軽なホームページ・プログラミンのワザを紹介しましょう。

もはやHTML+CSSが当たり前!

 2004年現在,HTMLはXHTML(Extensible HTML)の勧告や,CSS(Cascading Style Sheets)との分業制など,「構造的な改革」の時期を迎えています。長年標準仕様だったHTML4.0からXHTML1.0への変化は,HTML内部に大きな変化をもたらしているのです。

 それは,HTMLの定義が「ブラウザで閲覧するためのコンテンツを記述する言語で,コンテンツの背景や一部の文字列に対して,フォント種別,色,大きさの指定もできる」から,「テキストや画像(これらをコンテンツと総称)を構造化したもので,コンテンツの装飾はスタイルシート(CSS)で指定する」になった変化だと言えばいいでしょう(図1*2

図1●従来のHTML 4.0とXHTML勧告後の違い
図1●従来のHTML 4.0とXHTML勧告後の違い

 具体的にHTMLのコードを見てください。図2(a)は従来のHTMLのコード,(b)は最近主流となってきたXHTMLベースのコードです。ブラウザで確認していただければわかるように結果はどちらもまったく同じ表示(c)になります。しかしコードの書き方がずいぶん違うことは一目瞭然ですよね。

図2●XHTMLでは,コンテンツ(HTML)と装飾(CSS)を明確に分けて記述する
図2●XHTMLでは,コンテンツ(HTML)と装飾(CSS)を明確に分けて記述する
[画像のクリックで拡大表示]

 インターネットの有名なサイトの「ソース」を見てみれば,すでにいかにCSSが多用されているかを実感できます。しかしCSSを使っただけでは,クールなページを作るワザとは言えません。ご心配なく。なぜここでCSSの話をしたのかというと,CSSはJavaScriptで操作できるということをぜひお伝えしたかったのです。

<head>~</head>タグの中か
外部定義ファイルにCSSを記述する

 ここで,CSSの書き方をご存じない方のために簡単にCSSの基本を説明しておきましょう。

 CSSを記述する場所は,HTML内の<head>タグの中(エンベデッド・スタイルシート),HTMLのタグ要素の中(インライン・スタイルシート),外部定義ファイル(外部スタイルシート)の三つがありますが,一般的なのは<head>タグの中と外部定義ファイルです。

 <head>タグの中に記述する場合は,<style type="text/css">から</style>タグの間にCSSの内容を記述します。書式はリスト1のようになっています。頭に「.(ドット)」の付いているもの(リスト1ではbld)と付いていないもの(同body)がありますが,ドットのないものはその名前のHTMLタグに対する指定になります。body{~}は<body>タグでくくられた部分に対しての指定です。

リスト1●CSSの基本的な書き方
リスト1●CSSの基本的な書き方

 一方,ドットで始まっているものは<xxx class="クラス名">のクラス名で指定された部分に対してのみ適用されます。リスト1では<xxx class="bld">と指定されている部分に対して,CSSの指定が有効になります。タグ内に書くときには「class=".bld"」とは書かず,ドットを付けずに「class="bld"」と書く点に注意してください。

 図2(b)では<span class="bld">のような使い方で<span>タグに対してのみCSSを指定していますが,もちろん<p>,<div>,<table>,<li>,<form>など,あらゆるタグに対してCSSは使用できます。また,

クラス名{
スタイル指定:値;
スタイル指定:値;

}
のように,一つのクラスに対して複数のスタイル指定を行うこともできます。各行の末尾は「;(セミコロン)」です。改行を入れずに続けて書いても,セミコロンが区切りと見なされるので,無理に改行する必要はありません。しかしプログラマのたしなみとして,あとで見やすくするためにも,しっかり改行しておくべきでしょう。

 CSSを外部定義ファイルとして作っておく場合には,通例として「.css」という拡張子で保存します。外部定義ファイルでは,<head>タグに書いたときのような<style type="text/css">~</style>を記述する必要はありません。いきなりbody{~と書き始めて大丈夫です。

 外部定義ファイルは,HTMLの<head>部で次のような形で読み込みます。

<link 
  href="foo.css" 
  rel="stylesheet" type="text/css" />

この例ではfoo.cssという名前の外部定義ファイルを読み込んでいます。もしfoo.cssの保存位置(ディレクトリ/フォルダ)が,呼び出すHTMLと違う場所にある場合には,css/foo.cssのようにディレクトリ名も合わせて指定してください。

 CSSファイルを外部定義にしておくと,複数のHTMLから同じCSSを読み込んで,統一したデザインのサイトを簡単に構築できるようになります。「ちょっと背景色を変えたいな」といったときにも外部定義ファイルを修正するだけで,それを参照している全ページを一括変更できるわけですね。

 ――さて,CSSの基本はおわかりいただけましたか? CSSの解説といえば,普通はフォントの装飾とか背景色の指定といったところから始めるのですが,今回の目的は「ちょっとした工夫で,カッコいいページを作る!」です。以降は,あえてフォントうんぬんの解説をスキップして,あまり使われていないうえに,ちょっとプログラマブルなCSSについてサンプルを出して紹介していきたいと思います。

ホームページをクールにするワザ1
CSSで文字を出したり消したりする!

 CSSには大別すると,「装飾系」「位置系」「表示系」の三つの指定項目があります。装飾系はフォントやページ背景色の指定などを行うもの,位置系は画像やテキストの表示位置を指定するもの,表示系はコンテンツ内の任意のブロックを表示したり非表示にしたりといった指定を行うものです。紹介するのは最後の「表示系」を使ったワザです。

図3●文字が消えたり現れたりするページ
図3●文字が消えたり現れたりするページ

 簡単なところから始めてみましょう。HTML内の文字の一部を出したり消したりする,というテクニックです。文字を消すといえば,JavaScriptで何かのイベントを拾ってフォントの色を背景色と同じにしてしまう,というテクニックが知られています。しかしここでは,JavaScriptでCSSを制御してCSS的手法で消す,ということをやってみます。サンプルの実行結果は図3の通りで,マウスを矢印のあたりに動かすと「暑い」というテキストが出てきて,マウスを離すとテキストが消えます。コードを説明しましょう(リスト2)。なお,以降のすべてのサンプルはInternet Explorer(IE)6.0でないと正常に動作しない点をご了承ください。

リスト2●図3のページのHTMLコード
リスト2●図3のページのHTMLコード

 まず,(2)の<div onMouseOver="appear( )" onMouseOut="disappear( )">という部分に注目してください。onMouseOverはマウスが通過したとき,onMouseOutはマウス・カーソルが離れたときというイベントです。それぞれのイベントで下方にあるJavaScriptのappearとdisappearという関数(function)を呼び出しています。この関数内での命令は,id_aのstyleのvisibilityをvisible(あるいはhidden)にしろという簡単なものです。id_aってなんだ?と思うかもしれませんが,これはリスト2のコード中をよ~く探すと(3)の部分に,

<span class="cl_a" id="id_a">暑い</span>
  

と指定されているのがわかります*3。「class="cl_a"」はCSSのためのクラス名の定義,「id="id_a"」はJavaScriptのためのid名の定義です。

 CSSとしての初期設定はHTMLの<head>タグの中の(1)にあります。font-sizeやcolorはわかりますね。ポイントは「visibility:hidden;」という部分です。visibilityは「ブラウザ上での表示状態」を指定します。hiddenにすると,指定された部分がブラウザに出力されなくなります。つまりHTMLが読み込まれてすぐの状態では,「暑い」という赤くて大きめのフォント指定された部分(<span class="cl_a">)は表示されません。

 JavaScriptで指定部分のCSSを変化させるには,id名の定義が必要になります。そのため<span class="cl_a" id="id_a">のように「id="id名"」と指定します。ここがJavaScriptで使っていたid_aの部分だったんですね。

 さてid名が特定できれば,その部分のCSSの内容をJavaScriptで変更するのは簡単です。

id名.style.スタイル定義 = 値;

のように書きます(4)。