フォントのサイズが変わってしまいサイトが崩れる

質問

IEとファイヤーフォックスでフォントのサイズが変わってしまい、自作サイトが崩れてしまいます。

調べたところ下記のような情報があったのですが、この方法がよいのでしょうか？
http://kudox.jp/html-css/font-size-css

また上記通りにする場合下記は
<link rel="stylesheet" type="text/css" href="/css/fontsize.css" media="all" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="/css/fontsize_ie.css" media="all" />
<![endif]-->
最優先させるのでしょうか？最優先なら下記のような感じでよいのでしょうか？

<link rel="stylesheet" href="reset.css" type="text/css" />
<link rel="stylesheet" href="base.css" type="text/css" />
<link rel="stylesheet" href="page.css" type="text/css" />
<link rel="stylesheet" type="text/css" href="/css/fontsize.css" media="all" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="/css/fontsize_ie.css" media="all" />
<![endif]-->

またmedia="all"はとりあえずすべてにつけておいたほうがよい属性と考えてよいのでしょうか？

教えてください。

回答No.3

ORUKA1951 · ベストアンサー

＞それだとリンクにテキストを入れてフロートさせて、横並びのリンクは作れないのでしょうか？
　二段になって表示それる。
　ひとつのリンク内で二段にさせる。
あるいは、
　サイズを指定してはみ出したものは隠す。
　など、後自由に!!!

　フォントだけじゃなく、ウィンドウサイズも様々です。それでも「崩れない」というより、利用に差し支えないようにするのが良いデザインです。
　PDFじゃなHTMLとスタイルシートでページを作成する一番の、最大の目的が、『HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )』なのてすから・・

chrome以外のブラウザ--firefox,Opera,IE8以降で下記サイト
　⇒ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HTML/nav/navigation1.html )
で、ブラウザのメニュー ⇒ 表示 ⇒スタイル(シート)にて
横並び、
　は、はみ出し部分は消える
横プルダウン、横プルダウン2
　は、最小の横幅を指定してあるのですが、フォントが大きくなるとはみ出した文字は消える。
ページの最上部、ヘッダーの下、ウィンドウの下部固定
　は、リンクが折り返される。
　印刷は、また違ったデザインで印刷されるでしょう。

お礼

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

http://sample1.digi2.jp/snack.html
こちらなのですが、IEとFOXで見ていただければリンクが崩れるのがお分かりになると思います。

＞ひとつのリンク内で二段にさせる。
あるいは、
　サイズを指定してはみ出したものは隠す。
　など、後自由に!!!

フォントのサイズをクロスブラウザで固定する方法はないのですね。
二番目はテキストリンクの入ったボックスを固定して文字の大きさでボックスが変更しないようにするということでしょうか？
liにwidthしていをCSSでするのですかね？

一番目は横並びにしないで縦並びにするということでしょうか？

まだ勉強不足なので恐縮ですが素人でも分かるように教えていただければ幸いです。

回答No.5

ORUKA1951

スタイルシートです。
リセットしたらダメです。
^^^^^^^^^^^^^^^^^^^^^^^^
　せっかくブラウザがもつスタイルシートを利用できないばかりか、複雑怪奇になってメンテナンス不可能になってしまいます。
　必要なとき、必要な指定のみをしましょう。

あなたのスタイルシートの数分の一の量のはずです。
[abc.css]
@charset "UTF-8";
div.header,div.section,div.footer{
＿width:90%;max-width:960px;min-width:480px;
＿margin:0 auto;
＿position:relative;
}
h1,h2,h3,p{margin:0;line-height:1.6em;}
div.header h1 img{display:block;width:100%;height:auto;}
div.header div.nav ul,div.header div.nav ul li{
＿list-style:none;
＿margin:0;padding:0;
＿text-align:center;line-height:2em;
＿font-size:0.85em;
}
div.header div.nav{
＿width:auto;
＿border-radius: 5px 5px 0 0;
＿border-top: 6px solid #CC0033;
＿background-color:#CC0033;
}
div.header div.nav ul:after{
＿display:block;content:"";white-space:pre;clear:left;
＿height:1px;
}
div.header div.nav ul li{display:block;float:left;width:8em;margin-left:2px;margin-bottom:2px;}
div.header div.nav a{
＿display:block;height:100%;width:100%;
＿background-image: url("http://sample1.digi2.jp/img/ul1.png");
}
div.section,div.footer{margin-top:5px;}
div.section h2{
＿background:url(../img/hback.png);width:600px;
＿height:49px;text-align:center;
＿line-height:49px;
}
div.section table{
＿border:6px solid #CCCCCC;
＿background-color:#CCCCCC;
＿border-radius: 10px;
＿box-shadow: 20px 10px 10px 1px #CCCCCC;
＿margin: 20px auto;
＿width: 90%;
＿border-collapse:separate;
＿cell-spacing:0;
}
div.section table tbody th,div.section table tbody td{
＿background-color:white;padding:0.5em;
＿border:2px solid #CCCCCC;position:relative;
}
div.section table tbody th{
＿background-image:url("../img/tableth.png");
＿min-width:5em;
}
div.section table tbody td p{text-indent:1em;}
div.section div.figure{
text-align:center;
}
div.section table tbody td div.figure img{
＿padding:5px;border:1px gray solid;
＿max-width:90%;
＿height:auto;
}

