HTML編
CSS編
テーブルのヘッダ行固定スクロール
その他・お遊び
古い情報


HTMLメモ(HTML編)
数秒後に別のページにジャンプするmetaタグ

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

リンクでファイルのダウンロードを強制する

<a href="items.txt" download="ダウンロード用データ.txt">こちら</a>からダウンロードできます。<br>

このようにdownload属性を使うとダウンロードを強制でき、デフォルトのファイル名も指定できます。超簡単。
ちなみにIE(IEモード)では使えません。

resetボタンで入力欄がクリアされない！？

<input type="text" name="text1" value="AAA">
<input type="reset" value="クリア">

例えば上のようなresetボタンを押しても、入力欄は空欄にならず、初期値"AAA"が再設定されるだけです。 resetボタンは空欄にするのではなく、初期値に戻すものと考える必要があります。

GoogleMapの地図を埋め込む
埋め込む地図の初期表示地点を取得するには、 GoogleMapで任意の場所をクリック⇒共有⇒地図を埋め込む⇒HTMLをコピーを押します。 この状態で、HTML文書を編集中のテキストエディタで張り付ければiframeタグが貼り付けられます。 

<iframe
  src="https://www.google.com/maps/embed?pb=!1m18!1...(中略)...091!5m2!1sja!2sjp"
  width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"
  referrerpolicy="no-referrer-when-downgrade">
</iframe>

簡単なポップアップヒント(ツールチップ)
ポップアップするヒント(ツールチップ)を最も簡単に表示するには、 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;}

複数のフォームを横向きに並べる
styleに「display:inline-flex」を付与したdiv要素で対象を囲めばOKです。 

<div style="display:inline-flex">

<input type="button" id="deletebutton1" value="選択行を削除"/>

<form action="download">
<input type="submit" value="CSVダウンロード"/>
</form>

<form action="backtomain">
<input type="submit" value="メインメニューに戻る"/>
</form>
</div>

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

th, td { white-space: nowrap; }

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

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

一つの要素に複数のクラスを設定できるの？
できます。 

<div class="train keikyu">
...
...
...
</div>

と指定すると、このdiv要素は「train」と「keikyu」の二つのクラス名を持ち、 「getElementsByClassName("train")」「getElementsByClassName("keikyu")」の両方に該当します。 また「getElementsByClassName("train keikyu")」のように複数のクラス名を指定するとAND条件で結合されます。 つまり、指定された全てのクラスに該当する要素が返されます。

特定のクラス「ではない」要素のみ設定する
CSS3の「notセレクタ」を使うと可能です。 

input:not(.btn) { border:solid 1px #808080; }

とすると、クラスがbtn「ではない」input要素のみ、この設定が適用されます。

文字の大きさと幅を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;
}

DIV要素内のテキストを水平垂直とも中央に配置する
これ、以前はvertical-alignを使っても縦は中央揃えにならず、 なかなか面倒だったのですが、今は下記の方法でとても簡単になりました。 

div.dbox {
    display: flex;
    justify-content: center; /* 水平方向 */
    align-items: center; /* 垂直方向 */
}

フォントを指定する
業務システムの特殊なニーズ？で、文字数が一目で分かるように、プロポーショナルフォントではなく、 「MSゴシック」のような等幅フォントにしたいということもあります。 そういうときにはfont-familyでOK。下の例のように、font-familyには複数のフォント名をカンマで区切って並べることができ、 そのときはブラウザが先頭から順に見ていき自分が認識できるフォント名に出会ったらそれを採用します。 ここでsans-serifはゴシック系、serifは明朝系、monospaceは等幅です。 

p.pgothic {
    font-family: "ＭＳ Ｐゴシック","MS PGothic",sans-serif;
}
p.gothic {
    font-family: "ＭＳ ゴシック","MS Gothic",monospace;
}

