モックン☆彡の部屋

モックン☆彡の部屋

文字の大きさを変える(高)

文字の大きさを変える(高)


今回使う タグ
< FONT style="font-size: 数字 px;" ></ FONT >


文字の大きさを変える(低) 』でも文字の大きさを変える方法を書きましたが、

今回説明するのは、 見る人にとって同じように見える方法 です。

訳の分からない書き方をしましたが、ブラウザの表示から『 文字のサイズ 』というのを

選べますよねぇ?・・・という事は、見る人によって文字の大きさも違うわけです。

例えば、自分の見ているページが他の人も 同じ文字や画像の配置 で見ていると思ったら

大間違い! 人によっては文字が改行されていたり、画像が大きすぎてスクロールバーが

出ていたりします。 ( ̄ ̄ロ ̄ ̄;;)

よく文字を中央に移動させたいのか?スペースキーで空白を入れて文字移動させていますが、

これは好ましくない方法です。

本人にはおそらく中央に見えていますが、他の人には中央に 見えない場合があります。

HPを作る上で、誰でも同じように見えるよう工夫も大事なことですよね。

その中でも今回は文字の大きさについて取り上げました。

オイラの数多くの説明ページは、ブラウザの表示から『 文字のサイズ 』で変更しても

文字の大きさが変わりません。(説明上、変わる所もありますが・・・)

ただ1つだけ欠点と言えば、文字が小さくて読めない時に見る人が文字のサイズを

大きく変更できなかったり、文字が大きすぎて邪魔でも文字を小さく変更できない事かな!?



さて、本題です。実際に文字の大きさを変えてみましょう。


《例題1》
< FONT style="font-size: 20 px;" > 文字の大きさを変える </ FONT >
結果 文字の大きさを変える
< FONT style="font-size: 10 px;" > 文字の大きさを変える </ FONT >
結果 文字の大きさを変える

簡単ですね !! 『今回使う タグ 』で紹介したタグで大きさを変えたい文字を挟むだけです。

例題では数字を『 20 』や『 10 』としましたが、

数字 が大きければ文字も大きく、小さければ文字も小さくなります。

px 』とは、大きさを表す単位で ピクセル と呼びます。

通常はこの単位を省略する事ができますが、分かりやすいように入れておくと良いでしょう。



説明は以上ですが、 数字 の所には以下の物も入れることができます。


《例題2》
xx-small
・・・
とても小さい
x-small
・・・
少し小さい
small
・・・
小さい
medium
・・・
普通の大きさ
large
・・・
大きい
x-large
・・・
少し大きい
xx-large
・・・
とても大きい
larger
・・・
大きめ
smaller
・・・
小さめ
数字+単位
px、cm、pt
モックン☆彡
モックン☆彡
モックン☆彡
モックン☆彡
モックン☆彡
モックン☆彡
モックン☆彡
モックン☆彡
モックン☆彡

《例題2》 の色の付いた 英語 は現在見ている文字の大きさを基準にしていますので、

見る人によって大きさが変わってしまいます。

書き方の例は下のようになります。

< FONT style="font-size: xx-small ;" > 文字の大きさを変える </ FONT >

書き方が違うものの、『 文字の大きさを変える(低) 』で紹介した結果と同じで

メニューバーの『 表示 』から『 文字のサイズ 』を変更すると

文字の大きさが変わってしまいます。

文字の大きさを固定したい場合は、 《例題1》 で紹介した方法を使いましょう。










© Rakuten Group, Inc.
X
Design a Mobile Site
スマートフォン版を閲覧 | PC版を閲覧
Share by: