悪戦苦闘記 Ⅰ

HTML TIPS & TRICKS 投稿記

Episode１　1999年12月号

以前から面白いクイズやな～と思っていた impress 出版 INTERNETmagazine/HTMLパズルに挑戦しようのコーナー　かなりオタクな問題で、正解者として名前が出るのは10人前後と全国誌としては辛い関門にひょんな事から挑戦することになった
条件は、毎回２つの回答に、名前が出る事。名前が出なくなった時にはそこで終了する。目標　半年

そこで　腕だめしの初回に挑戦
① 時計を表示せよ！
リアルタイムに年、月、日、曜日（漢字表記）、時、分、秒を表示する・・ＩＥ、ＮＮどちらかで動けば良い
そこで、ＮＮ派の私は、ターゲットをＮＮとし、JavaScript を書けば・・・
あちゃ～レイヤーの表記方法が解れへんがな～
なんとか本で調べて、第１問クリア

② インターネットタイムを表示せよ！
Swatch社が提案している単位 beat を上記にプラスして表示する
beat？そんなん知らんがな　まあ計算だけの事やから～これもクリア
こんなん？と思いつつ回答をメール送信しました

Episode２ 2000年１月号

ドキドキモンで雑誌をめくる・・・・・あったがな～　あったがな～　２問共名前出てたがな～　快感!！やがな～
付録のＣＤのソース見て、こりゃすごいわ　クロスブラウザになってる　考えの浅さを思い知る事になった
まあ　ここまでの考察が出きんでも　ようは　どんな手を使っても同じように表示出来ればええんや　と思う事にした

① 2000年に画像を切り替えろ！
2000年ジャストに表示を切り替える　しかもＮＮ、ＩＥ共に３以上で
まあ　ヒントでJavaScript の限界値1970年１月１日よりカウントしていけば・・・・たしか parse ちゅうメソッドがあったな～
あかんがな　ＩＥ３では NaN ちゅう値返してきよるがな
現在時間を取得して、基本時間との差を求めて・・・・・クリア

② 2000年までカウントダウン！
2000年まであと何秒とカウントダウン表示　ＩＥ、ＮＮどちらかで表示すれば良い
まあ、2000年と現在の時間の差を秒で表し、レイヤーに随時書き込めば・・・・・
先月号で、レイヤーの書き方は解ったからクリア・・・・・送信

Episode３ 2000年２月号

やっぱり　ドキドキもんでページをめくる・・・あったぁ～　あれ？たった５人しか名前ないがな
そう難問でもなかったのに　２問共正解者は同じ名前の５人でした

① 干支を計算せよ！
毎年　元旦にアクセスした時にその年の干支を漢字で表示する
まず、年を取得と・・・・Ｗｉｎ98では４桁表示！Ｗｉｎ95では下２桁表示になるがな
う～困った　しゃーない４桁の下２桁を取得して・・・あかん70年分しか正確になれへんわ（1970年からすでに30年経ってる）
あかんで元々　どうせあと70年絶対生きてられへんから　あとは知らんという事で

② 英語と日本語であいさつせよ！
毎年　元旦だけ日本語のブラウザでは日本語で、英語のブラウザでは英語で新年の挨拶のページを切り替える
ＩＥとＮＮの使用言語の取得方法さえわかればクリア
でも、問①と同じ方法を使って元旦を判別しているので、共倒れの感あり・・・・・送信

Episode４ 2000年３月号

まだまだ　ドキドキモンで・・・・この前の５人プラス３人
正解のソースでは　４桁、２桁問題にはふれずに逃げたはりました？

① 画像を重ねあわせろ！
半透明の画像を一部分だけ重ね合わせて、半透明で表示
あちゃ～ＩＥの問題やがな・・・ＮＮ派の私はつらい！もうやめよかな～
まあ　調べるだけ調べよ・・filter の属性で・・・あったぁ・・・・・
あとは、それぞれのレイヤーとして配置して・・・・ちょっとDreamweaverに助けてもらって、クリア

② 画像を遷移させろ！
半透明の画像を重ね合わせて、一枚目は左上から濃度が濃くなり、二枚目は右下から濃度が濃くなる
filter 属性を調べて、同じように重ねて配置して、クリア
正解者１名にオリジナル傘プレゼントだそうだが、そんな物より解答するほうがいいので、今回から名前を漢字表記しないで（メール設定のローマ字表記のみ）送信

Episode５ 2000年４月号

今回は、自信があったので・・・・あれっ？おなじみの５人から一人ぬけたがな

