このページは、「ボタンテンプレートのHTMLとCSSを、最初の一行から書いてみよう！」という企画のチュートリアルです。

下の図が、このチュートリアルで作るボタンの完成図です。

完成図

このチュートリアルを実行する前に、ボタンテンプレートのセクションを一読しておくことをお勧めします。

まず、下のリンクをクリックして、このチュートリアルで使用するボタンテンプレート( tpl-sb-from-zero-t )をダウンロードしてください。

ダウンロード ( download-sb-from-zero-t.zip )

ボタンテンプレートをダウンロードした後、お持ちのAjaxいいねボタンに追加してください。ボタンテンプレートの追加の仕方に関しては、「テンプレートの追加」のページを参照してください。

チュートリアル用ボタンテンプレート( tpl-sb-from-zero-t )を、二行貼り付け方式で、ウェブページに貼り付けてください。

※ いいねボタンのKeyは「my-button」を指定したと仮定します。

Keyに"my-button"を入力

ホストページ上に、以下のような「お知らせ」が表示されることを確認してください。

「お知らせ」が表示される

貼り付けは完璧ですね。それでは、HTMLファイルから始めましょう！

ボタンテンプレートのHTMLファイルをテキストエディタで開いてください。HTMLファイルのパスは、iine/templates/tpl-sb-from-zero-t/html/tpl.html です。

HTMLファイル中には前ステップで表示した「お知らせ」のHTMLソースコードがはいっています。全行削除してファイルを空の状態にしてください。これでボタンのHTMLコードを書く準備ができました。

いいねボタンの外枠<div>を書き込みます。以下の二行をHTMLファイルに書いてください。

<div class="aiin-btn">


</div>

この <div class="aiin-btn">...</div> がボタンの外枠になります。この<div>タグの中をクリックすると、投票が行なわれます。

さて、<div>タグの中に何か入れておかないと、なにも表示されませんので、いいね！といれておきましょう。

<div class="aiin-btn">
	いいね！

</div>

ここで、ブラウザの更新ボタンをクリックしてください。ホストページ上に「いいね！」と表示されます。

「いいね！」が表示される

いいねボタンの中に投票数を表示しましょう。以下の一行を書き込んでください。

<div class="aiin-btn">
	いいね！
	<span class="aiin-vcnt"></span>
</div>

投票数は、<span class="aiin-vcnt"> と </span> の間に表示されます。

ブラウザのホストページを更新してください。以下のように、「いいね！」と投票数が表示されます。

「いいね！」と投票数が表示される

ボタンをクリックして、投票数が変わるか確認してください。

次のステップから、いいねボタンのCSSコードを書いていきます。HTMLファイルは、後で画像を挿入する際、もう一度だけ編集を行います。

ボタンテンプレートのCSSファイルをテキストエディタで開いてください。CSSファイルのパスは、iine/templates/tpl-sb-from-zero-t/css/tpl.css です。

もしCSSファイルに中になにかコンテンツがありましたら、全行削除してファイルを空の状態にしてください。これでボタンのCSSコードを書く準備ができました。

このステップでは、ボタンの色を指定します。文字の色を白、背景色を青にします。aiin-btn のクラスを持つ<div>が、ボタンのエリアを定義しますので、aiin-btn をCSSファイルに書き込みます。

一見すると、次のようなコードでいいような気がします。

.aiin-btn {
	color:white;
	background-color:blue;
}

しかし、aiin-btn のクラスは、他のいいねボタンでも使われているので、もし他のスタイルのいいねボタンが同じページに存在した場合、このCSSコードは、それらの色に影響を及ぼしてしまう可能性があります。そこで次のように書きます。

.%css-ctar% .aiin-btn {
	color:white;
	background-color:blue;
}

突然、出てきたこの %css-ctar% とは一体なんなのでしょう？

この %css-ctar% はホストページにロードされる時に、このテンプレートに固有な文字列に置換されます。このテンプレートの名前である tpl-sb-from-zero-t の場合ですと、aiin-css-tpl-sb-from-zero-t という文字列に置換されます。

加えて、HTMLファイルに書いたHTMLコードは、このテンプレートに固有な文字列( aiin-css-tpl-sb-from-zero-t ) をクラスにもった<div>によって囲まれて、以下のようなコードとして、ホストページにロードされます。（ 以下の赤の行は、自動的にHTMLファイルに挿入されますので、手動で書き込まないでください。）

<div class="aiin-css-tpl-sb-from-zero-t">
	<div class="aiin-btn">
		いいね！
		<span class="aiin-vcnt"></span>
	</div>
</div>

こうすることによって、CSSファイル内に書いたCSS項目が、このテンプレートのHTMLファイルに書かれたHTMLだけに適用されるようになります。

CSSの項目を書く時は、必ず以下のように、.%css-ctar% で始めてください。これでここに書いたCSSが、他のスタイルのいいねボタンに干渉することを防げます。

