見出し画像

CSS3からの追加仕様①

YaHoHoo's

（１）一般兄弟セレクタ

「要素A」よりも後ろに記載のある「要素B」に対して
スタイルを適用したい場合、要素名を「~」記号で繋げて記述する。

<p>対象外の段落</p>
<h3>小見出し</h3>
<p>対象の段落</p>
<p>対象の段落</p>

このとき、CSSを

h3 ~ p { color: red; }

とすると、「h3要素が登場した後に記述されているp要素だけ」を
適用対象にできる（文字色は赤色）。


（２）属性値が指定値の要素のみを適用対象にする

①指定値で始まる場合

『「A」という文字列から始まる値』が指定された「B属性」
を持つ、「C要素」に限定して適用対象可能。

C[B^="A"]

（例）

a[href^="http://"] { color: red; }


②指定値で終わる場合

『「A」という文字列で終わる値』が指定された「B属性」を持つ、
「C要素」に限定して適用対象可能。

C[B$="A"]

（例）

a[href$=".pdf"] { color: red; }


③指定値を含む場合

『「A」という文字列を含む値』が指定された「B属性」を持つ、
「C要素」に限定して適用対象可能。

C[B*="A"]

（例）

a[href*="hello"] { color: red; }


（３）偶数／奇数項目の設定

「nth-child」（疑似クラス）を使うことで、簡単に装飾できる。

（HTML）

<ol>
  <li>ここは1番目</li>
  <li>ここは2番目</li>
  <li>ここは3番目</li>
  <li>ここは4番目</li>
</ol>

（CSS)

li:nth-child(2n) {
  /* 偶数だけ適用される */
  color: red;
}
li:nth-child(2n+1) {
  /* 奇数だけ適用される */
  color: green;
}

2nの「2」を他の数値に変更すれば、その倍数ごとのCSSが設定可能。


（４）角を丸くする

水平方向と垂直方向の２つの半径の組み合わせを記載する。
水平方向と垂直方向の各半径は、スラッシュ（ / ）で区切る。

水平方向と垂直方向の半径の値を、左上・右上・右下・左下
の順で指定する。

①border-radius
角丸をまとめて指定

（例）

border-radius: 100px 25px 50px 50px / 50px 25px 50px 25px;

・スラッシュ以降を省略した場合は、水平垂直も同値として解釈される。
・値は長さかパーセンテージで指定。

・左下が省略された場合には、右上と同じ。
・右下が省略された場合には、左上と同じ。
・右上が省略された場合には、左上と同じ。

　→つまり、左上のみ１ヶ所だけ値設定しても表記は角丸になる

②border-top-left-radius
左上の角丸

③border-top-right-radius
右上の角丸

④border-bottom-left-radius
左下の角丸

⑤border-bottom-right-radius
右下の角丸


（５）ボックスに影をつける

box-shadowでボックスに影をつけられる。

・２～４つの長さの値で定義する。
・任意で色、insetキーワードの指定可。
　 insetキーワードを付けると影がボックスの内側につく。
・長さ指定を省略すると「0」となる。
・色指定を省略すると「ユーザーエージェントが選んだ色」となる。
・複数の影を指定する場合は、カンマ（ , ）区切りで
　影のリストを複数指定する。

（例）

p.sample1 {box-shadow: 10px 10px;}
p.sample2 {box-shadow: 10px 10px 10px rgba(0,0,0,0.4);}
p.sample3 {box-shadow: 10px 10px 10px 10px rgba(0,0,0,0.4);}
p.sample4 {box-shadow: 10px 10px 10px 10px rgba(0,0,0,0.4) inset;}
p.sample1, p.sample2, p.sample3, p.sample4 {
width:300px; height:50px;
background-color:yellow;
border:solid 10px orange;
}


※テキストに影をつける「text-shadow」プロパティも別途存在する。

（６）ボックスサイズの算出方法指定

box sizingでボックスサイズの算出方法を指定できる。

【設定できる値】
①content-box
　パディングとボーダーを幅と高さに含めない（初期値）

②border-box
　パディングとボーダーを幅と高さに含める

③inherit
　親要素の値を継承する


（例）

.boxsizing {
   width: 200px;
   padding: 30px;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   border:1px solid #333333;
}


（７）最新の単位

Viewportについては、こちらに記載↓


【出典】



この記事が気に入ったらサポートをしてみませんか？