HPソースの変更方法とフォント配置の問題について

このQ&Aのポイント
  • 知人が英語のHPを日本語に翻訳し、私がソースを修正していますが、フォントの表示と配置に問題があります。
  • ソースの最初の部分を修正したところ、フォントは直りましたが、配置がおかしくなりました。
  • HP作成ソフトを使わずにソースを編集しているため、どこが問題なのかわかりません。アドバイスをお願いします。
回答を見る
  • ベストアンサー

HPのソースの変更の仕方がわかりません。

HPのソースの変更の仕方がわかりません。 英語のHPを知人が日本語に訳しています。 正確には、知人が訳した日本語を私が英語のソースの英語の部分を日本語に置き換えています。 ソースはわかる範囲で一部手直しをしてサーバーにアップロードしたところ、3ページあるうち、3ページともフォントがゴシック(?)表示されていたのですが、気がつくと、1ページだけ明朝になっていました。 その為、残りの2ページと同じようにソースの一番最初の部分を以下のようにしてみました。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"> <HTML LANG="ja"> (もともとは<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">となっていました) そうすると、今度はフォントは直ったのですが、配置がおかしくなってしまったのです。 具体的には以下のページのようになっています。 配置が正しく、フォントが間違えているもの http://www.volcanovacationshawaii.com/jp_index_original.html フォントは正しいものの、配置がおかしいもの http://www.volcanovacationshawaii.com/jp_index_test.html 実は、HP作成ソフトを使ったことがなく、いつもソースをいじりながらやっているのですが、ちゃんとした知識がなく、手探りでおおなっているためどこがどうおかしいのかがわかりません。 大変申し訳ないのですが、どなた様かアドバイスをいただけますでしょうか。 どうぞよろしくお願いいたします。

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

  • ベストアンサー
  • Safe_Mode
  • ベストアンサー率48% (1329/2725)
回答No.1

1.DOCTYPE宣言で、HTML 4.01 Transitional としたのに  タグの使い方がxhtmlの作法のままというのを修正してください。  タグの終了では、xhtmlの場合、・・・" />ですが、  HTML4.01では ・・・>だけです。  改行タグも xhtmlでは<br />ですが、HTML4.01では<br>です。  その他に height="113" />ではなく height="113">です。 あと<h1>・・・<h2>という部分があり、前後から考えると <h2>・・・<h2>が正しいですね。 2.フォントに関しては、main.cssにあるフォント指定が効いていますので、 bodyに関して、"Times New Roman", Times, serif; 見出しタグに関して、 font-family: Georgia, "Times New Roman", Times, serif; となっているのを削除すれば、どうですか? システム識別子は有った方がいいでしょう。

Waikoloan
質問者

お礼

