07 | 2017/08 |  09

  1. 無料サーバー

User forum-FC2BLOG-Info-Edit Template-Post-Edit-Upload-LogOut

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

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

 

自称テンプ屋の苦闘記録

 このブログレイアウトは、表題ブロック(T)を上に配置し、その下にサイドブロック(S)を左に、エントリイブロック(E)を右に並列配置している。
 ここに、T-Blockは右にあるカレンダーが隠れないよう、閲覧画面幅に応じてその文章ブロック幅が変化する必要があったことから、閲覧文字サイズと画面幅に応じて、T-ブロックの幅と高さを可変とする必要があった。同様に、閲覧文字サイズと画面幅に応じて、S-BlockとE-Blockも、両方またはいずれか一方の幅が可変でないと横スクロールバーが現出してしまうため、ここではE-Block幅を可変とする必要があった(左右両blockを可変とする方法もあるが、その場合特にS-Blockが見にくくなるため、より易しく・優しい片側ブロックだけの可変を選択した)。
 こうしてTとEの2つのblockが左右に可変となり、かつT-Blockは高さが下方可変となった(当然、E-Blockはコンテンツに応じて下に伸びるので下方可変であり、他方S-Blockは左右にも上下にも閲覧状態に関係なく不変である)。
 こうした複雑な3ブロックを、どのブラウザで見ても基本的に問題がなく表示されるように設計したい。それもtableタグを使わずに、CSSだけでその配置を実現してみたい。───このように考えてここ数週間、暗中模索、群盲象を撫でる事態を繰り返してきた。細部のレイアウトよりもまず、全体のBlock配置に心血を注いできたわけだ。
 
 さて、概ね満足出来るレイアウトになってきたこの土日。実は大きな壁にぶつかった。第一に、position:absolute;を多用すると、閲覧されている画面内の部分的範囲選択が適切に出来なくなること、第二に、リンク箇所にマウスを乗せると、その行のインラインレイアウトが崩れるという問題だった。
 これらの二つがよもやバグによることは知る由もなく、起こる不具合の原因が分からずに土日は暗澹たる思いの中に時を過ごした。(だから愚痴エントリイを沢山書いた。(苦笑))
 ところがである。ネット検索によって第一の問題はIEのバグであることが判明した。IEのバグにここでも時とエネルギーを無駄に消費してしまったのだ。【※position: absolute使用時の範囲選択

 そして第二の問題はどうもテンプレートのバグに起因していると思われる。事実テンプレートのバグっていると思われる箇所を修正したところ、これまでどうしてもうまくいかなかった全てのことが一気に解決したのだ。【※バグと思われる箇所は、掲示版に書いておいた】
 
 それにしてもposition属性やfloat属性は限りなく扱いが面倒だ。時計とカレンダーは絶対配置とする必要があったし、左右のblockを共に絶対配置にすれば簡単だがそれではIEのバグが現出してしまう。
 (1) では、左右を共に通常のストリーム上においてfloat属性を使って振り分けたらどうか?───これは右ブロックのボーダーが乱れてしまった。
 (2) ではでは、左右いずれかを通常のストリーム上において、片方を絶対又は相対配置したらどうか?───相対配置は先行する通常のストリームが左右いずれかのblockになるので、position出しが難しい。
 (3) ではではでは、左右いずれかを通常のストリーム上において片方を絶対配置したらどうなるか?───最初は左ブロックを通常のストリーム上において、右ブロックを絶対配置にしてみた。すると表示が乱れるのだ。
 (4) ではではではでは、入れ替えてみたらどうか。それでも乱れたり乱れなかったりする。これはどこかHTMLタグに不整合があるのではないか?
 (5) とチェックソフトをダウンロードして調べるも原因が特定出来ない。
 (6) やむを得ず、これまでに何度も繰り返してきたHTML全文手動チェックを再度行ってみた。
 (7) おかしい状態となったソースファイルも分析してみた。

 かくなる孤軍奮闘の末に遂に!───何とdeathテンプレートそのものにバグを見いだしたのだ。それを修正したところ、案の定やっと思い通りのレイアウトが完成をみた。
 振り返れば、ずっとバグがあるままで編集してきたのだから、バグ修正後の今、上記の(1)から(4)を改めてやり直してみることも意義があるかも知れない。しかし、相当疲れ果てた。もう懲り懲りだ。しばらくは可能性については放置しよう。
 ということで、2週間を費やし、やっとの思いで我がテンプレートは「一応」完成したのではあった・・・。

※ それでもなお、クロスブラウザなブログという点では、メニュー等々の改善箇所が20箇所近くある(thngs to do)。これはオイオイ時と手を掛けて改善していくことになろう。

 

● コメント ●

