テンプレートとアクセスアップのでめらら楽天日記

2005.04.29
XML
カテゴリ: 【実験中】
大きさの基準を理解しよう

思うようにホームページをデザインするにはまずタグを作成する際の大きさの単位を知っていることが必要ではないでしょうか。
一般的には絶対値指定をする場合の基本はポイント(pt)になります。



■絶対指定の単位(ブラウザや画面の大きさには関係なく決まった大きさ)
□mm (ミリメートル) 10mm = 1cm
□cm (センチメートル) 1cm = 10mm
□in (インチ) 1in = 2.54cm
□pt (ポイント) 72pt = 1in



■相対指定の単位(小さな画面では小さく大きな画面では大きく表示されます)
□em (エム) 1em = 大文字 M の高さ
□ex (エックスハイト) 1ex = 小文字 x の高さ
□px (ピクセル) 1px = 画面上の1ピクセル
□% (パーセント) 割合
※相対単位はデフォルト(標準)の大きさを基準にしていると考えます。

1.)スタイルシートのなかでは数値が 0 以外の場合は、単位が必要です。
2.)整数以外、小数点表示も出来るので細かい設定が可能です。



■絶対指定の単位
日常生活で馴染みのある単位がこれらだと思います。

1in(インチ)=72pt(ポイント)
1in(インチ)=2.54cm(センチメートル)
なので
1pt(ポイント)=0.03527(センチメートル)=約0.35mm(ミリメートル)

【例】14ptの文字とは約4.93mmの大きさの文字ということになります。


□em (エム)というのは、現時点の環境のなかで見えている(いまこの目の前の)ブラウザで表示される『M』という文字の大きさを基準にした表示単位です。
もしいま見ているブラウザで表示される文字『M』の大きさが14ptだったとしますと

1em … 14pt (基準の大きさ)
2em … 28pt (基準の2倍の大きさ)
0.5em … 7pt (基準の半分の大きさ)

に指定されます。したがってテキストの文章などは行間指定するのに1行分なら1em、1.5行分の行間なら1.5emと細かい指定ができるわけです。

□ex (エックスハイト)というのは、現時点の環境のなかで見えている(いまこの目の前の)ブラウザで表示される『x』という文字の大きさを基準にした表示単位です。
小文字の英字abcdefghijklmnopqrstuvwxyzを良く見ますと
1.acemnorsuvwxz は上下はみ出し無し文字、
2.bdfhijklt は上はみ出し文字、
3.gjpqy は下はみ出し文字に分類できます。
これらのなかで上下はみ出しのない『x』が基準なわけです。

□px (ピクセル)□% (パーセント)は凄く使うと思いますので注意点としては、何に比較しての大きさなのかを理解して使いたいですね。

※相対表示はどうしてもブラウザやその他の環境に左右される表示単位です。使用にあたっては充分に考慮したうえでつかいたいものですね。

*****************************************************
【庶事所感】
『40代前後の世代には懐かしい初代ウルトラマンと一緒に怪獣と戦う気分を味わえるアトラクションが、このゴールデンウイークから国内の遊園地やテーマパークに登場する。日立ケーイーシステムズ、円谷エンターテインメント、バンダイの3社が共同制作した新ソフト「ウルトラマン・ザ・ライド」によるもので、まず和歌山県白浜町の白浜エネルギーランドで29日に公開される。』
あれ!それじゃ昭和40年生まれくらいのかただからオリジナルのウルトラマンではなく再放送なのだろうなぁ・・・それにしてもUSJに続いて関西方面にはこのタイプのソフトはふたつめの開設、関東方面にも早く配給してくれないかなぁと思いました。
ん!こども向けなのですよね(^^)でも行きたいのです。ズバリ「ウルトラマン」世代ですので(@@)

*****************************************************

なぜか行掛かりでBlogLankingに参加しました(^^;)面白かったらポチして下さいネ

ランキング



リンクはフリーですご自由にどうぞ(バナーリンクタグはprofileのページ年表欄にあります)





