ヤル気あるんすか??これが所謂「IEの表示バグ」です。コードを打つ側に対して、使えない機能が満載のWebブラウザさんがIEなわけですね。厄介なのは、そんな使えない大御所のIEさんが、今現在でも世界の6割の使用率をしめているというのが、Web屋にとっては悩みのタネになっているようです。そんな中で、このエセWebデザイナー(見習い)のカネコにもこの表示方法の違いによって起こるバグの恐怖が降りかかってまいりました。カネコを襲ったバグはこちら。分り易く会社のWindowsを使ってスクリーンショットしてみたのがこちら。(図2)先日、公開して大変好評な『新曲もってこい』の専用ページですが、なんか変じゃないですか??改行に違和感。こんな設定してないし。下のアーカイブなんて、こんなんになってます。↓(図3)・・・うん、怖いね。変な線が表示されてるし。これって実はちゃんと画像の大きさを調整してあって、ひと月で最大5アーティストのサムネイルが表示できるようにしておいたのですが、これだとどう考えても4つまでしかはいらないですよね。そりゃあ「これがIEバグってやつか!?」って絶望にかられましたよ。そこで"エセ"なりに考えました。「・・・これって画像がデカめに反映されてるのが原因じゃないか?」と。複数の画像を横に並べて、幅がぴったりになる計算にしているのに、その画像が、予定よりもデカく認識されたら、(図2のように)勝手に改行されてしまうわけですね。ここで、解決のヒントになったのが、図3で書いた「変な線」です。「これって【HTML】を学んだときにやった"Border”ってやつではないか??」で、結果論ですが、これが的中してました。他との境目を分り易くするために表示される枠のことを指します。そんでもって、基本的には画像に対しては使われないものです。確かに昔は、画像を貼る際に、Border表示をさせない指示のコードである<Border="0">ってのを打ち込んでいたことを思い出しました。多くの画像で構成されているホームページを作る場合、いちいち打ち込むのって本当に疲れる作業です。普段使わないブラウザの対策ってだけで気分はげんなりなわけですね。!!!ここで冒頭に紹介した【CSS】というシステムが効いてくるわけです。・・・こんな感じだと考えます。買ってきたプラモデルをただ設計図(説明書)を見ながら作ったら基本的には、誰でも同じような形でつくることができますね。いうのって、なんだかのっぺりしてて、オリジナリティに欠けたりするもんです。なってくると、プラモ上級者との違いってどこだというと、センスと経験値なんだと思います。要するに、【HTML】はホームページの枠組みをしていて、そこに、【CSS】というシステムを導入することによって、より他と差別化でき、さらにこれまでの経験値を活かすことができるというわけ。プラモデルを作りだしたばかりの時って、色々な簡単なミスをしてしまいますね。パーツの切り離しを雑にしてたり、ボディを洗わない状態でシールを貼ってしまったり、スプレーの色を塗る時に、まず白で下塗りすることを怠ったり。人は失敗から学んで経験をするものです。十分に乾いてから、ピンセットなどを使って慎重にシールを貼るわけですね。要するに、以前のやっていた、画像を貼るごとにボーダーの非表示を指示していたことを【経験値】として記しておくわけですね。「いいか?このページでは、画像を貼るときにボーダーは基本いらないんだぜ」ということをCSS上に書いておくんです。するとどうでしょうか?僕の経験を活かして、それ以降、全ての画像からボーダーは消えているようになるわけです。やってCSSを書きなおしたものをIEで見るとこんな感じになりました。↓(図4)うん、きちんと計算通り枠ピッタリに画像が並んでいますね。アーカイブはこんな感じ↓(図5)うん、そうだよ。これがやりたかったんだよ!!!!いやー、長くなりましたが、何とか今週の課題はクリアできました。僕のように“エセWebデザイナー”として、同じような悩みに苦労されている方がいらっしゃった場合、少しでもお役に立てれば、これ幸い。Thursdayはーい、新コーナーでーす。映画もこっそり観てますが、それよりも今はWebじゃ!ってことで今週から新コーナー・・・エセWebデザイナーへの道さて、どんなコーナーかと申しますと・・・このコーナーではradioDTM企画構成のカネコが立派な"エセWebデザイナー"として成長していくまでの過程を毎週お届けします。毎週テーマ(課題)を自らに課し、それを克服していく過程と報告をしていきます。間違いなどが多々あると予想されます。いう場合は、コメント等で、ご指摘いただければ幸いです。何事にも形から入る派のカネコなりに、エセWebデザイナーになるべく揃えたガジェット紹介なんかもおまけ程度にやっていこうかなって思ってます。125GB皆さんご存知、MacBookの最小最軽量モデル。「持ち運びが苦にならないMac」ってところでしょう。G4"だったのが影響しまして、それ以降、Mac製品しか持たなくなりました。正直な話、Windowsの使い方をよく知りません笑ってことで相変わらずMac一択なんですが、Macの弱点って、高い・デカい・重いってことだと思います。持ち運びには不向きなわけですね。いくらノート型だからと言っても、会社や家に置きっぱなしという方もMacユーザーには多いのではと思います。13inchをバックに入れて持ち歩いていました。そんな中での11inchのMacBookAirちゃんの登場には心躍りました。SSDを採用ということなので、125GBモデルの登場と同時に借金して購入しました。なんてったって1kgちょいですよ!!」これならちょっとしたバックに楽に入れられることが出来ます。弱点としては、ストレージの容量が少ない・バッテリーの持ちが悪い・DVDドライバーがないこんな程度でしょうね。要するに、自分の作業スタイルと用途で、何を必要とするか?だと思います。「何を?いつ?どう作業したいのか?」ということを明確にイメージしておくことが結構大切なんだと思います。僕の場合だと、SSDストレージはアプリケーションのみに割り振り、その他のファイル保存は「Dropbox」などのクラウドサービスを利用。あとはバックアップ用の外付けHDDが500GBもあれば充分。バッテリーも電源アダプターを家用・会社用などと2個持ちしておいたり、DVDドライバーの件も、逆に会社などに外付けDVDドライバーを置いておく方がよっぽど効率的だと割り切ってます。この11インチAirちゃんにより、マジでいつでもどこでも作業することが可能になりました。あとはWi-Fiルーターなんかあればほぼ最強だと思います。チームでWebを構築する場合、いつどこで変更、編集、更新などが必要になる場合があります。(正確には今後予想されます)そうなると、「いま家にいないから無理」とか「会社にPC置きっぱだよ」みたいなことはナンセンスですよね。いいこと尽くめに書きましたが、良くない点も多々あります。一番は、Windowsの環境でのWebデザインチェックができないことですね。Campなどを利用して、仮想的にWindowsを動かすこともできるのですが、これにはさらに金もかかるので検討中ですね。さーてさて、今回は、ガジェットを中心に書いたのですが、それには理由があります。最後に書いた"Windows環境でのチェック"というのが、いまカネコが抱えている最大のテーマだからです。それを次回の更新までに克服したいと思います。IEでの表示バグを克服するになります。