お礼

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

回答No.4

ORUKA1951

＞フォントのサイズをクロスブラウザで固定する方法はないのですね。
　というか、固定してはならない。ユーザーが自由にフォントサイズを変更してもよいようにすべきと言う意味です。★最も大事な事です★
　よって
＞二番目はテキストリンクの入ったボックスを固定して文字の大きさでボックスが変更しないようにするということでしょうか？
＞liにwidthしていをCSSでするのですかね？
　の質問は考えるなと言う事です。
　簡単なサンプル上げておきます。私はここ数年XHTML使って無いので少し苦労しました。(HTML5を意識したHTML4.01strictなもので・・何せ簡単ですからね。)
　同じ系統の質問を何度も繰り返されていますが、No.2さんの回答も含めて、よく読んで理解してください。
★Another HTML-lint 5( http://www.htmllint.net/html-lint/htmllint.html )
でチェック済みXHTML1.0 + CSS3
★タブは＿に置換してあるので戻すこと。
★http:は、http：に置換してあるので戻すこと。
★リキッドデザインですから、ウィンドウ幅を変えてもフォントサイズを変えても利用できるはずです。
★スタイルシートは、同じディレクトリにstyleSheetフォルダーを作成していれること。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http：//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http：//www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
＿<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
＿ <meta http-equiv="content-style-type" content="text/css" />
＿ <meta http-equiv="content-script-type" content="text/javascript" />
＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" />
＿<link rel="start" href="/index.html" />
＿<link rel="stylesheet" type="text/css" media="screen" href="./styleSheet/abc.css">
＿<title>FOOD</title>
</head>
<body>
＿<div class="header">
＿＿<h1><img src="./img/beefood.png" width="960" height="250" alt="ＦＯＯＤ" /></h1>
＿＿<div class="nav">
＿＿＿<ul>
＿＿＿＿<li><a href="./">TOPPAGE</a></li>
＿＿＿＿<li><a href="./snack.html">お菓子</a></li>
＿＿＿＿<li><a href="./drink">飲み物</a></li>
＿＿＿＿<li><a href="./food">主食</a></li>
＿＿＿＿<li><a href="./meet">肉,魚,野菜</a></li>
＿＿＿＿<li><a href="./lestrant">レストラン,旅行</a></li>
＿＿＿＿<li><a href="./space">スペース１2</a></li>
＿＿＿＿<li><a href="./other">その他</a></li>
＿＿＿＿<li><a href="./links">LINK一覧</a></li>
＿＿＿</ul>
＿＿</div>
＿</div>
＿<div class="section">
＿＿<h2>お菓子</h2>
＿＿<p>あああああああああ</p>
＿＿<table summary="味噌屋の味噌ピーナッツ">
＿＿＿<caption>味噌屋の味噌ピーナッツ</caption>
＿＿＿<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>お土産にもらいました。その人が聞いた所によると、落花生と味噌が<strong>九州産</strong>だと店員さんが言っていたそうです。</p>
＿＿＿＿＿</td>
＿＿＿＿</tr>
＿＿＿＿<tr>
＿＿＿＿＿<th abbr="詳細">写真コメント</th>
＿＿＿＿＿<td>
＿＿＿＿＿＿<dl>
＿＿＿＿＿＿＿<dt>売っている場所。</dt>
＿＿＿＿＿＿＿<dd>知人はピーナッツを、博多の新幹線のムラ市場とかいうところで買ったそうです。</dd>
＿＿＿＿＿＿</dl>
＿＿＿＿＿＿<div class="figure">
＿＿＿＿＿＿＿<p>
＿＿＿＿＿＿＿＿<img class="lengthwisepicture" src="./img/snack/peanuts.png" width="281" height="500" alt="味噌ピーナッツ" />
＿＿＿＿＿＿＿</p>
＿＿＿＿＿＿</div>
＿＿＿＿＿＿<div class="figure">
＿＿＿＿＿＿＿<p>
＿＿＿＿＿＿＿＿<img class="sidewayspicture" src="./img/snack/limit.png" width="500" height="281" alt="原材料:落花生,味噌,砂糖,植物性油脂、内容量:120g、製造元:" />
＿＿＿＿＿＿＿</p>
＿＿＿＿＿＿</div>
＿＿＿＿＿＿<div class="figure">
＿＿＿＿＿＿＿<p>
＿＿＿＿＿＿＿＿<img class="sidewayspicture" src="./img/snack/peanutsinside.png" width="500" height="281" alt="" />
＿＿＿＿＿＿＿</p>
＿＿＿＿＿＿</div>
＿＿＿＿＿</td>
＿＿＿＿</tr>
＿＿＿</tbody>
＿＿</table>
＿＿<table summary="まるごとスイカ飴">
＿＿＿<caption>まるごとスイカ飴</caption>
＿＿＿<tbody>
＿＿＿＿<tr>
＿＿＿＿＿<th abbr="品名">商品名</th>
＿＿＿＿＿<td>まるごとスイカ飴</td>
＿＿＿＿</tr>
＿＿＿＿<tr>
＿＿＿＿＿<td colspan="2" style="font-weight:bold">・・・【中略】・・・</td>
＿＿＿＿</tr>
＿＿＿</tbody>
＿＿</table>
＿＿<div id="sidejava">
＿＿＿<h3>訪問数</h3>
＿＿＿<script type="text/javascript" src="http：//counter1.digidigi.jp/counter.php?id=10003123"></script>
＿＿＿<noscript>
＿＿＿＿<p>
＿＿＿＿＿<a href="http：//www.digidigi.jp/counter/"><img src="http：//counter1.digidigi.jp/counter_img.php?id=10003123" style="border-style:none;" width="159" height="27" alt="カウンター" /></a>
＿＿＿＿</p>
＿＿＿</noscript>
＿＿</div>＿
＿</div>
＿<div class="footer">
＿＿<p class="cyosakukenn">文章の無断転載、転用はご容赦ください。リンクはフリーです。
＿＿Copyright(C)&nbsp;&nbsp;FOOD 紹介&nbsp;&nbsp;All Rights Reserved.
＿＿</p>
＿</div>
</body>
</html>

お礼

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

スタイルCSSは別フォルダにしたほうがいいですね

回答No.2

tkmojo

根本的な話、フォントサイズが変わってレイアウトが崩れるデザインは「WEBデザイン」ではありません。
フォントサイズはユーザーが自由に変えることが出来るべきであり、それを前提としたデザイン設計をする必要があります。
ブラウザの種類はもちろん、その設定やOSやユーザーのPCに入っているフォント等でもテキストの表示は変わります。
WEBデザインとは文字サイズを固定させてユーザーに提供するものではなく、
どんなサイズや文字間隔で閲覧しても問題なく閲覧できるデザインを作成する事です。

これを踏まえたうえで、デフォルトのフォントサイズをブラウザごとに近づけるには、
以下のURLを参考にしてください。
http://webtech-walker.com/archive/2008/05/16032443.html

お礼

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

結局根本的にテキストのサイズが変わっても崩れないように作らないといけないということでしょうか？
それだとリンクにテキストを入れてフロートさせて、横並びのリンクは作れないのでしょうか？

そこが回り込まなくなります。

回答No.1

ORUKA1951

★IEとファイヤーフォックスでフォントのサイズが変わってしまい、自作サイトが崩れてしまいます。
　はサイトの設計そのものに問題があります。
　紹介されたサイトでも、フォントサイズを指定するのはあくまでデザイン上の問題であって、崩れる/崩れないは一切言っていませんよ。!!それどころか『そうしてしまうとInternetExplorerでユーザーが文字サイズを変更できなくなってしまいます。』と言われていることから分かるように、文字サイズはユーザーで変更できることは必須と考えていますよ。
　フォントサイズが変わっても崩れるのは、フォントサイズの指定以前の問題です。フォントサイズが変わっても配置が崩れてはなりません。!!!

★HTMLは文書構造だけを記述し、プレゼンテーションはスタイルシートで指定します。
★スタイルシートにCSS(カスケーディングスタイルシート)が使われるのは、カスケーディングと言う極めて重宝な仕組みがあるからです。
　カスケーディング(優先順位/詳細度/継承など)を知らないでCSSを使うことはありえません。
　(出現順)スタイルシートは優先順位/詳細度が同じでしたら後述のもので上書きされます。
　スタイルシートは視覚系ブラウザのためだけではありません。スクリーンリーダー、プリンター、展示出力、携帯電話やテレビ画面などに対しても指定されています。ブラウザが持っている一般的なスタイルシート(優先度は最も低い)
　⇒附記A: HTML 4.0におけるスタイルシートの例( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/sample.html )
　の最後の@media print {}はプリンターのための指定ですし、@media speech {}はスクリーンリーダーのための指定てす。これらをmedia=allで上書きしてしまうのは、とってもまずいです。
<link rel="stylesheet" href="reset.css" type="text/css" />
　もそうです。mediaは書かれていませんが意味は同じです。resetするのはとってもまずいです。!!

　5.セレクタ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/selector.html )
　6.値の割り当て、カスケード処理、継承( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cascade.html )
の二つはしっかり読んで理解しておくこと。

★視覚弱者がフォントサイズを変更したらデザインが崩れるのは、とてもまずいです。参考にされたページにも「ユーザーが文字サイズを変更できなくなってしまいます。」と、そう書いてありますよ。

★視覚系ブラウザのうちブラウザ対象にスタイルシートを書くのでしたら
media="screen"と指定しておくべきです。
　永続的スタイルシート(media,title属性のないもの)には、フォントの種類とかを書いておくと良いでしょう。

お礼

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

結局根本的にテキストのサイズが変わっても崩れないように作らないといけないということでしょうか？
それだとリンクにテキストを入れてフロートさせて、横並びのリンクは作れないのでしょうか？

そこが回り込まなくなります。