① オンマウスで画像を浮上させろ！
マウスを載せた時、画像を浮び上がらせる
画像に適当にリンクを作って・・・と
A:hover のスタイルシートを調べて浮び上がるのは解ったが、スクリプトでどう操作して良いのかが解らない
そこでAlphaｆフィルタの関数をいじって・・・イケタがな～

② オンマウスで文字を浮上させろ！
上記とは逆に　画像が薄くなって、下に配置してある文字が出てくる
これも　１問目と同じように操作して、画像の下に文字列を Dreamweaver で配置
ええかげんに　ＩＥの配置方法覚えなあかんわ
hover の使い方が結局解らず、モンモンとしながら送信

Episode６ 2000年５月号

あっ！良かったぁ！hover ちゃうかったんや
おなじみさんが、また一人抜けて、一人帰って　結局、連続解答者は３人に
解答では、スタイルシートとしての A:hover に言及したはりました
こんな方法もあるで！と言ってみたい・・・・・まだまだ力不足を痛感

① 上下の動きに合わせて色を変えろ！
コンテンツのリンクが、画面上部に並んでいて　マウスを遠ざけると薄く、近づけると濃くなる
まあ　マウスのＹ座標を取得して、ＤＨＴＭＬで変化させればＯＫか
ところが、スクロールバーの横に空白が・・・・左右いっぱいにならない
しかたないので、もう一つレイヤーを作って、重ねて右表示に（ＩＥ４ではだめだけど）・・・・解決！
（バックナンバー持ったはる人は見てみて）

② マウスを近づけて色を変えろ！
マウスが近づくと赤い四角が現れてくる　（濃度がマウスの動きで変化する）
これも　前記の問題と方法はおなじでＯＫ　マウスのＸ座標も考えにいれなきゃならないのが、少々手間どった
どちらも　共通する事で、変化する色を何段階か指定してやらなければならない
めんどうなので、文字列をグラデーション化するソフト Gradation HTML Maker を使って不精する・・・送信

Episode７ 2000年６月号

よしゃー名前出てる！おなじみさんと　あら！女の人が・・・めずらしい
まず　目標の半年連続　達成・・・・・・あとは、名前が載らなくなるまで行くか？

今回、ＮＮ６ pr1 がリリース
即、問題化・・・・なもんで　ＮＮ６メインマシンにインストールするのが嫌で、Pentium200 にインストール・・・・立ち上がりませんでした
えーい　ＯＳ再インストール覚悟で、仕事用マシンに・・・・何事もなく立ち上がりました
やっぱりＮＮはこういうところがええなぁ　変に最新版入れたらＯＳが壊れるどちらかとはえらーいちがい
製品名は言えない・・・・・会社名は言えない・・・・ナニモイイマセン・・・・言ったら殺される・・・・

① ネットスケープ６を判別せよ！
ブラウザーを判別し、ＮＮ６ならば専用ページを表示
もう　これはお手のモノ　トトトトッなんとＮＮ６は、判別様式は５の値を取る
このワナにかかると×なんで、ＮＮ６入れといて確認して良かった

② スタイルシートを使い分けろ！
ＩＥ４以上とＮＮ６の時にスタイルシートが反映されるようにする
確かこんなモン本で見たよな～あった　あった import！
ＣＳＳを別ファイルにして、import の条件が合えば読み込むようにすれば・・・・できた・・・・・送信

Episode８ 2000年７月号

まあ　こんなモンでしょ・・・・・先月号に続いてあの女の人が、がんばったはんねんなぁ

① オンマウスで模様を表示させろ！
テキストリンクの上にマウスを載せると模様が現れる・・・ただしJavaScript は使わないで、ＣＳＳのみ
ヒントにアンカー擬似クラスに何かを指定・・・・とヒントにある
アンカー擬似クラス？本で調べるもこれやというモノはなし
ＭＳＮで調べてもイマイチ・・・・ひょっとして A:hover か？まさかこの前問題に
でも、解決方法がないので　これで解答する事に

② オンマウスで枠を付けろ！
４月号の解答と同じ考え方とのヒントただし上記と同じでＣＳＳのみ
枠の出現方法は、本で調べてすぐに解決
あとは上と同じか・・・不安なまま　送信

Episode９ 2000年８月号

不安なまま　ページを開いてホッアーまた一人常連さんが減ってあと２人に
もう一人の方は１月号から連続したはります
また　同コーナーにブラウザを震わすTips が出ていたので、気に入って頂戴しました
金曜日のオープニングに使ってます