お気に入りの記事を「いいね!」で応援しよう

Last updated  2005.07.22 16:31:53
コメント(7) | コメントを書く
[【実験中】] カテゴリの最新記事


■コメント

お名前
タイトル
メッセージ
画像認証
上の画像で表示されている数字を入力して下さい。


利用規約 に同意してコメントを
※コメントに関するよくある質問は、 こちら をご確認ください。


Re:スタイルシート(2)(04/29)  
数字に弱い私は実験しながら覚えるしか
なさそうですね・・・
確かに単位はある程度知らないと
とんでもない大きさになったりしますよね。 (2005.04.29 12:17:19)

こんにちは  
TAXI-DRIVER  さん
でめららさん
いつも綺麗に纏められているのを拝見して感心しています。
とても分かりやすいですよ!
因みに僕もウルトラマン世代です(oIo) (2005.04.29 12:28:08)

GWは如何お過ごしですか?  
jasmintea7  さん
よく数字の単位と大きさがわからないでとんでもない大きな字を書いて自分で笑いこけているjasminteaです(^^; ....
今日の日記は大変参考になりました!!

そして余計な話ですが私のHM「jasmintea7」なんですが好きなものと取り合わせなんです。jasminteaはもちろんジャスミン茶、そして7は!ウルトラセブンなんです~!子供の頃はモロボシダンと結婚するのが夢でした(^-^)v
はい、私もウルトラマン世代でーす! (2005.04.29 17:47:49)

Re[1]:スタイルシート(2)(04/29)  
でめらら58  さん
カモミール9828さん
-----
こんばんは(^^)コメントありがとうございます♪
スタイルシートで記述する場合はこの『単位』が必須になってきますので是非たくさん試してみていただくといいのではないのかな、と思います。
(2005.04.29 22:43:16)

Re:こんにちは(04/29)  
でめらら58  さん
TAXI-DRIVERさん
-----
こんばんは(^^)コメントありがとうございます♪
正直言いますと学生時代からまとめるのは凄く苦手で、これもひとつの勉強と開き直って恥を曝してみています(><)
「ウルトラQ」⇒「ウルトラマン」⇒「ウルトラ7」はホント僕らの夢を広げてくれましたよね!
「エイトマン」や「ソラン」なんかも復活してほしいなと思います!!

(2005.04.29 22:48:24)

Re:GWは如何お過ごしですか?(04/29)  
でめらら58  さん
jasmintea7さん
-----
こんばんは(^^)コメントありがとうございます♪
世間のGWなみには休みたいですが・・・
なかなかそうもいかなくて(><)

文字だけでなく画像やテーブルサイズなどもこれらの単位ですべて記述しますから、覚えておくと結構使えますヨ!
わたくしも設定を間違えて大きな文字やピンボケ写真にしてしまって大笑いすることあります(^^)

おぉ・・・モロボシダンのお嫁さんですかぁ(^^)それはすっごい旦那様ですぅ!! (2005.04.29 22:55:32)

なにか君  
ナチョス さん
数学レポートどういうこと書けばよか (2005.08.04 12:12:31)

【毎日開催】
15記事にいいね!で1ポイント
10秒滞在
いいね! -- / --
おめでとうございます!
ミッションを達成しました。
※「ポイントを獲得する」ボタンを押すと広告が表示されます。
x
X

PR

Keyword Search

▼キーワード検索

Comments

主婦が携帯スマホで月収100万を稼ぐ方法@ 主婦が携帯スマホで月収100万を稼ぐ方法 主婦が携帯スマホで月収100万を稼ぐ方法 …
fipyaqh@ fipyaqh BanUgR &lt;a href=&quot; <small> <a hr…
krjxyqcvrh@ krjxyqcvrh kOkt2k &lt;a href=&quot; <small> <a hr…

© Rakuten Group, Inc.
Mobilize your Site
スマートフォン版を閲覧 | PC版を閲覧
Share by: