IE6・7・8で使えるIE用のFirebug

ホームページの解析に欠かせない Firebug。
IE8からは開発者ツールが備わっていますが、Firefox派だと
使い慣れた Firebug の方がいいでしょう。

機能はFirefox版ほど充実しているわけではありませんが、
IE6、7でも動くということなので重宝しそうです。
2014年4月にはXPのサポートが切れますので、
そろそろお役ごめんとは思うのですが…・

http://getfirebug.com/firebuglite

「 Firebug Lite debug 」を右クリックして、お気に入りに追加します。
あとは使いたいページを表示して、お気に入りから開くと、
見慣れたFirebugの画面が開きます。
「Inspect」というボタンを押すと、要素をマウスオーバーで選択できるようになります。

テーブルの折り返しがきかなくなった場合

IE6からIE8へ変更した時など。

tdタグに幅を設定してある(width=”180″)のに
セルの中身が長い文字列だったりすると、
折り返しがきかず、レイアウトが崩れることが
あります。

一番簡単な直し方は、
tableタグに
style=”word-break:break-all;” 
を追加すること。

モダンブラウザなら、個人的には
tr、td、thタグそれぞれに
CSSで幅を指定しておいて、
微調整はクラスで、という方法を
とっています。

もちろん、あくまで「表」としての
要素を構築する場合。
レイアウトで表を使うのはSEOでは
ご法度です。

tdとかthに直接widthやheightを書くのは
美しくないのでやめましょう…。

ULやLIの入れ子になっているリストの問題

例えば、IE6時代の古いブラウザで見ていた時は
自動的にインデントが付いて、
ツリー状になっていたのが、
IE8をはじめ、モダンブラウザで見ると、
インデントが消えて、左端でまっすぐに
そろってしまっていることがあります。

結論としては、モダンブラウザの解釈の方が正しいです。
何の設定値もなく、勝手にインデントするIE6が
おかしいのです。

なので、モダンブラウザの方で、
入れ子になっている要素、
ul ul とか
ul li とかに
左のマージンを設定し、
そのあと、
スターハック(* html)で
IE6だけのルールを作って微調整します。

ファイルアップロード用のタグ type=”file” をデザインする方法

001

ファイルアップロード用のタグ (input type=”file”) は、
スタイルシートでは装飾することができません。
でも、近頃のウェブサイトではかっこよくデザインしているものも
たくさん見かけます。
どうするのかな? とググってみたこところ、
良記事を発見。

参考元
[CSS] ファイルアップロードボタンをデザイン

今後もよく使いそうなので、まとめてみました。
たぶん使わないと忘れることは必死なので、
自分なりにビジュアルと解説も入れておきます。

以下コードです。

code

[コード解説]
装飾用の領域をアップロードタグの前におき、
アップロードタグはopacityを0にして透明化、
かつ position: absolute; にすることで
position: relative; の#file_upload に対し
絶対位置を保ちます。

ようするに、装飾用のタグの上に、
透明化したアップロードタグをかぶせるという
ちょっと強引なやり方です。

・ポイント
装飾用の領域と、アップロードタグの大きさを
合わせること。
表示域のマージンやパディングを設定するなら
アップロードタグも同じにしておかないと
クリックした時の位置が想定どおりにいかないでしょう。

透明化と絶対位置を使ったこの手法、
他にもいろいろと応用がききそうです。

さらにスタイルシートを使って、ボタンも表示させてみました。

003

#file_upload の背景画像にボタンを使っています。
なお、IE、Firefox、Chrome、Safariでテストしたところ、
Firefoxだけがinputの幅が指定した大きさになりませんでした。
解決策は、size=”40” と大きさを指定してあげること。
どうもブラウザは、何事も大きさをきっちり決めてあげたほうが
いいみたいです。

テキストボックスをdisabledにすると送信されない

<input id="uid" type="text" disabled="" value="ID" name="sdk_uid">

上記のようにしていると、内容が送信されません。
盲点…。
書き込みできないので、規定値を表示して確認だけ…という
使い方は出来ないようです。

参考URL:
・テキストボックスを無効にすると値が取得できない
http://okwave.jp/qa/q7559522.html