【 gabs.log｜おしゃべり好きなWEB制作者のたわごと 】

「よく利用する単位」の使い分け

CSSの書き方において、利用できる単位を「よく利用する単位」として、テキストより抜粋し説明しました。

その単位について、「どのように使い分けするべきなのか？」と質問をいただきました。これは、なかなか難しいんですよね。確かに迷う部分でもありますし、制作をされる方々それぞれに解釈のしかたもあると思いますし、また、閲覧される状況や、スタイルが適用されるデバイスによる部分もあります。

CSSで利用できる代表的な単位はざっと、こんなところです。(表1）

表にも書いてありますが、単位には「相対単位」と「絶対単位」の2種類存在します。
今回のセッションでは、時間に制約もあることから割愛した部分でもありますが・・・（汗）

詳しい解説は、こちらをご覧いただくと良いと思います。
http://www.mozilla.gr.jp/standards/webtips0027.html

結局、単位の使いどころはどこなんだろう？

で、結局どうなの？

ってことですよね？（苦笑）
これだっ！使い方はありません。（一般的にはモニタ等への出力は相対単位が望ましいとされています。）
そこで、個人的な使い方を掲載しておきます。

• ソリッドレイアウトの場合、大元のボックスレイアウトで「px」を使用することが多いです。
• リキッドレイアウトの場合は、閲覧される領域の幅に応じるので、「％」指定が圧倒的多いです。
• 行間の指定等、テキストに関わる部分は「em」が多いです。直感的に理解してスタイルを書き込めるので、重宝してます。

「％」を使用する場合は、親要素で指定された値を継承してのパーセンテージとなるので、基準となる部分を理解してなら、アリだと思います。
その他、絶対単位を使う場合、オレは「mm」を印刷用のCSSでよく指定します。

こんな記事をみつけましたので、参考までに。

フォントサイズの[%][px][em]のそれぞれの一覧表を作成しました。

参考になりましたでしょうか？
つまり、「CSSに利用する単位は、状況や用途によって変化するべき。」だと考えます。
この部分は、「この単位だっ！」と決めるのは、やはり制作者によってバラバラです。まずは色々と試してみて、自分に合った単位の使いどころを見つけてください。
また、多くのサイトのソースを見ることで、使いどころの傾向や、トレンドも垣間見られると思います。

雪の便りがチラホラと・・・タイヤ交換に悩む季節が到来です。