ラジオボタンの選択によって、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>
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>
function showKirikaeBlock(bool){
    var elements = document.getElementsByClassName("kirikaeblock");
    var len = elements.length;
    for(var i=0; i != len; i++){
        var obj = elements[i];
        if(bool){
            obj.style.display = "block";
        } else {
            obj.style.display = "none";
        }
    }
}
</script>

リンクによって、あるIDの領域を表示したり、隠したりする
div要素やspan要素以外も、表示有無を切り替えるためにdisplayを使えます。
以下はtable要素の初期表示をOFFとし、リンクを押すたびに表示ON/OFFを切り替えている例です。 

<script>
function toggleDisplayBlock(id){
    var v = document.getElementById(id).style.display;
    document.getElementById(id).style.display = (v == "none") ? "block" : "none";
}
</script>

<a href='javascript:toggleDisplayBlock("table1")'>詳細表示on/off</a><br>

<table id="table1" style="display:none">
(中略)
</table>

style.displayとstyle.visibilityはどう違うの？
display(block/none)は、noneが指定されるとその要素の領域がなかったことになり、 後ろの要素が前に詰められます。
一方visibility(visible/hidden)は、hiddenが指定されても単にその要素が非表示になるだけで、 その領域は空っぽのまま残されます。

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

<!DOCTYPE html>
<html lang="ja">
<body>
<style>
div#newRecordForm {
    visibility: hidden;
    background-color: #eeeeee;
    border: 3px ridge #000060; padding: 5px;
    position: absolute; top: 50px; left: 100px;
}
</style>
<script>
function showBlock(divElementId, bool){
    var obj = document.getElementById(divElementId);
    obj.style.visibility = bool ? "visible" : "hidden";
}
</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>
</html>

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

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

<!DOCTYPE html>
<html lang="ja">
<body>
<style>
div.hint {
    visibility: hidden; width: 200px; border: ridge 2px #300060;
    position: absolute; left: 0px; top: 0px; padding: 3px;
    background-color: #ddeeff; color: #4444ff;
}
</style>
<script>
function f_showHint(e, hintId, bool){
    var style = document.getElementById(hintId).style;
    style.left = e.pageX + 20 + 'px';
    style.top  = e.pageY +  5 + 'px';
    style.visibility = (bool ? "visible" : "hidden");
}
</script>
<div id="hint1" class="hint">
ヒントにこの内容が<br>
表示されます。
</div>

<div style="width: 300px; padding: 4px; background:#ccccff"
     onmouseover="f_showHint(event, 'hint1', true)"
     onmouseout ="f_showHint(event, 'hint1', false)">
この部分にマウスを当てたり<br>
離したりしてください。
</div>

</body>
</html>

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

IMG要素の画像ファイルを動的に変更する

<img id="previewimage" width="300" height="480">

こういうIMG要素があるなら、JavaScriptで 

document.getElementById("previewimage").src = "./images/preview2.jpg";

このように、単にsrcプロパティの値を変更するだけでOKです。

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;
}

入力欄にフォーカスが合った時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要らずで超簡単！ 

<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

スクロールする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のヘッダ部を固定し、データ部だけスクロールさせる
position:stickyを使う方法
業務システムの必須テクとして長い間色々な方が工夫して対応してきたこのテーマ、 昔は多くの制限がありました。

  • スクロールする部分としない部分を別のTABLEタグ内に書かないといけない
  • 行と列の片方をスクロールするのと両方の場合で全く違う書き方になる
  • 全ての列の幅をpx単位で指定する必要あり
  • スクロールの動作はJavaScriptで書く必要あり
と再利用性が著しく悪いため、開発効率は劣悪でした。
これに対して、CSS3でpositionに「sticky」が指定できるようになり、大きく改善しました。 

<style>
table {
    table-layout:fixed;
}
thead tr th {
    position:sticky; top:0; background:#ccccdd; z-index:1;
}
tbody tr th {
    position:sticky; left:0; background:#ccddcc;
}
</style>

