19【技術】文字のサイズ
白猿
「今回は活動報告で『字の大きさ』を変える技を紹介しよう」
黒猫
「たしか昔は<big></big>のタグで字が大きくできたんだよね。今は使えなくなっている。<small></small>で小さくすることはできるみたいだ」
白猿
「昔は<big>の他に<font>タグでも文字の大きさが指定できた。今は使えないから<div>タグか<span>タグで設定する。『style="font-size:****">』で指定すると文字の大きさが変わるぜ。たとえばこういう感じ」
・゜゜・*:.。..。.:*・゜゜・*:.。
largeで字を大きく
<span style="font-size:large">字が大きくなります</span>
140%で字を大きく
<span style="font-size:140%">字が大きくなります</span>
1.4emで字を大きく
<span style="font-size:1.4em">字が大きくなります</span>
18pxで字を大きく
<span style="font-size:18px">字が大きくなります</span>
・゜゜・*:.。..。.:*・゜゜・*:.。
活動報告での見え方
・゜゜・*:.。..。.:*・゜゜・*:.。
黒猫
「いろんな指定方法があるんだね。覚えきれないね」
白猿
「ぶっちゃけ、全部覚える必要はない。字を大きくするには"large"だけ知ってればいいぜ。"140%"と"1.4em"は、通常の文字の１．４倍になるぜ」
黒猫
「最後の"18px"はどういう意味かね？」
白猿
「先の3つは元の文字サイズを基準にして大きくするものだ。"px"は文字の大きさを数字で決めるものだ。活動報告では基本の文字サイズが12か13pxのようだぜ。この数字を大きくすると文字サイズも大きくなる」
黒猫
「数字で固定できるなら、"px"で設定するのが一番よさそうに思うが？」
白猿
「それはそうなんだが、"px"の指定は１つ問題がある。読み手がブラウザで文字の拡大機能を使うことがある。表示を150%にするとかな。"px"で指定した場合はこの機能が効かないんだ」
黒猫
「"px"を使うと状況によっては、読みづらくなる可能性もあるんだね」
白猿
「さて、前々回『17【雑談】いろいろな色』で紹介した色をつけるのも合わせてやってみよう」
・゜゜・*:.。..。.:*・゜゜・*:.。
字を大きくして、色を緑にしています
<span style="font-size:large;color:green;">字を大きくして、色を緑にしています</span>
・゜゜・*:.。..。.:*・゜゜・*:.。
活動報告での見え方
・゜゜・*:.。..。.:*・゜゜・*:.。
黒猫
「二つの指示をセミコロン；で区切っているんだね。greenの後のセミコロン；はいるのかな」
白猿
「"font-size:＊＊＊"の最後の部分の；は、あってもなくてもよいらしい。複数の命令を区切るときには必須だぜ」
黒猫
「以前の色の説明では『red』とか『blue』なども使えるんだよね」
白猿
「青い色はリンクと間違えやすいからあまり使わないほうがいいかも。色は使い過ぎるとかえって読みにくくなることもあるから、ほどほどにな」
黒猫
「割烹エディターでも文字の色を変えるツールがあるよね」
白猿
「『カラー文字作成』くんとか『赤文字さん』ってのもあるな。こういうのを使うと簡単に色がつけられる。前者は文字サイズの指定もできるぜ」
