新米デザイナーの日報|design tracks » IE

IEで表示確認する際に活用すると良いもの

ts — Thu, 26 Aug 2010 22:19:20 +0000

IEでデバック、検証する際に使っているものをピックアップしました。
改めてな部分満載ですが。

xray

ブックマークレット型で見たい部分をクリックするとDOM属性を表示してくれます。
ただ、細かく数値を変更したりはできず確認するだけなので、あんまり使用することはないです。

firebug lite

よく使うのはfirefoxのアドオンでもおなじみの、firebugですね。
こちらもブックマークレット型で、機能に制限はあるものの十分です。

IE Developer Toolbar

これはIEのアドオンでリリース当時はめちゃくちゃ使ってました。
firebug liteを知ってからあまり使わなくなりましたが、たまに使ってます。

少しずつIEとは仲良くなっているものの、相変わらず苦労する時があるのですが、上記のモノは重宝してます。

先日作成した印刷用CSS

ts — Sun, 25 Oct 2009 12:03:51 +0000

先日ほぼ社内用ですが印刷用CSSを作成したので備忘録までに。
簡単な用件は社内向けということで、
・対象ブラウザ→IE6、Firefox3.x
・対象ページ　→簡単な計算式の結果画面

そんなところで、とりあえず印刷できればいいという感じでした。
なんで、即席ですが大体以下のようになりました。

/*print*/
@media print {
body  {
      background:#fff;
      color:#000;
      font-size:12pt;
      zoom:87%;/*ie*/
}

不要な画像 {
      display:none;
}

モノクロ以外の色がついているテキスト {
      color:#000 !important;
}

table,
tr,
td {
      border-collapse:collapse;
      border-spacing:0;
      border:1px solid #666;
}

}

もっといろいろと指定していますがざっくりとこんな感じです。
ポイントは、
・IE用にzoom指定
・不要な画像は非表示
・色はモノクロに
・リンクは非表示または、underlineを付けたりアドレスを出したり
ぐらいですかね。後は必要に応じて線を入れると見やすくなるときもあります。
注意すべきは、印刷用としてファイルを分けていないので、このやり方だとMac版IEでは認識してくれないみたいです。

あまり印刷用CSSを作成する場面はないので、頼まれるごとに戸惑いますが、印刷したときに自分の思い通りに印刷されるととても気持ちがいいです。

IEでabsoluteしたら消える

ts — Mon, 21 Sep 2009 14:52:23 +0000

先日遭遇したので備忘録。
コーディングがある程度してふとIEで確認すると絶対配置した画像が消えていたのでとても焦りました。自分の中ではabsolute指定するとまあブラウザのどこかにいるだろうという考え合ったのですが、border指定しようが、background-color指定しようがいなかったです。いろいろと調べてみたところ、position指定する前後のfloatしているものやhasLayoutが絡んでいるみたいです。

とりあえずclearをしたら回避できました。
まだまだ知識不足ですが、こういうのに遭遇できると楽しいです♪

Yahoo!がトランスフォーム！！！！

ts — Fri, 26 Jun 2009 05:30:54 +0000

上記のように「Yahoo! JAPAN」の検索窓に
「トランスフォーマー!」と入力して検索すると…。

画面が破壊されて…

トランスフォーマーリベンジに！！
※IEのみでしか見れないみたいです。あーだからYahoo!か。

いやーお金がかかってそうですごいですね！！ただ、なぜトランスフォーマー!と叫んだ形で検索しないといけないのか謎なのですが。yahooに変身しろ！と言っているかのごとくということですかね、きっと。
こういったPRの仕方も研究しつつ自分もいつかできたらいいなと思いました。

↓今、食べたい物をトランスフォームしてみました。↓
も、文字があれに…

複数のブラウザ（IE6/7/8など）で確認できる「Xenocode Browser」

ts — Mon, 22 Jun 2009 13:40:52 +0000

久々に「これイイ！！」というものに出会いました。会社の人に教えてもらったのですが、これさえあればIEのチェックは問題ないようです。他にもスタンドアローン版やIE3ぐらい〜IE6までセットになったものを使用したことはあるのですが、これは確認するときに緑のボタンをクリックすればすぐさま確認ができますし、パソコンに変なソフトをインストールしたりする必要もありません。
今後は有効に使っていきたいと思います。

