MB-Support

パソコン初心者のサポートページ

文字サイズの変更でデザインが崩れる問題

 ブラウザのフォントサイズの変更で、閲覧者がホームページのフォントサイズを変更する事により、サイト制作者の意図しない表示となりえます。


ホームページ制作で新たな問題に直面しました。 MB-Support ページはブラウザ Internet Explorer 6 文字のサイズ(中) で閲覧するのに最適に作成されています。 ところが閲覧者が、文字サイズ(最大)に設定した場合、恐ろしく醜いページとなってしまいます(デザイン感覚疑われます)。

MB-Support ページは、孫のためにパソコンを購入したお爺ちゃん、お婆ちゃんの方にも利用して欲しいと考えています。 早急に対処する必要に気が付き、お先真っ暗です(大変な作業になる事でしょう。外観も変更されるでしょう)。 とりあえず、この「日記 2003 月 3 日」のページは文字サイズ(最大)に設定しても閲覧可能なページになっています。

前日発覚した問題の修復作業に取り掛かりました。といっても完璧にやろうとすると全ページのデザイン変更が必要なため、 応急処置にとどめます。文字サイズ(最大)に設定しても閲覧可能なページにするには邪道ですが font サイズを固定にしてしまうしかありません(多数のホームページ入門ページに「 font サイズ固定」は邪道と書かれていましたが)。

左が修復前の文字サイズ(最大)設定。画面構成が崩れています。右が応急処置を取った画面。文字が大きくなる所と、 サイズが固定される所をまぜる事で外観の損傷を抑えています。 ちなみにトップページを含む 5 〜 6 ページしかサーバーにアップしていません( 1 日これくらいしか対処できません。ミラーサーバーにいたっては手付かずです)。


<table style="font-size:12pt;">
<tr>
<td>この部分が12ptサイズに固定される</td>
</tr>
</table>
<table>
<tr>
 <td style="font-size:12pt;">この部分が12ptサイズに固定される</td>
 <td style="font-size:9pt;">この部分が9ptサイズに固定される</td>
</tr>
</table>

<table> や <td> 内にスタイルで文字サイズを指定する事で、 Internet Explorer で文字サイズを変更しても反映されません。 しかし、他のブラウザ ( Netscape / Mozilla ) では通用しません。

スタイルでフォントサイズを指定するだけなので、わざわざテーブルを利用する必要もあります。 例えば、ブロックレベルの div や p 要素、インラインレベルの span にこれらのフォントスタイルを適用しても構いませんし、 class や id を利用した指定も可能です。

スタイルシート CSS




戻る 一覧表示 次へ


BTOパソコン・ゲームPC・自作パソコンなら【TSUKUMO】 - 自作PCに必要なパーツ、豊富な品揃え

Copyright © 2013 MB-Support パソコン初心者のサポートページ All Rights Reserved.

管理人サイト閲覧方法プライバシーポリシー著作権/免責事項