HTMLメモ(HTML編)

●フレームの境界線を完全に消す

<html>
<meta http-equiv="Content-type" content="text/html;charset=Shift_JIS">
<frameset cols="25%,75%" border="0" frameborder="0" framespacing="0">
<frame name="menu" src="menu.jsp">
<frame name="main" src="main.jsp">
</frameset>
</html>

●数秒後に別のページにジャンプするmetaタグ

<meta http-equiv="Refresh" content="0;URL=newpage.html">

●簡単なポップアップヒント(ツールチップ)
ポップアップするヒント(ツールチップ)を最も簡単に表示するには、 title属性を使います。title属性はほとんどの要素に指定できます。 

<a href="test.html" title="テスト画面へ行きます。">テスト</a>

なお、メッセージの途中で改行したい場合は、「&#13;」と書けばOKです。 (IE限定。Operaなどでは単に空白が少し空くだけです) 

<a href="test.html" title="テスト画面へ&#13;行きます。">テスト</a>

しかしこの方法の難点は、どのブラウザでもマウスを対象要素に当ててから、 ヒントがポップアップするまで数秒時間がかかることです。
せわしなくマウスを動かす癖のある管理職の人がヒントが出ることを知らずに使うと、 「何も説明がないじゃないか！けしからん」と大目玉を食らうことになりかねません。 あらかじめ「デザインガイドライン」のようなもので周知しておくか、 さもなければ後述のCSSを使ったポップアップを使います。


HTMLメモ(CSS編)

●他のファイルから読む
スタイルシートを別ファイルから読むタグは、他のリソースと違ってSRC属性ではありません。 次のように指定します。 

<link rel="stylesheet" href="./default.css">

●ハイパーリンクの下線を消す
スタイルシートを使えば可能です。HTML文書のBODY部の冒頭に、次のように書くだけです。 

<style type="text/css">
<!--
a:link,a:visited{text-decoration:none;}
a:hover,a:active{text-decoration:none;color:#400070;}
-->
</style>

●リンクにマウスが当たるとリンクの背景色を変える
上の応用で、background-colorを指定します。 

a:hover,a:active{text-decoration:none; color:#400070; background-color:#ffccff;}

●表のセルの行の折り返しを禁止する
td、thタグのnowrapでもできますが、CSSを使うと1行で可能です。 

th, td { white-space: nowrap; }

●段落の行間を設定する
line-height属性はテーブルのセルなどにも設定できます。 

aaa.td { line-height: 1.5em; }

●文字の大きさと幅をCSSで指定する
HTMLのFONTタグで文字の大きさや幅を指定することは、 最近の新しいHTMLではあんまり推奨されません。代わりにCSSで次のように指定します。 

span.spa1 {
  font-size: x-large;
  font-weight: 600;
}

フォントサイズには、 xx-small、 x-small、 small、 medium、 large、 x-large、 xx-largeの7段階が指定できます。 また、フォントの幅には100〜900の間(100間隔)の整数と、 normal(=400)、bold(=700)の記号定数が指定できます。

●要素の位置を指定する
特定の要素の、ブラウザウィンドウ上の位置を固定にするには、 positionをabsoluteにし、具体的な座標をtopとleftで指定します。 なお、positionをrelativeにした要素(div、pなど)の中に、 absoluteの要素を置くと、外の要素の左上からの座標で指定できます。 

span.kan {
  color: red;
  font-size: x-large;
  position: absolute;
  top: 200px;
  left: 300px;
}

●ラジオボタンの選択によって、1つのDIV領域を表示したり、隠したりする
次の例は、kirikaeblockというIDを持つDIV領域を表示したり、隠したりする JavaScript関数を定義しています。(初期状態では表示します。) input radioタグのonClick=に「showKirikaeBlock(true)」とすると、 そのラジオボタンを選択するとDIV領域を表示し、 「showKirikaeBlock(false)」としたラジオボタンを選択するとDIV領域を隠します。 

<style type="text/css">
div#kirikaeblock { display: block; }
</style>
<script language="JavaScript">
<!--
function showKirikaeBlock(bool){
    if(! document.getElementById) return;
    var obj = document.getElementById("kirikaeblock");
    if(bool){
        obj.style.display = "block";
    } else {
        obj.style.display = "none";
    }
}
// -->
</script>

●ラジオボタンの選択によって、あるクラスに属する複数のDIV領域を同時に表示したり、隠したりする
上の応用です。JavaScript関数のみを示します。 

<script language="JavaScript">
function showKirikaeBlock(bool){
    if(! document.getElementById) return;

    for(i=0; i<document.all.length; i++){
        if(document.all[i].className == "kirikaeblock"){
            var obj = document.all[i];
            if(bool){
                obj.style.display = "block";
            } else {
                obj.style.display = "none";
            }
        }
    }
}
</script>

●ポップアップしたかのような(実際にはしてない)フォームを表示する
これも上の応用です。「ポップアップしたかのような(実際にはしてない)フォーム」とは何ぞ？ですが、 div要素にCSSでabsoluteで位置を完全指定したものを、表示したり隠したりする、というだけのことです。 従って実際には、divブロックの中にはフォーム以外のものも書けます。 

<style type="text/css">
div#newRecordForm {
  display: none;
  background-color: #eeeeee;
  border: 3px ridge #000060; padding: 5px;
  position: absolute; top: 50px; left: 100px;
}
</style>
<script language="JavaScript"><!--
function showBlock(divElementId, bool){
    if(! document.getElementById) return;
    var obj = document.getElementById(divElementId);
    obj.style.display = bool ? "block" : "none";
}
// --></script>

<div id="newRecordForm">
<form>
★新規登録★<br/>
社員番号 <input type="text"><br/>
氏名 <input type="text"><br/>
<input type="submit" value="登録"/>
<input type="button" value="キャンセル" onClick="showBlock('newRecordForm', false)" />
</form>
</div>

<form>
ここは本来のウィンドウに表示されるフォーム<br/>
<input type="button" value="新規登録" onClick="showBlock('newRecordForm', true)"/>
</form>

これを動かすと、まず「新規登録」ボタンを押すと、ブラウザのウィンドウの左上から (100px, 50px)の固定位置に、 「★新規登録★」のフォーム(のdivブロック。id="newRecordForm")が描画されます。 元のウィンドウの内容を上書きする形で描かれるため、 あかたもポップアップしたかのように見えるのです。 ★新規登録★にはSubmitボタンとキャンセルボタンがあり、 Submitすると通常のフォームと同様、サーバにHTTP要求を送信します。 キャンセルを押すと、★新規登録★フォームは隠れます。
なお、このdiv要素にはbackground-color:を指定しないと、 Operaなどでは背景が塗りつぶされず、下の元の表示が見えてしまいます。 (半透明な背景色が可能なブラウザだとより美しいフォームになりますね！)

●CSSでポップアップヒント(ツールチップ)を作る

<style type="text/css">
.hint {
  display: none; height: 40px; border: solid 1px #000060;
  position: absolute; left: 0px; top: 0px; padding: 3px;
  font-size: x-small; background-color: #eeeeaa; color: #4444ff;
}
</style>
<script type="text/javascript">
function f_showHint(hintId, event, bool){
    var style = document.getElementById(hintId).style;
    if(document.all){
        style.left = event.x + document.body.scrollLeft + 10;
        style.top  = event.y + document.body.scrollTop + 0;
    } else {
        style.left = event.x + 10;
        style.top  = event.y + 0;
    }
    style.display = (bool ? "block" : "none");
}
</script>

<span id="hint1" class="hint">これはポップアップする<br/>ヒントの文章です。</span>
<a href="test1.html" onmouseover="f_showHint('hint1', event, true)"
 onmouseout="f_showHint('hint1', event, false)">テスト</a>

上の応用です。同じく、position: absoluteで位置を完全指定したSPANまたはDIV要素を、 表示したり、隠したりすることで、ポップアップヒント(ツールチップ)が作れます。
表示する位置をevent.xとevent.yを使って、マウスカーソルの位置をもとに設定しています。

●FIELDSETとLEGENDタグでラベルつきの枠線を作る

fieldset#ryuyomoto legend {
  padding: 0.2em;
  color: #000060; font-weight: bold;
  border: 1px solid #000060; background-color: #ccccff;
}
fieldset {
  margin: 0.2em; padding: 0.5em; border: 2px groove #000060; height: 4.5em;
}

●スクロールするDIV領域を作る

