MB-Support

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

フォントサイズ(文字の大きさ)を固定する方法

 フォントサイズの変更でデザインが崩れるのを防ぐ方法。


Internet Explorer (インターネット エクスプローラ 以下IE)などのブラウザでは、ホームページの文字サイズを変更できます。 IE の場合は、「表示」→「文字サイズ」で、「最大」「大」「中」「小」「最小」の 5 段階で表示可能です。

通常は「中」に設定されている場合がほとんどですが、文字が小さくて閲覧し難い場合、「大」に設定するかも知れません。 それはユーザー次第です。閲覧者にとってはありがたい機能ですが、製作者にとっては意図した表示がされず、場合によってはデザインが崩れて閲覧し難いページになってしまう事もあります。

特に注意が必要なのは、align を使って画像を文章の左右に回り込ませているページ(このページもそうです)、line-height で行間を指定してある場合(文字サイズの変更されても、行間のピッチは変更されない)です。本来はテキスト表示を自由に変更できるページが望ましいのですが、どうしても文字サイズを変更させたくない場合、スタイルで固定する事が可能です。 使い方は簡単で、以下のコードを各要素に埋め込みます。


style="font-size:12pt;"

12pt が通常の文字サイズになります。ちなみに上のコードは 40pt にしてあります。 試しに、このページでブラウザのフォントサイズを変更してみて下さい。 上のコードの部分は最大にしても最小にしても変更されません。

ブロックレベル要素(前後に改行が入る)

<h1 style="font-size:12pt;">ホームズ</h1>
<div style="font-size:12pt;">ホームズ</div>
<p style="font-size:12pt;">ホームズ</p>

インラインレベル要素(前後に改行が入らない)

<span  style="font-size:12pt;">ホームズ</span>

サイズの指定はptの他に px でも可能です。ちなみに、なぜ固定されるのかは不明です。 この方法が通用するのは IE だけで、 Netscape Browser や、 Mozilla Firefox ではサイズの変更が有効になります(行間も一緒に拡大されます)。

文字サイズの変更に対応させるには、あらかじめ読みやすい標準の文字サイズを使う、align を使わず、文章の下に画像を表示する(センタリングなど)などが有効です。 また、大手メーカーのホームページでよく見かけるのは、文章も画像として保存して貼り付け、alt で代替テキストを入力する方法です。 ロボット型検索でヒットされ難くなりますが、デザインが崩れる事は皆無でしょう。




戻る 一覧表示 次へ


Internet Explorer 7 で表示を拡大/縮小する方法

Internet Explorer 7 で表示を拡大/縮小する方法

Internet Explorer 7 に搭載された拡大/縮小機能は、従来の文字の大きさの変更と、新規に追加された表示の拡大縮小があります。 この機能は、ブラウザ内に表示された画面を、そのまま拡大縮小できるものなので、文字だけでは無く、画像も同時に拡大縮小されます。 これにより、閲覧者は自由にホームページの表示方法を変更でき、制作者としても、ホームページのデザインが崩れる事が無いので大変便利な機能となります。

続きを読む・・・



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

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

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