WebデザインコミュのホームページビルダーでのCSSレイアウト

初めまして。
地方のデザイン事務所でweb制作をしている、ナナと申します。

ホームページビルダーのことが解る方、いらっしゃいますか？
私自身はコーディングはDreamweaverで行っているのですが、
今回請け負った作業（仕事ではなく身内からの依頼、ちなみに無償です）は、
先方がホームページビルダーで更新作業をしていくそうなのです。

最初に提示された条件に基づいて、
現状テーブル組みで作られているサイトに対し
今後手を加える可能性のないヘッダー・フッターのみCSS化し、
コンテンツ部分はテーブルのままで、多少ソースを整理しました。

そして完成したものをブラウザ（IE5.5～7.0、firefox、Safari）でチェックし、
納品しました。しかし･･･
『ビルダーの編集画面でヘッダー部分が崩れる』
『ビルダーのブラウザアイコンから見る画面も少し崩れる』
とクレームがきたのです｡。

実際に見ないと何とも言えないので、後日確認に行くのですが
もしかして、ホームページビルダーでCSSレイアウトのページを
編集するという作業自体に無理があるのでしょうか？
あと、ブラウザアイコンから見る画面ってただのローカルビューですよね･･？
（だとしたら崩れる理由が余計わからない･･･）

先方がビルダーで更新したいという場合、
CSSはリセットやフォント設定に留めておくべきなのでしょうか。
みなさんはどうされていますか？

ちなみに先方はPC自体あまり得意ではなく、
ホームページビルダーやIEのバージョンさえわからないのです｡｡

ビルダーコミュで聞くべきかと迷ったのですが、
こちらなら同じ様な経験をされたプロの方がいらっしゃるかも、
と思いトピ立てさせて頂きました。

不適切であれば削除しますので、ご指摘頂ければと思います。
よろしくお願いいたします。

コメント(28)

最初
全て
最新の40件

[1] mixiユーザー 10月07日 18:44

私も以前同じエラーに出会ったことがあります。
もっとも私の場合は、クライアントではなく知人が趣味で使っていたビルダーで、ですが。

これはビルダーに限らず、Dwでも何でもGUIベースのアプリケーションでは、手打ちしたXHTML+CSSのデータをアプリケーションにインストールされているプロファイルで定められたルールに基づいて勝手に修正をかけてしまう為です。

私は仕事を請ける際に、更新作業に仕様するアプリケーションを確認し、ビルダーやNinja等の素人向けアプリケーションでは絶対に編集しないよう納品仕様書にも記載しています。

まったくの素人さんの場合、基本的にはCMSを勧めますが、どうしても更新作業でそういうアプリケーションを使いたいというクライアントの場合、クロスブラウザやSEOなどに生じるデメリットを説明した上で、制作段階からクライアントが使用しているものと同じアプリケーションを使用しています。

もしかしたら他に賢い対応方法があるのかも知れませんが、ご参考までに。

[2] mixiユーザー 10月07日 18:47

追記

もし同じ状況になったら、私なら保守管理契約を結んで更新作業を委託してもらいます。
制作の前段階でクライアントがビルダーを使って更新することを自分が知っていたら、誤り倒して他の部分でサービスする追加処置も必要かもですが･･･。

[3] mixiユーザー 10月07日 18:54

タクロさんの言われる通りだと思います。

私の経験でも
DreamWeaverMXとCS3でも表示のされ方がまったく違っております。
アプリケーションが対応できるコードなどによるのだと思いますが。

私は実際のブラウザでの表示を信じて、GUIの方は参考程度で作成してます。

ビルダーでもバージョンによって表示の仕方が変わってしまう事もあるのではないでしょうか。

[4] mixiユーザー 10月07日 19:41

ビルダーの設定で、DOCTYPEを勝手に変更してしまう設定もあります。（わりと古いビルダー）
xhtmlのstrictを前提で組んだのに、ビルダーで保存をかけると別のものに変更されるなど。
この設定自体はビルダーの設定で変更ができたはずなのですが、
電話などではとても説明できるものではなかったように記憶しています。

