ウェブ屋の備忘録

日々の業務で工夫していることや便利なツール、新たに得た知識などを共有しています。

cssで初歩的失敗…

初歩的失敗というものをしょっちゅうやっている私ですが…。 これは本当にもう、初歩的すぎて、解決したときには大笑いしてしまったくらいでした。

どんなことかって~?

とあるECサイトの新商品特集ページ。

いつものようにHTMLデータとcssデータを流用して作業しておりました。

流用なので、すぐ終わるはずでした。小1時間ほどで…。

なのに!

いつものようにcssが効いてくれません!

floatもmarginもことごとくダメです。

流用しているからちゃんとできるはずなのに!!!

その日は日曜…。私以外誰もいません。

聞きたくても誰一人いません。

どうしよう~!!!

いろいろためしてみましたよ。

ID名にdivをつけたり、その前の要素を足してみたり、marginをpaddingに変えたり、divで入れ子にしたり。

思いつくことやったけど、うんともすんとも言ってくれません。

正直、泣きそうになりました。

時間だけが経っていきます。

散々ミスってきたけど、こんな状況は初めてです。

そしてふと気づくんです。

こういう時のミスはいつも些細なことで起きてしまっていることに。

じっくりcssのソースを睨めっこします。

そして頭に電球がピカーンと光ります。

カチャカチャ

「ID名の最初に数字をつける」

ぐぐります。

すぐでてきました。

「数字はID・CLASS名の先頭につけてはいけません」

ええ、そうなんです。

私はID名の最初に数字を入れてたんですね~。

変えてみると案の定、cssが効いてくれました~!!!

これだけのことにどれだけ時間を費やしたでしょう…。

時間はあえて出しません。

そういえば最初に習ったじゃん!って一人で突っ込んでました。

こういうことを繰り返して人は大きくなっていくんです。

そうなんです!

スラスラわかるCSSデザインのきほん

スラスラわかるCSSデザインのきほん