1999/10/20設置

投稿の記録

はじめに

　このサイトでは、私がインプレス発行のインターネット雑誌「iNTERNET magazin」の連載コーナーである「HTML TIPS & TRICKS」（以下　TIPS&TRICKS）に投稿したファイルを公開しています。
　TIPS&TRICKSはさまざまな HTML のテクニックを紹介するコーナーで、最後に毎回テーマに沿った問題が出されます。問題は表示が出来るブラウザの指定・問題の説明・実際に表示したときのスクリーンショット・ヒントが掲載され、毎回2問出題されます。

　私が投稿をはじめたのは 1998年8月号の連載の第18回目からです。実力試しの意味で投稿してみたところ、いきなりオリジナル腕時計をプレゼントされてしまったのがきっかけとなりました。それからと言うもの、最終回となる 2001年10月号の第56回まで、ほぼ毎月挑戦を続けていました。

　ここに掲載しているのは正解不正解に関わらず、投稿したものすべてです。また、問題の性格上特定のブラウザに限定されているものもあります。スクリプト等、プログラム的な手法を用いたものに関してはエラーが起こる可能性があります。

　ソースの表示とコメント（簡単な解説）を追加した以外は基本的に投稿したときと同じ状態です（途中からは追加した状態で投稿）。

　問題の横の表示は対応するブラウザをあらわします。なお、バージョンは雑誌掲載当時のものです。凡例の意味は次のとおり。

凡例対応表
凡例	名称	バージョン
IE4.0	Microsoft Internet Explorer	4.0以上
IE5.0		5.0x
IE5.5		5.5
IE6.0		6.0
NN4.0	Netscape Navigator	4.0以上
NN6.0	Netscape Navigator	6.0以上
M18	Mozilla	Milestone 18
M0.8		0.8
M0.91		0.91

　メールでの連絡について

2001年

10月　3つのブラウザを制する: QUESTION1 マウスオンでメッセージを表示せよ！！ [ IE4.0, IE5.0, IE5.5, IE6.0, NN4.0, NN6.0, M0.91 ]
　現在主流である全てのブラウザで、リンクに重なったときにメッセージを表示する。; QUESTION2 オブジェクトを自由に動かせ！ [ IE4.0, IE5.0, IE5.5, IE6.0, NN4.0, NN6.0, M0.91 ]
　同じく主要ブラウザでオブジェクトを左右にスクロールさせる。
9月　ルビを制する: QUESTION1 かっこを使いこなせ！ [ IE5.0, IE5.5, IE6.0 ]
　対応していないブラウザでは、ルビをかっこで括るようにする。; QUESTION2 ルビの有無を切り替えろ！ [ IE5.0, IE5.5, IE6.0 ]
　ルビの表示と非表示を、スクリプトによってリアルタイムに切り替える。
8月　表計算を制する: QUESTION1 勝率を計算せよ！ [ IE5.0, IE5.5, IE6.0, NN6.0, M0.8 ]
　DOM を使用して表計算ソフトのように処理をして結果を特定のセルに表示する。; QUESTION2 表をソートせよ！ [ IE5.0, IE5.5, IE6.0, NN6.0, M0.8 ]
　同じく DOM を使い、指定された項目を基準に表の順番を並べ替える。
7月　スタイルの切り替えを制する: QUESTION1 メニューからスタイルを選べ！ [ NN6.0, M0.8 ]
　複数用意されたスタイルの中から、好きなものをメニューから選べるようにする。
4月　枠線を制する: QUESTION1 水玉模様を描け！ [ IE5.5 ]
　4色の水玉模様によって枠を作る。
QUESTION2 幾何学模様を描け！ [ IE5.0, IE5.5 ]
　テーブルをベースとして、幾何学的な模様を描く。
2月　<SELECT>を制する: QUESTION1 メニューを色分けせよ！ [ IE4.0, IE5.0, IE5.5, NN6.0, M18 ]
　プルダウンメニューのそれぞれの項目に別々に色をつける。
QUESTION2 メニューに画像を入れろ！ [ NN6.0, M18 ]
　プルダウンメニューの項目に画像をアイコンのようにつける。
1月　インラインフレームを制する: QUESTION1 メニューを埋めこめ！ [ IE4.0, IE5.0, IE5.5, NN6.0, M18 ]
　インラインフレームを使って、別のHTMLファイルをメニューとして埋め込む。
QUESTION2 背景を連続させよ！ [ IE5.5 ]
　埋めこまれたHTMLファイルの背景を透明にする。