Safe_Mode様 早速のアドバイスをどうもありがとうございました。 いただきました情報をもとに、手直しをしておりましたため、御礼が遅れてすみません。 まず、DOCTYPE宣言とタグの使い方に関しては全く知りませんでしたので、助かりました。タグ打ちで作るHPを10年ほど前にネットで独学で覚えて以来、しっかり勉強しておらず、お恥ずかしい限りです。 <h2>ではさむ部分も、見落としておりました。ありがとうございます。 フォントに関してだけ、今回はいじっておりません。と申しますのは、頼まれている日本語のHPの表示を正しくしようとして、もともとある英語のHPの表示をおかしくしてしまってはまずいので、webmasterの方に聞くまではいじらないことにいたしました。 結局、以下のことに気づきました。 1.DOCTYPE宣言のところをHTML 4.01 Transitionalにすると、表示したいフォントになるのですが、イメージがずれて表示されました。タグも確認しましたが、やはりずれは直りません。 具体的には、英語のものは(http://www.volcanovacationshawaii.com/)メニューの緑色の帯が端から端までくっついているのですが日本語のものは(http://www.volcanovacationshawaii.com/)右端が離れてしまいます。たいしたことではないのですが、右下のロゴが帯からはみ出してしまうのが、少々気になります。 2.DOCTYPE宣言のところを"-//W3C//DTD XHTML 1.0 Strict//EN"にすると、イメージなどもずれることなく表示されるのですが、私が使いたいフォントになりません。 上記を比べ、フォントの方が重要と感じましたので、今回は1.でゴシックのフォントで、イメージは多少ずれたままでよし、としました。 今回教えていただいたことを、自分で勉強しようとしてもそこが問題だったとはすぐに気づかなかったと思います。お蔭様で効率よく作業を行うことができました。 貴重なお時間とアドバイスをいただけましたことに、心より感謝いたします。 ありがとうございました!

関連するQ&A

  • hp作成 Firefox javascript dreamweaver

    dreamweaverでHPを作成する時に <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> が入力されています。 この<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">が入力されているとFirefoxでjavascriptを表示できません。 Firefoxでjavascript表示したい時(DTD)はどのような表示が良いでしょうか?

  • DOCTYPE宣言について

    自分はXHTML1.0を参考通り <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> このように二列で入力しているのですが、一列で入力しても大丈夫なのでしょうか?また、オススメの宣言タイプ?があったら教えてください。お願いします。

  • Dreamweaverのデフォルトを変更したい

    Dreamweaverでhtmlドキュメントを新規に作成、かつ、XHTML準拠させると、 <!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"> という宣言も自動で作成されますが、このデフォルト宣言をStrictにしたいのですが、どこでどのような操作をしたらよいのでしょうか? ご存知の方、お願いします。

    • ベストアンサー
    • HTML
  • XHTMLのスペース

    XHTMLは誤作動を防ぐために <meta http-equiv="expires" content="0" /> このように最後はスペースを置くと聞いたのですが、DOCTYPE,XML宣言も<?xml version="1.0" encoding="Shift_JIS"? > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" > このようにスペースを置くべきなのでしょうか? ご回答おねがいします。

  • <!DOCTYPE html PUBLIC "-/

    初心者です。 HTMLでソースを作る場合 【1】 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> と 【2】 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> では、どちらを使ったほうが良いのでしょうか?

  • W3Cのバリデータで there is no attribute "target".

    W3Cのバリデータでチェックすると <a href="http://○○○.com/" target="_blank"> の行のところで 「there is no attribute "target".」というエラーがでてしまいます。 これは何がいけないのでしょうか? エラーはこれ一つだけす。 おわかりになりましたらご教授お願い致します。 DOCTYPEは↓です。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    • ベストアンサー
    • HTML
  • IBMビルダーHTMLソースの変更について

    IBMのホームぺ―ジビルダーでWEBサイトを作成しています。 index.htmlのHTMLソースを開いてソース変更し上書き保存しました。 すると上書き保存のエラーが出て元のソースにも戻ってしまいます。 これはIBMビルダーではソースを直接訂正することはできないのでしょう? 変更前 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> 変更後 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <HTML> その他 width(幅)の変更などしました。

    • ベストアンサー
    • HTML
  • Dreamweaverでバリデートをかけてソースをチェックしたところ、

    Dreamweaverでバリデートをかけてソースをチェックしたところ、 タグ"html"には、現在アクティブなバージョンでは属性"xmlns:spry"がありません。 [XHTML 1.0 Transitional] タグ"div"には、現在アクティブなバージョンでは属性"spry:region"がありません。 [XHTML 1.0 Transitional] タグ"div"には、現在アクティブなバージョンでは属性"spry:repeat"がありません。 [XHTML 1.0 Transitional] というエラーがでてしまいました。 現在のDOCTYPE宣言は、 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> です。 html要素は、 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" xmlns:spry="http://ns.adobe.com/spry"> です。 DOCTYPEに問題があると思い、XHTML1.0のStrict DVDやFrameset DVDなどに変更してみましたが、エラーは[XHTML 1.0 Transitional]の部分がそれぞれのDTDに変わるだけで、エラーは減りませんでした。 ちなみにHTML 4.01に変更したらエラーがとても増えました。 ※一番上のエラーですが、 htm要素中のxmlns:spry="http://ns.adobe.com/spry"を削除したら、エラーがなくなりました。 残りは2つです。 助けてください。

    • ベストアンサー
    • HTML
  • html4で宣言していることになるのでしょうか?

    ソースの一番最初に <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> と書いた場合、 html4で宣言していることになるのでしょうか? html5は聞いたことが有りますが html4と言うのは存在するのでしょうか? html4.1と言うのは聞いたことがあります。

    • ベストアンサー
    • HTML
  • ホームページビルダー10のバグ??

    勝手にhtmlを省略してしまい困っています。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> と書いて保存しもう一度見ると <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> だけになってしまいます。百歩譲ってこれでもhtml適には 問題ないかと思うのですが勝手に省略させないようにする方法は ないでしょうか?

専門家に質問してみよう