一週間なんとか乗り切りました。

ts — Sun, 21 Jun 2009 09:17:44 +0000

先週はコーディングDayだったのですが、残業・徹夜・持ち帰り（データは持って帰れないので、ノートに軽くコーディングをするレベル）をしてなんとか乗り切りました。
もちろんやりきった感はあるのですが、どうしてもコーディングだけでは達成感がないなと最近まで思っていたのですが、
やっぱり薄いですね。どうしても今のスキルでは上司もコーディングの作業しか渡せないので根本的な問題は自分にあるんですけど。
なので、早いとこ新たなスキルを身につけるために日々頑張りたいです。

先週いろいろやっていて気づいたこと、
■サイト改修
サイト改修といっても全100ページものでデザインは別の方にしていただいたのですが、なんせ初めてて何から手をつけてよいやらで、周りは「お前に任せた」的な無茶ぶりで…、良い経験になったのですが。
流れとしては、cssファイルの影響範囲を調べて各コンテンツ、ページ、目的などに合わせて適正分けて作業に踏み切ったのですがあまかったです。いかんせん無駄なファイルや記述が多すぎて、とりあえずspacer.gifとインラインCSSを取り除きました。
そして共通で使うものとそうでないものを分けて…。ざっと5人日はかかったと思います（←効率が悪かったので、もう一度同じことをすると3.5人日でいけるかなと）

■他、特集系ページ
これが正直スケジュールに入れていなかったのもありきつかった。ケツは決まっているが、まだコーディングに取りかかれるとこまでデザイン、構成が決まっていない。まあそこでリソースを確保しやすいのがコーディングとプログラミングのとこで何かと辛い立場なのかなと理解してきました。どちらも成功（すごい！、さすが！！的な）はなく、失敗するかしないかであるかなと、できて当たり前状態ですね。
まあそんなときはコーダーの方と話をするとそれをつまみにお酒が飲める様になっちゃうんですが（特にIEネタはなかなか終わりません）

そんなこんなでいろいろと収穫があった一週間でした。今週は忙しい雰囲気ですが、再来週ぐらいには一休みできたらいいかなと希望を持っているところです。
ネイバーがかっこ良くて気になる！！

あと先日購入した「デザイン、現場の作法。デザイン力を鍛える仕事術」ですが、読み終わったので簡単にレビューを。
全体的に図や写真が多く読みやすかったです。DTP向けということもあり、あまりwebでは触れないカラープルファイルやフォントの奥深いとこなどが多かったのですが、逆にそれが新鮮で、特にフォントに関しては今まではざっくりと明朝系とゴシック系で頭にいれていたのですが、読み終えた後は選択肢が広がった気がします。
若干残念だった部分は、最後の落としの部分がソフトウェアの紹介になるページが多かったかなと思いました。全然嫌な感じに宣伝していた訳ではないですが。
あとは個人的なとこで通勤時に読む本のサイズではないなと。なので、こんどは小さめのを、しかも広告代理店の企画は…的なものを購入しました。
この本を読んでの一番の収穫は、通勤時に本を読む習慣が付いたことだと思います。読んでよかったです！

float前のコメントにやられました。

ts — Thu, 04 Jun 2009 18:06:16 +0000

先日IE6でボックス内の要素が溢れちゃって、解決するのに無駄に時間をかけてしまいました。原因は、floatする要素の前にコメントがあることによって、溢れちゃうみたいです。
いやーなんかこんなんで考えてしまう自分が情けないです。もっと勉強をしなくては！！
最近会社には新卒が入ってきて、スキルは自分よりもはるかに高くていいプレッシャーになっています。

ここ数日先にかかえているサイト改修がとても不安です。ページ数自体は50前後と決して多くはないのですが、なんせ自分一人でやんなくてはいけなく…何からやれば良いのか。現在CSS、JavaScript、PHPの影響範囲などを洗い出したり、コーディングガイドラインの作成を同時に進めていこうかなと計画しています。これを乗り越えれれば少しは入社当初に比べれば成長したかななんて思えるのかなと、越えなくてはならない壁って感じです。