文字サイズのタグ記事一覧

ブログの文字サイズを決めるときに、px・emという記号が出てきます。

px・emをどのように使い分ければ良いのか？

px・emについて、調べてみました。



☆ pxとは




☆ emとは




☆ pxとemの変換について




ブログでは、あらかじめCSS（スタイルシート）というところで、基準になる文字サイズを決めています。

ほとんどは、pxで設定してあるようです。

pxは、絶対単位といわれていて、どんな環境で見ても文字サイズが変わらないんです。

ブログの基準になる文字サイズが１６pxに設定されていれば、ブログで文字サイズを決めるときに、１emを選べば、１６pxになるということです。




ブログの基準になる文字サイズ

⇒ style="font-size:16px;"

px・em・100%のＨＴＭＬタグはそれぞれ下の通りです。



表示結果




px・em・100%、すべて同じ文字サイズになっていますね。




文字サイズや余白などの設定にはemを使ったほうがわかりやすいですね。



１emは一文字ですからね。





最後まで読んでいただき、ありがとうございます。

無料ブログの文字サイズ変更は簡単にできます。

大・中・小の３種類を簡単に選択できるようになっています。

文字サイズ変更のＨＴＭＬコードは、font-sizeを使います。



ＦＣ２ブログでは、このアイコンをクリックすれば簡単に文字サイズ変更ができます。
↓




実際の文字サイズは、下の通りです。
↓
大
中
小



この３種類で間に合ってしまうのですが、ちょっと慣れてくると記事の文字サイズを所々変えてみたいと思うことがあります。

無料ブログの文字サイズ変更ＨＴＭＬをちょっと変えるだけで、簡単に文字サイズを自由に好きな大きさに変更することができるようになります。





☆文字サイズ変更するためのＨＴＭＬ




ＦＣ２ブログの場合、上のＨＴＭＬコードの『ここに文字サイズの数値を入れる』に、次のような文字サイズ指定コートを入れます。

大の場合　⇒　x-large
中の場合　⇒　large
小の場合　⇒　x-small


実際に、入れてみましょう。



大のx-large

ＨＴＭＬコード
↓
<span style="font-size:x-large">x-largeを入れるとこのサイズになります</span>

表示結果
↓
x-largeを入れるとこのサイズになります




中のlarge

ＨＴＭＬコード
↓
<span style="font-size:large">largeを入れるとこのサイズになります</span>

表示結果
↓
largeを入れるとこのサイズになります




小のx-small

ＨＴＭＬコード
↓
<span style="font-size:x-small">x-smallを入れるとこのサイズになります</span>

表示結果
↓
x-smallを入れるとこのサイズになります




ｓｉｚｅ:の後ろを変えるだけで、簡単に文字サイズを変更することができますね。



ＦＣ２ブログでは、x-large・large・x-smallを使っていますが、mediumとかsmallを入れるとまた違った文字サイズになります。




mediumを入れたときの文字サイズ

ＨＴＭＬコード
↓
<span style="font-size:medium">mediumを入れるとこのサイズになります</span>

表示結果
↓
mediumを入れるとこのサイズになります




smallを入れたときの文字サイズ

ＨＴＭＬコード
↓
<span style="font-size:small">smallを入れるとこのサイズになります</span>

表示結果
↓
smallを入れるとこのサイズになります




文字サイズの大きい順に並べると、

○　x-large
⇒　ＦＣ２ブログでは『大』

○　large
⇒　ＦＣ２ブログでは『中』

○　medium

○　small

○　x-small
⇒　ＦＣ２ブログでは『小』


になります。


下に、文字サイズ大きい順にＨＴＭＬコードを表示してみました。
ＨＴＭＬコードを、コピーして『ここに文字を書く』の箇所を変えれば、使えます。


＜x-large＞
<span style="font-size:x-large">ここに文字を書く</span>

＜large＞
<span style="font-size:large">ここに文字を書く</span>

＜medium＞
<span style="font-size:medium">ここに文字を書く</span>

＜small＞
<span style="font-size:small">ここに文字を書く</span>

＜x-small＞
<span style="font-size:x-small">ここに文字を書く</span>





コピーすれば、large、medium、smallと横文字を覚える必要もないのですが、コピーしなくても良い方法があります。


それは、文字サイズの数値に『○○％』と入力する方法です。



普通に入力する文字サイズは１００％です。


ということは、１５０％にすると、

ＨＴＭＬコード
↓
<span style="font-size:150%">１５０％の文字サイズはこれです</span>

表示結果
↓
１５０％の文字サイズはこれです


パーセント表示にすれば、文字サイズを大きくしたければ、数字を大きくすれば良いだけなので、横文字を覚える必要がありません。



文字サイズの変更は、これで自由自在にできるようになりました。


上のＨＴＭＬコードをコピーして活用してみてくださいね。




最後まで読んでいただき、ありがとうございます。