クロスブラウザの悪夢
「デザイナー兼SEの道！」2回目となりました。コメントやつぶやきをしていただき、大変うれしいです。励みになってます！
さて、前回の予告どおり、初仕事のCMSで経験した「クロスブラウザの悪夢」について、お話ししたいと思います。
■ その前に……
連載を見てくださってる会社の方々へ一言伝えたいことがあります。前回の連載の公開時間が「16：30」となっていますが、この時間は編集者さんが記事を公開した時間なので、業務中に書いてるわけではありません！ ご理解をお願いいたします。
■ クロスブラウザの悪夢
さて、本題ですが、アピールの結果、ネットワーク開発部で仕事ができるようになった私。
初めに与えられた仕事が、CSSのコーディングでした。
「CSSのコーディングはバイトでもやってたし余裕だぜ！ 任せてください！」
と、やる気と自信に溢れていた……。
CSSのコーディングアドオンFirebugを使いながらやっているため、Firefoxで作業していました。
完成後に、「クロスブラウザ対応（IE6～8、Firefox、Safari）でお願い」といわれていたのでIE6で確認してみたところ……
何だこれは！！！！！！
Firefoxでは正常に表示されていたのに、IE6ではマージンが大きかったり、ブラウザの幅を狭めると右カラムが消えたり……大変ややこしいことになっていた！！
ここで「CSSは甘くない！ クロスブラウザ対応は超大変！」ということを学んだ。
何事も、多少の知識があるからといって、甘くみてはダメですね。
いろいろ試行錯誤した結果、DIVタグをボーダーで囲ってブラウザごとに比較して「あ、このIE6とIE7はマージンの幅がこんなに違うのか」と調べるのが早いと個人的に学びました。
悩んでる方は一度やってみてください。
最近は営業ツールでiPhoneやiPadを使うため、これらへの対応も要求されます。
よく崩れてしまう原因がinput type。ノーマルのボタンが独特の角丸ボタンになり幅が変わってしまいます。
そんなときは以下のようにすると、通常に近いボタンになります。
input{
-webkit-appearance: none;
}
■ そのころ、同期は……
さて、CSSの知識を身に付けた時期、私の同期は違う部署でJavaやC#のプログラミングスキルを身に付けていました。
「私だけプログラミングができない……」
焦りを感じていた私は、家で.NETの入門書を買って勉強してはいましたが、家でちょこちょこやっているだけでは業務でやっている人に追いつけない……。
悩んでいるときに上司があることを提案。
その名も「チームで使うWebアプリを作ってスキルアップ作戦！！」詳細はまた次回！