【CSS】
.iframe-content {
position: relative;
width: 100%;
padding: 75% 0 0 0;
}
.iframe-content iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

「要素」とは

や

z-indexプロパティは、ボックスの重なりの順序を指定する際に使用します。 z-indexプロパティは、positionプロパティでstatic以外の値が指定されている要素に適用されます。

整数値で指定
重なりの順序を整数で指定します。0を基準として、値が大きいものほど上になります。

auto
親要素と同じ階層になります。これが初期値です。

優先順位は0点です。

１）すべての要素を示すセレクタ
*{color: red;}
アスタリスクはすべての要素が対象のセレクタで、Webページ全体に適用されるCSSを記述したい際などに便利です。

２）属性セレクタにて「～を含む」とき

特定のhtmlタグの属性内に任意の値を含んでいるセレクタを指定することができます。

「href属性内に『map』を含んでいるaタグを指定したい！」というときに使います。
a[href*=”map”]{width:100%;}

３）calcのかけ算
div{width: calc(10% * 3);}
４）コメントアウト
/*ここに自由に記載*/

「>」で区切ると、ある要素の直下の階層にある要素にスタイルを適用します。

CSS

div.sample > a {
font-size:18px;
font-weight:bold;
}

———-

E + F　（隣接している要素に適用）
h4 + p {
2
color:red;
3
font-weight:bold;
4
}

———-

擬似要素・擬似クラス
:first-letter
:first-line
:first-child

:nth-of-type(n)　（n番目に現れる要素に適用【CSS3】）
nの部分は以下のように複数指定することもできます。

:nth-child(n)　･･･　n番目の要素に適用
:nth-child(odd)　･･･　奇数番目の要素に適用
:nth-child(2n+1)　･･･　奇数番目の要素に適用
:nth-child(even)　･･･　偶数番目の要素に適用
:nth-child(2n)　･･･　偶数番目の要素に適用
:nth-child(3n)　･･･　3,6,9,12…番目の要素に適用
:nth-child(3n+1)　･･･　1,4,7,10…番目の要素に適用

:nth-last-of-type(n)　（後ろからn番目に現れる要素に適用【CSS3】）
———-
:hover　（オンマウス時に適用）
———-

:not　（該当しない場合に適用【CSS3】）
———-
:checked　（チェックされているユーザーインターフェース要素に適用【CSS3】）
———-
E[foo]　（特定の属性を持つ要素に適用）

タイトルその1

a[title] {
2
font-weight:bold;
3
color:red;
4
}

———-

17. E[foo=”bar”]　（特定の属性(値)を持つ要素に適用する）

a[title=”タイトルその1″] {
font-weight:bold;
color:red;
}
———-

18. E[foo^=”bar”]　（属性の値が指定した文字で始まる場合に適用する【CSS3】）

a[title^=”タイトル”] {
font-weight:bold;
color:red;

———-

19. E[foo$=”bar”]　（属性の値が指定した文字で終わる場合に適用する【CSS3】）
———-

20. E[foo*=”bar”]　（属性の値が指定した文字を含む場合に適用する【CSS3】）