□技術メモ - CSS(Cascading Style Sheet) ※管理人の個人的な技術メモです。このページの内容の実行結果について管理人はいかなる責任も負いかねますのでご自身の責任でご参照ください。 ----------------------------------------------------------- ○CSSの目的・スタイルシートを使うことで、文章と装飾を別々に管理できる。・表現に一貫性を持たせることが可能になる。・文章のメンテナンスが容易になる。 ○スタイル指定の基本・以下はスタイル指定の例。 h1 {font-size: 20px;} ・h1の部分がセレクタ。セレクタの後に{ }で囲まれた範囲にスタイルを指定する。・font-size の部分はプロパティ。後ろに: を付加する。・20pxは値。後ろに;を付加する。・複数指定する場合は、プロパティと値のペアを複数記述する。以下は例。 h1 { font-size: 20px; color: red; } ○外部ファイルによるスタイル設定・以下はスタイル設定の例。複数のファイルを指定する場合は複数行記述する。 ○head内での指定・以下は要素内での指定の例。 ... ○インラインstyle属性・個々の要素のタグに、style属性としてスタイルの設定ができる。以下は例。

この部分は赤で表示される。

○要素に対する指定・以下のように要素に対してスタイルを指定することが可能。・以下の場合は要素（st1タグ）に対してスタイルが適用される。・「こんにちは」は、フォントサイズ20, 赤色で表示される。 -------- こんにちは -------- ○class属性に対する指定・要素名に続けてクラスを指定する場合と、クラスのみで指定する場合が可能。・クラス名はピリオド(.)に続けて記述する。・class指定は要素指定より優先される。・以下はid指定の例。「こんにちは」は、フォントサイズ40, 緑色で表示される。 -------- こんにちは -------- ○id属性に対する指定・要素名に続けてidを指定する場合と、idのみで指定する場合が可能。・id名はハッシュ(#)に続けて記述する。・id指定はclass指定より優先される。・以下はid指定の例。「こんにちは」は、フォントサイズ60, 黒色で表示される。 -------- こんにちは -------- ○要素とclass属性、要素とid属性に対する指定・以下は要素とclass属性、要素とid属性に対する指定の例。「こんにちは」は、フォントサイズ60, 青色で表示される。・既存のタグ

に対しても指定可能なことがわかる。 --------

こんにちは

-------- ○同じセレクタを複数指定する場合・同じセレクタが複数あってもよい。指定する属性が違う場合は両方が適用される。・同じスタイルに対して複数のセレクタを指定する場合はカンマ(,)で区切る。 --------

こんにちは

ご機嫌いかがですか？

-------- ○使用されることの多いプロパティとして以下のようなものがある color 文字色 background-color 背景色 font-size フォントのサイズ font-style フォントのスタイル font-family フォントの種類 text-align 水平方向の表示位置 vertical-align 垂直方向の表示位置 border-width 境界線の太さ border-color 境界線の色 top 上からの距離 right 右からの距離 bottom 下からの距離 left 左からの距離 z-index 重なりの順序 direction 基本書字方向 ○セレクタの種類・全称セレクタ * {} ・複数のセレクタ st1, st2 {} ・子孫セレクタ st1 st2 {} ・子セレクタ st1>st2 {} ・隣接セレクタ st1 + st2 {} ・後ろにある要素に適用 st1 ~ st2 {} 同じブロック内で、st1の後ろにあるst2に適用擬似クラス・要素名:link 未訪問のリンク・要素名:visited 訪問済みのリンク・要素名:hover カーソルが乗っている要素・要素名:active クリック中の要素・要素名:focus フォーカス中の要素・要素名:lang 特定の言語を指定・要素名:first-child 最初の子要素・(注)複数のセレクタ(カンマ区切り)には擬似クラスは適用できないらしいので注意。擬似要素・要素名:first-line 最初の１行・要素名:first-letter 最初の１文字・要素名:before 要素の直前・要素名:after 要素の直後・(注)複数のセレクタ(カンマ区切り)には擬似要素は適用できないらしいので注意。