そういったこともありますので、ビルダー使用が前提の場合でしたら、
既存のコードはなるべくいじらず、
テーブルメインのコーディングをしたほうが良かったかもしれませんね。

というか、現状はヘッダーフッターぐらいでしたら、
テーブルに戻すのも手かもしれません。

[6] mixiユーザー 10月07日 20:32

>1 タクロさま

早速のコメントありがとうございます。

やはりビルダー編集画面での表示は仕方ないんですよね…
DreamWeaverでも同じ現象は起きますもんね。

言い訳がましいのですが、先方が『今まで更新作業してきたからHTMLも触れる』と仰っていたので、ビルダー上の画面が崩れることでクレームが来るなんて思わなかったんです…。
よくよく聞いてみると、tdの意味さえ理解していませんでした

しかしそれは完全に私の確認不足ですよね。
何しろ個人で仕事を請けたこともないもので、確認不足な点が多々ありました。
今後こういう機会があれば、タクロさんの仰るような対応を考慮したいと思います。
ありがとうございました！

>2 ともちんさん

コメントありがとうございます。
そうですか、バージョンによっても違うのですね。
私も編集画面は参考程度にしか見ないのですが、
タクロさんへのお返事に書かせて頂いたような事情がありまして…。

やはり先方の環境やスキルの確認を怠ってはいけませんね。
今回は勉強になりました！

>3 すまーとさん
DOCTYPEをですか！？そんなことまで…一体何の為に

しかし、そういう現象がある、と教えて頂けてとてもありがたいです。
設定については自分で調べて、後日確認に行く時に説明できるようにしておきます。

CSSにしたのは、SEOへの配慮ということなのですが
正直CSSにすることがそんなに効果的かも疑問ですよね。
仰る通り、テーブルに戻す方が早いのかも、と思っています…。
先方と相談してみたいと思います。

[7] mixiユーザー 10月07日 20:32

プロではありませんし、ホームページビルダーも詳しくありませんので、おこがましいですが、、、ビルダーのバージョンが古いということはありませんか？

僕も別のソフトですが少し古いバージョンのオーサリングソフトでテーブルレイアウトしていたサイトをCSSベースに作り直したら、ソフトでの表示は崩れました（ブラウザでの表示は思い通りになってます）。ソフトによると思いますが数年前のバージョンはCSS対応が不十分なため、正しく表示できないことがあるようです。

僕の場合は自分のサイトで、オーサリングソフトの表示崩れもある程度想定済み、テキストエディタでの更新に移行したいためのCSS化だったため、何も問題はなかったのですが、今回の依頼者さんが古いバージョンのビルダーで、それをそのまま使い続けたいのだとしたら、テーブルレイアウトのままの方が無難だったのかもしれませんね。ビルダーのレイアウト画面はあくまで参考で、最終のレイアウトはブラウザで確認する、というふに割り切っていただくことができればいいんでしょうけど。

いずれにせよ、ビルダーに限らずオーサリングソフトは時代によってCSSの対応度がちがうので、同じソフトでもバージョンによって対処方法が異なって来るんでしょうね。

僕の場合はもともと

[8] mixiユーザー 10月07日 23:45

>こうきさん

えっ！！CSSハックが使えないんですか！！
それは大いに関係している可能性があります…。
教えて頂いてありがとうございます！

ビルダー内でのブラウザについてですが、そういう仕組みになっているんですね。
それに、解像度…！その可能性はありますね。
解像度の違いでレイアウトが崩れるというのは、
聞いたことはあっても実際遭遇したことがなかったので、
すっかり失念していました。

色々と有益な情報をありがとうございます。
確認に行く際の材料にさせて頂きます。

>bogey#1さん

あれっ…コメント、切れてます？？

バージョンが古い可能性は大いにあります。サイトを開設されたのが2003年らしいので、CSSに関しては微妙な時期ですね…。
bogey#1さんの仰るように、ソフトとブラウザの違いを割り切ってもらえると1番良いんですよね。ただ先方からすると、ソースではなくレイアウトの画面で編集されているようなので、ソフト上でのレイアウト崩れは納得がいかないようなのです。

