CSS

CSS

CSS3 | レスポンシブWebデザイン |

link

適用方法

style属性で個別に指定

<p style="margin: 15px">

head要素の範囲内でstyle要素によって指定

<style type="text/css">
p {margin: 15px}
</style>

head要素の範囲内でlink要素によって外部スタイルシートを参照する

<link rel="stylesheet" type="text/css" href="./css/style.css"/>

head要素の範囲内で@importによって外部スタイルシートを参照する

<style type="text/css">
@import url("./css/style.css")
</style>

セレクタと疑似クラス、疑似要素

jQuery |

タイプセレクタとユニバーサルセレクタ

タイプセレクタ

• 要素名のみをセレクタにする

body {color:black;}

ユニバーサルセレクタ

• すべての要素に対してスタイルを指定できる

* {color:black;}

• ユニバーサルセレクタは、他のセレクタが伴う場合は省略できる
  • *.note と .note は等しい
  • *#note1 と #note1 は等しい
  • *[abbr] と [abbr] は等しい

classセレクタとidセレクタ

classセレクタ(要素名.class名)

• 文章内で複数の要素にスタイルを適用する

p.note{color:red}
   :
<p class="note">...</p>

• ユニバーサルセレクタを利用、要素を省略することで、すべての要素に対して適用できる

.note{color:red}

idセレクタ(要素名#id)

• 文書内で、唯一の要素にスタイルを適用するのに利用する。

div#gnavi{font-size:small}
     :
<div id="gnavi"> ... </div>

属性セレクタ

• 特定の属性値や属性名をもつ要素に対してスタイルを適用する

要素名[属性名]

• 属性名を持つ要素にスタイルを適用する

h3[id] {color:olive}
     :
<h3 id="r508">...</h3>

要素名[属性名="属性値"]

• 属性名と属性値を持つ要素に対してスタイルを適用する

h3[id="r508"] {color:olive}
     :
<h3 id="r508">...</h3>

要素名[属性名~="属性値"]

• 属性名を持ち、属性値が空白区切りで複数指定されている場合、属性値が含まれている要素にスタイルを適用する

p[class~="note"]{color:red}
     :
<p class="w3c wcag note">...</p>

要素名[属性名｜="属性値"]

• 属性名を持ち、属性値がハイフン区切りで複数指定されている場合、属性値が含まれている要素にスタイルを適用する

[="en" lang]{font-family:Veradana }
    :
<span lang="en-US">...</span>
<span lang="ja">...</span>

セレクタの組合せ

セレクタ セレクタ(空白文字区切り)

• 子孫セレクタ(decendant selector) といい、親要素に含まれるすべての子孫要素にスタイルを適用する

div.note p {color:red}

絞り込みも可能

div.note p abbr {text-decoration:underline }

孫要素以下に適用する例

div * p {color:blue}

セレクタ > セレクタ

• 子セレクタ(child selector)といい、親要素の直接の子要素にスタイルを適用する

blockquote.wcag > p {font-size:small}

絞り込みも可能

blockquote.wcag > p > abbr {font-size:small} 

セレクタ + セレクタ

• 同一の親要素をもつ並列関係にある要素について、前にある要素を兄要素、後に続く要素を弟要素と呼ぶ
• 隣接セレクタ(adjacent sibling selector) はある要素の直接の弟要素にスタイルを適用する

h1 + h2 {color:green}
  :
<h1>...</h1>
  <h2>...</h2>

セレクタのグループ化

• 半角カンマでグループ化し、複数の要素にスタイルを適用することができる

th,td {font-size:small}

疑似クラス

• 「状況」によってスタイルを適用

:first-child 疑似クラス

• 親要素の範囲内で最初に登場する子要素のみにスタイルを適用

div > p:first-child { text-indent:0 }

リンク疑似クラス(:link、:visited)

:link疑似クラス

• 未訪問のリンクに適用

visited疑似クラス

• 既に開いたリンクに適用

例

:link {color:blue}
a:link {color:blue}
a[href]:link {color:blue}
:visited {color:blue}
a:visited {color:blue}
a[href]:visited {color:blue}

ダイナミック疑似クラス

• ユーザーのアクションに適応して表示を変えるブラウザでのスタイルをコントロール

:hover 疑似クラス

• カーソルが当たっている状態

:active 疑似クラス

• アクティブな状態

:focus 疑似クラス

• フォーカスを受けている状態

例

a:hover {color:yellow}

疑似要素

:first-line疑似要素

• 要素の1行目のみにスタイルを適用

:fist-letter疑似要素

• 要素の1文字目のみにスタイルを適用

:before疑似要素と:after疑似要素

• 有る要素に含まれる内容の前後に内容を生成

Tips

縦書き

writing-mode:tb-rl

リンク色を個別に変える

a.type1 { color:blue; }
a:hover.type1 { color:red; }
a.type2 { color:blue; }
a:hover.type2 { color:orange; }

テーブルレイアウト

table-layout:auto
テーブル（表）全体を読み込んでから、
各縦列の幅を決定して表示します。これが初期値です。

table-layout:fixed
最初の横一行を読み込んだ時点で、
各縦列の幅を決定して表示を開始します。

条件付きコメント

• IEの独自拡張である「条件付きコメント」は、以下のような書式でHTML中に記述
• http://allabout.co.jp/internet/hpcreate/closeup/CU20070412A/index2.htm

<!--[if IE]><script src="../other_libs/excanvas_r3/excanvas.js" type="text/javascript" charset="utf-8"></script><![endif]-->

importantルール

• http://www.xml.vc/kiso/!important.html
• CSSのスタイルシートはブラウザのデフォルト・スタイルシート→ユーザー・スタイルシート → ページ作者のスタイルシートの順に優先度が高くなります。また、ひとつのスタイルシートにおいても後から指定したスタイルが優先されます。
• 「後から」とは同じセレクタのスタイルが重複した場合は最後（CSSソースの下）に指定したスタイルが優先されること。
• 普通のスタイルよりはクラスセレクタを使ったスタイルが優先
• クラスセレクタよりはIDセレクタを使ったスタイルが優先

<blockquote>!importantルールを使うとスタイルを優先させることができます。「プロパティ: 値」の後に半角スペースで区切り、!importanを配置します。ただし、「プロパティ: 値」ごとに指定する必要があります。</blockquote>

body { background-color: white !important; }