これを使うと、
  • 見出しとデータは同じTABLE内で良い
  • データ左端列をthで囲めば行列とも固定され、全ての列をtdで囲めば行だけ固定と、切替が単純
  • 各列の幅の指定は不要
  • JavaScript不要
と良いことづくめ。動くサンプルはこちらです。 Chrome74、Edgeに対応。IE11は非対応ですが、対応していないだけで、表示が崩れることはありません。
一応、タブ区切りテキストファイルからHTMLを生成するPerlスクリプトはこちらです。 「tsv2html.pl」とでも名付けて使っています。 

@ARGV || die "parameter expected.";

print <<HEADER;
<!DOCTYPE html>
<html lang="ja">
<body>

<style>
.wrapper {
    width:500px; height:150px; overflow:scroll;
}
table {
    table-layout:fixed;
    border-collapse: collapse;
}
thead tr th {
    position:sticky; top:0; background:#ccccdd; z-index:1;
}
tbody tr th {
    position:sticky; left:0; background:#ccddcc;
}
th, td {
    border: 1px solid #c0c0c0; padding: 2px;
    white-space: nowrap;
}
</style>
<div class="wrapper">
<table>
HEADER

@rows = <>;
@headerRow = split(/\t/, shift(@rows));
print "<thead><tr>\n";
foreach (@headerRow){
    print "<th>$_</th>";
}
print "</tr></thead>\n<tbody>";

foreach $s (@rows){
    @row = split(/\t/, $s);
    print "<tr>\n";
    foreach (@row){
        print "<td>$_</td>";
    }
    print "</tr>\n";
}

print <<FOOTER;
</tbody>
</table>

</div>
</body>
</html>
FOOTER
# end.

FixedMidashiを使う方法
position:stickyの例は簡潔ですがIE11に非対応です。IE11にも対応する方法としては、 フリーウェアのFixedMidashi があります。動くサンプルはこちらです。

Datatablesを使う方法
さらにモダンな方法として、jQueryと共に使用するDatatablesがあります。
動くサンプルはこちらです。
そのページのソースに、色々試行錯誤した際のコメントを残しています。詳細はCTRL+Uで見てください。

旧来の方法
伝統的な方法もあります。 こちら(HTMLとCSS)です。


その他・お遊び
DIV要素内の文字を回転させる
次の例では40ミリ秒ごとに6度ずつ回転させています。
また文字の裏表を2種類の色で表現し、角度によって切り替えています。 

<div id="target" class="face1">この文字列が回転します。</div>
<style>
    div#target { font-size: x-large; font-weight: bold; }
    div.face1 { color: #8080ff;}
    div.face2 { color: #000088;}
</style>
<script>
    let deg = 0;
    setInterval(rotateString, 40);
    function rotateString() {
        deg += 6; deg %= 360;
        const t = document.getElementById("target");
        t.style.transform = "rotateX(" + deg + "deg)";
        t.className = (deg < 90 || deg > 270) ? "face1" : "face2";
    }
</script>


古い情報
フレームの境界線を完全に消す

<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>

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

Google Mapの地図を表示する
こちらにサンプルを作りました。

  1. console.developers.google.comに自分のGoogle IDでログイン
  2. 「Maps JavaScript API」を選んで「有効にする」
  3. 「新規プロジェクト」を作成
  4. 「Maps JavaScript API」のページから認証情報＞認証情報を作成＞APIキー
  5. 「キーを制限」でHTTPリファラーを選び、your.site.jp/* 等と入力して「保存」を押す。
    ※「保存」ボタンを押すのを忘れない。
で無償版が利用できます。
なお、Google Mapを使うだけならHTML5機能やjQueryを知っておく必要はなく、普通のHTMLだけで記述できます。

Misc. Topics Top

(first uploaded 2002/10/18 last updated 2025/01/26, URANO398)