10月 122011
 

灰色背景がサンプルソース薄緑背景が実際の見た目

サンプルソース

HTMLソース

<div class=”fixsize”>このclass=”fixsize”を記述したタグ内のみ、文字の大きさを固定化する。</div>
<div>ブラウザメニュー「表示」→「文字のサイズ」を変更して、その他のエリアとの差をご覧下さい。</div>

CSSソース

.fixsize {font-size:14pt;}

サンプル表示

このclass=”fixsize”を記述したタグ内のみ、文字の大きさを固定化する。
ブラウザメニュー「表示」→「文字のサイズ」を変更して、その他のエリアとの差をご覧下さい。

解説

HTMLソース

文字の大きさを固定したい箇所のタグに、スタイルシートで設定したclassを指定します。
ここでは、<div class=”fixsize”>このclass=”fixsize”を記述したタグ内のみ、文字の大きさを固定化する。</div>としています。

CSSソース

.fixsize {font-size:14pt;}と記述します。
これは、class=”fixsize”を指定したタグでくくられた箇所の文字を「フォントサイズ14pt(ポイント)で表示する」という意味です。
なお、14という数字を小さくすれば小さい文字で固定、大きくすれば大きい文字で固定することも可能です。

注意

小さすぎる文字で固定してしまうと目の悪い方には非常に見づらいページとなってしまいます。
デザイン上どうしてもメニュー幅又は高さを固定したくて・・・。等といったやむをえない場合を除いては固定はしない方が良いと思います。
また、FireFox1.5やOpera9等の新しいブラウザでは、上記の様に文字サイズを固定しても、文字サイズの拡大・縮小が出来るようになっています。
もう、文字サイズの固定という考え方自体が古いものになりつつあるのかもしれません。

 Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>