2000年

12月　SVGの初歩を制する 2（表示にはSVGプラグインが必要です。）: QUESTION1 星を描け！ [ IE4.0, IE5.0, IE5.5, NN4.0 ]
　SVGを使い、5つの点を結んで星を表示する。
11月　SVGの初歩を制する（表示にはSVGプラグインが必要です。）: QUESTION1 図形と文字を描画せよ！ [ IE4.0, IE5.0, IE5.5, NN4.0 ]
　SVGによって、長方形・楕円・テキストを表示する。
QUESTION2 図形を透明化せよ！ [ IE4.0, IE5.0, IE5.5, NN4.0 ]
　QUESTION1で表示した図形を半透明表示にする。
9月　DOMとスタイルシートを制する: QUESTION1 文字を出現させろ！ [ IE4.0, IE5.0, NN6.0 ]
　リンクにカーソルが重なったときに文字が表示されるようにする。
QUESTION2 リストを展開せよ！ [ IE4.0, IE5.0, NN6.0 ]
　クリックによってメニューが展開したり閉じたりする。
8月　固定配置を制する: QUESTION1 ロゴを常に表示せよ！ [ IE4.0, IE5.0, IE5.5, NN6.0 ]
　CSS1のプロパティを使用し、スクロールしても常に同じ位置にロゴを表示する。
QUESTION2 リンク集を常に表示させろ！ [ NN6.0 ]
　CSS2のプロパティにより、リンク集の枠組みを同じ位置に表示する。
7月　スタイルシートを制する: QUESTION1 オンマウスで模様を表示させよ！ [ IE4.0, IE5.0, IE5.5, NN4.0, NN6.0 ]
　スタイルシートのみを使用し、カーソルが重なった状態のリンクの背景に模様が浮かび上がるようにする。
QUESTION2 スタイルシートを使い分けろ！ [ NN6.0 ]
　同じくスタイルシートのみを使用し、リンクになっている画像にカーソルを重ねたとき、額縁のような枠が付くようにする。
6月　ブラウザの判別を制する: QUESTION1 ネットスケープ6を判断せよ！ [ IE4.0, IE5.0, IE5.5, NN4.0, NN6.0 ]
　IE5以上とNN6のみ専用のページに移動し、それ以外の場合は何もしない。
QUESTION2 スタイルシートを使い分けろ！ [ IE4.0, IE5.0, IE5.5, NN6.0 ]
　IE4以上とNN6のみに適用するようにする。
5月　マウスの動きを制する: QUESTION1 上下の動きに合わせて色を変えろ！ [ IE4.0, IE5.0, IE5.5 ]
　普段は目立たない色の上部メニューの色を、カーソルが近づいたときだけ目立つ色に変化させる。
3月　半透明を制する: QUESTION1 画像を重ね合わせろ！ [ IE4.0, IE5.0, IE5.5 ]
　2枚の画像を半透明で重ねる。前回のようにCSSで代用。
QUESTION2 画像を遷移させろ！ [ IE4.0, IE5.0, IE5.5 ]
　2枚の画像を同じ位置に重ね、左上から右下にかけて、次第に切り替わるようにする。
1月　ミレニアムイベントを制する: QUESTION1 2000年に画像を切り替えろ！！ [ IE3.0, IE4.0, IE5.0, NN3.0, NN4.0 ]
　2000年1月1日午前0時を境に、表示する画像を切り替える。今回は画像をCSSで代用。
QUESTION2 2000年までカウントダウン！ [ IE4.0, IE5.0, NN4.0 ]
　2000年までの秒数をカウントダウンする。

1999年

