ホームページビルダーで作られたサイトのレスポンシブ化について

Question

ホームページビルダー（以下hpb）でつくられた約200ページのサイトがあります。かなり以前につくられた全くレスポンシブは考慮されていないサイトで、今回、このサイトをレスポンシブ化するにあたり、どのような方法がベストなのか苦慮しています。

※サイトはhpbのバージョン19で作成されたものです。私自身macユーザーなのでhpbのことは全くわかりません。

一般的に考えると、共通のスタイルシート内にメディアクエリーを設定し、PCとスマホで基本的なスタイルシートを振り分けて、あとは個別に微調整と思われたのですが、現在のサイトのソースを見ると、ルートのディレクトリに２つのcssファイルがあり、その他に各ディレクトリごとにも同じファイル名の２つずつのccファイルがあります。
hpbがルートディレクトリのcssをベースに各ディレクトリごとにcssを作成するという仕組みと思われますが、hpbではルートのcssにメディアクエリーを設定したり、モバイル用のcssを読み込むような設定をした場合、各ディレクトリのcssにはどのように反映されるのでしょうか？

また、それらの記述はhpbでサイトを修正した際に上書き（削除）されてしまったりすることはないのでしょうか。

それとも、hpbで作られた古いサイトをレスポンシブ化するには全く違うもっと良い方法があれば教えていただきたいと思います。

よろしくお願いいたします。

Answer 1

このサイトをレスポンシブ化するにあたり、どのような方法がベストなのか

ホームページビルダー バージョン9 は2004年発売（当時はWinXPsp2あたり）なので、これをそのまま使うのは無理があります。

1. 1から作り直す
2. レスポンシブ用CSSを全ページに挿入する

の、どちらかではないでしょうか。

---

前者がお勧めですが、後者であれば現在公開されているサイトを元に、デベロッパーツールでレスポンシブ記述を試し、全ページで問題が起こりにくいCSSを作成し、それを全ページに挿入といった手順でしょうか。どうしてもHTMLの構造を変えないと無理が出そうな箇所については別途JavaScriptを読み込ませて対応とか。

【Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能 - Build Insider】
http://www.buildinsider.net/web/chromedevtools/01

【第1回 詳説：デベロッパーツールの使い方：Google Chrome版Firebug：デベロッパーツール取扱説明書｜gihyo.jp … 技術評論社】
http://gihyo.jp/dev/feature/01/devtools/0001?page=2