29分でできる！あのサイトの“技”を盗め ― 第1回

チッちゃい画像にはデッカいツールチップを！

2008年09月01日 18時33分更新

文● 古籏一浩、ASCII.jp

HTMLタグを少し書き換えよう

　ツールチップを組み込むのは、「オレ流レシピ」という料理レシピを集めたサイトのトップページです。先ほどのフォト蔵のように、料理のサムネイル画像が並ぶシンプルなページになっています。最初に、何も組み込んでいない状態のソースコードを確認しておきましょう（作例ページ）。


JavaScriptを組み込む前の状態。レシピ画像上にマウスを重ねても特に変化はありません

■元のHTMLファイル

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<meta http-equiv="content-script-type" content="text/javascript">
<meta http-equiv="content-style-type" content="text/css">
<meta name="generator" content="手入力なのだ">
<link rel="stylesheet" href="css/init.css" type="text/css" media="all">
<title>オレ流レシピ</title>
</head>
<body>
<div id="contents"> 
<h3><a name="top">―「今晩のおかず」 から 「スイーツ」まで―</a></h3>
<h1>オレ流レシピ</h1>
<div id="memu">
｜<a href="#">トップ</a>｜
<a href="#">レシピ</a>｜
<a href="#">ブログ</a>｜
<a href="#">このサイトについて</a>｜
</div>
<br style="clear:left;">
<img src="images/line2.gif" width="490" height="10" alt="line" style="margin:30px 0px 30px 0px;" >
<div id="recipeImage">
<h2>新着レシピ</h2>
<img src="thumbnail/01.jpg" width="160" height="120" alt="" id="recipe1">
<img src="thumbnail/02.jpg" width="160" height="120" alt="" id="recipe2">
<img src="thumbnail/03.jpg" width="160" height="120" alt="" id="recipe3">
<br>
<img src="thumbnail/04.jpg" width="160" height="120" alt="" id="recipe4">
<img src="thumbnail/05.jpg" width="160" height="120" alt="" id="recipe5">
<img src="thumbnail/06.jpg" width="160" height="120" alt="" id="recipe6">
<br style="clear:left;">
</div>
<div id="news">
<h2>What's new</h2>
<ul>
<li>サイトをリニューアルしました(08/08/30)</li>
<li>和食のレシピを2つ追加しました(08/08/20)</li>
<li>新カテゴリ「エスニック」を追加しました(08/07/25)</li>
</ul>
<br>
<h2>このサイトについて</h2>
<p>
このサイトは管理人、高橋が個人的に運営する料理レシピサイトです。現在のレシピは全部で50種類以上。ゴハンのおかずのがっつりメニューから、スイーツ（笑）まで幅広く取り揃えています。詳しくは<a href="#">こちら</a>。
</p>
<br>
<h2>カテゴリで選ぶ</h2>
<ul id="category">
<li>和食</li>
<li>中華</li>
<li>スイーツ</li>
<li>洋食</li>
<li>エスニック</li>
<li>その他</li>
</ul>
<br style="clear:left;">
</div>
<div id="footer">
<p>Copyright Oreryu Recipe 2008 all rights reserved.</p>
<a href="#top">PAGE TOP</a>
</div>
</div>
</body>
</html>

　このページにツールチップを表示するためには、HTMLタグの追加と書き換えが必要です。追加するのは、それぞれのレシピ画像に対応した、ツールチップの文字や画像です。具体的には、以下の形式でタグと表示内容を設定していきます。

<div id="●●●ID名●●●" class="tooltips">
　ツールチップに表示する内容
</div>

　<div>タグを使ってスタイルシートクラス名に「tooltips」を指定します。ID名はプログラムで指定する時に必要になるもので、ページ内に同じID名があると正しく動作しないので注意して付けてください。今回のサンプルでは「recipeText1～6」と番号を割り振りました。ここが、重要なポイントです。

　というのも、ID名に「名前と番号」を組み合わせておくことで、とてもラクにツールチップを表示させることができるからです。詳しくは後で説明しますが、番号を使って規則的にID名をつけると、プログラムの行数を増やすことなく、100個、1000個とツールチップを簡単に追加／変更できるようになります。

　ツールチップに表示する内容がすべて用意できたら、対応するレシピ画像にもID名を割り当てましょう。<img>タグにID名を割り当てますが、ここでも同じID名にならないように注意してください。IDはある要素に対して固有の名前を与え、他の要素と区別するものですから、1つの文書の中に同じID名が何度も出てきてはいけないのです。ここでは先ほどのツールチップ名「recipeText1～6」に対応する形で、「recipe1～6」と設定しました。

<img src="thumbnail/01.jpg" width="160" height="120" alt="" id="recipe1">
<img src="thumbnail/02.jpg" width="160" height="120" alt="" id="recipe2">
<img src="thumbnail/03.jpg" width="160" height="120" alt="" id="recipe3">
<br>
<img src="thumbnail/04.jpg" width="160" height="120" alt="" id="recipe4">
<img src="thumbnail/05.jpg" width="160" height="120" alt="" id="recipe5">
<img src="thumbnail/06.jpg" width="160" height="120" alt="" id="recipe6">

　HTMLタグの設定が終わったら、今度はスタイルシートを設定しましょう。スタイルシートはtooltipsクラスを基準としてセレクタを設定します。指定したスタイルシートはHTMLファイル内に直接指定するのではなく、ほかのページでも使いやすいように、「main.css」ファイルとして読み込むようにしておきます。これで、ツールチップのスタイルを変更したいときは、main.cssだけを直せばよいことになります。

　スタイルシートファイルを読み込ませるには<link>タグを使い、読み込むスタイルシートファイルのパスを指定します。サンプルではcssフォルダ内にmain.cssという名前で入っていますので、以下のように指定して読み込ませます。

<link rel="stylesheet" href="css/main.css" type="text/css" media="all">

■main.css

/*
* ツールチップ
*/
.tooltips{
padding:15px;
background-color:#fafaf0;
}
.tooltips ul{
list-style:none;
background-image:url("../images/tip_bk.gif");
margin:0px;
padding:0px;
font-size:0.75em;
}
.tooltips ul li{
margin-bottom:8px;
}
.tooltips ul h4{
font-size:1.2em;
line-height:1em;
margin:0px;
padding:0px;
padding-bottom:4px;
border-bottom:2px solid #998866;
}

前へ 1 2 3 4 5 次へ

ツイートする