実は先方はHTMLもCSSも勉強しようと思うし
DreamWeaverを購入してもいいと仰っているのですが、
たちまちの更新に支障をきたすので、ひとまず対応が必要なのです。

…でも、正直なところ実際勉強はしないと思うので…
テーブルに戻すのが最善策かなと思っています。
今後の為にも！

[9] mixiユーザー 10月08日 00:14

ソフトによっては、CSSがまともに表現されませんね。

CSS3などを利用するとソフト自体がダウンしたりもします。

これらは、イラストレーターやフォトショップと同じ現状ですね。
ソフトのCSSサポートを待って、購入するより更新する部分だけの
ソースなどをガイドラインを作成してあげるのはどうでしょうか？

以外とクライアントもマニュアルがあれば更新くらいはできると思いますよ。

[10] mixiユーザー 10月08日 02:53

現在、ホームページビルダー13の体験版をDL可能になってます。
http://www-06.ibm.com/software/jp/internet/hpb/down/13/taiken.html

一応CSS編集も可能になっているようなのでなんとかなるかもしれません。それを購入していただくことが難しければ、旧式のやりかたでなんとかするしかないのかもしれません。

あと直接の回答にはならないのですが、個人的には静的なページを修正させるより、MovableTypeのようなCMSを突っ込んで、デザイン制作と情報更新を切り分けて考えるようにした方がベターなのではないかと思いました。

[11] mixiユーザー 10月08日 04:22

ビルダーってCSSには完全に対応してないですよ。
編集画面では全然です。

CSSの作業は、通常の編集画面とは別にCSSエディターを起動して編集するのですが、出来上がりのイメージが全然つかめないです。
http://hpbuilder.net/css_editor.html

ビルダーの基本はテーブルレイアウトです。
http://www.justsystems.com/jp/products/hpb/feature2.html

ちなみにバージョンごとの比較
http://www.justsystems.com/jp/products/hpb/comparing.html

[12] mixiユーザー 10月08日 10:01

> allWebさん

ソフト自体がダウンすることもあるんですか！
それも知りませんでした･･･。
教えて頂いて、ありがとうございます。

実はマニュアルは作成してお渡ししてあるんです。
ただ、せめてビルダーのブラウザビューが改善してからでないと、
触るのが怖い･･･ということで、まだ目を通しただけなんです。
実際レクチャーしながら、触って判断して頂くのが良いですね。

>akiraまもなく40 さん

あっ、ホームページビルダーも最新バージョンの体験版があるんですね。
とりあえずは体験版で何とかなるかも･･･ありがとうございます！
購入については、体験版で確認の上で先方と相談してみます！

CMSが導入できれば1番簡単なのですが、
更新作業というのが、割と大幅なものらしく。
現状サイトはコンテンツの内容もレイアウトもバラバラで、
今後レイアウトが変わることも大いにありうるというお話なので、
CMSでは難しいかなというところです。

それに何より、私がCMSに関してあまり知識がないもので･･･
今回は時間がないので難しいんですが、今後の為にも勉強して、
導入を検討してみたいと思います。ありがとうございます！

>MOSさん

参考になるサイトばかりです！ありがとうございます！
しかし、やはり対応していないんですね･･･。
アマチュア（？）向けとは言え、webサイトを作るソフトだから
まさかCSSに対応していないなんて、考えもしませんでした。
本当に勉強になりました。

[14] mixiユーザー 10月08日 12:19

>tomo(｡･ω･｡)ﾉさん

最新版でもだめですか～｡｡本当、困りますね。

そもそもSEO対策のために内容を変えたいということだったので
心苦しさはあるんですが･･･やはりテーブルレイアウトにするのが良さそうですね。
一応先方は今後CSSも勉強したいと仰っているので、
基礎だけでも理解して頂いてからまた相談できればと思います。

[16] mixiユーザー 10月09日 00:29

なぜか官公庁相手に仕事をすると、たまにビルダーを扱っている自治体を見かけます。
ターゲットブラウザなどは仕様書で決まっていますので、さすがにデザインビューの崩れについては言われてことはありませんが、ありがちな話ですね。

気になった点として「IE5.5～7.0、firefox、Safari」でチェックをしているということでしたが、「実際に見ないと何とも言えない」ということは、作業現場ではホームページビルダーを入れてテストはされてないようですね。

