クロスブラウザで同じ表記にならない

質問

将来フリーのデザイナーを目指している初心者です。

IEとファイヤーフォックスでフォントのサイズが変わってしまい、自作サイトが崩れてしまいます。リストが回り込まなくなります。（FIREFOX）

フォントのサイズが変わってしまうせいでしょうか？
フォントのサイズをクロスブラウザで固定する方法はないのですね。
それともプロのデザイナーでもフォントサイズは変わるのが当たり前なので、変わっても崩れないように余裕を持たすのが一般的な方法なのでしょうか？

下記サイトです。
http://sample1.digi2.jp/snack.html

また、下記の（仏教精神のもと『豊かな心と暖かい思いやりのある人』に育つ事を願って力の限り努力を続けてまいります。）という部分も改行などがずれています。
この状況でお客さんに納品するのでしょうか？それともプロはここまでぴったり合わしてから納品するのでしょうか？
http://sample1.digi2.jp/doushin/plan.html

回答No.8

metametamu · ベストアンサー

＞ハックですか？

validatorにも通りますし、文法的にも間違っていませんが分類的にはハックです。
普段はおっしゃるようにmediumになりますが、必要な時だけsmallが効きます。

メニューが回りこんでしまうのはメニューの幅の合計がulに指定してあるwidth:700px;を超えてしまうからでしょう。

・ ulの幅は700px固定
・ liはfloatで横に並べる
・ メニューの幅はborderとpaddingとフォント幅で算出される

こういう感じでレイアウトされていると思いますが、これはフォントサイズが変わった時にカラム落ちさせるための指定になります。

今回のケースからの修正だと私はinline-blockを使います。
ulに幅を指定されているのは中央寄せするためにmargin:10px auto 0 auto;と一緒に指定されたためだと思いますが、例えば折り返さなかったとしても完全に中央寄せはできないですよね。
そこでfloatで並べたメニューをそのままinline-blockの中に入れて幅は自動算出、それをtext-alignで中央寄せしてしまいます。
text-alignを使うため、divは追加する必要があります。
以下概要だけピックアップします。
所々変えてあるので書き換えて比較してみてください。

<div class="link1">
<ul class="link1">
<li><a href="http://sample1.digi2.jp/">TOPPAGE</a></li>
<li><a href="http://sample1.digi2.jp/snack.html">お菓子</a></li>
<li><a href="http://sample1.digi2.jp/">飲み物</a></li>
</ul>
</div>

div.link1 {
text-align: center;
}

ul.link1 {
display: inline-block;
list-style: none; /*リストの先頭のドットを削除*/
border-top: solid 6px #CC0033;
border-radius: 6px;
margin-top: 10px;
}

ul.link1 li {
float: left;
border-right: solid medium #603;
border-bottom: solid medium #603;
}

ul.link1 a {
display: block;
float: left;
padding: 6px 4px 4px 4px;
background-image: url(img/ul2.png);
background-repeat: no-repeat;
}

ul.link1 li:first-child { /* first-childを使うことでliのclassを削除。管理が楽になります。 */
border-left: solid medium #603;
}

クラス指定はあまり触らず法則性を崩さないように書きましたが、できればORUKA1951さんのされているように親要素のdivにだけclass="nav"を指定する形にできればさらにすっきりします。

お礼

ありがとうございます。お忙しい中大変ありがとうございました。

その通りだと思います。
時間が確保でき次第行ってみたいと思います。

グローバルナビのトップページ、お菓子、その他などの一つ一つのリンクをブロック要素からインライン要素に変えるのが、横一列のグローバルナビの作り方の一般的な方法だったのですね。

フロートを数分作るのは間違っていたのですね。

補足

教えていただいた通り変更したはずですがやはり変わりません。

また、グローバルナビの中の背景が単純に変わって、IEで見ると左側にずれました。

また、display: inline-block;とはブロック要素をインライン要素に変えるCSSではないのでしょうか？
よろしければ素人の私に教えてください。

回答No.11

ORUKA1951

No.3,4,9,10です。
＞具体的に私のサイトとどこが違いどこが原因でどう直せばよいのでしょうか？
　これは忘れてください。
　　特にfloatで並べることは・・。古いサイトにはたくさんありますがね・・

