2005年04月20日

CSSのお勉強1 フォントサイズ編

人気Blogランキング  さあ順位チェック!

学生ブログランキング ついでにこっちもチェックだ!


今日はCSSについて自分が独学した事を書こうと思う。

そもそもCSSとはCascadingStyleSheetのことで、
HTMLのレイアウトを分離して記述するためのきまりのことである。

そんな事言われてもなんのこと?
と思う人は多いはずー(長音記号2)

現在はCSSをいじっている自分も、
最初にCSSを見た時は暗号かと思っちゃいましたよ(;´∀`)

でも一つずつ要素を見ていくと、
なんのことなのかがわかってきますよ!
実際この自分ができそうも無いと思った事が
現在できているくらいですからね(⌒○⌒;


CSSはページの設定の一種だとでも思えば、
少しは理解できるんじゃないでしょうか?

厳密に言えば違うと否定されそうですが、
ページの設定と思えば何を変えればいいのか
わかってくるんじゃないでしょうか?

実際自分も現在はお勉強中ですペン

最初はJAVAやBACICとかのプログラミング言語を
覚えようかと思っていたのですが、
Blogに手を出すようになってからは、

「まずページの設定とかを変更したい」

と思うようになったので、
とりあえず、CSSやHTMLを優先して勉強しています。

今回はまずフォントのサイズについてを書こうかと思います!


文字なんて同じ大きさだけでいいという人もいると思いますが、
やはり見易さや強調を考えると、フォントサイズについてを覚えておくと便利です。

フォントのサイズは

font-size

このプロパティでサイズを変えていく事になります。

記述方法としては、

指定したい部分(例:h1 等) {font-size: サイズ;}

↑このようになる。

サイズの部分で利用できる設定値は、
実数値+単位、%値、キーワード がある。

実数値+単位では、
実際の数値と、"px"や"pt"などの単位を利用して記述する。

px・・・ピクセルで指定(1pt = 1/72in)
pt・・・ポイントで指定
pc・・・パイカで指定 (1pc = 1/6in)
in・・・インチで指定 (1in = 2.54cm)
cm・・・センチメートルで指定
mm・・・ミリメートルで指定

フォントサイズを記述する際に、
実際どのくらいの大きさになるのかわからないし、
判別するのに難しいので、単位で記述するのは難しいでしょう。



%値では、現在のフォントサイズを100%(基準)とした相対指定をする。

100%よりも大きい数値に設定すれば基準の大きさよりも大きく、
100%よりも小さい数値に設定すれば基準の大きさよりも小さく、
それぞれ指定した大きさに変更される。

50% ・・・あいうえお
100%・・・あいうえお
200%・・・あいうえお

といったような大きさになる。
小さな誤差程度のサイズを指定したい時や、
いろいろ大きさを変えたい人にとっては便利である。

しかし、やはり%で記述する分、数値と実際の大きさがわかりにくい。



キーワードでは、大きさを表す単語でサイズを変える。

使用できるのは以下の通りである。

xx-small・・・あいうえお
x-small・・・あいうえお
small・・・あいうえお
medium・・・あいうえお
large・・・あいうえお
x-large・・・あいうえお
xx-large・・・あいうえお
smaller・・・あいうえお
larger・・・あいうえお
normal・・・あいうえお

キーワードそれぞれで大きさが決まっているので、
記述する時にはかなり理解しやすいのではないかと思う。

しかし、ブラウザによって設定されている大きさが違うので、
キーワードで大きさを指定する際には気をつけたほうがよいだろう。


管理人書いているこのBlogの初期設定では、
テキストの大きさが"noemal"に指定されていた。
"noemal"では大きすぎて見にくかったので、
ここを"x-small"に変更した。


今回はフォントサイズだけを書いたが、
これだけでも奥は深いと思う。

もっと勉強が必要だなあ・・・(;´Д`)


人気Blogランキング参加 よければクリックしてください。

学生ブログランキング こちらもクリックお願いします。



posted by H2 at 00:00| Comment(1) | TrackBack(1) | Blogについて | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
はじめまして、「SEOキーワード」と申します。
関連性の高い記事を取り扱っておられますのでトラックバックさせて頂きました。これからもどうぞ宜しくお願い致します。
Posted by SEOキーワード at 2005年05月22日 08:30
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]


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

CSS(カスケーディング・スタイル・シート): by SEOキーワード
Excerpt: CSSとは、Cascading Style Sheets(カスケーディング・スタ...
Weblog: SEOキーワード
Tracked: 2005-05-22 08:30
マンガのススメ〜!!
×

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