10 | 2004/11 |  12

  1. 無料サーバー

search phpbb-phpbb-FC2BLOG-Info-Edit Template-Post-Edit-Upload-LogOut

anything from here

CSSやJavascript自習の苦闘史を綴っていきたい。恐縮ですがJavascriptを有効にしてご覧ください。
2005年12月から社会問題も掲載!


display属性を使ってプルダウンメニューを作成!

 display属性のメリットは、その値に none を指定することによって、それが指定されている部分を単に表示しないだけでなく、恰もその部分が存在しないかのように扱えることにある。それがvisible属性との相違点だ。存在しない扱いになるのだから、その部分は後続する内容が詰めて表示されることになる。これを活かせば面白いことが出来る。・・・・・
 ということを知ったので、さっそくこれを Myblog 上で活用してみた。その成果が画面左ブロックに設置した「プルダウンメニュー」である。
 既に、マウスオーバーによって展開する階層メニューを実現していたが、メニューの第一次階層は常時表示されていた。これはまずその存在を知って欲しいからという理由もあった。しかし、display属性の活用を知ってしまった今(笑)、この第一次階層メニュー自体に手を加えて、その表示/隠蔽を閲覧者に選択させることが出来るようにしたのだ。
 【説明図】

第一次階層メニュー表示前
<メニュー表示前の状態>


第一次階層メニュー表示後
<メニュー表示後の状態>

※ 上の図はWindows版FIREFOXで、下の図はWindows版IE(Sleipnir)でそれぞれ「撮影」しました。

やはり消滅するボーダー&背景色・・・えいぃ!決めた

 色々チャレンジしたが結局IEバグは退治できそうもない。他方95%程度の人がIEを利用しているとの統計もあるので、バグ多きIEを見限ることも出来ない。
 となれば、コンテンツのセンター配置に拘る限り答えは一つしかない。「positionによるレイアウトからtableレイアウトへ」───この根本的、抜本的、反革命的(笑)大転換である。
 土日に時間が取れれば、また取れなければ取れる平日に、tableレイアウトに変更することにする。

ボーダー背景色消失問題が80%解決した! 

 色々調べても結局解明出来ないので、「教えてgoo」で問い合わせ二人の方から回答を受理しました。それぞれ殆ど既知のことでしたが、改めてposition指定の煩雑さ、面倒くささ、誤解しやすさに気づかされました。そして、今回の実践を通じた煩悶の日々から次のような結論に到達しました。半可通なるが故の暴論と言われそうですが、実感的結論です。
 HTMLの<table>のような、分かりやすい方法でブロックを自在に配置出来るよう、CSSの方を改めるべきではないか、というのが苦闘の末の素人の1つの結論です。W3C関係者とその信者からは「暴論だ」と怒られそうですが、CSSは決して素人に優しい仕様とは言えません。およそマニアックだとは言いませんが、その厳密性は学術的であるかもしれませんが、実用性に欠けているのではないかと感じました。
 
 さて、その上で当座の問題は以前よりも発生度合いを減らすことが出来ました。100%の解決ではありませんが、やむを得ないところまで到達したと一人合点しています。
  1. コンテナのabsolute指定ではセンタリングは出来ないことが分かったので、元に戻してそれをrelative指定とし、

  2. 次に左ブロックと右ブロックはposition指定による配置とせず、改めてfloatによる配置を行い、
  3. コンテンツの終わりに空のdivを配置して、そのスタイルにclear指定を行いました。
  4. 更にそれでも問題が解決しないので、最後の手段としてHTMLのシステム識別子を削除してみました。

 以上の変更によって、念願であったIEにおける右ブロック内のボーダーや背景色の消失問題がほぼ解決したのでした。
 
 なお、これらは、tableでブロックレイアウトを行っていれば、およそ悩むことのなかった問題であって、この点からも、table利用によるブロックレイアウト手法への回帰が心情的に支持したくなる所以である。
 tableに拠るも良し、CSSに拘ってレイアウトするも良し。
 ───これが現在の私の、苦闘の末の1つのHomepage作成指針である。

 あるブログ考

 Internetそして当然Blogも、実に迅速に、そして実に広範な世界から見知らぬ人達からの反応が得られます。もし近い将来、ブログに自動翻訳ツールが導入され、瞬時に指定した言語に変換して発信することも可能となれば、その「反応の輪」はますます飛躍的に巨大になることは間違いありません。
 こうした情報伝達システムは有史以来ほんの10年前迄存在してこなかった画期的な文明装置です。「ITが世界を変える!」というと大袈裟で、内容的に空虚に聞こえますが、実際にブログをやっていると、確実に情報の輪が広がり、知識が効果的に増えていくことが実感出来ます。
 またブログは、特に日本では日記の延長線上で爆発的に普及したことからも明らかなとおり、新しい自己表現ツールであり、自己記録ツールであり、自己発散手段でもあり、同時に他者と間接的ながらも交わることの出来るツールとも言えます。メール、チャット、掲示版等の他のInternet情報交換手段との比較において、ブログは独自の地位を占め、これからますます普及していき、それに伴いその存在はますます重要視されていくのではないでしょうか?
 数年後には、会社でも学校でもブログによる情報の発信と享受が当たり前になっているかも知れません。
 

