2006年10月09日

CSS講座 第1回ほしゅ〜授業『パーセント指定の謎&おまけ』

こんにちは、

みなさんから寄せられるたくさんの
コメントを読みながらニヤニヤして浮かれている
単純男、船橋みずきです(* ̄0 ̄)ノ

いつもご訪問、応援、ありがとうございます♪

今回で6つ目の記事になりました。

☆ランキングに参加しています☆
あなたの応援があれば、僕は地球温暖化の進行をとめられる気がします。
 ↓ ↓ ↓ ↓ ↓
【ブログの殿堂】


さて、

前回の【 スタイルシートの書式 】のコメントにて、
こんな質問をいただきました!


<ここから>
pxだとまだいいんですが、%になるとなんかわからなくなるんですよね。

なにに対しての%かがわからなくていつも手間がかかってしまいます。
<ここまで>



今回は第1回ほしゅ〜授業と称しまして、

【 パーセント指定の謎&おまけ 】

というテーマでお伝えします♪


長さや大きさを指定する際には、
数値に単位(px,em,cm,%等)をつけて指定することができます。

ブログで主に使われている単位は、
px《1ピクセルを1とする単位》%《今回解き明かす謎》です。
(全部を調べたわけじゃないので違うかもしれませんが。)


いただいた質問は、

「このパーセントはなにを規準としたパーセントなのか」

というものでした。


◇なにに対してのパーセントなのか

実はここだけの話、、
僕もわかっているようでわかっていませんでした。

調べるきっかけをくれたスージーさんに感謝です♪


パーセントの基準となる値は、
昨日お話した、なにの { なにを : なににする } の
「なにを」の部分によって違います。


文字サイズをパーセント指定する場合だと、
「親要素」のフォントサイズに対する割合で表示されます。


親要素というのは、

<親要素>
<子要素>表示したい文字</子要素1>
</親要素1>

のようにひとまわり上にあるHTMLタグのことです。

これだけだと分からないと思うので、例をだしてみますね。


<親要素1 文字サイズ15ピクセル>

<子要素1 文字サイズ120%>
15pxに対する120%の大きさで表示されます
</子要素1>

<親要素2>
<子要素2 文字サイズ80%>
ひとつ上の親要素にサイズの指定がないので、
さらにひとつ上の親要素1の15pxに対する80%の大きさで表示されます。
</子要素2>
</親要素2>

<親要素3 文字サイズ20ピクセル>
<子要素3 文字サイズ80%>
20pxに対する80%の大きさで表示されます
</子要素3>
</親要素3>

</親要素1>



これでわかっていただけますか(汗)


◇おまけ:文字サイズをパーセント指定するメリット

文字サイズをパーセントで指定するメリット。

それはユーザーが文字サイズを自由に変えられることです。

ためしに今、
ブラウザの 表示→文字のサイズ から文字サイズを変えてみてください。


どうですか?



変わりませんよね?(笑)

これは文字サイズをピクセルで指定しているからです。
これがパーセント指定だと文字のサイズを変えることができます。

ユーザー自身が文字サイズを選べるという
ブラウザの長所を活用することによって、訪問者にやさしいサイトになります。

(と言ってる本人がpx指定しているのでまったく説得力ないんですが(汗))


*編集後記*

