10月 122011
灰色背景がサンプルソース薄緑背景が実際の見た目
サンプルソース
HTMLソース
<div class=”fixsize”>このclass=”fixsize”を記述したタグ内のみ、文字の大きさを固定化する。</div>
<div>ブラウザメニュー「表示」→「文字のサイズ」を変更して、その他のエリアとの差をご覧下さい。</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等の新しいブラウザでは、上記の様に文字サイズを固定しても、文字サイズの拡大・縮小が出来るようになっています。
もう、文字サイズの固定という考え方自体が古いものになりつつあるのかもしれません。