まだまだ苦闘は続く!

 これまで、エントリイブロック上でマウスをリンク箇所の上に置くと、そのブロック内の罫線や背景色が消えてしまうIE固有の問題が生じていた。これは relativeブロック(初期のコンテナブロック)上に absolute Blockを配置していたことに伴うバグであることが判明した。(All about Japan:JavaScript Tips collectionによる)
 そこで、初期コンテナを relative から absolute に変更てみたら、このバグ対策は見事に功を奏した。また不要に出現していた下部の横スクロールバーも消滅させることが出来た。2つの問題が解決したのだ!
 ところが、である。今度はabsolute配置したその初期コンテナを、センタリング出来なくなってしまった。
 absolute指定した当該ブロックは そのブロックに margin: 0 auto; を指定してもセンタリング出来ないのか?
 これにについて、色々なサイトを探索したが判然としなかった。しばらくは気にくわないが左寄せ配置のままでセンタリング不可犯の「捜査」を続けてみたい。

CSSに関わるブラウザのバグ等について

 Javascriptについて色々検索していたら、All about Japanのこれに関するサイト(JavaScript Tips collection)が見つかった。
 さて、その中に次のような一文があった。
IE5以降のバージョンでは absolute指定時 width 指定をしないと一見 NN と同様にタイトなレイアが作成できるように見えますがレイア内部に含まれる文字列が自動調整により折り返される場合、摩訶不思議なレイア幅になる場合があるので注意が必要です。まあ、いずれにしても absoluteでないコンテナブロック内に absolute なものを配置しない方が良いでしょう。
 我がブログは、まさしく「absoluteでないコンテナブロック内に absolute なものを配置し」ているのだ。
 右コンテナ内にあるリンク箇所にマウスオーバーした場合に、時たま発生するボーダーラインの「消滅再生」は、このことが原因であれば解消策が見つかったことになるのであるが・・・。
 拠る試してみよう、と思う。

100Views per day!

 昨日、一日の閲覧者が初めて100の大台を突破した。
 やはり多くの方に見てもらえることは嬉しいものだ。投稿を7本近くエントリイしたことが影響しているのか、休日だったからか、その原因は判然としないが、いずれにしても有り難いことだ。
 さて、その上で反応は───?
 何を思い、何を感じて閲覧し、立ち去っていくのか?───それは残念ながら皆目分かりません。もちろん、かく言う私も多くのブログを閲覧しているにもかかわらず、「足跡を残す」ことは殆どなく通りすぎてしまうわけですから、当然と言えば当然のことですが、やはり「足跡」は更に嬉しいものです。
 感想、意見、注文等足跡を残してもらえればもっと幸いです。よろしくお願いします。
※ アクセスランキングを競うつもりは全くありません。
 情報交流を促進したいという思いからの一言でした。

Macを使っている方にお願いです!

 私のブログのトップページの左上にある、「topページを開く」を除くメニューのいずれかをクリックして下図のような階層メニューが出るかどうかについて、ご指摘を戴けないでしょうか!!
 Links をクリックすると階層メニューが表れるはずなのですが・・・。
20041124040702s.jpg

 ※ クリックすると原寸の巨大画像を別窓で開きます。

 Mac利用者さ〜ん!

 びおびお(biobio)さんから貴重なコメントを戴いた。