　⇒Another HTML-lint 5( http://www.htmllint.net/html-lint/htmllint.html )
でチェックされたら分かるように　80点とかじゃなく-30点となる。
　手を加えて、どうこうと言うレベルじゃないです。
　^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
　一方、No.3とNo.4を組み合わせたのものもチェックしてみてください。
　ウィンドウ幅を変えても、フォントサイズを変えても利用できるはずです。狭いウィンドウでリンクが下に折り返されても利用できるはずです。
スタイルシートの下記部分を書き直すともっとよいかも
div.header,div.section,div.footer{
width:90%;min-width:800px;max-width:1000px;
margin:0 auto;
}

No.10で、
『変わっても、利用しやすいデザインにしましょう。崩れるのではなく、崩れることも目的にするのです。』
　と言いました。

＞display: inline-block;とはブロック要素をインライン要素に変える（displayの値）ではないでしょうか?
　displayは、その要素がどのようなブロックにするかを指定するプロパティです。
　⇒9.2.4 The 'display' property( http://www.w3.org/TR/CSS2/visuren.html#display-prop )

http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/visuren.html#box-gen
　定義上は、インライン要素もブロック要素も、ブロックです。
※displayの値は、現行のCSS2.1では変更されています。
　inline-block が追加
　compact,markerは廃止されました。

　あなたが、ここ半年挑戦されているのは承知していますが、山に登るのに最初の登山口を間違えて、沢に迷い込んだ状態です。
　一度、原点に引き返して、まっとうな登山口から登られることをお勧めします。そうしないと、同じところで堂々巡りして、時間ばかりかかって昇れません。

　たかがHTMLとCSS、一ヶ月あったらもう少し先に進めたはずですよ。

回答No.10

ORUKA1951

＞フロートを数分作るのは間違っていたのですね。
　間違いではないですが、floatの性質上中央配置と併用するのは困難です。次のような場合には使っても良いとおもいます。
・左、または右に寄せる。
　　余裕を持っておかないと２列以上になります。
・ウィンドウが狭い場合は折り返して表示させる。
　などです。
　もちろん、本来の『挿絵の周囲にテキストを回りこませる』用途に使用するのは全く問題がないです。
・IE6,7などのふるいブラウザは、display:inline-blockを理解できませんから、その場合はfloatを使うこともあるでしょう。
★ただ、駒割り、段組などに使用するのは次の問題点があります。
　floatを使用するとHTML本文の記述順番が制約を受けます。これは、文書構造とプレゼンテーションの分離と言う理念から外れます。
　そのブロック内で、本来の回り込みのためのfloatやclearが自在に使えなくなります。

　よって、display:inline-blockを理解するブラウザが大多数を占め、かつ今後も増え続けることを考えれば、diplay:inline-blockに統一しても良いでしょう。
　また、一行が長くなって折り返してもよいようなデザインにしましょう。HTMLでページを製作する最大の目的が「HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )」なのですから・・

＞(フォントサイズが)変わっても崩れないように余裕を持たすのが一般的な方法なのでしょうか？
　その発想を変えましょう。
　変わっても、利用しやすいデザインにしましょう。崩れるのではなく、崩れることも目的にするのです。

お礼

ありがとうございます。お忙しい中大変ありがとうございました。

やってみます。

補足

metametamu さんの案通りに修正したはずなのですが、やはりFOXではカラム落ちする状況が変わりません。

またTOPPAGEなどの背景の画像の見た目が変更後多少変わったように見えるのですが、気のせいでしょうか？

また、display: inline-block;とはブロック要素をインライン要素に変えるCSSではないのでしょうか？
よろしければ素人の私に教えてください。

回答No.9

ORUKA1951

No.4です。補足的なお礼をいただいていたのに、見逃してました。改めて回答が欲しい場合は「お礼」ではなく「補足」のほうが良いです。

　No.3やNo.4のソースを見られると分かるように、[float]を使用していません。floatは、本来の目的は
・画像の周囲にテキストを回りこませる。
・ブロックをウィンドウ幅に合わせて、列数を変えて並べる
　が目的です。
　今回のように一列に限定して並べるには適していません。また【センター配置】も原理的に不可能です。右にfloatか左にfloatしかないのです。全体の幅を指定してセンター配置し、その内部に、その数分の一のブロックをfloatさせれば、一見うまく行きそうですが、ユーザーがフォントを変更したり、ちょっとしたサイズの変更で崩れてしまいます。

　tezt-align:centerとしたブロック内に行内要素(display:inline | inline-blockを置くのが率直な方法です。

　display:inline-blockを解釈しない古いブラウザ用に、floatを使う場合もありますが、その場合は画像にしてサイズ固定で並べるしかないです。(フォントサイズを小さくするなり、大きな負のtext-indentとoveflow:hiddenでbackgroundを指定してもよい)

　以前にも紹介したと思いますが
　⇒ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HTML/nav/navigation1.html )
　で、ブラウザの[表示]メニューから、[スタイル(シート)]を選択して、好きなスタイルを選択してみてください。HTMLには文書構造しか書かれていませんから、ひとつのHTMLでスタイルシートを書き直すだけで、この様に好きにデザインできます。印刷プレビューで印刷時には別のスタイルが適用されます。
★googleChromeは代替スタイルシートを選択できません。

　いくつかナビゲーションを横一列に配置したデザインもありますが、floatは使われていないはずです。Ctrl+＋でやCtrl+－でフォントサイズを変更しても、ウィンドウ幅を縮めても・・・

　HTMLの基本から、学び変えたほうが早い・・そうしないと、また別の場所で行き詰まりますよ。

お礼

ありがとうございます。お忙しい中大変ありがとうございました。

グローバルナビのトップページ、お菓子、その他などの一つ一つのリンクをブロック要素からインライン要素に変えるのが、横一列のグローバルナビの作り方の一般的な方法だったのですね。

フロートを数分作るのは間違っていたのですね。

補足

metametamu さんの案通りに修正したはずなのですが、やはりFOXではカラム落ちする状況が変わりません。

またTOPPAGEなどの背景の画像の見た目が変更後多少変わったように見えるのですが、気のせいでしょうか？

回答No.7

metametamu

html{
font-size:medium !important;
font-size:small;
}

説明は省略しますが、とりあえずこれで誰も使ってない古いブラウザやモバイル環境を持ち出さない限り16pxになりますし、ユーザーの指定も引き継がれるオススメの指定です。
フォントサイズを変えたい場合は、それぞれのパーツに%を使って相対的な指定をしてください。

＞それともプロのデザイナーでもフォントサイズは変わるのが当たり前なので、変わっても崩れないように余裕を持たすのが一般的な方法なのでしょうか？

私はプロでは無いですが、コンテンツはもとよりフォームに至るまである程度の余裕は考えて作ります。
いくら拡大しても崩れないデザインの引き出しは持っておくと便利ですよ。
フォーム部品に関しては統一が物凄く面倒なので、仕事の場合はコスト次第で切り捨てられるかもしれませんね。

＞ここまでぴったり合わしてから納品するのでしょうか？

それは敢えて揃えるって感じの時だと思います。
見た目優先のデザインの時くらい。それ以外ではどっちでもいいかなと思います。

お礼

ありがとうございます。お忙しい中大変ありがとうございました。

html{
font-size:medium !important;
font-size:small;
}

をbace.cssに入れましたがやはり上記の症状に変わりはありませんでした。

font-size:medium !important;で16PXになるのはわかるのですが、font-size:small;も入れるのでしょうか？

font-size:medium !important;が採用されるだけではないのでしょうか？
ハックですか？

補足

教えていただいた通り変更したはずですがやはり変わりません。

http://sample1.digi2.jp/snack.html
こちらをFIREFOXで見ていただければわかります。

やはり表示をアップするとグローバルナビがカラム落ちします。

回答No.6

tkmojo

そもそも、pxのフォントサイズ指定は「絶対サイズ指定」と言って、
ユーザーの好みでフォントサイズを変更できないのでWEBサイトとしては好ましくありません。
（今は変更できるブラウザも多いですが）
相対サイズ指定であるemや%を使用する事が望ましいですが、emはIE6でバグがあったため、業界の常識として%でフォントサイズを指定する事が一般的でした。

参考に上げたURLには、%指定をした場合にブラウザごとに差異が出ないように計算された数値が載っています。

例えば、普通のブラウザはデフォルトが16pxですが、サイト内のフォントサイズを12pxにしたい場合には、
「基本サイズ16px」の中の12pxの所を見てください。
75%指定になっていますので、下記のようにします。
body{
font-size:75%;
}

その上で、例えば強調部分のみ14pxにしたい場合には、「基本サイズ12px」の14pxの所にある、117%を指定します。
strong{
font-size:117%;
}

こんな感じの使い方ですね。

> SEOを考えたいなどのお客がいた場合テキストリンクは大事かなと思って、何とかしないといけないのかなと思いました。

今は勉強段階ですので、「テキストでメニューを組む」という目標に向かって工夫するのは良いと思います。

ただ、メニューをテキストで組んだだけでSEOに有利になるかといえば、かなり微妙で、
普通に画像を配置してaltを入れたのとほとんど変わらないという意見も多いです。
検索エンジン側は、テキストであっても画像+altであっても、情報の内容が同じなら価値も同じという考え方です。
また、テキストで組んだhtmlに、cssのtext-indentとbackgroundで画像メニューのように見せるテクニックも一般的です。
本来「SEOテクニック」は検索エンジンの嫌うところですが、これは今までスパム判定もされていないので割と安全な手法です。

それと、ほとんどのクライアントは、まずデザインが良くないと納得しません。
WEBサイトはデザインとコードを高次元で両立させる事が求められますので、
コード的な理由でデザインを犠牲にしては仕事としてはNGです。

仮に「テキストのメニューが良い」とクライアントが言った場合に、それで良い感じのデザインが出来るならその通り従えばいいでしょう。
しかしそのせいでデザインがおろそかになりそうなら、クライアントを説得して考え直してもらうように仕向けるのも仕事です。
「それでは環境によって2行になりますよ」とか「じゃあテキストでhtmlを書いて、画像を表示するようにしますね」とか「画像で書いてもSEO的にはほとんど変わりませんよ」とか。

ほとんどのクライアントはWEBの事を知らずに無理難題を言ってきますが、それをそのまま聞くと仕事にならないので、こちら主導で軌道修正することが必要です。
それも企画・提案のひとつです。

お礼

ありがとうございます。

＞
ほとんどのクライアントはWEBの事を知らずに無理難題を言ってきますが、

本当にその通りだと思います。

＞また、テキストで組んだhtmlに、cssのtext-indentとbackgroundで画像メニューのように見せるテクニックも一般的です。

こちらはテキストの背景をbackground-imageで画像を表示してｋじこちらのhttp://sample1.digi2.jp/snack.htmlグローバルナビと同じように見せるということでしょうか？

また、上記サイトはグローバルナビの上の太線をulボックスのボーダーにしないで上に同じようなimgで画像を乗っけたほうがフロートができなくなるということがなくなるのかもしれませんね。

回答No.5

tkmojo

環境によってフォントサイズが変わるのは当然です。
というかサイズを変えられるのがWEBの利便性の一つなので、そもそも固定（出来たとしても）しようと言う考え方が間違ってます。
プロは当然、フォントサイズが変わっても支障が無いように作成しています。

出来るだけブラウザごとの差を無くす、という事は可能です。
下記サイトの計算通りに指定すれば、デフォルトの文字サイズの場合にはブラウザごとの差異は少なくなります。
（文字間が異なるのはどうしようもない）
http://webtech-walker.com/archive/2008/05/16032443.html

ナビゲーション部分の折り返しが気になるなら、ボタンごとに横幅を設定すれば、文字はボタンの中で改行しますので、ナビゲーションが2段になる事はありません。
あともっと普通のやり方として、ナビゲーションのボタンを画像で作ればそんな心配はないですね。

お礼

ありがとうございます。お忙しい中大変ありがとうございました。

教えていただいたサイトに
基本サイズ12pxとあるのですが、これは共通のCSSなどに
＊｛
　　fontsize:12px
　　｝

としたばあのことを言っているのでしょうか？

また画像にするという方法は確かにあると思います。
それも一つの方法だと思うのですが、SEOを考えたいなどのお客がいた場合テキストリンクは大事かなと思って、何とかしないといけないのかなと思いました。

お客さんがそこまで言った場合いは、お客のわがままなのでその場合はデザインを変えるという認識が正しいのでしょうか？

回答No.4

ORUKA1951

こちらがスタイルシート(screen.css)
★480px～なら、OK
★ユーザーがフォントサイズを変更しようが、そもそもスタイルシートを使うまいが利用できるはず。ウィンドウサイズを変更したり、Ctrl + ＋でフォントサイズを変えてみる。
★印刷には適用されない。

@charset "Shift_JIS";
html,body{margin:0;padding:0;
}
div.header,div.section,div.footer{
width:90%;min-width:480px;
margin:0 auto;
}
div.header h1 img{width:100%;height:auto;
}
div.header div.nav{font-size:0.95em;}
div.header div.nav ul,div.header div.nav ul li{
list-style-type:none;
text-align:center;
margin:0;padding:0;
font-size:0;
}
div.header div.nav ul li{
display:inline-block;
position:relative;
border:solid 2px #CC0000;
line-height:1.6em;
padding:0 5px;
font-size:14px;
}
div.header div.nav ul li a{
display:block;
text-decoration:none;
padding:0 5px;
position:relative;left:-5px;
width:100%;height:100%;
background:url(.img/ul1.png);
}
div.section h2{
width:600px;margin:10px auto;
height:49px;line-height:49px;
text-align:center;
font-size:36px;
background:url(.img/hback.png) 50% no-repeat;
}
div.section table{
width:90%;margin:0 auto;
border:solid 4px silver;
border-radius:10px;
border-collapse:separate;
line-height:1.4em;
background-color:silver;
box-shadow: 10px 10px 10px rgba(0,0,0,0.4);
}
div.section table th,div.section table td{
padding: 10px;
background-color:white;
}
div.section table td{
}
div.section table td p{
margin:0 0 0 1em;
text-indent:1em;
}
div.section table td img{
width:20%;min-width:280px;
height:auto;
}
div.section table td img:hover{
width:auto;
}
div.section table th{
width:140px;
background:url(.img/tableth.png) no-repeat;
}
div.footer{background-color:green;}

お礼

確かにFOXでズームアップダウンしても、崩れませんが、具体的に私のサイトとどこが違いどこが原因でどう直せばよいのでしょうか？

グローバルナビのリンクのul.link1をwidth: 700px;に指定しているので ul.link1ボックスにリンクが入りきらなくなって落ちるのでしょうか？

ul.link1 {
margin: 10px auto 0px auto;
width: 700px;
list-style:none; /*リストの先頭のドットを削除*/
border-top: solid 6px #CC0033;
border-top-left-radius: 150px;
border-top-right-radius: 150px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}

回答No.3

ORUKA1951

なかなか上達しませんね。私や皆さんのアドバイスが聞いてもらってないようです。
繰り返しになると思いますが、HTMLでページを作成する【最大の】目的は、
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Introduction to HTML 4 (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )］より
　なのです。単に「firefoxだIEだ」というレベルを超えて、「どんな環境からもWebの情報を利用できる」からHTMLを使うのです。目の悪い人はフォントやコントラストを変えて利用しているかもしれませんし、スクリーンリーダーで読んでいるかもしれません。ひょっとすると点字端末で打ち出すかも、そして[検索エンジン]はテキストだけ読む・・・。
　Webの根幹です。ここを理解していないと、決して先に進めません。

　フォントを変えようが、ディスプレイサイズが変わろうが利用に支障があってはならないのですよ。フォントが変わるとデザインが崩れる話とは別次元だと分かりますか？？
★注) IE10などでも同様にずれるはずです。