結局バグではなかったようだ (hkom)

 掲示版で問い合わせたところFC2から回答があり、バグではないとのことだった。その主張は理解出来たのでバグと思ったのは誤解であった。これによりバグ騒動は一件落着したのだが...。
 肝心のIEにおけるボーダー表示の乱れは改善策が尽きてしまった。(当然firefoxではボーダーの乱れはない)

■ コメントの投稿 ■

管理者にだけ表示を許可する

●トラックバック●

■トラックバックURLはこちら■
http://hkom.blog1.fc2.com/tb.php/49-7f2b65ff

●参照元一覧●

<provided Fc2>
<provided i2i>

▲ToTop

 90%近いシェアを握っているインターネットエクスプローラの描画エンジンを利用したタブbrowser。沢山のタブbrowserがあるが、多機能、カスタマイズフリー、スクリプト利用等で一日の長がある。Gekkoエンジンへの対応も行われ、IEからの自立独立の方向に向かっている。2005年7月にはIE7が登場する見通しの中で、今後の発展が望まれる。

 多様なCSS作成支援機能を備えた、タグ入力式 HTML&CSS作成支援エディタ。スキンデザインもすっきりしている。テキストエディター上で作成するよりも確実で安全にタグ打ちが出来る。
文字コードを選べないのが欠点。

 StyleNote同様のタグ入力式 HTML&CSS 作成支援エディタ。長年使用してきたが現在StyleNoteに乗り換えつつある。

 クリップボード履歴情報を活用する為のソフト。画像まで履歴を取ってくれるのが嬉しい。このソフトを使わない日は絶対ない程に重宝し、愛用している。

 起動中のウィンドウの「コピーできない」説明文などの文字列を取得し、コピー可能な文字データにするツール。何かと便利。

 ストリーミングデータを保存することが出来るソフト。動画利用には不可欠なソフトだ。

 無料ながらレイヤー機能を有し、スクリプトによる拡張も可能な、sleipnir作者が提供している優れもの画像編集ソフト。

 画面キャプチャソフトと言えばこれに勝るものなし、ではないだろうか? 様々な取得方法を有しており、ブログ作成にもHomepage作成に不可欠だ。Jtrimと並んでWoodyBellsの作品。

 複数ファイルの同時編集は出来ないが、透過pngも作れる画像編集ソフト。
(以下当該サイトから抜粋)初心者にも簡単に操作が出来るフォトレタッチソフトです。多くの加工機能で画像に様々な効果を与えることができます。非常に軽快に動作するため、ストレスなく操作できます。

 Animation Gifファイルを作れる無料ソフト。

 キャプチャソフト。画面内にサイト全体が表示しきれない場合でも、これを使えば全体をキャプチャすることが出来る。

 画像処理。画像のフォーマット変換のみならず、色数やサイズ、圧縮率の変更まで一括処理できてしまう『BatchGOO!』は、大量の画像をまとめて処理したいときに大変便利なソフト。BMP, TIFF, JPEG, PCX, PNG の相互変換をはじめ、色数・サイズ・解像度の統一、JPEG圧縮率の調節など、ホームページ用の画像や携帯電話用の壁紙を揃えるのに抜群の相性を見せる。(Vectorの当該ソフト紹介頁より抜粋引用)

 名前から直ぐに想像が付くように画像のサイズを測るためのソフトだ。Homepage作成には欠かせない。2カラム、3カラムのレイアウトを行う場合に大変重宝する。

 ランチャーソフトは沢山あるが、中でもこれが一押しだ。2年以上使ってきたがその操作性には毎日満足している。これを使い始めてからデスクトップには一切のアイコンを表示することをやめてしまった。

 AdobeReader7によって、起動時間が長すぎるという長年のユーザーの不満はある程度解消した。そのためこの高速化ソフトは存在価値が低下してしまったかもしれない。AdobeReader6迄はこのソフトによる起動高速化で恩恵を受けてきた。

 IE専用が難点だが、様々なサイト内でIDやパスワードを入力するのに重宝するソフト。コンテキストメニューから簡単に起動できるのがGood! sleipnir等のIEの描画エンジンを利用しているブラウザでも使える。

 利用しているパソコンの諸元値を取得するには、このソフトがベストだ。インストール済みソフトの一覧が取得できるのも嬉しい。

 WMPは機能が豊富なだけ重い。RealPlayerも同様だ。そこでMedia Player Classicを使いたい。動作が軽快なだけではなく、対応しているファイル形式もすこぶる多く、これひとつで、wmvもrmも表示できてしまうのだから凄い! 数多あるMedia Playerの王様と言えるだろう。

 自宅でPCを起動しているときには必ず起動しているメディアプレーヤー。何かと過剰なWinampよりも、起動も速くスキンはシンプルだ。

 DivX, Xvid, Mov, Vob, Mpeg, Mpeg4, avi, wmv, dv, などの動画をDVD-Video形式に変換できるフリーソフト。クリックするとDVD関連ソフト紹介サイト=「DVDなToolたち」なるHomepageが開きます。

----------
200411160148
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。