「鳩丸」 Q&A

ページづくりの技術に関する Q&A

望みを実現するためのテクニックなど。

Q.HTML4 Strict + CSS でフレームのような効果を実現できますか?

いちおう、CSS2 で可能ということになっています。たとえば、

#navigation{
 position: fixed;
 left: 0;
 top: 0;
 width: 100%;
 height: 2em;
}

のようにすると、画面上部にナビゲーションバーを固定できるような効果が期待できるはずです。ただし、position: fixed をうまく実装できているブラウザは多くありませんので、どうしてもフレームのような効果を期待したければ、Frameset + Transitional で実現した方が良いのかも知れません。

なお、CSS2 に対応していない環境ではナビゲーションは固定されませんが、表示はされますし利用もできますから、NOFRAMES のような代替を用意する必要はありません。

Q&A の目次へ

Q.リンクの上にマウスを乗せると色が変わるようにしたいのですが。

CSS2 では、ポインタがアンカーの上に来たときに表示が変わる、と言うような指定ができます。たとえば、

 A:hover {color: red}

などというスタイルシートを適用すると、ポインタの乗ったアンカーは赤くなります。具体的なやり方が分からない人は、とりあえず以下のようなものを HEAD要素内(<HEAD> と </HEAD> との間)に入れてみてください。

<STYLE type="text/css">
<!--
 A:hover {color: red}
-->
</STYLE>

ただし、例によって作者の意図した見栄えが必ずしも再現されるとは限りません。指定をユーザースタイルシートで上書きしていたり、色を再現しないように設定していたり、ブラウザが A:hover に対応していなかったりすると何も起きない可能性があります。

Q&A の目次へ

Q.ブラウザのウィンドウを広げたり縮めたりしても、文字やグラフィックが動かないようにしたいのですが。

TABLE を使って固定する、フレームを使って固定する、スタイルシートを使って固定する、などの方法で可能です。たとえば、文書全体を <TD width="500px"> などと固定したセルに放り込んでしまうとか、全体を <DIV style="width: 500px"> の中に入れて横幅を固定するとかいった方法があります。

……が、そもそも固定することはお勧めできません。ディスプレイやウィンドウのサイズは人それぞれです。レイアウトを固定してしまうと、せっかく広い画面があるのに左半分だけにしか情報が表示されないとか、いちいち左右にスクロールしながら読む羽目になるとか、いろいろと間の抜けたことが起きてしまいます。

Q&A の目次へ

Q.<A name="contents1"> 等でラベルをつけたページに <A href="pag1"> タグでジャンプすると同時に任意のラベル位置を表示させる、なんて事は可能でしょうか?

この Q&A のページでやっているようなことでしょうか? リンク先の URI の後ろに # で区切ってフラグメントID を書けば、そのページのその場所に飛びます。

<A href="pag1#contents1">...</A>

のように指定してください。

なお、<A href="#contents1">...</A> のような書き方は、# より前の URI を省略した形です。URI が省略されたときは基準 URI そのものを指しますから、BASE要素などの指定がなければ、自分自身の #contents1 に飛ぶことになります。

Q&A の目次へ

Q.Inputタグでonkeydownイベントがありますが、そのイベント発生時に、引数としてテキストボックスのキーコード(KeyAsciiやKeyCode)みたいなものは送ることができるのでしょうか。

さあ。スクリプト言語によってはキーコードを取得する方法があるのかも知れませんが、ほとんど知らないので何とも言えません。ごめんなさい。おそらく出来ないのではないでしょうか?

と、寝ぼけたことを書いておいたら Yukarin さんからこんなメールをいただきました。

onKeyDown()イベントハンドラには、引数にEventオブジェクトを渡す事ができるようです。Eventオブジェクトのwhichプロパティに、押下されたキーのASCIIコードが格納されているとの事です。

<INPUT type="text" onKeyDown="handler(event)">

の様にして後は、handlerの中で、event.whichを参照してやれば、ASCII値が参照できるという事でしょうか?

但し、これは、JavaScript1.2で追加されたオブジェクトと思われます。よって、今の所、このオブジェクト(イベントハンドラもそうだとは思いますが)をサポートしているのは、Navigator4.0以上との事です。

だそうです。Yukarinさん、ども。

Q&A の目次へ

Q.ページが表示された時に音楽を鳴らしたいのです。良い方法があれば教えて下さい。