① ロゴを常に表示させろ！
ページをスクロールさせてもロゴは動かない・・・・ただしＨＴＭＬファイルは一つだけ（フレームは使わない）
これも　本に出ていたので参考にして
ただ　解答の説明がややこしくなるので、解答では概略を
メールにリンクを張って、ＨＰに解答を載せました　（モチロン　外部からアクセス出来ないようにしました）

② リンク集を常に表示させろ！
Ｗ3Ｃの仕様書で position プロパティーを見てみよう・・・どんなＣＳＳの解説書にも載っていないというヒント
position : fixed とちゃうの？私の持っている本にちゃんと載ってる・・・・
でも　そう言うたはんねんからＷ３Ｃへ・・・当たり前やけど英文やな～
とっても辞書片手にはしんどいので、Ｗ３Ｃ日本語訳を探すと　ちゃんとありました
けど position プロパティーに目新しいモノはアリマセンでした
しゃーない　position : fixed で行こう
この解答も同じようにリンクを張って解答・・・・・送信

Episode10 2000年９月号

イレギュラーな解答の仕方をしてしまったので、あかんでもともと・・・・ホッ
やはり　本に出てたプロパティーでＯＫでした
模範解答と酷似してきたので、気を良くして
（最初はだいぶ違っていた・・・同じように動いていただけ）

① 文字を出現させろ！
マウスをリンク文字に載せると、別の場所に文字が出現する。ただしＤＯＭを使って
とうとう　年貢の納め時・・・ＤＯＭまったく見当つかへんがな～　参考本まったくナシ
唯一インターネットマガジンのバックナンバーのみ
見よう見真似でなんとか動作
なんとなくＤＯＭの感触は実感！でもＩＥ４には対応してないのでは？きっと間違いだろう

② リストを展開せよ！
リンク文字をクリックすると、隠れていた下位のリストが展開し、いままであった別の文字列はその下方へ移動。もう一度クリックすれば隠れる
エクスプローラのフォルダー表示みたいにする
ＤＯＭによってＣＳＳを操作するのは上と同じ
これも見よう見真似で動作にこぎつける　そんでもって送信！

Episode11 2000年10月号

ハラハラモンのＤＯＭの解答　よかった～　合ってた
それに　懸念していたＩＥ４は間違い表記であった

① イメージマップを取り替えろ！
見出しの下にブロック　その中に複数のリンク画像が、見出しとブロックの間に要素を入れてもブロックが下に下がり、レイアウトも崩れない
イメージマップは使わない
ふんふん　これは position で配列してＯＫ
画像を沢山使うので、リンクページで解答　タヌキが酒呑んでる絵を色々使いました

② 左右に並べろ！
左右にそれぞれのリンク文字列があり、ブラウザのサイズを変えても　ちゃんとレイアウトが崩れずに左右に配置。ＣＳＳのみで作ること
これも pozition : right でＯＫやんか・・・・アッＩＥ４が対応してへん
他に思い当たるプロパティもなく　困った？？？
まさか　今回も誤表記か？
ＨＰを調べても　そういうアナウンスはなく　締め切りが迫る
そうや float を使えば出来る！！！
でも　本来の使い方ではないのだが・・・・そこは HTML TIPS & TRICKS か？
えーい　ままよ　これもリンクページで解答・・・・・・送信

Episode12 2000年11月号

覚悟してページを開く　以下原文のまま
今回も出題にミスがあったことをお詫びしたい。ＩＥ４ではこのスタイルシートは正確に表示できないようだ。以下のソースはＩＥ５以上およびネットスケープ６とMozilla 用に最適なものだが、「float」を使った解答なども正解とさせていただいた。

えー　確かにＩＥ４では表示出来ない旨も書きましたし、「float」の解答もしました　もちろん正解の「position : right」も概略で書きました
でも　こんな書き方はちょっと？大阪弁と標準語のニュアンスの違いか？
もう　やめよかな～　そやけど今回解答したら１年間連続達成やしな～
それに　今回新たなＳＶＧを使う　くそーＳＶＧ知らんがな～

① 図形と文字を描画せよ！
ＳＶＧで四角と楕円とテキストを配置
ＳＶＧ探しました　Ｗ3Ｃ見ました　さっぱり解りません　adobe のサイト見ました　どうやら Illustrator９にヒントがありそう
Illustrator ９で再現してみました　なんとかテキストの配列の仕方は解りました
うんうん　うなりながら今月号のＳＶＧのページをＣＤからソース表示させ解析、なんとか手がかりを掴み解答

② 図形を透明化せよ！
これも　今月号のＣＤからカットアンドトライで　なんとか解答
ちょっとムカツキもあったので、コメントなしで送信

以下　次頁に続く(NEXT PAGE)