トップ 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; }    /* 見出し(レベル1)の背景色 */
H2   { background-color: #00ff00 }    /* 見出し(レベル1)の背景色 */
H3   { background-color: #00ff00 }    /* 見出し(レベル1)の背景色 */
-->
</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 : その範囲で有効なフォントの高さを1とする単位
  • ex : その範囲で有効なフォントの小文字の「x」の高さを1とする単位
  • px : 1ピクセルを1とする単位
  • % : 他の基準となる大きさに対する割合

デバイス解像度

「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の負の遺産に悩まされることになる。

スタイルシートの継承

  • スタイルシートの継承は、継承されるプロパティとそうでないプロパティがある。
  • カスケード:上書きされるか否かは、詳細度と優先順位より決まる。

スタイルシートの継承については、継承されるプロパティとそうでないプロパティがある。

  • スタイルシートの継承は、継承されるプロパティとそうでないプロパティがある。
  • カスケード:上書きされるか否かは、詳細度と優先順位より決まる。
  • 継承される値が相対値の場合は、絶対値に変換された値が継承される。
  • 属性に「inherit」を指定すると、継承を行わない属性も強制的に継承される。

プロパティーの分類

継承を行う属性

  • border-collapse
  • color
  • cusor
  • direction
  • font
  • font-family
  • font-size font-style
  • font-variant
  • font-weight
  • letter-spacing
  • line-height
  • list-style
  • list-style-image
  • list-style-positon
  • list-style-type
  • text-align
  • text-indent
  • text-transform
  • white-space
  • word-spacing

継承を行わない属性

  • background
  • background-attachment
  • background-color
  • background-image
  • background-position
  • background-repeat
  • border
  • border-color
  • border-style
  • border-width
  • border-bottom-color
  • border-bottom-style
  • border-bottom-width
  • border-left-color
  • border-left-style
  • border-left-width
  • border-right-color
  • border-right-style
  • border-right-width
  • border-top-color
  • border-top-style
  • border-top-width
  • bottom
  • clear
  • display
  • froat
  • height
  • left
  • margin
  • margin-bottom
  • margin-left
  • margin-right
  • margin-top
  • overflow padding
  • padding-bottom
  • padding-left
  • padding-right
  • padding-top
  • page-break-after
  • page-break-before
  • position
  • right
  • table-layout
  • text-decoration
  • top
  • vartical-align
  • visibility
  • width
  • z-index
投票数:28 平均点:10.00
前
CSSについて
カテゴリートップ
CSS関連
次
CSSのフォントの指定

新しくコメントをつける

題名
ゲスト名
投稿本文
より詳細なコメント入力フォームへ

ライブラリ