「先方がホームページビルダーで更新作業をしていく」というのが条件定義に含まれているかどうかわかりませんが、もしそうならば無駄なコストに感じてもテストする導入すべきだと思いますね。
今回のようなリスクが発生しますし。
しっかりテストしてからどうしても技術的に不可能なってから代替え案を。

最近では「Adobe Contributeでサイトを管理していきたいので、それができる仕組みをつけて提案してほしい」と、Contribute用の拡張機能を作らされたなんてこともあり、条件定義に含まれることも珍しくありませんね。

[17] mixiユーザー 10月09日 10:11

>タケゾさん

私の会社でも官公庁の仕事がたまにありますが、確かにビルダーで更新されていますね。
そのお仕事は、今回のように部分的にCSSを使っていますが、
デザインビューの崩れに関しての指摘はありませんでしたね･･･

今回は義兄からの無償での依頼･･･というか『ちょっとやってみてくれん？』
という程度のお願いだったので、わざわざビルダーの購入はしませんでした。
みなさんにコメント頂いて、ビルダーがいかにテーブル向けかということを
知ることができたので、今後ちゃんとした仕事として請ける時は、
購入を検討しなければいけませんね。
バージョンによって大きく違うのが、不安ではありますが。。

Adobe Contributeなんて私、存在しか知りませんでした。
実際に使われてる方が結構いらっしゃるんですね！
まだまだ勉強中の身なので、参考にさせて頂きます。ありがとうございます。

[18] mixiユーザー 10月09日 16:37

>Adobe Contribute

今となってはCMSでの更新を薦めますが、ContributeはDreamweaverのテンプレートの機能をフルにつかって、かつ権限のコントロールやWord感覚(コードは見れない)での作業が出来るので割とよいです。ブログの更新にも使えます(管理画面にログインしなくてもこのアプリから投稿できる)。Dreamweaverのテンプレート機能でリピート領域やオプション領域を多用している人には使えます。

まあアプリケーションなのでライセンス上、複数のPCに導入できないので数人での更新にお勧めです。

[19] mixiユーザー 10月09日 16:57

ホームページビルダーは安いので導入しやすいんでしょうね。
一般の方はDreamweaverを知らない人が多いし、値段聞いてびっくりされます。

それと、一般の方にはSEOなど関係ない人も多いんじゃないでしょうか？

人によっては・・・会社によっては・・・
「とりあえずホームページがあればいい。」という考え方だと思います。
で、作ってみて全然アクセスがないので、そこでSEOって言葉がわかるというか・・・

[20] mixiユーザー 10月09日 17:21

>ナツキさん

ごめんなさい！コメント見落としていました！大変失礼しました･･･。
正に同じ状況ですね！やはりありがちなケースなんですね。
先ほど先方と電話で少し話したんですが、
崩れ方がかなり激しそうなので、やはりテーブル組みになりそうです。

今回、仕事とは別の場で、こういうことを知れて良かったです。
せっかくなので確認に行く際、ちょっとビルダーの操作も体験してみます～。

>akiraまもなく40 さん

へぇぇ～、と思わず口に出してしまいました！
私の会社での価格しかわからないんですが、
CMS導入にはそこそこの予算を提示してるみたいなので、
場合によってはAdobe Contributを習得する方がスマートですね！
クライアント目線で言うと、ですけど。
義兄の会社のサイトは本人しか更新しないので、向いてるかも知れないです。
しつこいようですが、勉強になります･･･。

[21] mixiユーザー 10月09日 17:50

>MOS さん

そうですね、価格の差は大きいんでしょうねぇ･･･。
知名度もあるし、私もこの仕事をしてなければ、ビルダーを選んでたと思います。

義兄はなかなか熱心にSEOについて調べてはいるようで、
MOSさんの仰るように、サイトを作ってみたものの効果がなく、
少しづつ勉強して改変してきたみたいです。
（なので私も、HTMLは理解してると思い込んでたんですが･･･）

ただその結果、SEOがサイトの目的みたいになってしまってるので、
そこは軌道修正してもらいたいところです･･･
しかし身内ゆえに意見が重視されません･･･。

