www.wanichan.com

Web > FrontPage > FrontPage 2003 (上級編) > スタイルシート TIPS

文字の大きさを可変にしたい

はじめに

Internet Explorerにおいては、フォントサイズをポイント(pt)単位で指定すると固定しますが、Netscapeでは無視されます。
どちらともフォントサイズを固定したい場合は、ピクセル(px)単位で指定する必要があります。

しかし、フォントサイズを固定してしまうと、文字を大きくしたい方にとっては表示メニューの文字サイズコマンドで変えられないのです。独自のスタイルシートを適用等の方法もあるのですが、例えば高齢者で初心者の方にその方法を強要するのはどうか、と思います(笑)
とてつもなく小さな文字がいいとかいう風潮もどこかにあったりしますが、はっきり言って読めませんよ、ホンマ。

でも、Webデザイナーさんとかは文字の大きさを可変することによりレイアウトが崩れるのを避けるため、あえてフォントサイズを固定しているという背景があります。
臨機応変といったところでしょうか?

さてさて、前置きがかなーり長くなりましたが、スタイルシートで文字の大きさを可変にするには、フォントサイズを%指定するとよいでしょう。

body, th, td, caption { font-size: 95% }

bodyタグだけではなく、表内のセルなどにも同じように指定するとよいでしょう。
複数のタグをまとめて定義するには、カンマ(,)で区切ります。
こういう場合はダイアログボックスなんぞ頼らずに直接入力したほうがはやいですね(笑)

他に、サイズの相対指定をしたい場合は、em を使う方法もあります。
1.0em が普通の大きさ、つまり、12pt、16pxと同じになるのではないかと思います。
ただし、Windowsの場合です・・・。
Webサイトでの表示解像度は、72・75dpiなんですが、Windowsの場合は96dpiになります。
72dpiの場合は、1pt=1pxになるみたいですけどね・・・。

こればかりはなんていうか、OSによって解釈が違いますので微妙です。
下のサンプルはWindowsでの環境をもとに作成しています。
Macなどの方は、表示サイズが異なると思います。そこんところご了承いただきたく・・・。

▲Page TOP

FrontPageで操作するには

手打ちじゃない方法では以下のとおり。

  1. スタイルシート(CSSファイル) を開きます。ない場合は新規作成します。
  2. スタイルツールバーの[スタイル]をクリックします。
    スタイル
  3. [スタイル]ダイアログボックスの右下、[新規作成]ボタンをクリックします。
  4. [新しいスタイル]の[名前(セレクタ)]に、タグをまとめて入力し、カンマ(,)で区切ります。
    新しいスタイル>書式設定→フォント
  5. [書式設定]ボタンをクリックし、一覧から[フォント]をクリックします。
  6. [フォント]ダイアログボックスの[サイズ]にて、パーセンテージ単位で指定します。
    ここでは「95%」と入力します。
    フォント
  7. [OK]ボタンをクリックします。
  8. 説明には font-size: 95% と設定されていることを確認して、[OK]ボタンをクリックします。
    新しいスタイル

▲Page TOP

スポンサーリンク
INDEX
  • このエントリーをはてなブックマークに追加

問題は解決しましたか?

操作方法、設定方法等で困ったら、 Expression Web Users Forum に投稿してください!

2012年12月21日(日本時間)をもって、Expression Web 4はフリーソフトになりました。FrontPageユーザーの方もダウンロードして使ってみてください。 なお、Expression Web 4すでに購入された方も、問題が修正された無料版にアップグレードすることをお勧めします。

* Expression Web 4 無料版をダウンロード

▲このページのトップへ