12月　時計を制する: QUESTION1 時計を表示せよ！ [ IE4.0, IE5.0 ] or [ NN4.0 ]
　フォームを使わない、通常のテキスト表示による時計を作る。
QUESTION2 インターネットタイムを表示せよ！ [ IE4.0, IE5.0 ] or [ NN4.0 ]
　QUESTION1に加え、Swatch社提案の"beat"による表示をする。
11月　TIPS & TRICKSを制する: QUESTION1 外枠のない表を作れ！ [ IE3.0, IE4.0, IE5.0 ]
　一番外側の枠が表示されない表を作る。
QUESTION2 セルの右側に画像を並べろ！ [ IE4.0, IE5.0 ]
　テーブルのセルの右側にだけ画像が表示されるようにする。
9月　文字列の検索を制する: QUESTION1 メールアドレスをチェックせよ！ [ NN4.0, IE4.0, IE5.0 ]
　フォームの内容の正誤をチェックする。
7月　ブラウザの判別を制する: QUESTION2 IE 5を判別せよ！ [ IE3.0, IE4.0, IE5.0, NN3.0, NN4.0 ]
　スクリプトを使わずにIE5だけに特定の表示をする。
6月　IE5の新機能を制する: QUESTION1 文字サイズを自動的に変えろ！ [ IE5.0 ]
　ウインドウの幅によってフォントサイズを自動的に変更する。
QUESTION2 四隅にブロックを置け！ [ IE5.0 ]
ソースコード
　ウインドウの4分の1の大きさの枠を常に四隅に表示する。
3月　<META>タグを制する: QUESTION1 自動的にページを移動せよ！ [ IE3.0, IE4.0, IE5.0, NN3.0, NN4.0 ]
　アドレスの変更のあったページなどでよく見かける自動リフレッシュ。
QUESTION2 キャッシュを無効にせよ！ [ IE3.0, IE4.0, IE5.0, NN3.0, NN4.0 ]
　キャッシュを使用しないようにして、常に最新のページを表示するようにする。
2月　JavaScript 1.3を制する: QUESTION1 2000年問題に対応せよ！ [ NN4.06, IE4.0 ]
　JavaScriptで4桁の年数を取得する。
QUESTION2 1000分の1秒を取得せよ！ [ NN4.06, IE4.0 ]
　JavaScriptで1000分の1秒まで時間を取得する。
1月　フォントのサイズ変更を制する: QUESTION1 フォントのサイズを変更せよ！ [ IE4.0 ]
　一度表示したらソースを書き換えてリロードしなければ出来ないフォントサイズの変更をボタンアクションで実現する。
QUESTION2 表示部分にスクロールバーを付けろ！ [ IE4.0 ]
　インラインフレームやOBJECTタグを使用しないで、はみ出すとスクロールバーが表示される枠を作る。

1998年

12月　文字レイアウトを制する: QUESTION1 文字を重ねろ！ [ IE4.0 ]
　HTMLだけでは不可能な文字の重ね合わせ表示をする。
QUESTION2 間隔を空けて文字を配置しろ！ [ IE4.0 ]
　文字と文字の間隔を自由に調整する。
11月　未対応タグを制する: QUESTION1 エクスプローラでBLINKを実現せよ！ [ IE4.0 ]
　IEシリーズが対応していないBLINKタグを再現する。
9月　囲みを制する: QUESTION1 右上に囲みを表示させろ！ [ IE4.0, NN4.0 ]
　雑誌などで使用されている枠組みを再現する。
QUESTION2 囲みに背景画像を指定しろ！ [ IE4.0, NN4.0 ]
　QUESION1に加えて、枠の中の背景に画像ファイルを表示させる。
8月　リストを制する: QUESTION1 行番号を自由につけろ [ IE3.0, IE4.0, NN3.0, NN4.0 ]
　番号付きリストの番号の表示を操る。
QUESTION2 行頭記号に画像を表示させろ [ IE4.0 ]
　スタイルシートを使って番号なしリストのマークの代わりに画像ファイルを表示させる。

製作：よしとも

その他の製作サイト

　私は「ホームページ」と「ウェブページ」をはっきり区別します。
　『タグ打ち推奨運動』に賛同しています。
　FTP Exchangeで更新しています。