あぁ、何だかとっても私情になってしまってごめんなさい！
たびたびコメント、ありがとうございます！

[22] mixiユーザー 10月12日 23:51

えーっと、V12まではCSS対応かなり悲惨です。

V13で少しましになりましたね。

先方がホームページ・ビルダーで更新したいという場合、古いバージョンでなら、テーブルレイアウトも仕方ないですね。

後、ビルダーでのXHTML使用はあまりおすすめしません。
DOCTYPEで必ずXML宣言がついたり、Transitional DTDにしか対応していないとかいろいろあるんで。

自分がクライアントの立場だったら、Dreamweaverなんて絶対買わない。
私個人から言うと、DWに4万円とかそういうお金を出す方がもったいない。

[23] mixiユーザー 10月13日 10:04

＞V13で少しましになりましたね。

FUMINGさん！　本当ですか？どんなふうに変わったんですか・・・？
今、V11でCSSと悪戦苦闘しているのですが、どうしてもDreamweaverに戻りたくなっちゃいます。

＞自分がクライアントの立場だったら、Dreamweaverなんて絶対買わない。
＞私個人から言うと、DWに4万円とかそういうお金を出す方がもったいない。
そうそう！

[24] mixiユーザー 10月14日 12:24

えーっと、面倒なので、以下のトピで、私のサイトをV11～V13の編集画面で見たときのSSが置いてあります。参考にしてください。

http://mixi.jp/view_bbs.pl?id=37723439&comm_id=30467

[25] mixiユーザー 10月14日 23:44

＞FUMINGさん
ありがとうございます！

全然違いますね。
V13にバージョンアップしようかな？

http://www.amazon.co.jp/%E3%82%B8%E3%83%A3%E3%82%B9%E3%83%88%E3%82%B7%E3%82%B9%E3%83%86%E3%83%A0-IBM-%E3%83%9B%E3%83%BC%E3%83%A0%E3%83%9A%E3%83%BC%E3%82%B8%E3%83%BB%E3%83%93%E3%83%AB%E3%83%80%E3%83%BC13-%E3%83%90%E3%83%BC%E3%82%B8%E3%83%A7%E3%83%B3%E3%82%A2%E3%83%83%E3%83%97%E7%89%88/dp/B001JJCJI2/ref=sr_1_2?ie=UTF8&s=software&qid=1255531454&sr=8-2

[26] mixiユーザー 10月15日 01:42

回答の内容が間違えていたらすいません…

具体的な更新頻度や箇所の物量によってでしょうが、あまり多くないのでしたらPHPでの更新プログラムを設置してしまった方が良いのではないでしょうか？

本格的なCMSを入れるよりも安価でしょうし何より更新の度にソースが壊れるようなことがありません。

SEOを考える場合tableでレイアウトしている時点（メインコンテンツだけだとしても…）であまり意味がないでしょうしタグが勝手に変わるのも困ったものだと思います。

もし簡単な部分だけでしたらエディタで更新してもらうのも手かも知れませんよ

[27] mixiユーザー 10月15日 10:15

>FUMINGさん

お返事遅くなって失礼しました。
少しづつ改善されてはいるのですね。
将来的に完全対応してくれると嬉しいんですが、
どちらにせよしばらくはテーブルレイアウトで耐えしのぐことにします！

>デザインワークスさん

更新というのが、コンテンツのレイアウトを変えたり、
割と大がかりなことをする予定らしいのです。
と言うか、自分でいろいろやってみつつベストな形を見つけたい、
という感じなので･･･今回の場合はプログラムは向きませんよね。
tdの意味もわからないくらいなので、エディタで更新もちょっと難しいかな･･･

今回は難しいですが、今後似たようなケースに出くわしたら、
頂いた意見も是非検討させて頂きます！ありがとうございます！

[28] mixiユーザー 12月07日 14:59

ホームページビルダー14でCSSの対応がかなり良くなったみたいです。

http://www.justsystems.com/jp/products/hpb/

おしらせまで・・・

実際はどうなんだろう？

ログインすると、残り3件のコメントが見れるよ