OBJECT要素で音楽ファイルを参照すれば出来るかもしれません。が、対応しているブラウザはあまりないと思います。音の鳴るサイトの多くは謎の <EMBED> タグなどで音楽が鳴るように指定しているようですが、コレがどういう仕様になっているのか、私は知りません。

ところで、深夜にいきなり大音響が鳴り出してあわててミュート、もう二度とそのサイトへは行くまいと心に誓った経験などはありませんか? できれば、ユーザーがなにがしかの動作をして初めて音が鳴るように設定した方が良いと思います。

Q&A の目次へ

Q.TABLE のセル幅を指定する方法はありますか?

TD要素には width属性を指定することができます。HTML4.0 では COL要素や COLGROUP要素に width を指定する方が望ましいでしょう。また、CSS の width プロパティで指定する方法もあります。

Q&A の目次へ

Q.BACKGROUNDに貼るGifを大きいの1枚にして折り返さない方法を教えていただきたいのですが。

CSS では background-repeat: no-repeat を指定すれば折り返さないようになります。たとえば、

<BODY style="background-image: url('back.gif'); background-repeat: no-repeat">

のようにすると折り返しません。ただし、CSS に対応していないブラウザでは背景画像自体が表示されないので注意が必要です。

HTML的には BODY要素の background 属性で背景画像を指定できますが、これを折り返さないようにする方法はありません。ブラウザ独自拡張の謎の属性で非折り返し指定できるという噂もありますが、正攻法ではありません。

Q&A の目次へ

Q.送信を押して違うページに行くには、どうすれば良いのでしょうか?

フォーム送信後に別のページに移動するのは、サーバーの CGI の機能です。HTML で実現しているわけではありません。

単に、ボタンを押して別のページに行くようにしたいのであれば、

<FORM action="移動先のURI">
<P>
<INPUT type="submit" value="移動">
</P>
</FORM>

などとすれば可能です。

このボタンを押すと GET 移動先のURI などという要求が出されることになります。これは <a href="移動先のURI">移動</a> とされたリンクを辿ったときと同じ要求です。つまり、リンクを辿ったのと同じ効果が得られます。

なお、勢い余って FORM に method="POST" などと指定しないようにしてください(既定値は method="GET" となっています)。

Q&A の目次へ

Q.サーバー上に置いたセットアッププログラムをブラウザ経由で実行させ、PC上でセットアップを完了させる事がHTMLで実現できますか?

HTMLでは、そんな大それたことは出来ません。HTMLはマークアップ言語でして、テキストにマーク付けを施したものに過ぎないのです。

HTML と直接の関係はありませんが、ActiveX などを使えば PC 上でのセットアップが出来るかも知れません。というか Microsoft社の Internet Explorer はそんな感じでセットアップできるようになっているので、出来るのでしょう。利用者のブラウザが IE であることが前提のようですが。

Q&A の目次へ

Q.印刷で改ページを実現する方法はありますか?

HTML では出来ませんが、CSS2 には改ページ制御の機能があります。

@media print{
 HR.section-separate {page-break-after: always}
}

などとしておいて、改ページしたいところに <HR class="section-separate"> などと入れておくと、その後ろで改ページされることが期待されます。

但し、当然のことながら、CSS2 の "page" メディアに対応しているブラウザでなければなにも起こりません。

Q&A の目次へ

Q. ページを開いたとき、小さいウィンドウが開くようにしたいのですが、どうすればいいのでしょうか。

JavaScript などのスクリプト言語を使って実現します。たとえば JavaScript であれば、window.open("URI","name","style") でウィンドウを開くことが出来ます。

任意の場所に、以下のようなソースを埋め込んでみましょう。

<SCRIPT type="text/javascript">
<!--
window.open("http://www.ne.jp/asahi/minazuki/bakera/","テスト")
//-->
</SCRIPT>

ウィンドウが開くはずです。

しかしながら、この勝手に開くポップアップウィンドウを毛嫌いしている人もいます。Script をオフにしていたり、そもそも Script に対応していないブラウザを使っている人もいます。

ちなみに、WAI のアクセシビリティガイドライン A.12 にはこんなのがあります。

12.3. Do not use pop-up windows, new windows, or change active window unless the user is aware that this is happening.

前触れもなくウィンドウが開いたりすると迷惑だからやめよう、と言うことです。いずれにしても多用は避け、必要最小限にとどめたほうが良いでしょう。

Q&A の目次へ


HTML鳩丸倶楽部

水無月ばけら, MINAZUKI Bakera
E-mail: bakera@star.email.ne.jp