- ベストアンサー
ＨＰ サンプルスタイル配置がうまくいかない
HTML/XHTML&スタイルシート デザインブックのサンプルが気に入り 購入し、早速、サンプル（付属ＣＤより）を使用しました。 （ビルダーで作成しようとビルダー用の本も買いましたがうまくできず サンプル付本を買いました） 問題点： プレビューで中央配置が左寄りになってしまいます。 過程： 付属ＣＤのフォルダをデスクトップなどにコピー。ホームページビルダー12からsample02-01.htmlを開き、プレビュー確認。中央に配置され異常なし。 しかし、ＨＴＭＬソースから 文字を少し変えただけで左寄りになってしまいます。 <!-- サイドバー --> <div id="sidebar"> <ul class="sidemenu"> <li><a href="link.html">トップページ</a></li> <li><a href="link.html">会社情報</a></li> <li><a href="link.html">サービス案内</a></li> <li><a href="link.html">お問い合わせ</a></li> <li><a href="link.html">ブログ</a></li> </ul> トップページの文字をホームに変えただけです。 又、切り取りしたトップページを貼り付けて元に戻しても左寄りのままです。 他、少し文字を変えただけでも同様になります。 何がわるいのでしょうか？（通常まともに配置されているものが変わるものでしょうか？） _/* コンテナ */ div#container {width: 760px; margin-left: auto; margin-right: auto;} 略 _/* サイドバー */ div#sidebar {width: 166px; float: left; margin-bottom: 25px;} 関係ないかもしれませんがとなっています。 本のメーカーに問い合わせても返事が返ってきません。
- tendon332
- お礼率79% (47/59)
- その他（インターネット・Webサービス）
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
ホームページビルダー12のバージョン（12.0.x.0の部分）は何でしょうか？ 12.0.1.0以前だと、HTMLとXHTMLのDOCTYPEの出力について不具合が報告されていますので、 当てはまっていたら修正プログラムをまず適用してみてください。 http://www-06.ibm.com/software/jp/internet/hpb/down/12/latest.html その後、HTMLファイルを開く前に、 ビルダーの「ツール」→「オプション」→「ファイル」タブで、 「DOCTYPEを出力する」のチェックを外して「OK」を押すか、 サンプルHTMLと全く同じDOCTYPEを入力してチェックを入れて「OK」を押すか、どちらかしてください。 「HTMLソースにGENERATORを組み込む」、「文字エンコードをMETAタグで指定する」はどちらでも構いませんが、チェックを外しておいたほうがいいでしょう。 また、「ツール」→「オプション」→「一般」タブで、 「HTMLソースを自動整形する」、「HTML 構文エラーを自動修正する」の２つのチェックを外して「OK」としてください。 「HTML構文エラー時の動作」では「～修正ダイアログを開く」を選びます。 以上の設定が終わったら、 サンプルHTML（念のためコピーしておく）をビルダーで開いてみて、 文字修正しても、思ったとおりの配置のままになるか確認してみてください。 メモ帳だけで修正・編集作業ができるのであれば、メモ帳だけで作業したほうがよいかもしれませんが、 『やっぱりビルダーの編集画面を見ながらの方がやりやすい』と言う場合は、 ビルダーで勝手な変更が極力入らないように設定を変えるとよいです。 ただその場合、ビルダーの編集画面では見た目がズレるなどおかしく表示されるかもしれません。 （ビルダー編集画面では対応できない部分があるため。） プレビュー画面で表示を確認しながらの方がよいです。
その他の回答 (2)
- salonpath
- ベストアンサー率48% (194/399)
ホームページビルダーちょっと信じがたいアプリですね。。。 編集後の <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <META http-equiv="Content-Type" content="text/html; charset=UTF-8"> <META name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 12.0.1.0 for Windows"> <META http-equiv="Content-Style-Type" content="text/css"> <title>SAMPLE</title> 部分を <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <title>SAMPLE</title> に変更（コピペ）したのは、メモ帳で作業されてますよね？ sample02-01.htmlと sample02-01_hb.htmlの二つをメモ帳で開いてDOCTYPEを修正してるのに左によるのなら、それ以外の部分（ソース）もホームページビルダーが破壊してると思います。
お礼
度々ありがとうございます。 ＞変更（コピペ）したのは、メモ帳で作業されてますよね？ はい、そうです。うまくいきませんでした。しかし、上記回答者様のツールからの設定うまくいけそうです。 とても勉強になりました。ありがとうございました。
- salonpath
- ベストアンサー率48% (194/399)
width: 760px; margin-left: auto; margin-right: auto; でセンタリングできなくなるということは ブラウザが後方互換モードでレンダリングされてるからかもしれません。 ホームページビルダーで編集してるとのことですので 考えられるのはホームページビルダーが htmlを開いて修正をした際に勝手にDOCTYPEを破壊してるんじゃないか？という事です。 確認方法として トップページをホームに変更したhtmlを別名で保存し（例えばsample02-01_hb.html） sample02-01.htmlと sample02-01_hb.htmlの二つを メモ帖などで開いてみてください sample02-01.htmlの１行目のDOCTYPEとホームページビルダーで編集した後の１～2行目が変わっていませんか？ （こうゆう一行です<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">） 変わっていたら元のsample02-01.htmlのものをsample02-01_hb.htmlにコピペしてみてください
お礼
ありがとうございます。 ・ビルダーで開いた直後です（プレビューでは中央配置です）ビルダー上で確認 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <META http-equiv="Content-Type" content="text/html; charset=UTF-8"> <META name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 12.0.1.0 for Windows"> <META http-equiv="Content-Style-Type" content="text/css"> <title>SAMPLE</title> <style type="text/css"> <!-- a {color: #017acd;} ・文字を変更した後です（プレビュー左寄り）（変更点はなし）ビルダー上で確認 （a {color: #017acd;}の前の <!--がない）保存後メモ帳確認 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <META http-equiv="Content-Type" content="text/html; charset=UTF-8"> <META name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 12.0.1.0 for Windows"> <META http-equiv="Content-Style-Type" content="text/css"> <title>SAMPLE</title> <style type="text/css"> <!-- a {color: #017acd;} ・サンプル.htmlをメモ帳で開いたものです <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <title>SAMPLE</title> <style type="text/css"> a {color: #017acd} 共にコピー＆ペーストしてみましたがやはり左寄りになっています。
お礼
ありがとうございます。 回答していただいた方法でうまくいきました。今夜から本格的に修正して問題がないか確認してみます。 ＞ メモ帳だけで修正・編集作業ができるのであれば、～ まだメモ帳だけでは厳しいのでプレビュー見ながら頑張ってみます。 ありがとうございました。