12,504
回編集
差分
ナビゲーションに移動
検索に移動
編集の要約なし
==[[CSS]]==
[[CSS3]] | [[レスポンシブWebデザイン]] |
{{amazon|4798010928}}
===classセレクタとidセレクタ===
====classセレクタ(要素名.class名)====
*文章内で複数の要素にスタイルを適用する[[文章]]内で複数の要素にスタイルを適用する
p.note{color:red}
:
====idセレクタ(要素名#id)====
*文書内で、唯一の要素にスタイルを適用するのに利用する。
div#gnavigna[[vi]]{font-size:small}
:
<div id="gnavigna[[vi]]"> ... </div>
===属性セレクタ===
*特定の属性値や属性名をもつ要素に対してスタイルを適用する
*親要素の範囲内で最初に登場する子要素のみにスタイルを適用
div > p:first-child { text-indent:0 }
====リンク疑似クラス[[リンク]]疑似クラス(:link、:visited)====
===== :link疑似クラス=====
*未訪問のリンクに適用未訪問の[[リンク]]に適用=====visited疑似クラス[[vi]]sited疑似クラス=====*既に開いたリンクに適用既に開いた[[リンク]]に適用
=====例=====
:link {color:blue}
a:link {color:blue}
a[href]:link {color:blue}
:visited [[vi]]sited {color:blue} a:visited [[vi]]sited {color:blue}
a[href]:visited {color:blue}
===ダイナミック疑似クラス===
===== :before疑似要素と:after疑似要素=====
*有る要素に含まれる内容の前後に内容を生成
===[[Tips]]=======[[CSS 背景画像の設定、透明度の設定]]========[[ブラウザ用デバッグツール]]====
====縦書き====
writing-mode:tb-rl
====リンク色を個別に変える[[リンク]]色を個別に変える====
a.type1 { color:blue; }
a:hover.type1 { color:red; }
====条件付きコメント====
*IEの独自拡張である「条件付きコメント」は、以下のような書式でHTML中に記述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]]のスタイルシートはブラウザのデフォルト・スタイルシート→ユーザー・スタイルシート → ページ作者のスタイルシートの順に優先度が高くなります。また、ひとつのスタイルシートにおいても後から指定したスタイルが優先されます。*「後から」とは同じセレクタのスタイルが重複した場合は最後（CSSソースの下）に指定したスタイルが優先されること。「後から」とは同じセレクタのスタイルが重複した場合は最後（[[CSS]]ソースの下）に指定したスタイルが優先されること。
*普通のスタイルよりはクラスセレクタを使ったスタイルが優先
*クラスセレクタよりはIDセレクタを使ったスタイルが優先
© 2006 矢木浩人
