XHTML/CSS・トップ | JavaScript&CSS・目次

●コピー&ペーストして作る「戻る」「進む」ボタン

 ブラウザの「戻る」「進む」と同じ効果のあるボタンですが、JavaScript にCSSのスタイルシート(style要素)を組み合わせて、画像ではない普通のボタンにアクセントを付けてみました。ボタンの背景色、文字(種類、大きさ、色)、枠線(種類、太さ、色)、パディング(文字のまわりの空間)などデザインを自由に変更することもできます。たかがボタン、されどボタン・・・

■ サンプル↓


    (sample1)
    (sample2)
    (sample3)
    (sample4) 
    (sample5)  

注意:サンプルですが、ブラウザの「戻る」「進む」ボタンとまったく同じです。クリックすると本当に戻るか、進みます。(訪れたことのないページへは移動できませんが)

■ HTML文書にコピー&ペースト↓

<script type="text/javascript">
<!---
function backpage(){
 history.back();
}
function nextpage(){
 history.forward();
}
//--->
</script>
<style type="text/css">
<!--
.sample1 {
 font-family: "MS Pゴシック";
 background: #ffffff;
 color: #000000;
 font-size: 0.9em;
 padding-top: 0.2em;
 padding-bottom: 0.2em;
 border: double 3px #f1ffff;
}
-->
</style>

■解説↑

 HTML文書の<head>〜</head>の間の<title>〜</title>の下へペーストする。位置は、ブラウザ、メニューバーの「表示」をクリックし、プルダウンメニューから「ソース」または「ページ ソース」を開いて、位置を確認することもできます。(実際のソースは多少異なります。)注意する点としては、style要素の間にあるCSSの書式の真ん中がインデントされていますが、HTML文書に貼り付けるときに、作成ソフトによってはインデントが動いてしまうことがあります。その結果、スタイルが反映されないことがあります。インデントは半角スペース二つ分です。

■<body>〜</body>の間の任意の場所へコピー&ペースト↓

<form>
 <input type="button" value="前へ戻る" onclick="backpage()">
 <input type="button" value="次へ進む" onclick="nextpage()">
</form>

※「戻る」ボタンと「進む」ボタンが別々の場所に設置するときは、それぞれ、<form>〜</form>で囲んでから貼り付けてください。

■まとめ

 backpage、nextpageはJavaScriptにおいて、関数名と言われるもので作者が任意の名前を付けられます。使用可能な文字はJavaScriptで使われるキーワードや予約語を除く半角英字です。数字も使えますが、先頭には使えません。また、記号はアンダーバー( _ )が使えます。なお、半角英字の大文字・小文字は問いませんが、区別はされます。

 最初のサンプルソースのCSSソースはsample1ボタンのソースです。sample2〜sample5のソースは、以下のようになります。

■sample2〜sample5

<script type="text/javascript">
<!---
.sample2 {
 font-family: "MS UI Gothic",sans-serif;
 background: #ffff75;
 color: #2a194c;
 font-size: 0.9em;
 padding-top: 0.2em;
 padding-bottom: 0.2em;
 border: outset 6px #ff00ff;
}
-->
</style>

<script type="text/javascript">
<!---
.sample3 {
 font-family: "MS P明朝";
 background: #fffff9;
 color: #800000;
 font-size: 0.9em;
 padding-top: 0.2em;
 padding-bottom: 0.2em;
 border: inset 4px #0000ff;
}
-->
</style>

<script type="text/javascript">
<!---
.sample4 {
 font-family: "HG丸ゴシックM-PRO";
 background: #d763ff;
 color: #ffffff;
 font-size: 0.7em;
 padding-top: 0.2em;
 padding-bottom: 0.2em;
 border: ridge 4px #c0c0c0;
}
-->
</style>

<script type="text/javascript">
<!---
.sample5 {
 font-family: "Times New Roman";
 background: #e8fff5;
 color: #4b310c;
 font-size: 0.9em;
 padding-top: 0.2em;
 padding-bottom: 0.2em;
 border: groove 4px #001808;
}
-->
</style>

※sample1〜sample5はCSSではクラス名と言われているもので、作者が任意に名前を付けられます。使える文字は半角英数字です。(記号については、割愛します。)

■ デザインを変更する

 五つのサンプルがありますが、デザインを変更することができます。フォントファミリー(font-family)はフォント名を指定するプロパティです。カンマ( , )で区切ることにより、複数指定することもできます。background は背景色、colorは文字色、font-sizeはフォントサイズ、padding-topとpadding-bottomは文字列と枠線の間にある上下の空間を意味しています。borderは上下左右の枠線のデザイン(枠線の種類、太さ、色)をまとめるプロパティです。

 詳しい解説と応用については以下のページを参照にしてください。また、ここでは単位にエム(em)を使っていますが、それ以外の単位も使えます。使える値は長さを表す単位付きの数値とパーセンテージ(〜%)です。

■参考ページ

XHTML/CSS・目次 | JavaScript&CSS・目次

Copyright (C)2005-2007 http://www.xml.vc/