ホーム > 技術情報 > CSS記述は良いのに表示が崩れる原因は「上書き」

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

投稿日 : 2017年09月12日   更新日 : 2019年10月12日
カテゴリー : PHP/javascript/CSS / 技術情報
CSS記述は良いのに表示が崩れる原因は「上書き」の画像

こんにちわ、PHPエンジニアのエンジニア婦人(@naho_osada)です。
私はPHPエンジニアとして6年~の経験があります。WordPressは2年~の経験があります。その他、jQuery、HTML、CSSも使用します。
ここでは主に過去に納品した案件や自サイト運営(エンジニア婦人ノート)で遭遇したことについて書いています。

デザイナーさんからあがってきた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あります。

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

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

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

楽しい物造りを

NaoLight

自分のブログやサイトを、楽しく作ってもらえたら。

プログラムを使って望み通りに、拡張しやすく、自分の思うように。

できたときに、すごく楽しい!と思ったら。

控えめに言って、「最高です」。

NaoLight -NAOT-(なおらいと、なおと、と呼んでください)はそんな思いをカタチにする、WordPressのテーマです。

ご購入はこちらからお願いします(BOOTHへ移動します)。

Nao Light-NAOT-公式サイト