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

タグ:文字サイズ

文字サイズのタグが付いた記事一覧。居眠りばかりしている社長を見て、この会社の将来はあるのかな!?と不安を抱くようになり、好きな車で自由にドライブがしたくてネットビジネスをはじめました。会社勤めしながらでもできるアフィリエイトで気ままに副業生活

アフィリエイト用語集
ブログの文字サイズを決めるときに、px・emという記号が出てきます。px・emをどのように使い分ければ良いのか?px・emについて、調べてみました。☆ pxとはコンピュータで画像を表示するときの色情報を表す最も小さな単位のことをいいます。パソコン、スマホなどの画面には小さな四角がいっぱい敷き詰められています。画面の四角1マスを1pxといいます。☆ emとは文字の高さを基準にしている単位のことをいいます。1文字分の単位の...

記事を読む

無料ブログ困ったときのHTML
無料ブログの文字サイズ変更は簡単にできます。大・中・小の3種類を簡単に選択できるようになっています。文字サイズ変更のHTMLコードは、font-sizeを使います。FC2ブログでは、このアイコンをクリックすれば簡単に文字サイズ変更ができます。↓実際の文字サイズは、下の通りです。↓大中小この3種類で間に合ってしまうのですが、ちょっと慣れてくると記事の文字サイズを所々変えてみたいと思うことがあります。無料ブログ...

記事を読む

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
 カテゴリ
 タグ
None

pxとemの違いと使い方

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

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

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



☆ pxとは

コンピュータで画像を表示するときの色情報を表す最も小さな単位のことをいいます。
パソコン、スマホなどの画面には小さな四角がいっぱい敷き詰められています。
画面の四角1マスを1pxといいます。

tani.png





☆ emとは

文字の高さを基準にしている単位のことをいいます。
1文字分の単位のことをいいます。

emの由来は、大文字の『M』から来てるようです。
大文字の『M』はタテとヨコに均等にたくさんの空間を占めるということで、文字サイズの基準に使われてきたようです。

今は、emを文字の高さと同じ幅という使い方をしています。





☆ pxとemの変換について

1em=16px

pxとemの変換について調べるなら、このサイトが便利です。
http://pxtoem.com/





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

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

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

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




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

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

px・em・100%のHTMLタグはそれぞれ下の通りです。

<span style=font-size:16px">16px・1em・100%はすべて同じ文字サイズ!</span>


<span style=font-size:1em">16px・1em・100%はすべて同じ文字サイズ!</span>


<span style=font-size:100%">16px・1em・100%はすべて同じ文字サイズ!</span>




表示結果

16px・1em・100%はすべて同じ文字サイズ!

16px・1em・100%はすべて同じ文字サイズ!

16px・1em・100%はすべて同じ文字サイズ!





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




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



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





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



スポンサーサイト

ブログの文字サイズをHTMLを使って変更する方法

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

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

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



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

moji-size.png



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







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

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





☆文字サイズ変更するためのHTML

<span style="font-size:ここに文字サイズの数値を入れる">ここに文字を書く</span>



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

の場合 ⇒ x-large
の場合 ⇒ large
の場合 ⇒ x-small


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



大のx-large

HTMLコード

<span style="font-size:x-large">x-largeを入れるとこのサイズになります</span>

表示結果

x-largeを入れるとこのサイズになります




中のlarge

HTMLコード

<span style="font-size:large">largeを入れるとこのサイズになります</span>

表示結果

largeを入れるとこのサイズになります




小のx-small

HTMLコード

<span style="font-size:x-small">x-smallを入れるとこのサイズになります</span>

表示結果

x-smallを入れるとこのサイズになります




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



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




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

HTMLコード

<span style="font-size:medium">mediumを入れるとこのサイズになります</span>

表示結果

mediumを入れるとこのサイズになります




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

HTMLコード

<span style="font-size:small">smallを入れるとこのサイズになります</span>

表示結果

smallを入れるとこのサイズになります




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

○ x-large
⇒ FC2ブログでは『大』

○ large
⇒ FC2ブログでは『中』

○ medium

○ small

○ x-small
⇒ FC2ブログでは『小』


になります。


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


<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と横文字を覚える必要もないのですが、コピーしなくても良い方法があります。


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



普通に入力する文字サイズは100%です。


ということは、150%にすると、

HTMLコード

<span style="font-size:150%">150%の文字サイズはこれです</span>

表示結果

150%の文字サイズはこれです


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



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


上のHTMLコードをコピーして活用してみてくださいね。




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



Copyright © 脱サラしたいサラリーマンがアフィリエイトを実践、気ままにネットビジネス All Rights Reserved.

テキストや画像等すべての転載転用販売を固く禁じます

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。