ArcAid.jp - CSSの使用方法を整理してみる

建築を手助けしたい!!

ようこそゲストさん登録・確認

トップ Web関連 CSS関連 CSSの使用方法を整理してみる

CSSの使用方法を整理してみる

CSSのサイト適応に関して、その方法・事例のまとめ

CSSの適応方法

タグにstyle属性を指定

HTML内の任意のタグにstyle属性を指定して適応する。ただしこの場合はHTMLとCSSを分けるという大命題から外れることになるので特別な場合以外は使用しない事。

<H1 style="background-color: #00ff00">見出しです</H1>

ヘッダにstyleを指定

HTML内のヘッダにてstyleを指定してページ全体に適応する。この場合はBodyのページ内容からはスタイルは分離されているが、複数ページへの適応は出来ないので、メンテナンス等は面倒。

<HEAD>
<STYLE type="text/css">
<!--
BODY { color: #ff0000; background-color: #ffff99;}  /* 全体の背景色 */
H1   { color: #00ff00; }    /* 見出し(レベル１)の背景色 */
H2   { background-color: #00ff00 }    /* 見出し(レベル１)の背景色 */
H3   { background-color: #00ff00 }    /* 見出し(レベル１)の背景色 */
-->
</STYLE>
</HEAD>

外部ファイルの読み込み

ファイル名.cssにまとめ、HEADで読み込み指定を行い適応する。この場合サイト全体への適応が可能。ただしより計画的なアプローチが必要。


<HEAD>
  <LINK href="sample_style.css" rel="stylesheet" type="text/css">
</HEAD>

スタイルの設定方法

スタイルの設定方法
目的	記法	サンプル
単一の要素に対してスタイルを指定	セレクタ { プロパティ : 値 }	H1 { font-size: 20px; color: red }
複数の要素に対してスタイルを指定	セレクタ1,セレクタ2,セレクタ3,… { プロパティ : 値 }	H1,H2,H3 { font-size: 20px; color: red }
特定の要素に含まれる要素に対してのみスタイルを適用	セレクタ1 セレクタ2 セレクタ3 … { プロパティ : 値 }	DIV SPAN { color: red }
ID指定要素にスタイルを適用（IDはページ内でユニークである必要がある）	#ID { プロパティ : 値 }	#id1 { color: red }
ID指定された特定要素にスタイルを適用	セレクタ#ID { プロパティ : 値 }	H1#id2 { color: red }
クラス指定要素にスタイルを適用	.クラス { プロパティ : 値 }	.class1 { color: red }
クラス指定された特定要素にスタイルを適用	セレクタ.クラス { プロパティ : 値 }	H1.class2 { color: red }

スタイルシートサイズ指定単位

絶対的な値を示す単位

in ：インチ(1in = 2.54cm)
cm ：センチメートル
mm ：ミリメートル
pt ：ポイント(1pt = 1/72in)
pc ：パイカ(1pc = 12pt)

相対的な値を示す単位

em ：その範囲で有効なフォントの高さを１とする単位
ex ：その範囲で有効なフォントの小文字の「x」の高さを１とする単位
px ：１ピクセルを１とする単位
% ：他の基準となる大きさに対する割合

デバイス解像度

「Windows」は96dpiです。「Mac」のモニタのデバイス解像度は一般に72dpi。

フォントの大きさを表すptと言う単位は、歴史的に紆余曲折が合ったようだが、基本的には DTP アプリケーションにおいて広く使用されている DTP ポイントが1inch / 72 という大きさになっている。Macが72dpiという解像度を採用したのも、そうした背景に精通したジョブスに寄るのだろう。そんなこともあってかMacはDTPというジャンルのパイオニアになる。MSでもWordなどでもこのDTP ポイントが採用されているらしい。ところが後発だから違いを出したかったからなのか、汚い文字を少しでも滑らかに見せたかったからなのか、そこまで目が届かなかったからなのか、Windowsではこれが96dipとなっている。これがweb表示にも混乱をもたらす。

Windows : 12/72pt x 96dpi = 16ピクセル

Mac : 12/72pt x 72dpi = 12ピクセル

つまり12ポイントの文字はMacでは12ドットで表示されるが、Windowsでは16ドットで表示される。なのでWebサイトを表示した時にはMacで見ると小さい、とかWindowsで見ると文字が大きくて間抜けに見えるとか言うことを引き起こすのだ。これでWindows用のモニタは96dpiであり、Mac用のモニタは72dpiだ、みたいにデバイス解像度が実際の大きさに即していれば、見た目には揃うことになるが、世の中そうMSの思惑通りにはならない。IEといいまだまだMSの負の遺産に悩まされることになる。