Macを使っている人が身近にいないことや、MacのfirefoxとWinのそれを較べたことがないので、biobioさんは大変貴重なご意見番になってもらえれば幸いです。これからも大いに指摘をしてください。
MacのFirefoxをおもに使ってます。こちらのコメントを書くの時に、Nameのボックスに横スクロールバーがかかってしまうので、IEから書いてます。すべてのブラウザにあわせるのは、むづかしいですね。

 さて、上記の件ですが、私も利用しているWin版のfirefoxでは「Nameのボックスに横スクロールバーがかかってしまう」現象は全く起きてないのです。原因が直ぐに分かるとは思えないので、少し時間を戴いて究明し改善するつもりです。しばしご辛抱を!

 TBする時にタイトルを忘れてしまって・・・

 全くドジな話ですが、先のtbはエントリイタイトルを入れないまま送信してしまったので、TBされた方から見ればTB元のエントリイ冒頭部分だけは見えるものの、クリックするところがなく結果として辿れなくしてしまいました。陳謝!(もし削除出来ればそちらで削除して頂けると幸いです。何度もご迷惑をお掛けして恐縮です。)
 -------------------------
 タイトルをクリックしてトラックバック元を見る、と言うシステムは一般的なのかしら?、と疑問に思います。といっても他のブログのことに詳しいわけではなく、偶々exblogは違ったからだけなのですが、あちらの方が辿りやすかったですね。その先に文章が続くことが示され、その部分をクリックするとトラックバック先が開くシステムでした。
 さて、望海さん、ご指摘ありがとうございます。どんどん出して頂けると嬉しいです。自分では発見出来ないバグも見つかるだろうし、他の人にどう見えているかは極めて大切なことですから!
 次に以下の件ですが、
記事側で、リンクの上にカーソルが来ると、一部ボーダー要素が表示されなくなるところがあるようです。スクロールしてその部分を隠すと元には戻りますが再びリンクの上にカーソルが来ると消えてしまいます。解決策分からなくて、報告だけで申し訳ないのですが(汗)。

 これもIEでだけ発生する現象なのです。色々とまさぐってみたのですが(爆笑)、原因は分かりません。position指定による影響のようなのですが解決策は私も全く分かりません。それでも現在のテンプレートは、まだまだ安定している方なのです!(爆笑)。このブログは上/左・右の3つのエリアに分けていますが、それぞれの配置を思い通りにするのに表を利用しないことにしたので、position指定で配置しているのですが、どの様な組み合わせを使っても、あるいはposition指定を使わずにfloatで左右に分けさせても、いずれの場合でもエントリイ部のボーダーだけが「消滅/再生」を繰り返してしまうのです。困ったものですが大勢に影響がないため、放置せざるを得ない状況です。
 とりあえずお礼と状況報告まで。

 続/一から作る!

 ぴおぴおさん コメントありがとうございます。
 相当無謀なチャレンジですが(苦笑)、それにも拘わらずチャレンジする気概に感服しています。HTML/CSS/Javascriptを三位一体として学習することは大変なことですが、やり甲斐のあることですから、共にp(^^)qガンバロウ!

コメントへのトラックバック???

 これはあるコメントを受けて書いた、それを送ってくれた方のエントリイへのトラックバックです(う〜ん。わかりにくい!笑)。コメントはどうしてもあるブログ内だけのやりとりになるので、こうした手段を執らないと相互交通が出来ないわけでして・・・。
 さて、望海さん、沢山の要望リストありがとうございます。私はモブログはやらないのですが、それ以外の要望についてはガッテンです。私よりも遙かにFC2ブログの課題を把握していることに改めて敬意を抱きました。
 僭越ながら、戴いたコメントを全面的に参考にして、私の書いた「要望実現/未実現リスト」を更新して宜しいでしょうか?
【追伸】
 横スクロールバーについては、ご迷惑を掛けております。
 IEの場合だけのようですが、画面サイズに関係なく出現してしまうのです。その原因はコンテンツのセンター配置にあるようなのですが、センター配置をした上で、IEだけに出現してしまう不要な横スクロールバーを出現させない方法が分からないため、そのままとしています。Things to do(改善課題)の1つに追加!しまっす!(苦笑)

この続きを読む

3週間で10,000人突破!これは・・・

 これはエキサイトブログの1週間で4000〜5000人の新規登録者に次ぐ記録かも!!!
 p(^^)qフレ〜フレ〜 FC2!(/\)チャチャチャ

 こちらが本家のレポートです。

 一から作る!!

 これは一からつくってみよう! その2〜HTMLの解読中〜エントリイへのコメントバックです。
-----------------------------------------
 大胆不敵なこのチャレンジに喝采!今後の展開が楽しみである。p(^^)qガンバッテ!

 リストのチェックを!

※ これは、川の流れは絶えずして FC2ブログ修正点へのトラックバックエントリイです。
---------------------------------------
 お久しぶりです。
 さて、まずお詫び。まねをしたわけではないのですが(苦笑)空コメを送ってしまいました。入力中に漢字変換確定のつもりでエンターを押したら、その時点で「あっ!」と思ったら時既に遅し!。空コメは「見事に」送信されてしまったのでした。失礼しました。ご案内の通り、パスワード入力前の出来事ですから削除出来ないのです。
 さて、FC2への要望に関してですが私も整理してみました。そのようなリストを作ってFC2ブログスタッフを激励しようと思い立ってから、だいぶ時間が経ってしまったのですが遅ればせです。
 このように遅れてしまったのには当然訳があります。
 Javascriptが今一うまくコントロール出来ない、つまり半可通が遮二無二やっている為に、どうしてもスクリプトにバグが頻繁に出現したり、あるいはイベントの取得がうまくいかなかったりで、四苦八苦、七転八倒していたためでした(爆笑)。
 その煉獄の苦しみはまだ癒えるどころか現在も執拗に続いているのですが、いつもいつもJavascriptと格闘していると全然ブログに投稿出来ないので(爆笑)、息抜きでリストを作ってみた次第です。
 過不足があると思いますので是非ご指摘を!

NN(ネスケ)ではカレンダーが正規の位置に配置されない。

 firefoxではきちんと右の時計の左側にカレンダーが配置されるのだが、ネットスケープナビゲーター7では、どういうわけかカレンダーが左サイドに配置されてしまいタイトル等にかぶってしまう。NN固有の問題のようだがどうすれば直るのか?───詳しい方はいないかなあ・・・

軽快な階層メニューに自己満足!

 やっと実現した階層メニューをあれやこれや転々と行き来しながら悦に入っている。
 Javascriptの醍醐味の一つがこうした動的なリアクションである。ますます熱を入れて頑張ろう、と思う。

このブログの設計思想

2005/02/09改

  1. クロスブラウザ対応を極力めざす。
  2. コンテンツはHTMLで、レイアウト・装飾等の見栄えはCSSで、を極力めざす。
  3. 文字サイズは標準を基調とする。
  4. 色を多用しない。
  5. Javascriptの実験場として色々チャレンジする。
  6. 以上の苦労談を随時エントリイする。
  7. 出来るだけ軽快な表示をめざす。但し時計は重たいが気に入っているので例外とする(笑)。

「Sleipnir」「PictBear」の作者のパソコンが盗難に遭い開発中止に!?

 作者のパソコンが盗難に遭い、ソースコードの入ったパソコンが失われたとのこと。バックアップ用のパソコンも併せて盗まれてしまったため、このまま同氏のソフトが開発中止になる可能性もあるという。
 これは大打撃だ!利用者は相当増えているようだし、9月9日に発売された『Sleipnir Power Tips』も12月号のInternet Magazineで取り上げられたり、あるいはまた10月には Mozilla-Firefox が登場して、ブラウザの今後の支配権を巡って興味深い状況になっていただけに、極めて残念だ。Sleipnir が Gekkoエンジンをサポートすればfirefoxと互角に戦えるだろうに、仮に開発断念となれば、泣くに泣けないユーザーは決して少なくないだろう。
---------------------------------------------
「Sleipnir」「PictBear」の作者のパソコンが盗難に遭い開発中止に!?

この続きを読む

