[トップページに戻る][ホームページ実用小技集のトップへ戻る]
スタイルシートを使うと、テーブルタグを使わなくてもボックス系要素のテキストの周囲に枠線を入れることができます。上のタイトルもこれを使っています。IE、NNともバージョン4.0以降が対応しています。以下の８種類が指定できます。
solid（直線）
<P STYLE="border-style:solid; border-width:2px 2px 2px 2px ;">solid（直線）</P>
groove（溝線）
<P STYLE="border-style:groove; border-width:2px 2px 2px 2px ;">groove（溝線）</P>
ridge（稜線）
<P STYLE="border-style:ridge; border-width:2px 2px 2px 2px ;">ridge（稜線）</P>
double（二重線）
<P STYLE="border-style:double; border-width:3px 3px 3px 3px ;">double（二重線）</P>
inset（沈んで見える線）
<P STYLE="border-style:inset; border-width:2px 2px 2px 2px ;">inset（沈んで見える線）</P>
outset（浮き上がって見える線）
<P STYLE="border-style:outset; border-width:2px 2px 2px 2px ;">outset（浮き上がって見える線）</P>
以下の２つはIE5.5以降、ネットスケープ6.0以降が対応。それ以外のバージョンはsolidで表示されます。
dashed(点線）
<P STYLE="border-style:dashed; border-width:2px 2px 2px 2px ;">dashed(点線）</P>
dotted（丸い点線）
<P STYLE="border-style:dotted; border-width:2px 2px 2px 2px ;">dotted(丸い点線）</P>
border-width:2px 2px 2px 2px は上、右、下、左の枠線の太さを表します。0を指定すると、表示されません。border-widthを使わないと、ネットスケープで表示できません。数字のほかキーワード指定でmedium、thin、thickが指定可能です。初期値はmediumです。枠線はIEとNNでは表示の仕方が異なりますので、確かめてみてください。
枠線が指定できるタグには限りがあります。対応タグは下記の通りです。
枠線対応タグ一覧
| タグ | IE | NN |
| BLOCKQUOTE | ○ | ○ |
| BODY | ○ | ○ |
| BUTTON | ○ | × |
| CAPTION | ○ | × |
| CENTER | ○ | ○ |
| DD | ○ | × |
| DIV | ○ | ○ |
| DL | ○ | ○ |
| DT | ○ | ○ |
| FORM | ○ | ○ |
| Hn | ○ | ○ |
| IFRAME | ○ | × |
| IMG | ○ | × |
| ISINDEX | ○ | × |
| LI | ○ | × |
| MARQUEE | ○ | × |
| MENU | ○ | ○ |
| OBJECT | ○ | ○ |
| P | ○ | ○ |
| PRE | ○ | ○ |
| SPAN | × | ○ |
| TABLE | ○ | × |
| TD | ○ | × |
| TEXTAREA | ○ | ○ |
| TR | ○ | × |
| UL | ○ | ○ |
スタイルシートを使って、ボタンを飾りましょう。（注：NNは未対応）
これはただのボタンです。
ボタンの文字と背景の色を変えてみると、
<FORM action="">
<INPUT TYPE="button" VALUE="ボタン" STYLE=" color: #00FF66; background-color: #000000;">
</FORM>
<FORM action="">
<INPUT TYPE="button" VALUE="ボタン" STYLE=" color: #000000; background-color: #FFCC33;">
</FORM>
大きさも変えられます。
<FORM action="">
<INPUT TYPE="button" VALUE="ボタン" STYLE=" width:100px; height:20px; color: #000000; background-color: #FF0000; font-weight: bold;">
</FORM>
背景に画像も貼れます。
<FORM action="">
<INPUT TYPE="button" VALUE="ボタン" STYLE="width:100px; height:30px; color: #0000FF; background-image: url(画像のurl); font-weight: bold; font-size: 17px;">
</FORM action="">
さまざまなボタンが作れますが、色の組み合わせは難しいですね。頑張ってセンスのあるボタンを作ってみてください。
ボタンの小技が出たついでにもう一つ。４で「バックボタンの挿入」を紹介しましたが、これの応用で２つ戻るボタンも作れます。
<FORM action="">
<INPUT TYPE="button" VALUE="２つ前へ" onClick="history.go(-2)">
</FORM>
これはJavaScriptのヒストリー（履歴）オブジェクトを使います。
ちなみにあなたの現在のヒストリーは
です。１以下の方は上のボタンを押しても戻れません。
history.go(-2)の-2を-3に変えれば、３つ前のページに戻ります。ブラウザの「戻る」「進む」（NNは「次」）ボタンと同じですね。「進む」ボタンを作る場合はbackやgoの代わりにforwardを使います。
<FORM action="">
<INPUT TYPE="button" VALUE="進む" onClick="history.forward()">
</FORM>
この「進む」ボタン、ブラウザの「進む」ボタンがグレーアウトしている場合は使えません。文字列を使う場合は以下の通りです。
[<A HREF="JavaScript:history.go(-2)">２つ前へ</A>]
[<A
HREF="javascript:history.forward()">進む</A>]
指定した日までの時間を下のようにリアルタイムでカウントダウンします。
まず、表示するページの<BODY>タグにonLoad="display()"を書き加え、
<BODY onLoad="display()">
としてください。表示したい場所に以下のスクリプトを書きます。これは日も表示する基本形です。
<form action="" name="form1">
<INPUT TYPE=text SIZE=35 NAME=days STYLE=" color: #000000; background-color:
#FFFFFF;">
<SCRIPT type="text/javascript" language="JavaScript">
<!--
mdate = new Date(2010,0,1)
function display() {
today = new Date()
days = Math.floor((mdate-today)/(24*60*60*1000))
timeD = Math.floor(((mdate-today)%(24*60*60*1000))/(60*60*1000))
timeM = Math.floor(((mdate-today)%(24*60*60*1000))/(60*1000))%60
timeS = Math.floor(((mdate-today)%(24*60*60*1000))/635)%60%60
if((mdate - today) > 0){
document.form1.days.value = "2010年まで"+days+"日"+"と"+timeD+"時間"+timeM+"分"
}
else{
document.form1.days.value = "2010年！ A Happy New Year!"
}
tid = setTimeout('display()', 1000)
}
// -->
</SCRIPT>
</form>
日を表示せず、時間に換算する場合は13行目を以下の通りに書き換えます。
document.form1.days.value = "2010年まで"+(timeD+days*24)+"時間"+timeM+"分"
秒まで表示するには同じく13行目をこう書きます。
document.form1.days.value = "2010年まで"+(timeD+days*24)+"時間"+timeM+"分"+timeS+"秒"
このように13行目を書き換えることでいろいろな表示ができます。2020年までをカウントダウンする場合は３カ所にある2010を2020に変えてください。
いちおう、スクリプトの説明。指定日から今日の日付を引いて表示しています。１行目はフォームの名前です。ページ内に複数のフォームを設置する場合は必ず名前を変える必要があります。２行目の“STYLE”以降はフォームの文字の色と背景色を指定します。センスのある表示に変えてみてください。ネットスケープは対応していません。
６行目に指定日を書きます。JavaScriptの日付オブジェクトは0が1月になりますから、2010年１月１日は上記のような書き方になります。2010年2月1日は(2010,1,1)となりますのでお間違えなく。７行目で今日の日付を取得しています。８行目から11行目まではそれぞれ残り日数、時間、分、秒を取得する演算式。12、13行目は指定日から今日の日付を引いて0より大きかった場合は残日を表示するという条件式です。0以下の場合は16行目に指定したメッセージを表示します。これも好きなように書き換えてください。
上のスクリプトの応用で指定日からの日数経過を表示します。
スクリプトは以下の通りです。
<SCRIPT type="text/javascript" language="JavaScript">
<!--
myDate = new Date();
mday = new Date(1999,4,21);
countup=(myDate.getTime()-mday.getTime())/(24*60*60*1000);
countup=Math.ceil(countup);
document.write("ホームページ公開後"+countup+"日です");
//-->
</SCRIPT>
４行目に指定日を書いてください。「シネマ１９８７online」は1999年５月21日にホームページを公開しましたから、(1999,4,21)となります。
別ウィンドウを大きさを指定して開くスクリプトです。サンプルをクリックすると、別ウインドウが開きます。
下のスクリプトはヘッダーに書きます。
<SCRIPT type="text/javascript" language="JavaScript">
<!--
function subWin(){
window.open("sample2.htm","window1","width=290,height=100,scrollbars=0");
}
//-->
</Script>
“sample2.htm”は開くウィンドウのファイル名を書いてください。widthで開くウィンドウの横幅、heightで高さを指定します。単位はピクセルです。ウィンドウにスクロールバーを付けるときは１、付けない時は０を指定します。このほか、ツールバー（toolbar）、ロケーション（location）、ディレクトリ（directories）、ステイタス（status）、メニューバー（menubar）、リサイズ（resizable）のオプションがあります。それぞれ有効にするときは１、無効にするときは０を指定してください。指定を書かなければ、０を指定したときと同じことになります。
次に開くウィンドウをリンクさせます。以下の要領でスクリプトをリンクさせたい場所に書いてください。
<A HREF="JavaScript:subWin()">サンプル</A>
ウィンドウに閉じるボタンを付ける場合は以下のスクリプトを開くウインドウのファイルに書いてください。
<FORM>
<INPUT TYPE="button" VALUE="閉じる" onClick="window.close()">
</FORM>
ページを表示した途端に別ウィンドウを開く場合は<BODY>タグにonLoad="subWin()"を書き加えます。ポップアップ広告によくありますが、うるさく感じる人も多いでしょう。僕も自動的に開くウィンドウはすべて閉じるようにしています(^^ゞ。使う場合はほどほどに。
ページにお気に入りに追加するボタンを付けます。NN、Mozillaは非対応で、IEのバージョン4.0以上が対応しています。<FORM>タグを書いていないのでNN4.xでは表示されません（6.0以降は表示されますが、使えません）。
<INPUT TYPE="button" value="お気に入りに追加して！" onClick="javascript:window.external.AddFavorite('http://cinema1987.org/','シネマ１９８７online')">
URLとページタイトルを適宜書き換えてください。ボタンでなくリンクで表示する場合は<A>タグを使います。
お気に入りに追加して！
<A href="javascript:window.external.AddFavorite('http://cinema1987.org/','シネマ１９８７online')">お気に入りに追加して！</A>
ページ内でリンクの背景色が部分的に違う場合、背景色と同じ色のリンクでは目立たないので色を変えたい場合があります。この場合、スタイルシートのCLASSを使って設定します。
映画評
これがこのページに設定してあるデフォルトのリンク色です。A:LINKとA:VISITEDが#0000FFに設定してあるので、背景が#0000FFの場合、見えなくなってしまいます。そこで、以下のようにスタイルシートに追加します。ここではA:link、A:visitedを白に設定しています。
.menu A:link{color:#FFFFFF;}
.menu A:visited{color:#FFFFFF;}
.menu A:hover{color:#FF0000; text-decoration:none;}
.menu A:active{color:#FFFFFF;}
書き方はドットの後にクラス名、リンクのスタイルシート設定となります。適用したいタグにCLASS="menu"と記入すれば、背景が#0000FFでも表示できます。
<SPAN style="background-color:#0000FF;" CLASS="menu"><A HREF="../moviecritic/cindex.htm">映画評</A></SPAN>
上はSPANタグの場合ですが、タグはどれでも対応しています。
DIVの場合
<DIV style="background-color:#0000FF;" CLASS="menu"><A HREF="../moviecritic/cindex.htm">映画評</A></DIV>
TABLE内のTDの場合
<table border="1">
<tr><td bgcolor="#0000FF" CLASS="menu">
<A HREF="../moviecritic/cindex.htm">映画評</A>
</td>
<td bgcolor="#FFFFFF"><A HREF="data2.htm">データベース</A></td>
</tr>
</table>
ここではクラス名にmenuを使いましたが、何でもかまいません。自由に設定できます。
「お気に入りに追加ボタン」と同じようなスクリプトです。クリックすると、IEのホームページに設定するダイアログが開きます。当然のことながら、これもNN、Mozillaは非対応です。
スクリプトは以下の通りです。
<INPUT TYPE="button" name="homepage" value="ホームページに設定"
onClick="javascript:this.style.behavior='url(#default#homepage)';
this.setHomePage('http://cinema1987.org/');">
…to be continued
