製造業ホームページのCSS崩れ直し方｜自分でできる確認手順3ステップ

製造業のホームページ担当者が「CSS崩れ 直し方」を急いで検索しているのは、たいてい朝イチか取引先への提案直前だ。

先日、産業用フィルタを製造している従業員60名ほどの工場でこんな出来事があった。採用担当者が求人サイトに自社採用ページのURLを掲載した翌朝、同僚から「スマホで見たら写真が縦に引き伸びて文字が重なっている」と指摘され、パニックになって制作会社に緊急連絡した。ところが原因はプラグインのアップデートで上書きされたたった1行のCSSで、担当者自身が気づけた可能性が高かった。

このコラムでは、コーディングの知識がほぼゼロでも実行できる「崩れの原因特定→外注判断」の3ステップを、製造業のサイトでよく起きるケースに絞って解説する。読み終えれば「どこが壊れているか」を制作会社に正確に伝えられるようになり、修正依頼の手戻りを減らすことができる。

なぜ突然レイアウトが崩れるのか：製造業サイトでよくある4つの原因

まず「なぜ崩れたか」を把握しておくと、あとの確認作業がスムーズになる。制作会社の経験上、製造業のサイトでよく起きる原因は次の4つに絞られる。

• CMS・プラグインのバージョンアップ：WordPressなどのCMS本体やプラグインが自動更新され、既存のスタイルと競合する。設備紹介ページで写真の横幅が100%を超えてはみ出すケースに多い。
• 画像・ファイルのアップロードミス：採用担当者がバナーや写真を差し替えた際に縦横比が大きく異なるファイルをそのまま登録してしまい、テキストが押しつぶされる。
• ブラウザのアップデート：ChromeやSafariが新バージョンになった直後に、旧来のCSS記述が解釈されなくなることがある。特定のブラウザだけで崩れる場合に疑う。
• コピー&ペーストによる見えない文字の混入：Wordやメールから文章をそのままコピーして貼り付けたとき、見えない特殊文字やタグが混入してHTMLの構造が壊れる。

どの原因かによって「担当者が直せるか」「制作会社に依頼が必要か」が分かれる。次のステップで実際に確認していこう。

ステップ1：まず「いつから・どの画面で・どのブラウザで」を記録する

開発者ツールを開く前に、崩れの状況を言語化しておく。これだけで制作会社への連絡がまったく変わる。確認するのは次の3点だ。

1. いつから崩れているか：昨日まで正常だったか、1週間前から気になっていたか。CMSのバージョンアップ履歴と照合するヒントになる。
2. どのページで崩れているか：採用ページだけか、設備紹介ページも含めてサイト全体か。全体なら共通のヘッダーやCSSファイルが原因の可能性が高い。
3. どのブラウザ・端末で崩れているか：ChromeのPC版だけか、iPhoneのSafariでも再現するか。スクリーンショットを2〜3枚撮って保存しておく。

樹脂成形メーカーの総務担当が制作会社に「採用ページが崩れています」とだけ連絡して、「どのブラウザですか？」「いつからですか？」とやりとりが往復した事例がある。この確認を先に済ませておくだけで修正着手までの時間が半分以下になる。

ステップ2：ブラウザの開発者ツールで「どの要素が原因か」を特定する

開発者ツールと聞くと身構える人が多いが、ここでやることは「崩れている部分をクリックしてCSS一覧を見る」だけだ。エンジニアのような編集作業は不要である。

開発者ツールの開き方

• Windows：F12 キー、または崩れた箇所を右クリック→「検証」
• Mac：Command + Option + I、または同じく右クリック→「検証」

確認する手順

1. 右クリック→「検証」で開発者ツールを開くと、クリックした要素のHTMLが左パネルに、CSSが右パネルに表示される。
2. 右パネルのCSSを見て、打ち消し線が引かれているプロパティがあれば「そのスタイルは別の記述に上書きされて無効になっている」というサインだ。これだけでも「CSSが競合している」と判断できる。
3. 崩れた要素に width（横幅）や margin（余白）の値が異常に大きくなっていないか確認する。たとえば写真が画面からはみ出している場合、width: auto が width: 1200px のような固定値に上書きされていることが多い。

このとき「どのCSSファイルの何行目に書かれているか」も右パネルに表示される。ファイル名とおおよその行番号をメモしておくと、制作会社への連絡がぐっと具体的になる。産業機械メーカーで設備紹介ページの写真が縦長に崩れた事例では、このメモがあったことで制作会社の修正対応が30分以内に完了した。

ステップ3：「自分で直せる範囲」と「外注すべき範囲」を切り分ける

開発者ツールで原因の手がかりが掴めたら、次に「これは担当者が触って良い箇所か」を判断する。誤って操作すると崩れが悪化するケースもあるので、ここは慎重に切り分けたい。

状況	担当者が対応可能	制作会社へ依頼
CMS管理画面で差し替えた画像が原因	◯ 元の画像に戻す	不要なことが多い
Wordからコピーした文章に特殊文字が混入	◯ テキストのみ貼り直し	構造が壊れていれば依頼
プラグインのバージョンアップが原因	△ プラグインを旧バージョンに戻す（要注意）	CSSの修正は依頼推奨
サイト全体のレイアウトが崩れている	✕ 触らない	即依頼
特定ブラウザのみで崩れる	△ 状況をスクショで記録	コードの修正は依頼

制作会社に依頼する際は、ステップ1で記録した「いつから・どこで・どのブラウザで」と、ステップ2でメモした「CSSファイル名と行番号（わかる場合）」、スクリーンショットをまとめて送る。これだけで「確認してから折り返します」という往復が大幅に減る。

BtoB企業の技術発信と採用コンテンツを、制作から月次運用まで担当しています。まず現状のサイトを無料で診断します。