*/ /* 一つのクラスでセレクトする */ .class1 { } /* または、両方を使う */ .class1.class2 { } /* または、要素名だけで */ div { } /* または、ID名で */ #anID { } /* または、属性名で */ [attr] { font-size:smaller; } /* または、指定された値を持つ属性で */ [attr='value'] { font-size:smaller; } /* 指定した値で始まる属性 (CSS 3) */ [attr^='val'] { font-size:smaller; } /* または、値で終わる属性 (CSS 3) */ [attr$='ue'] { font-size:smaller; } /* または、半角スペースで分けられた値の持つどれかの属性 */ [otherAttr~='foo'] { } [otherAttr~='bar'] { } /* または、ダッシュで区切られた値のどれかの属性例： "-" (U+002D) */ [otherAttr|='en'] { font-size:smaller; } /* 様々なセレクターを組み合わせることで限定されたセレクターを作ることができます。その場合は、間に半角スペースを入れないでください。*/ div.some-class[attr$='ue'] { } /* 他の要素の子要素を指定することができます。*/ div.some-parent > .class-name { } /* または、要素の子孫を指定できます。子要素は親要素の直接的な子孫です。（親要素からインデンテーション一回分）子孫は親要素からすべてのインデンテーションされた階を含みます。*/ div.some-parent .class-name { } /* 注意：半角スペースのない同じセレクターは別の意味になります。なんだと思いますか。*/ div.some-parent.class-name { } /* 一個前の要素を選択することもできます。*/ .i-am-just-before + .this-element { } /* または、その要素の前のすべての要素をすべて選択できます。*/ .i-am-any-element-before ~ .this-element { } /* いくつかのセレクターには擬似クラスがあり、要素が特定の状態のときだけ適用するスタイルを指定できます。*/ /* 例えば、マウスカーソルが要素の上にホバーしている状態のスタイルを指定するときは、*/ selector:hover { } /* リンク先にすでに訪れている状態を指定する場合は、*/ selector:visited { } /* または訪れていない場合は、*/ selected:link { } /* 要素が選択されている場合は、*/ selected:focus { } /* 親要素内の最初の子要素を指定する場合は、*/ selector:first-child {} /* 最後の要素を指定する場合は、*/ selector:last-child {} /* 擬似クラスのように、疑似子要素を使えば、特定の部分のスタイルを指定できます。*/ /* 選択された要素の最初の疑似子要素を指定する。*/ selector::before {} /* 選択された要素の最後の疑似子要素を指定する。*/ selector::after {} /* アスタリスクを適切な場所に記述すれば、ワイルドカードとしてすべての要素を指定することができます。 */ * { } /* すべての要素 */ .parent * { } /* すべての子孫要素 */ .parent > * { } /* すべての子要素 */ /* セレクタを一度にグループで複数選択して同じスタイルを適用することができます。*/ selector1, selector2 { } /* #################### ## プロパティー ## #################### */ selector { /* 長さの単位は画面の大きさに対して相対的か絶対的なものを選べます */ /* 相対的単位 */ width: 50%; /* 親要素の幅に対する割合で指定する */ font-size: 2em; /* フォントサイズの何倍かで指定する */ font-size: 2rem; /* か、ルート要素のフォントサイズを元にする */ font-size: 2vw; /* ビューポートの幅1パーセントの何倍かで指定する (CSS 3) */ font-size: 2vh; /* ビューポートの高さでの指定 */ font-size: 2vmin; /* vhかvwのどちらかの小さい方を選びます */ font-size: 2vmax; /* または、大きい方 */ /* 絶対的単位 */ width: 200px; /* ピクセル */ font-size: 20pt; /* ポイント */ width: 5cm; /* センチメートル */ min-width: 50mm; /* ミリメートル */ max-width: 5in; /* インチ */ /* 色 */ color: #F6E; /* 省略された六進法値での色 */ color: #FF66EE; /* 六進法値での色 */ color: tomato; /* 名前の付いた色 */ color: rgb(255, 255, 255); /* rgb値での色 */ color: rgb(10%, 20%, 50%); /* rgbの割合での色 */ color: rgba(255, 0, 0, 0.3); /* rgba値での色(CSS3) 値は0 <= a <= 1 */ color: transparent; /* アルファ値を0にするのと同じ効果 */ color: hsl(0, 100%, 50%); /* hsl割合(CSS 3)での色 */ color: hsla(0, 100%, 50%, 0.3); /* アルファ値を含んだhsl割合での色 */ /* ボーダー */ border-width:5px; /* 幅を指定*/ border-style:solid; /* 線のスタイルを指定 */ border-color:red; /* 背景色を指定するときと似たようなこと */ border: 5px solid red; /* 上記の3つのプロパティーを一つのプロパティーで書く */ border-radius:20px; /* CSS3での新しいプロパティーです（ボーダー角半径） */ /* 画像を要素の背景として使う */ background-image: url(/img-path/img.jpg); /* url()内のクォーテーションは必須ではありません */ /* フォント */ font-family: Arial; /* フォント名に半角空白がある場合にはクォーテーションで囲む必要があります。 */ font-family: "Courier New"; /* もしフォントが存在しないなら、ブラウザが定義されたフォントを探します。 */ font-family: "Courier New", Trebuchet, Arial, sans-serif; }

/* A */ p.class1[attr='value'] /* B */ p.class1 { } /* C */ p.class2 { } /* D */ p { } /* E */ p { property: value !important; }

/* すべてのデバイスで使われるルール */ h1 { font-size: 2em; color: white; background-color: black; } /* 印刷するときにh1タグの印刷に使われるインクの量を減らす。 */ @media print { h1 { color: black; background-color: white; } } /* 画面の幅が480ピクセルより小さいときにフォントサイズを大きくする。 */ @media screen and (min-width: 480px) { h1 { font-size: 3em; font-weight: normal; } }