webサイト編集でつまづきました（レイアウトがくずれます）

会社のwebサイトの編集を頼まれました。
詳しい知識はないのですが文章を差し替えるだけと言われたので引き受けました。

編集したいwebサイトをchromeでダウンロードして、ダウンロードしたHTMLファイルをブラウザで開いたらレイアウトが崩れていました。CSSのせいだと思ったのですが私にはどうすることもできないので会社の上司に報告したら最新のホームページビルダーを買ってくれました。versionは２０です。

それでHBで編集しようと思ったのですがやはりレイアウトが崩れます。おかしいと思い何も編集せずにHBで開いてそのまま保存したHTMLファイルを開くとやはりレイアウトが崩れています。
具体的には両サイドに縦にグラデーションがかかっているのがなくなります。

これはどうすればもとの状態を保ったままうまくできますかね。
もう期日が迫っていて結構困っています。どなたかよろしくお願いします。

No.3 ベストアンサー 回答者： ORUKA1951 回答日時： 2016/03/20 09:29

HB(ホームページビルダー)ですよね。

それはそれは最悪・・。少なくともプロは使わない。とても問題点が多く・・
ホームページ・ビルダー - Wikipedia( https://ja.wikipedia.org/wiki/%E3%83%9B%E3%83%BC … )

そもそも、
＞編集したいwebサイトをchromeでダウンロードして、
　が失敗の第一歩。
★FTPを使ってダウンロードすべきです。FTP(File Transfer Protocol)だと、ファイルやホルダーをそのままダウンロードして、かつOSによる改行コードの差も変換してダウンロードしてくれます。
　ブラウザを使うと、ディレクトリ構成などは再構成されますから使い物にはなりません。あくまで、リモートにあるページをネットに接続しなくても閲覧できるように保存する以上の機能はありません。

＞chromeでダウンロードして、
　chromeｆ、ウェブ開発には使用しません。ツールが貧弱なのと、代替スタイルシートも使えないし。
　ウェブ開発される人は、開発ツール( https://addons.mozilla.org/ja/firefox/extensions … )の豊富なFirefoxを使います。ブラウザの中では最もウェブ標準に適合していてるし。
Firebug( https://addons.mozilla.org/ja/firefox/addon/fire … )
　HTMLやスタイルシートを書き替えながらテストできる。
Html Validator( https://addons.mozilla.org/ja/firefox/addon/html … )
　HTMLの文法チェック
IE Tab V2( https://addons.mozilla.org/ja/firefox/addon/ie-t … )
　IEで見たり
Open With( https://addons.mozilla.org/ja/firefox/addon/open … )
　そのページを他のブラウザで開いたり
FireMobileSimulator( https://addons.mozilla.org/ja/firefox/addon/fire … )
　径庭電話やスマホをシミュレートしたり
・・・・

　ダウンロードしたファイルをテキストエディタで編集します。メモ帳でもできなくはないが、高機能なテキストエディタが断然使いやすい
私は有償のEmEditor( https://jp.emeditor.com/ )ですが、やや高価なので30日間の使用期間を経過した時点で、free版としてダウングレードして使用し続けるか、ライセンスを購入して使い続けるかを選択すればよい。それでも90日以内なら返金してもらってfree版として使い続けることもできる。
EmEditor (テキストエディタ) | EmEditor Free( https://jp.emeditor.com/text-editor-features/his … )
　ほかにも、有名どころとしてテキストエディタとして「秀丸エディタ」とかもありますね。

　これらをHTMLエディタ( https://ja.wikipedia.org/wiki/Web%E3%82%AA%E3%83 … )として使うのが良いでしょう。

1) とりあえず、FTPを使ってウエブサイトのデータを全てローカルに移動すること
2) 該当するファイルをテキストエディタで開いて、編集すること
3) それをfirefoxで開いて、firebugを使って細かい修正をテストして、その内容をテキストエディタで修正する。
　効率的なデバックツール、Firefoxのアドオン「Firebug」の使い方 | WEB八分儀( http://web8bungi.sakura.ne.jp/first/htmlcss/fire … )
　意外と知られていない機能が多い！？Firebugの使い方 | THE HAM MEDIA BLOG( http://h2ham.seesaa.net/article/154387441.html )
4) 編集が済んでOKならFTPで転送

★なお、EmEditor⇔firefox⇔firebug⇔EmEditor間は、設定により自由に行き来できますので、エディタで編集中のものをFirefoxで開いたり、firebugでテスト後に編集したいところはEmEditorでダイレクトに移動して、再読み込みしたりが自由自在に行き来できます。
　そして、openWithを使って、IEやChromeでの表示を確認したり、FireMobileSimulatorでスマホや携帯での表示を確認できる。
　スタイルシートを全面的に書き換えるときは、firefoxの代替スタイルシートを使えばよい。

この回答へのお礼

ディレクトリ構成が再構成されたのが原因でした。その他便利なツールを教えていただきどうもありがとうございました。

お礼日時：2016/03/21 23:53

No.2 回答者： nana_coco 回答日時： 2016/03/19 23:57

正直、質問者様の質問内容だと解決できないかと思います。

むしろビルダーで開かないほうが良かったようにも思えます。
ダウンロードした元のHTMLをエディター（なければアクセサリーのメモ帳）で開き、
タグ（<br>など）を消すことなく、差し替えたいテキスト部分だけを書き換え
保存し、アップロードしたほうが良かったように思えます。。

とりあえず、前任者や周りのHTMLの知識が多少あるかたに助けを求めてみてはいかがでしょうか。
時間があれば、ビルダーで構築しなおすのがよろしいかもしれませんね。

この回答へのお礼

知識が足りないのが原因でした。解答ありがとうございます。

お礼日時：2016/03/21 23:53

No.1 回答者： gugutto3 回答日時： 2016/03/19 22:31

グラデーションの画像もダウンロードしましたか？