xhtml/CSS Archive

IE8がWEB標準に準拠したというのは、私にとってかなり重大なニュースだった。

マイクロソフトの不可解でトンチンカンな姿勢から生まれたIE6,IE7の妙な仕様に世のWEBデザイナーどれだけ悩まされてきただろうか。

最近の私の制作スタイル（私はmacで仕事をします。）も、まずFirefoxやSafariで確認しながらxhtmlやらcss、javascript等のコーディングを行い、ちゃんとした文法でメインページを完成させる。そして次にParallels DesktopでWindowsを立ち上げ、IETester等の過去のIEのシミュレーターを使ってIE6、IE7でのメチャクチャに崩れた表示を確認する。このメチャクチャに崩れた表示を前に、無意識にタバコに手を伸ばす。

そして、表示が崩れている理由を紐解いて行き、目的の表示に限りなく近い状態にできるよう、cssやxhtmlに手を加えていく。いくら慣れているとはいえ、ある程度満足する結果を得られるまでに、途方もない時間がかかったりする。新しいサイトを作るたびに新しいIE仕様やバグを発見したりするのだから、いつ終わるかめどが立たないのも非常に悩ましい。また、バグを回避できても、どうして回避できたのかすらよくわからない事もある。ひどい時にはCSSの行数が倍になることもある。こうして、このサイトの基本コーディングを決め、他のページをこれに基づき一気に作成し、出来上がったらまたIEでチェックしていく。ちらほらと出ているバグに対応していく。10ページくらいなら、根気も続くが、100ページを超える大掛かりなサイトとなると、マイクロソフトに殺意を感じずにはいられなくなる。

本当に頭にくるのは、この独自仕様やバグのせいで、本来作りたかったものから妥協を強いられる事が多々あり、また、独自仕様やバグを考えると、試した事のないようなデザインに積極的になれず、過去の制作案件の事を頭に置いた、テンプレート的な保守的でつまらないデザインでないと納期に納期に間に合わない、予算内で収まるかわからないという全くクリエイティブでない発想に追いやられてしまう事だ。それに、WEBサイトの発注者はこのIE対応の為に随分とお金を払っていることになる。

恐らく、WEBに関わる人は多かれ少なかれ、これに似た体験や思いを持っていると思う。IEなんてなくなってくれ！といくら思い願っても、相変わらずシェアはトップだし、一般的なネットユーザに「ブラウザ何使ってる？」と聞いても「xp」等と答えが返ってくる始末だからどうしようもない。

解決策は、そしてWEBに関わる人が自分たちでできる事は、ただ一つ、WEB標準に準拠したブラウザの普及に貢献し、啓発し続ける事だと思う。

firefoxをダウンロードしてインストールするスキルのある人たちはこの際どうでもいい、問題は、それすらできない「e」マークのボタンをクリックしてネットを見る事以外に何もできない人たちをどうするかだ。実はこういう人が沢山いる。こういう人をどうにかしない限り、私たちは楽しい週末を潰し続けることになる。IE6の普及率は半端じゃない。弊社の管理するいくつかのサイトの統計を見ても、IE7が登場し、IE8のβ版がリリースされて、1年弱経った今尚IE6の仕様はIEユーザー全体の半数に及んでいる。

IE8がWEB標準に準拠するのはとても歓迎すべき事だけれども、問題はその普及方法だ。バグだらけのソフトを平気でリリースし、自動的にアップデートしない姿勢のマイクロソフト社にどこまで期待できるのかと思うと、気が重くなる。はっきり言って、もはやIE6はブラウザとして表示スピードも遅過ぎるし、半強制的にアップデートしてよいのではないかと思う。windowsの自動更新はデフォルトがオンだっただろうか？そんな事まで考えてしまう。

過去の失態やとんちんかんな独自仕様の呪縛にがんじがらめになりながら、平静を装い、さらに訳の分からない製品を生み出してしまうマイクロソフトの姿は、最近の社会保険庁の役人の姿勢と重なる様な情けなさを感じる。一度このタイミングで、apple並の潔さで過去と決別し、マイクロソフトが新しいOSと供に一歩踏み出してくれる事を、期待しないで願いたいと思います。

引き続き【ドライバーの仕事！ライダーの仕事！】のリニューアル制作中なのですが、本日も検索結果画面。検索条件を画像付きで視覚的に表現してみることにしました。

あんまりこういうサイト見ないですよね？
ただ、検索条件が画像の様に、「三重県」とかなら良いのですが、「大型貨物運送ドライバー」なんて長いものになると、表示しきれない。フリーワードや駅名での検索もあるし、全て画像にするのは不可能なので、この限られたスペースにテキストをどう入れるか悩んでいました。

そんなとき、ふと思いつきました。流れるテキストを。流れるテキストって昔かなり流行りましたよね。私も10年前くらいに流した記憶があります（笑）なんだっけなぁ、流すタグは・・・とググって見ると、ありましたありました、そうそう、<marquee>だ！
私的にはかなり、懐かしいタグです。今回初めて知ったのですが、この<marquee>タグはIE（Internet Explore）独自のタグで、本当はこんなタグないそうです。Netscape Navigatorではまーったく動かないとか。よって、Javascriptで同じ事を実現すれば良いとの事。

でもまぁ、動いた時のイメージが見てみたかったので、とりあえず<marquee>で作ってみました。なかなかいい感じです。

ん？safariで動いてるぞ？FireFoxでも。。。ということで<marquee>でいく事に（笑）実際【ドライバーの仕事！ライダーの仕事！】のアクセス解析を見るとわずかながらNetscape Navigatorでのアクセスもありますが、流石に10年近く前のブラウザに対応させていては、事が前に進みません。是非最新ブラウザをお使いください。

にしても、世のWEB制作者の多くが、時に殺意を覚える程、IEのバグやら独自仕様に悩ませられている訳ですが、IEの独自仕様が一般化されるパターンもあるんですね。珍しい。

というわけで、10年ぶりくらいに<marquee>タグを使った訳ですが、Firefox(2.0)での表示がおかしい。流れる文字がとんでもない位置から始まって、とんでもない位置で消えていく。色々いじってみると、親要素（色んな所？）のpaddingが影響してしまっている模様。以下を試してみたら解決しましたので、参考までに。

marquee{ display:block; position:relative;}

Firefoxでmarqueeが上手く流れないバグが出た時は、
cssでmarqueeのpositionをrelativeに。

以上。リニューアルお楽しみに！

...続きを読む