div#sc {
  overflow: scroll; width: 90%; height: 12em;
  border: 1px solid white; padding 0.5em;
}

overflowの値は、
・auto(ブラウザにお任せという意味だが、 現代のほとんどのブラウザでは表示が範囲を溢れた段階でスクロールバーを表示する動作になる)
・scroll(常にスクロールバーを表示する)
・hidden(スクロールしない。溢れた部分は表示しない。)
・visible(スクロールしない。溢れた部分ははみ出して無理やり表示する。)
があり、デフォルトはvisibleです。これをautoやscrollに変えると、 スクロールする領域が作れます。
但しMSIEでは、widthやheightプロパティも同時に指定しないと効きません。 またMSIEにはoverflowの代わりにoverflow-x、overflow-yという独自プロパティがあって、 垂直と水平のスクロールバーで設定を変えられるようになっています。

●TABLEのヘッダ部を固定し、データ部だけ(縦)スクロールさせる
一般のネットサーフィンではまったく不要な技術ですが、 Webブラウザを業務システムで使おうとした途端、世界中の企業開発者が悪戦苦闘した、 あるいは(私のように)今なお苦労しつつあるこの課題に思いをはせると、涙せずにはいられません。 

<style type="text/css">
div.scroll { overflow-y: auto; overflow: auto; width: 700px; height: 300px; }
</style>
<table border="1">
<col style="width:100px;"/><col style="width:50px;" span="4"/>
<col style="width:100px;"/><col style="width:50px;" span="4"/>
<tr><th bgcolor='#cccccc'>見出し…(中略)</th></tr>
</table>
<div class="scroll">
<table border="1">
<col style="width:100px;"/><col style="width:50px;" span="4"/>
<col style="width:100px;"/><col style="width:50px;" span="4"/>
<tr><td>データ…(中略)</td></tr>
</table>
</div>

これはMSIE 6.0とOpera9で確認できました。ポイントは、
・TABLEをヘッダ部とデータ部の2つ作り、データ部だけをスクロールするDIV領域で囲む。
・DIV領域は、MSIEで動くようoverflow-y、Operaで動くようoverflowの両属性を指定する。
・全ての列の幅とDIV領域の幅(width)は、emや%ではなくpxで厳密に設定する。
です。

●TABLEのヘッダ部(上・左)をともに固定し、縦横両方スクロールさせる
Excelの「ウィンドウ枠の固定」みたいなことをやりたいというのは、 業務システムを作っているとエンドユーザから非常に根強い要望があると感じます。 その他のユーザーインターフェースについては、 画面応答さえ速ければ「これだからWebは使えない」と言われることはあんまりないのですが、 この「ウィンドウ枠の固定」が現代のWeb技術では大変難しいことをエンドユーザに説明するのはなかなか困難です。
一応、作ってみたサンプルは こちら。 Web個人サイト等で公開されているサンプルを参考にさせていただきました。 が、それらは全て、 「全ての列が同じ幅」という、業務システムではあまり現実的ではないサンプルだったので、 これを各列幅を個別に設定できるように対応しようとするとなかなか大変でした。
HTMLでは、TABLEの列の幅を指定する方法が何通りもありますが (TD要素のWIDTH、COL要素のWIDTH、TD要素のスタイル(CSS)で widthを指定する、またはmin-widthを指定する、 COL要素のスタイル(CSS)…)、どうも設定ごと、 ブラウザごと少しずつ動きが違うので参りました。 リンクしているサンプルは、MSIE8、Opera10、Chrome5では正しく動くことを確認できました。 しかし、MSIE6では、右側の列が「全て同じ幅」になってしまい、駄目でした。
もういや！こんな生活！（暴れる）

●TABLEのヘッダ部を固定し、データ部だけ(横)スクロールさせる
今度は横バージョンです。左端の一部の列を固定し、右側の部分だけを横スクロールさせるのは、 縦版よりもかなり簡単です。
え？縦横とも一部固定が上のように可能なのに、横だけ一部固定の意味があるのか？ あります。横だけ固定の場合は、各列の幅を厳密にpxで指定する必要がないので、 そのつど必要な幅が柔軟に確保されます。 これにより、「ほとんどの行で1文字なのに、たまに80文字のデータが現れる」 ような列のために、80文字分列の幅を確認しなければならず、 見た目がすかすか・スクロールがたくさん必要という縦横両方版のデメリットが、 横だけ固定版にはありません。
また専ら開発者側の事情になりますが、HTMLが単純なのでWebプログラムの保守性が良い、 という利点ももちろんあります。
サンプルはこちらです。
なお、右側のdivのheightを"none"にしていますが、 MSIE8では、横スクロールバーの分だけ逆に高さが「削れて」しまうようで、 不必要な縦スクロールバーが出ます。 これは見た目もよくないので、修正できないか調べたいと思います。