そのためには、
・HTMLを用いて文書構造をマークアップする。
・その文書構造を元にスタイルシートでデザインしていく。
　と言うのが作業の流れです。

　HTMLを書いたら、Another HTML-lint 5( http://www.htmllint.net/html-lint/htmllint.html )などで、HTMLが、正しいかチェックして、その後スタイルシートを書いていきます。
[サンプル]
★Another HTML-lint 5( http://www.htmllint.net/html-lint/htmllint.html )
　で検証済みHTML4.01strict 文字コードはShift_JISです。
スタイルシートは後日

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
＿<title>サンプル</title>
＿<meta name="author" content="ORUKA1951">
＿<meta http-equiv="Content-Style-Type" content="text/css">
＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" >
＿<link rel="START" href="../index.html">
＿<link rel="stylesheet" href="screen.css" type="text/css" media="screen">
</head>
<body>
＿<div class="header">
＿＿<h1><img src=".img/beefood.png" width="950" height="260" alt="食品"></h1>
＿＿<div class="nav">
＿＿＿<ul>
＿＿＿＿<li><a href="http://sample1.digi2.jp/">TOPPAGE</a></li>
＿＿＿＿<li><a href="http://sample1.digi2.jp/snack.html">お菓子</a></li>
＿＿＿＿<li><a href="http://sample1.digi2.jp/">飲み物</a></li>
＿＿＿＿<li><a href="http://sample1.digi2.jp/">主食</a></li>
＿＿＿＿<li><a href="http://sample1.digi2.jp/">肉,魚,野菜</a></li>
＿＿＿＿<li><a href="http://sample1.digi2.jp/">レストラン,旅行</a></li>
＿＿＿＿<li><a href="http://sample1.digi2.jp/">スペース１2</a></li>
＿＿＿＿<li><a href="http://sample1.digi2.jp/">その他</a></li>
＿＿＿＿<li><a href="http://sample1.digi2.jp/">LINK一覧</a></li>
＿＿＿ </ul>
＿＿</div>
＿</div>
＿<div class="section">
＿＿<h2>お菓子</h2>
＿＿<table summary="お菓子">
＿＿＿<tbody>
＿＿＿＿<tr>
＿＿＿＿＿<th abbr="商品名">商品名</th>
＿＿＿＿＿<td>味噌屋の味噌ピーナッツ</td>
＿＿＿＿</tr>
＿＿＿＿<tr>
＿＿＿＿＿<th abbr="味">味</th>
＿＿＿＿＿<td>
＿＿＿＿＿＿75点
＿＿＿＿＿＿<p>特に癖もなく、普通においしい味噌味のピーナッツでした。周りの砂糖味噌がサクサクして良かったです。ただ、多少砂糖味噌がとれて袋の下にたまっていました。</p>
＿＿＿＿＿</td>
＿＿＿＿</tr>
＿＿＿＿<tr>
＿＿＿＿＿<th abbr="原料">主要原料の産地</th>
＿＿＿＿＿<td>ピーナッツ　九州産</td>
＿＿＿＿</tr>
＿＿＿＿<tr>
＿＿＿＿＿<th abbr="安全性">安全性</th>
＿＿＿＿＿<td>90点
＿＿＿＿＿＿<p>お土産にもらいました。その人が聞いた所によると、落花生と味噌が九州産だと店員さんが言っていたそうです。</p>
＿＿＿＿＿</td>
＿＿＿＿</tr>
＿＿＿＿<tr>
＿＿＿＿＿<th abbr="写真">写真とコメント</th>
＿＿＿＿＿<td>
＿＿＿＿＿＿<p>知人はピーナッツを、博多の新幹線のムラ市場とかいうところで買ったそうです。</p>
＿＿＿＿＿＿<p><img src=".img/snack/peanuts.png" alt="味噌屋のみそのピーナッツ" style="max-width:281x;" width="281" height="500"></p>
＿＿＿＿＿＿<p><img src=".img/snack/limit.png" alt="原材料と生産" style="max-width:500px" width="500" height="281"></p>
＿＿＿＿＿＿<p><img src=".img/snack/peanutsinside.png" alt="小皿にとったところ" style="max-width:500px" width="500" height="281"></p>
＿＿＿＿＿</td>
＿＿＿＿</tr>
＿＿＿</tbody>
＿＿</table>
＿</div>
＿<div class="footer">
＿＿<h2>文書情報</h2>
＿＿<dl class="documentHistry">
＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt>
＿＿＿<dd>2012-08-10</dd>
＿＿</dl>
＿＿<address>&copy; ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address>
＿</div>
</body>
</html>

回答No.2

play_with_you

ソースは見ていない（見る必要が無いので）

＞それともプロのデザイナーでもフォントサイズは変わるのが当たり前なので、変わっても崩れないように余裕を持たすのが一般的な方法なのでしょうか？
クロスブラウザに「まったく同じ表示にする」という意味はありません。(メジャーな)どのブラウザでも表示が「おかしくならない」「大きな差が無い」ようにするというのがWEBデザインにおけるクロスブラウザ対策です。
これは当然「余裕を持たす」とは限りません。初めから多少の差異が問題とならないようなデザインやレイアウトをするということもあります。というかこっちのほうが普通。

＞また、下記の（仏教精神のもと『豊かな心と暖かい思いやりのある人』に育つ事を願って力の限り努力を続けてまいります。）という部分も改行などがずれています。
仮にもWEBデザイナーを目指すなら「改行」と「折り返し」の区別はつけましょう。

回答No.1

kmee

せめて、エラーチェックくらいはしたらどうでしょうか?

http://validator.w3.org/
http://jigsaw.w3.org/css-validator/

あとは、それぞれに開発者用ツールがあります。それで、問題となっている箇所にどんなスタイルが適用されているか、調べべましょう。