.%css-ctar% ........ {
	....................
	....................
	....................
}
.%css-ctar% ........ {
	....................
	....................
	....................
}
.%css-ctar% ........ {
	....................
	....................
	....................
}

ここで、ホストページを更新して、どのように表示されるか見てみましょう。

文字色と背景色が適用される

色はきちんと適用されていますが、気になるのは、文字のまわりにまったくスペースがないので窮屈な感じがします。次のステップで隙間を作りましょう。

ボタンのスタイルに padding:10px; を加えて、文字のまわりに隙間を作ります。

.%css-ctar% .aiin-btn {
	padding:10px;
	color:white;
	background-color:blue;
}

ホストページを更新して、結果を見てみます。

「padding:10px;」を追加

ボタン上にマウスのカーソルをのせた時に、カーソルがポイント型のアイコンに変わるようにします。

ポイント型マウスカーソル

ポイント型のカーソルを使用するには、cursor:pointer; をCSSに追加します。

.%css-ctar% .aiin-btn {
	padding:10px;
	color:white;
	background-color:blue;
	cursor:pointer;
}

ホストページを更新して、マウスカーソルが変わるかテストしてみてください。

ボタンにハートマーク( ♥ )の画像を追加します。画像はこのテンプレートフォルダの img フォルダ内に用意されている icon.png というファイル名の画像を利用します。HTMLファイルに戻って、以下の一行を追加してください。

<div class="aiin-btn">
	<img class="aiin-icon" src="%url-tpl%img/icon.png">
	いいね！
	<span class="aiin-vcnt"></span>
</div>

新しく挿入した<img>タグのソースURLは、%url-tpl%img/icon.png です。このURLの中にある %url-tpl% の部分は、ボタンテンプレートのフォルダの位置を指すURLに、自動的に置換されます。従って、%url-tpl%img/icon.png は、ボタンテンプレートのフォルダ内の img フォルダの中にある icon.png を指し示します。

さて、<img>タグには、aiin-icon というクラスを指定しましたので、aiin-icon のCSS項目をCSSファイルに書き込みます。

.%css-ctar% .aiin-btn {
	padding:10px;
	color:white;
	background-color:blue;
	cursor:pointer;
}
.%css-ctar% .aiin-icon {

}

新しいCSS項目を追加する時は、.%css-ctar% で始めることを忘れないでください。

ここでは、画像の幅( width )及び高さ( height )と、縦方向の揃え位置( vertical-align )を指定します。

.%css-ctar% .aiin-btn {
	padding:10px;
	color:white;
	background-color:blue;
	cursor:pointer;
}
.%css-ctar% .aiin-icon {
	width:20px;
	height:20px;
	vertical-align:middle;
}

ブラウザを更新して、結果を見てみます。

画像を追加する

ハートマークの画像が表示されました。

今回は、%url-tpl% をHTMLファイル内で使用したわけですが、CSSファイル内でも使用できます。以下の例は、ボタンテンプレート内の img フォルダの中にある画像( bg.jpg )を、ボタンの背景に指定します。

.%css-ctar% .aiin-btn {
	background:url("%url-tpl%img/bg.jpg");
}

クリックされた後に背景色が変わるようにするためには、.aiin-btn.aiin-sel のCSS項目を追加します。

.%css-ctar% .aiin-btn {
	padding:10px;
	color:white;
	background-color:blue;
	cursor:pointer;
}
.%css-ctar% .aiin-icon {
	width:20px;
	height:20px;
	vertical-align:middle;
}
.%css-ctar% .aiin-btn.aiin-sel {

}

background-color:green; を追加して、クリックされた後に背景色が緑になるようにします。

.%css-ctar% .aiin-btn {
	padding:10px;
	color:white;
	background-color:blue;
	cursor:pointer;
}
.%css-ctar% .aiin-icon {
	width:20px;
	height:20px;
	vertical-align:middle;
}
.%css-ctar% .aiin-btn.aiin-sel {
	background-color:green;
}

ページを更新して、いいねボタンをクリックしてみてください。ボタンの背景色が緑に変わります。

背景色が変化する

これでチュートリアルの全ステップが終了いたしました。以下が完成したコードです。

HTMLファイル ( tpl.html )

<div class="aiin-btn">
	<img class="aiin-icon" src="%url-tpl%img/icon.png">
	いいね！
	<span class="aiin-vcnt"></span>
</div>

CSSファイル ( tpl.css )

.%css-ctar% .aiin-btn {
	padding:10px;
	color:white;
	background-color:blue;
	cursor:pointer;
}
.%css-ctar% .aiin-icon {
	width:20px;
	height:20px;
	vertical-align:middle;
}
.%css-ctar% .aiin-btn.aiin-sel {
	background-color:green;
}

最後に二点ほど復習します。

それでは、さらにHTMLとCSSを追加して、独自のいいねボタンに仕上げてください。お疲れ様でした!