●TABLEのセルの中で幅を%指定すると？
Operaではセルの幅に対する%で幅が計算され、 MSIEではウィンドウの幅に対する%で幅が計算されるようです。

●入力欄にフォーカスが合った時IMEを自動ON/OFFする(IE限定)

<form>
ＯＮ
<input type="text" style="ime-mode:active"><br>
ＯＦＦ
<input type="text" style="ime-mode:inactive"><br>
</form>

このように、ime-modeというstyleを使います。 auto(既定値)は特に何もしない、 activeなら自動ON、inactiveなら自動OFF、disabledならIME無効(利用不可)になります。
ここでdisabledについて注意点が2つ。
IMEが無効と言っても、他のウィンドウからコピーペーストで全角文字を貼り付けることは可能ですから、 全角・半角文字の入力チェックが不要ということにはなりません。
また、IMEを無効にするのは、少なくともMSIEでは、 OFFにすることとは違います。 言っている意味は、IMEがONの状態でdisabledの入力欄にフォーカスを当てると IME無効なのでASCII文字しか打てませんが、 また別の普通の入力欄に移ったとき、IMEはONの状態になっています。 したがって、キー入力の利便を考えまくったあげく、 1つのフォームにinactiveとdisabledの入力欄を混在させると、 かえってユーザを困惑させることがあります。

●入力欄の入力値を右寄せにする

<input type="text" style="text-align:right;">

でOK。

●フォーカスのある入力欄だけ背景色を変える
CSSで対象の要素に「:focus」をつけたものに背景色の指定をすればOKです。 JavaScript要らずで超簡単！ …ですが残念ながら、MSIE 6.0ではまだサポートされていない機能です。 

<style type="text/css">
input.inputnum:focus { background-color: #ddddaa; }
</style>

●表形式の一覧入力をC/Sスタイルに近づける
Webフォームの入力欄は影つきで立体的に表示されますが、 tableタグの一覧表の各セルに入力欄がずらっとならぶフォームの場合、 影がくどく見えてしまう欠点があります。 CSSのborderを使って影をなくすことで、 クライアント/サーバー(C/S)型のアプリケーションのスタイルに近づけることができます。 

<style type="text/css">
table.default {
    border: 2px solid;
    border-collapse: collapse;
}
table.default tr {
    background-color: #cccccc;
}
input.inputnum {
    margin: 2px;
    text-align:right;
    border: 1px solid #000080;
    background-color: #ffffdd;
}
</style>
<table class="default">
<tr><th>列1</th><th>列2</th><th>列3</th></tr>
<tr>
<td><input type="text" class="inputnum"></td>
<td><input type="text" class="inputnum"></td>
<td><input type="text" class="inputnum"></td>
</tr>
<tr>
<td><input type="text" class="inputnum"></td>
<td><input type="text" class="inputnum"></td>
<td><input type="text" class="inputnum"></td>
</tr>
</table>

列1列2列3


HTMLメモ(サーバーサイド(CGI,PHP,Servlet)編)

●Refererが取得できない？
JavaScriptの 「window.location.href="abc.html"」のように画面遷移した際に、 WebサーバにRefererを送信するブラウザと送信しないブラウザがあるようです。
後者はWindows版MSIE6が該当することは確認しました。
したがってRefererを確実に取得したい場合は「window.location.href="abc.html"」を使わず、 フォームのSubmitを使って画面遷移を行うようにします。

Misc. Topics Top

(first uploaded 2002/10/18 last updated 2010/08/02, URANO398)

テレワークならECナビ Yahoo 楽天 LINEがデータ消費ゼロで月額500円〜！
無料ホームページ 無料のクレジットカード 海外格安航空券　海外旅行保険が無料！ 海外ホテル