今日は暑いですね(>▽<;;

最近は寒いときもあれば暑いときもあったり。。


あなたは夏と冬のどっちが好きですか!?

僕は冬派です。
なぜなら、、


泳げないからΣ(; ̄□ ̄A


「どこかかゆいところありますか?」
「ちょっと下のところを押してもらえると嬉しいです」

ブログランキング【ブログの殿堂】
お小遣い部門、SOHO・在宅部門、栃木県部門で1位を獲得しました!!
いつも応援ありがとうございます♪♪あなたの応援に感謝!!
この記事へのコメント
みずきさん、こんばんは☆

パーセントで指定の方が使いやすそうですね。
今度、試しにやってみます〜〜

夏の方が好きです。。。
たいして泳げなくても!
冬は寒くって^^;

応援ぽち☆
Posted by 情報起業で家族を養うぞ!【おいちゃん☆】 at 2006年10月09日 19:39
みずきさん

moripです

pxでしか指定をかけれないと思っていました・・・

%で指定するのも、ユーザビリティを考えたらいいですね!

また来ます!!
応援ぽち

ウハウハッ♪
Posted by 超簡単ブログで収入!私にも出来た♪ウハウハ!アフィリエイト塾!!@morip at 2006年10月09日 21:42
こんばんはtokimamaです
訪問コメントありがとうございます。
今日の解説でだいたい理解できました。
でもすぐ忘れてしまうかもね
最近は冬がよくなりました
紫外線は苦手ですから^^
応援ポチッ♪
Posted by 無料アフィリエイトで稼げるブログ=tokimama at 2006年10月09日 21:47
こんばんは!takumiです。

パーセントで指定も出来るんですね!
知りませんでした。
私は夏生まれなんですが、冬派です。
冬は車の運転だけが苦痛です。

応援ポチ!
Posted by アフィリエイトで100万円稼ぐコツ アフィリエイターtakumiの野望 at 2006年10月09日 22:01
船橋みずきさん

スージーです。

あっ、回答していただいて、ありがとうございます!

そういうことだったんですね。

わかりました。

ユーザビリティー優先の指定だったとは考えてもいませんでした。

勉強になりました。

またきますね! 応援、ぽち!
Posted by ★情報起業で稼ぐ!元宣伝マンの超ユニーク戦略暴露ブログ★スージー at 2006年10月09日 22:27
こんばんは!
笑うアフィリエイターことスマイリーです。

pxと%の謎が解けました。

機会があったら使ってみますね。

応援ぽち!
Posted by スマイリー@情報商材ブログdeレビュー at 2006年10月09日 23:09
みずきさん
こんばんは、ponです。
いつもコメント、応援を有難うございます。

%のことが良く解りました。
これからも楽しみです。

又来ますね。応援ポチッと。
Posted by 情報商材@夢叶うブログ のpon  at 2006年10月09日 23:28
こんばんわ、あまのじゃくSAITOです。
いいブログですね。わかりやすく、自分の味が出せるブログ作成ができそうですね。
応援していきマウス。
Posted by 銀行口座がザックザク!!元ディズニーキャストが贈る稼ぐブログ作成術のSAITO at 2006年10月10日 01:13
電脳カウンセラーのたいぢです。

私も、何かの本で、ユーザビリティのためにはフォントサイズを%指定すべしという記事を読みました。なるほどと思ったんですが、ブログのテンプレートをいちいち直すのも面倒なので、ピクセル指定のままにしております

応援ポチッ☆

笑顔同封 たいぢ
Posted by 月収5千円の壁を突破する方法 【たいぢ】 at 2006年10月10日 11:59
こんにちは♪

今日の講座もわかりやすかったです^^
パーセントで指定の方が使いやすいですね♪
早速試しにやってみますね。

また応援にきますね(´・ω・`)/~~
応援ぽちっ( ゚∀゚)σ
Posted by coco★初心者必見!ぐうたら主婦のドンドン稼ぐ!!アフィリエイトマル得テクニック at 2006年10月10日 13:40
みずきさん♪

こんにちは♪いつも、コメントありがとう(^^♪

やっぱり、Pxや%は・・
難しいわ。
もっと、みずきさんのブログ良く
読んで、勉強しなくちゃね。

このシリーズ、もっとやってね。
楽しみにしてます♪

応援ポチッとな(^^♪
Posted by marimama◆誰でもできる超簡単アフィリエイト2倍法則の方法◆ at 2006年10月10日 16:13
こんにちわKです。


今日も勉強になります!


また使う機会があったら詳しく勉強させてもらいますね!

応援ポチ!
Posted by 金儲け大学ネット学部アフィリエイト科K at 2006年10月10日 16:26
みずきさん、こんにちは。

沖縄のサトです。

%ってやっぱりそういう意味だったのですね。
そうかなって少し思っていました^^
今度%で文字の大きさ変えてみます〜
ありがとう!

今日も学びましたよ〜

応援します。ぽち^^
またきますね〜
Posted by ブログアフィリエイトで愛でいっぱいのお金持ち at 2006年10月10日 17:01
こんにちは、涼クールです

なるほど!すごく分かりやすい説明です!ありがとうございます!

ときに、ひとつお願いがあるのですが・・・

相互リンクのほうをしていただけないかと思いまして。
みずきさんのブログのリンクは完了しておりますので、問題ないようでしたらよろしくお願いいたします。

稼ぐコツ!〜5億稼ぐ道〜
http://kasegu-kotu.seesaa.net

です。

それでは応援!
Posted by 稼ぐコツ!〜5億稼ぐ道〜 at 2006年10月10日 17:03
こんばんは〜。

CSSは全然分からないので、
いちいちヘェ〜!と思いながら読ませてもらってます。
いい勉強になります!

応援ポチ!
Posted by ユウキ@ゆとりを手に入れろ!e-ビジネス航海日誌! at 2006年10月10日 20:34
こんばんはtokimamaです
訪問コメントありがとうございます。
更新前でしたね、またきます
応援ポチッ♪
Posted by 無料アフィリエイトで稼げるブログ=tokimama at 2006年10月10日 22:08
こんばんは!
笑うアフィリエイターことスマイリーです。

更新前に失礼します。

応援していきますね。

ポチっと♪
Posted by スマイリー@情報商材ブログdeレビュー at 2006年10月10日 22:52
船橋さん、こんばんは〜。

コメントありがとうございます。

そうだったんですね。
パーセントで指定してみます。

ありがとうございます。
応援ポチ♪
Posted by 美人講師のやさしいアフィリエイト講座 こず at 2006年10月10日 23:45
みずきさん!

こんにちは!!

るぅちゃんです♪

パーセント指定のことよく

わかりました!

勉強になりました!

また来ます☆

応援くりっ〜く♪
Posted by ネットで稼ぐ!?かけだし起業家るぅちゃん at 2006年10月11日 12:22
こんにちは。紅です♪

pxでしか指定できないと思ってました!
わかりやすく役立つ情報、ありがとうございました!!

応援クリック注射!(σ´□`)σ・・・・…━━━━☆ズキューン!!
Posted by 紅「白衣の天使のブログアフィリエイト教室」 at 2006年10月11日 12:57
みずきさん♪

こんにちは♪いつも、コメントありがとう(^^♪

更新前におじゃましたみたいですね。

また、おじゃまします。

応援だけ先にしていきますね♪

記事楽しみにしています♪

応援ポチッとな(^^♪
Posted by marimama◆誰でもできる超簡単アフィリエイト2倍法則の方法◆ at 2006年10月11日 16:33
みずきさん〜♪
まいど〜土建屋ムサシっす。
ご訪問、応援、ありがとうございます。
中々、伺えずに申し訳ございませぬ。

お〜文字サイズ
何かね〜ピッタリサイズって、難しいでする。
そうやると、自在でするね。

調度、CSSをいらおうとしていたので
挑戦してみまする。

では〜百万トン級!応援ポチドン!!
Posted by 時間が無い方限定ブログ!土建屋ムサシ! at 2006年10月11日 22:30
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
※半角英数字のみのコメントは投稿できません。

この記事へのトラックバック
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。