HTML+CSS


  • CSSでは、複数のコレクタを連続して指定し、カンマ(,)で区切ることができます.
  • Universal selector: *
    HTMLドキュメントのすべての要素を選択します.head要素を含むすべての要素が選択されます.
  • コレクタ[レビュー]
    指定したコメントを持つすべての要素を選択します.
    a[href] { color: red; }
  • コレクタ[クエリー=値]
    指定した値と指定した値が一致するすべての要素を選択します.
    a[target="_blank"] { color: red;}
  • コレクタ[クエリー~="値"]
    指定したドキュメントの値を単語(スペースで区切られた)として指定する要素を選択します.
    h1[title~"first"] { color: red;}
  • サブコレクタ
    子セレクタは、セレクタAのすべての子要素の中から、セレクタBと一致する要素を選択する.
    コレクタA>コレクタB
    div > p { color:red; }
  • 兄弟コレクター
    コレクタAの兄弟要素で、コレクタAのすぐ後ろにあるコレクタB要素を選択します.AとBの間に他の要素がある場合は、選択されません.
    コレクタA+コレクタB
    p + ul {color: red;}
  • 汎用兄弟セレクタ
    コレクタAの兄弟要素で、コレクタAの後ろにあるすべてのコレクタB要素を選択します.
    コレクタAからコレクタB
    p ~ ul {color:red;}
  • 仮想クラスセレクタ
    仮想クラスは、要素の特定のステータスに基づいてスタイルを定義するために使用されます.特定の状態とは、例えば、マウスが上昇したとき、リンクにアクセスしたとき、まだアクセスしていないとき、フォーカスが入ったときなどである.たとえば、a要素がサスペンションされている場合(マウスがサスペンションされている場合)、背景-色を黄色に指定します.
  • 	selector:pseudo-class {
    	  property: value;
    	}
        a: hover { background-color: yellow; }

  • たんい
    10-1. px:ピクセル(1 px=1/96インチ)...ぜったいながさ
    10-2. Em:親要素のフォントサイズ...相対長さ

    10-3. rem:ルート要素のフォントサイズ(Root em)...相対長さ

    10-4. vw:ビューポート幅の1%...相対長さ
    10-5. vh:ビューポートの高さの1%...相対長さ

  • 不透明度(Opacity)
    不透明度の値を0~1の異なる10進数に変更
  • .box{
      opacity: 0.6;
    }