私はプログラマーです。趣味プログラマーです。ただたまに友人のお手伝いをして、飲み食いさせていただくということをしております。

で、つい先日システムをスタートさせました。実際に使い始めていくといろんなところが気になるらしく、日々修正依頼が来るようになりました。プログラムで解決できるところなら時間さえあれば解決できるのですが、それ以外の箇所の修正、具体的にいいますとデザインの修正もたくさん依頼としていただきます。

デザインはデザイナーさんにお願いして下さいよーと心の中で思いながら、恐らくは既に納品していただいているものに対しての修正となるとお金を払う必要があるんだろうな〜。だから、私に頼めば無料で出来ちゃって助かるんだろうなーと頭の中で計算しながら、「はい。やらせていただきます」と引き受けてしまうことが多いです。

デザインのプロではありませんが、既にプロが作ったものに対しての修正だから「大した事ないだろ」と思っていつも引き受けてしまうのですが、引き受けたあとにその修正を自分でやろうと思うといつも後悔しています。見た目にはちょっとした色の変更だったり位置の修正だったりするのですが、なかなか難しかったりします。

で、手当たり次第に、というより総当たりでcssに入っているclassを変更してはサイトにuploadして確認して行きます。これ、結構時間かかるしストレスになります。。ただ、知識がないので「だいたいこのclassのここのmagrinを減らしてみればいけるだろう」てな感じで修正していきます。。一番確実な方法ではあるのですが、急いでいるときにこの方法だとやはり破綻してしまい、すぐに修正して欲しいという依頼側の要望に答えるのが難しいです。

最近、IE11でサイトの表示が崩れるので治してくれ、ということで依頼していくうちに、IE11にとっても素敵な機能があることに気がつきました。

その名は、DOM Explorer

まずは問題となっている要素に対して右クリックを行い、「要素の調査」を選択します。

 

dom explorer

で、画面が次のように変わります。

 

dom_explorer1

 

画面の右下に、いろいろな色で枠が出来ていると思います。これは、外からoffset, margin, border , paddingの値になっています。いろんなスタイルシートで複合的に設定された状態を示しています。で、ここの値を直接変更ができ、且つそれが即画面に反映されてみる事が出来ます。

これは私のような素人からしたら、神様のようなツールです。何故ならば、いちいちcssを修正して保存、ftpでアップロードするということをせずに、その場で即反映した画面を見る事が出来ます。これで大幅な作業時間の短縮になりますし、なによりやっていて楽しいです。