みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

Wordで作成したホームページがMACで正常に表示されない

Word2003を使ってホームページを作成しました。
WindowsとInternet Explorerの環境ではどのパソコンでも正常に表示されるのですが、MACでは一部のページで行が乱れたり、図が表示されない等の不具合を生じます。
OSやブラウザの問題ではないかと思いますが、作成サイドで出来る対策はあるでしょうか?
なお、不具合が生ずるページを、ホームページビルダーで作って見ましたが、改善されませんでした。
よろしくお願いします。

投稿日時 - 2007-09-16 13:17:42

QNo.3349604

困ってます

質問者が選んだベストアンサー

> OSやブラウザの問題ではないかと思いますが、

リンク先のサンプルを拝見させていただきましたが、問題がそこにないことがはっきりしました。問題は、あんたのWord文書作成時に、自己流でレイアウトを行っていて、マニュアルを無視していることにあります。
文字の位置をそろえるために、スペースを挿入していますね。ちゃんと段階的に習得していかない入門者のよくやる間違いです。
Wordを含むワープロソフトでは、文字位置をそろえるのに、タブを使います。もしあなたがタブを使ってレイアウトしていたなら、HTMLに変換したときにも、もうすこしましなHTMLファイルになったのではないかと思います。
ほかの回答者の方々は、質問者の心情を配慮して、プライドを傷つけないように、言葉を選んだ婉曲的な表現をなさっていますが、歯に衣を着せぬ表現をすると、こういうことになります。

投稿日時 - 2007-09-16 19:16:53

お礼

ご回答ありがとうございました。
ご指摘のタブの件、タブについては一応知っていたのですが、見た目に代わりがないので、つい使ってしましました。
Windowsでは、正常に表示されても、MACだとレイアウトが崩れてしまうのですね。
参考になりました。
ありがとうございました。

投稿日時 - 2007-09-16 20:43:11

ANo.6

このQ&Aは役に立ちましたか?

1人が「このQ&Aが役に立った」と投票しています

回答(9)

ANo.9

>それからテーブルタグは現在では使用されませんすべて『CSS』で記載します。
プロの現場から一言。
嘘です。必要に応じて使います。

投稿日時 - 2007-09-17 00:34:35

ANo.8

問題点の回答はほぼ出ていますので、解決方法を。

質問内容からビルダーをお持ちのようですから、Wordで作製したHTMLファイル(HPファイル)は最初からなかったものとし、
テキストのみを流用して、1からビルダーで作り直す方が手っ取り早い、かつ確実かと思います。

なお、ビルダーで作製する時も標準設定になっている「かんたん作成モード」「どこでも配置モード」で作成せず、必ず「標準モード」で作成下さい。
「かんたん作成モード」で作ると、やはり同じ様な問題が発生しますので。

詳しくはこちらをご参考に
http://www.wsb.jp/hpb/kihon/doko.htm
http://hpb.cool.ne.jp/hpbuilder/rule_dokode.htm

投稿日時 - 2007-09-16 23:50:26

ANo.7

まず余分なコードが多すぎます。
スタイルを設定するのであれば、纏めて記載し、個別には記載しません。
それからテーブルタグは現在では使用されませんすべて『CSS』で記載します。
フォントサイズはポイントで無くピクセルで設定すればレイアウトは崩れにくくなります。
その昔テーブルタグでレイアウトを決定する時には『透明画像』を使い
調整してました。

投稿日時 - 2007-09-16 21:18:49

>OSやブラウザの問題ではないかと思いますが、
OSやブラウザの問題です。
ちなみに、MacでSafariでは確かに改行されてしまいますがフォントを小さくすると改行されません。閲覧する側の環境によってかわってしまうのです。
制作後いろいろな環境でチェックすることが必要です。
ワードやホームページビルダーで簡単に直すには文章の右側にスペースを多めに取ってみてください、様は空白が有れば大きなフォントでも改行されないだけですが。ただし小さなフォントで閲覧すると右側に空白ができてしまいますが。

投稿日時 - 2007-09-16 18:08:50

お礼

ありがとうございました。
環境によって、表示のされかたが変わることがあるのですね。

投稿日時 - 2007-09-16 20:44:56

ANo.4

簡単な手直しとして

趣味:
読書(評論、文学、哲学、科学など広範囲)
健康法:
太極拳(楊名時気功太極拳)を毎週2~3回 約2時間

という風に表記するだけでもスッキリしつつレイアウト崩れも防げると思います。

