その他のテクニック(2)

印刷時に改ページするには、page-break-after や page-break-before を用います。下記のような改行を用いることで、印刷時に、この改行の後ろで改ページが行われます。

<br style="page-break-after:always;">

page-break-inside を用いると、指定したブロックの途中での印刷改ページを禁止することも可能です。

<div style="page-break-inside:avoid;">
   :
</div>

■ ページの中に時計を表示するには

JavaScript を用いて、デジタル時計を表示します。

<form name="form1">
<input type="text" name="tokei" size=25>
</form>
<script type="text/javascript">
<!--
function tokei() {
  d = new Date();
  year = d.getYear(); if (year < 2000) { year += 1900; }
  mon = d.getMonth() + 1; if (mon < 10) { mon = "0" + mon; }
  date = d.getDate(); if (date < 10) { date = "0" + date; }
  hour = d.getHours(); if (hour < 10) { hour = "0" + hour; }
  min = d.getMinutes(); if (min < 10) { min = "0" + min; }
  sec = d.getSeconds(); if (sec < 10) { sec = "0" + sec; }
  document.form1.tokei.value =
     " " + year + "/" + mon + "/" + date +
     " "+ hour + ":" + min + ":" + sec;
  setTimeout("tokei()", 1000);
}
tokei();
// -->
</script>

■ アドレス（URL）を表示しないようにするには

アドレス（URL）を表示しないようにするには、window.open() で location=no を指定して、アドレスバーの無い別ウィンドウを開くことで可能です。

<button onclick="
 window.open('xx.htm', '_blank', 'location=no')">OK</button>

別ウィンドウを開きたくない場合は、画面をフレームに分け、アドレス欄には常にフレームのアドレス（URL）を表示し、個々のページの URL を表示させない方法があります。（→「フレームに分割するには」）

■ ステータスバーに文字を表示するには

ステータスバーに文字を表示するには、JavaScript の window.status を用います。

<div onmouseover="window.status='★★★'"
 onmouseout="window.status=''">マウスをのせてみて</div>

リンクに対して用いる場合は、return true を追加してください。

<a href="xx.htm" onmouseover="window.status='★★★'; return true;"
 onmouseout="window.status=''">マウスをのせてみて</a>

マウスをのせてみて

■ ステータスバーに文字を流すには

私の嫌いなテクニックですが、要望があったので・・・ステータスバーに文字を流します。300 を変更するとスピードを調整できます。鬱陶しいと感じられたり、リンクにマウスを乗せてもジャンプ先が分からなくなるという弊害がありますので、あまり使用しないようにしましょう。

<script type="text/javascript">
<!--
var msg = "みなさんこんにちわ。"
 + "ここは、「とほほのＷＷＷ入門」のページです。"
 + "ゆっくり見ていってください。";
function marqueeStatus() {
  msg = msg.substring(1, msg.length) + msg.substring(0, 1);
  window.status = msg;
  setTimeout("marqueeStatus()", 300);
}
marqueeStatus();
// -->
</script>

■ 「お気に入り」に登録させるには

「お気に入り」に登録させるには、JavaScript の addFavorite() を用います。

<script type="text/javascript">
<!--
function touroku(url, msg) {
  if (window.external) {
    window.external.AddFavorite(url, msg);
  } else {
    alert("Internet Explorer 4.0 以降でのみ使用可能です。");
  }
}
// -->
</script>
<button onclick="
touroku('http://www.yahoo.co.jp/', 'Yahoo')">お気に入りに登録</button>

■ 「お気に入り」アイコンを指定するには

■ 文字や画像を一時的に非表示にするには

スタイルシートの visible を制御することで、文字や画像などの要素を一時的に非表示にすることができます。次の例ではボタンを押すと Hello!! の文字が表示・非表示を繰り返します。

<script type="text/javascript">
<!--
function kakusu() {
  if (window.t1 && window.t1.style) {
    if (t1.style.visibility == "hidden") {
      t1.style.visibility = "visible";
    } else {
      t1.style.visibility = "hidden";
    }
  }
}
// -->
</script>
<div id="t1">Hello!!</div>
<button onclick="kakusu()">OK</button>

■ 画像を自動的に動かすには

■ ツリーメニューを表示するには

下記のような、ツリー形式のメニューを実現します。1回クリックするとサブツリーが開き、もう一度クリックするとサブツリーが閉じます。

□HTML入門

├□フォント

│├□font

│├□b

│└□i

├□リスト

│├□li

│├□ol

│└□ul

├□数値

├□配列

└□日付

<html>
<head>
<title>ツリー部品テスト</title>
<style type="text/css">
<!--
.tree { line-height: 94%; }
.tree a { text-decoration: none; color: #000080; }
.tree a:hover { color: red; }
-->
</style>
<script type="text/javascript">
<!--
function init() {
  if (!document.getElementsByTagName) { return; }
  var objs = document.getElementsByTagName("div");
  for (i = 0; i < objs.length; i++) {
    if (objs[i].className == "titem") {
      objs[i].style.display = "none";
    }
  }
}
function func(id) {
  if (!document.getElementsByTagName) { return false; }
  var obj = document.getElementById(id);
  if (obj.style.display == "block") {
    obj.style.display = "none";
  } else {
    obj.style.display = "block";
  }
  return false;
}
// -->
</script>
</head>
<body onload="init()">
<div class="tree">
 <div><a href="#" onclick="return func('html')">□HTML入門</a></div>
 <div class="titem" id="html">
  <div>├<a href="#" onclick="return func('html_font')">□フォント</a></div>
  <div class="titem" id="html_font">
   <div>│├<a href="../html/font.htm">□font</a></div>
   <div>│├<a href="../html/b.htm">□b</a></div>
   <div>│└<a href="../html/i.htm">□i</a></div>
  </div>
  <div>├<a href="#" onclick="return func('html_list')">□リスト</a></div>
  <div class="titem" id="html_list">
   <div>│├<a href="../html/li.htm">□li</a></div>
   <div>│├<a href="../html/ol.htm">□ol</a></div>
   <div>│└<a href="../html/ul.htm">□ul</a></div>
  </div>
  <div>├<a href="table.htm">□テーブル</a></div>
  <div>└<a href="form.htm">□フォーム</a></div>
 </div>
 <div><a href="#" onclick="return func('js')">□JavaScript入門</a></div>
 <div class="titem" id="js">
  <div>├<a href="../js/number.htm">□数値</a></div>
  <div>├<a href="../js/string.htm">□文字列</a></div>
  <div>├<a href="../js/array.htm">□配列</a></div>
  <div>└<a href="../js/date.htm">□日付</a></div>
 </div>
</div>
</body>
</html>