言語(PHP他)HTML/CSS
更新日 : 2020年9月1日
投稿日 : 2017年9月12日

CSS記述は良いのに表示が崩れる原因は「上書き」

CSS記述は良いのに表示が崩れる原因は「上書き」の画像

こんにちわ、PHPエンジニアのエンジニア婦人(@naho_osada)です。
私はPHPエンジニアとして8年~の経験があります。

デザイナーさんからあがってきたCSSをプログラムで入れ込むウェブページに入れ込む作業です。通称デザイン適用(勝手に言ってるだけ)

見た目をよくするために当然必須なことではあるのですが、好きではない作業です。どこがどこにかかっているのかわかり辛くて。

一回の当て込みで100%修正なしで行けるなんてことまずありません。なんかしら抜けてるか、どっかで競合しているかが多い。

その原因を突き止めて修正して、デザイナーさんが作った通りに表示できるようにする。これも大事な仕事です。

CSS上の設定はあっているのにどうしても適用されない

原因を探すも、これといったものはなさそう。

IDが抜けている、クラスが違う、タグが足りないなんかはよくあるミスだけど…

仕方ないので何が適用されていないか、ブラウザコンソールから確認すると、

原因と対処

marginが適用されていない…だと…

原因は「CSSの読み込み順による設定上書き」のようでした。読み込み順をデザイナーさん指定のものに変えたら解決しました。

jQuery使うときも読み込み順によってエラーになったりするけど(初めにjquery.js読み込まないとまずダメだし)、CSSでもこういうことあるのね。

余談

仕事方式によると思いますが、デザイナーさんが作ったCSSがどうしてもプログラム表示上の不適合を起こす場合はこちらで修正することもあります。ID変えるとか、クラス追加するとか。

ここに特定のID入れろといっても、そのIDを設定する条件がプログラムで確定できないからちょっと変えるわ、みたいな感じですかね。伝わりますか?

例えばURL「/xxx/」のときは<div id=”xxx”>、は簡単です。if文追加してやればいい。

が、URLがどうなるかわからないけど、この表示したいときは「<div id=”xxx”>」付ける、とか…。

しかもURL条件以外に判定基準になりそうなものがない場合。詰む。こういうときにCSSを変えます。デザイナーさんはこっちが組んだプログラムの都合なんか知らないから知ったこっちゃないのでね。たまにちょっとマテみたいなCSSあります。

こういう軽微な修正もできるようにならないと、ウェブページを作る以上、正直困りますね。

社内分業化されてると中々スキルアップしない部分ではあると思うけど。

どこに原因があるか、どこをどうしたらいいか。イチから書けなくてもいいから、なんとなくわかるようにならないと。

PR

※本サイトはアフィリエイトプログラムを利用して商品を紹介しています。