オリジナルなリンク集完成!

 FC2が用意してくれたリンク集はコメントすら書けないし分類出来ないので、仕方なく自前でリンク集を作りました。Javascriptを使った階層メニューとして作成しましたが、いくらでも階層を増やせるところが味噌です。
 リンク→ジャンル別リンクリスト→更に必要に応じてジャンル別リンクリスト→リンク集という階層別メニューで、この先も必要があれば何階層でも深く出来る仕様としてみました。いくつかの参考サイトで勉強して、結局独自に作成したのですが、Javascriptは難解でもあり奥が深い、と改めて認識した次第。まずはひとまず( ^_^)/□☆□\(^_^ )カンパーイ!
 それにしても、未だにfirefoxやNN上において、マウスイベントの位置取得が出来ないのは困ったものだ。
 関数の戻り値が一つしかないのはJavascriptの仕様だが、配列を使えばいくつでも関数から値を取り出せる。だから例えばマウスのx座標、y座標の取得などいとも容易いはずなのに、それが出来ない!!
 うぅぅぅ〜〜!!!

 一区切り!!だわいのぉ!

 いくつかのサイトメンテナンス課題の内、大きな課題であった閲覧メニュー(Javascriptによる)と、配置(tableを使わないでCSSだけでレイアウトする)に関するクロスブラウザ対応が一応目処が立った。(但し、Safariでは未確認)
 その意味で10月末からの三週間の苦闘に一区切りが付いたと言えるだろう。 一人でだけど、(^_^)/□☆□\(^_^ )カンパーイ!
 things to do に書いたとおりまだまだ課題は山積している。しかし、その課題が解決してしまえばこのブログは完成することになり、すなわちまた「終わり」が始まることになる。
 苦闘することのないブログに一体何を書くと言うのか?(苦笑)───ということになろう。
 その時には、ここにexblogから移行してきたように、また次なるブログへのチャレンジと彷徨が始まるのかも知れない。
 何はさておきこの7合目程の到達点に一段落としよう。

FC2ブログはどの様に採点されるのか?

 Internet Magazine12月号を購入した。この雑誌を手にしたのは10年ぶりくらいだろうか? 12月号は「発刊10周年記念号」だというから、発刊当初に数冊購入しただけだったのだろう。
 さて、この雑誌を久しぶりに購入したのには当然訳がある。ブログサービスガイドブックがおまけに付いていたからだ。それによればバランス良く高得点を得たのは livedoor Blogだ。採点は「初心者でも安心、カスタマイズ自由、デザイン豊富、ポータル充実」の4項目について各5点満点法で付けられているが、livedoor blogは全項目において4点、つまり合計16点を獲得していた。
 その他ではDRECOM Blogが「デザイン」「初心者」で各5点満点を獲得、JUGEMもカスタマイズとデザインで各5点獲得などが目をひいた。JUGEMの総得点は17点なのでlivedoorを越えることになる。(但し、JUGEMは現在新規会員を募集してないそうだ。)
 さてさて、ではわがFC2ブログは?───残念ながら採点対象にすらなっていない。新参者とはいえ同じ10月にスタートしたNTTのDoblog(どぶろく?!(笑))が取り上げられているのに何でやねん?!?! FC2はメジャーではないってことかな?
 そこで独自に採点してみたい。
 デザインの自由度は4点、テンプレートは3点、初心者楽々は3点、ポータルサービスはかなり寂しいので2点。これがFC2ブログに対するわが独断的採点である。ちょっと厳しい気もするがFC2の奮闘を期待したい。

そう言えば・・・・

 やっとのことで、Firefoxでもメニューが使えるようになりました。
 サイドバーにあるメニューをクリックすると、階層メニュー的に次の階層にあるリストがが表示されるように出来ました。
 FirefoxやNNにおいて、イベント発生箇所のマウス位置をJavascriptでうまく取得出来なかったので、苦肉の策で別の位置指定方法を採用して何とかこぎ着けました。まだfirefoxでは思ったような位置にクリック後のリストを表示させられないのですが、とりあえずは使えるようになりました。
 これまで NN や Firefox でご覧戴いた方にはご迷惑をお掛けしてきましたが、3週間の苦闘の末にやっと何とか閲覧して戴けるようになりました。残るはSafariでどうか、なのですが指摘を待つ以外に確認する方法がないため当座は静観したいと思います。
 ご指摘やご意見等を期待しています。

Javascript、CSSにおけるzIndexについて

 z-indexは重なり合うコンテンツの画面上での上下関係を指定するものだが、次のような場合にはどうもうまく作動しないようだ。
 2つの位置絶対指定ブロック(b1、b2)があり、それぞれのblock内にコンテンツc1、c2がある場合において、HTMLはb1→b2と記述されていて、c1の一部は不可視状態にしてあるとします。
 こうした状態の下で、c2コンテンツの一部からJavascriptによってc1コンテンツ内の隠蔽画像を可視状態にした場合、z-indexにかかわらず、HTMLで後に記述されているblockが上になってしまい、HTMLで先に記述されているc1block内の隠蔽コンテンツは、c2ブロックの上には表示されないようなのです。位置が絶対指定された複数のblock相互間の、z-indexに関して詳しい方はいませんか?