サンプルに近づけるなら、テーブルを使って
<TABLE>
<TR>
<TH>趣味</TH>
<TD>読書(評論、文学、哲学、科学など広範囲)</TD>
</TR>
<TR>
<TH>健康法</TH>
<TD>太極拳(楊名時気功太極拳)を毎週2~3回 約2時間</TD>
</TR>
</TABLE>

というやり方でもいいかもしれません。

ただし質問者様の挙げたサンプルではすでにテーブルレイアウトが使われているので「入れ子」になってしまうのかな?
ソースを見るとCSSが使われているんで、全体のレイアウトもCSSで指定すればいいのにもったいない…と思っちゃうんですが、ソフトの都合上そうはいかないのでしょうきっと…

あとフォントの件ですが、自分の環境(Safari)では、Pタグに指示されているCentury(セリフ体)が利いているのか、文字がすべて明朝体で表示されていますがこれでOKなのでしょうか?
MS Pゴシック&MSゴシックについては、多くのMacユーザーの環境ではそもそも入っていませんので、「ヒラギノ角ゴ」「OSAKA」あたりも指定しておくか、もっと広く「Sans-serif(綴り合ってるかな?)」にしておくのがいいのかな、と考えます。
もっとも、こちらで書体を指定せず、読み手のブラウザにまかせるのが適切かもしれません。

投稿日時 - 2007-09-16 16:49:54

お礼

ご回答ありがとうございました。
Windowsしか使ったことが無いので、「MS Pゴシック」、「MSゴシック」がMAC環境では入っていないことは知りませんでした。
「ヒラギノ角ゴ」「OSAKA」はWindoWsには入っていないようです。
いろいろ試行錯誤してみます。
ありがとうございました。

投稿日時 - 2007-09-16 20:52:47

ANo.3

#1さんのお礼に対する
サンプルのソースを拝見すると
案の定と言う感じなのですが
{font-family:"MS Pゴシック";panose-1:2 11 6 0 7 2 5 8 2 4;}
とプロポーショナルフォントが使用されています。
これがNGです。
Windows独自のフォントでレイアウト崩れの原因です。
Webの世界では「使ってはいけない」フォントです。
等幅フォントを使用するのが基本となります。

プロポーショナルフォントは
自動的にツメが入りますが
Webの世界の基本は「ベタ打ち表示」なのです。
編集をやっていらした経験をお持ちのようですので
この表現でお分かりいただけると思います。

投稿日時 - 2007-09-16 14:58:39

お礼

早速ありがあとうございました。
プロポーショナルの方が、見た目がいいかなと思って使ってみたのですが、これが間違いだったようです。
早速等幅フォントになおして見ます。
ありがとうございました。

投稿日時 - 2007-09-16 15:24:28

ANo.2

Adobe Dreamweaverに、Word HTMLをクリーンナップするというコマンドがあります。
Dreamweaverは、じっさいにホームページ作成を仕事としている人たちの、生の声を収集して、それに応えるようなソフトウェア開発をしたことにより、プロにいちばん使われるウェブ編集ツールになりました。
Wordで作成されたHTMLをどうにかして、まともなものにしたいという要望は、そうとうに強かったのでしょう。「Windows + Internet Explorerでちゃんとひょうじされていればいいじゃん」では、プロなら通用しないというわけなんですね。
べつにDremwaeaverを使いなさいと勧めているのではありません。WordでHTMLを作成するのをやめましょうと、お勧めしているのです。

投稿日時 - 2007-09-16 14:33:03

お礼

ご回答ありがとう御座いました。
参考にさせていただきます。

投稿日時 - 2007-09-16 20:55:05

ANo.1

Wordで作製したHPファイルは、文字のフォント指定など余計なタグが多く入りやすく、そのため表示が崩れやすい事があります。
http://www.wanichan.com/web/before/page10.htm

問題ページを見てみない事には、どのようになっているのか特定が難しいのですが、
いちどこちらのhtmlチェッカーで確認されてみてはどうでしょう。
http://openlab.ring.gr.jp/k16/htmllint/htmllint.html

参考URL:http://openlab.ring.gr.jp/k16/htmllint/htmllint.html

投稿日時 - 2007-09-16 13:29:23

補足

早速の回答ありがとう御座います。
チェッカーで確認してみましたが、HTMLの知識があまり無いため、対処方法が良くわかりません。
Windousでは、正常に表示されるのですが、MACではプロフィールの文書の「趣味」「健康法」などの部分に改行の乱れがあるようです。
なお、私はMACは使用しておらず、MACを使用している知人からの指摘で知ったものです。
素人でも出来る対策がありましたら、ご教授ください。
よろしくお願いします。

投稿日時 - 2007-09-16 14:20:11

あなたにオススメの質問