CSS3解説用
目次
background:rgba(レッドの出力値,グリーンの出力値,ブルーの出力値,アルファの出力値)
background（background-color）プロパティの値にrgba()記述法を用い、背景色をrgbの出力値で指定し、alphaで不透明度の指定することができます。
https://generator.web-alpha.info/rgba/
不透明度の指定はopacityと同様の考えとなるが、opacityが要素全体の不透明度を指定するのに対し、backgroundプロパティのrgbaによる指定は背景色のみに対して不透明度の指定を行います。
See the Pen Untitled by NNC STUDIO (@NNC-STUDIO) on CodePen.
上の記述でh1の背景色を不透明度75%の黒となります。
* rgb各色の出力値が0の場合は白となる
* 不透明度は0〜1の値で表し0が0%、1が100%となる
border-radius : 数値
boder-radiusプロパティを使用することで、角丸の表現を行うことができます。
値には数値で角丸の半径を指定します。
See the Pen Untitled by NNC STUDIO (@NNC-STUDIO) on CodePen.
上の記述で.boxの角丸が半径30pxとなります。
また角丸を繋げて円や半円の表現を行うこともできます。
See the Pen Untitled by NNC STUDIO (@NNC-STUDIO) on CodePen.
上の記述で.boxの角丸が繋がり半円となります。
opacity:数値（要素の不透明度を指定）
要素全体の不透明度を0〜1の値で指定することができます。
値は0を0%、1を100%とし、50%であれば0.5、48%であれば0.48と指定をします。
See the Pen Untitled by NNC STUDIO (@NNC-STUDIO) on CodePen.
上の記述で.boxの不透明度が20％となります。
※背景色だけではなく要素全体に不透明度が適用されます。
要素名:nth-of-type()
要素の順番を指定することができます。
()内に数値入力で順番指定。
()内にキーワード指定「even」で偶数番目、「odd」で奇数番目の指定が行えます。
要素名：first-of-type
複数存在する特定の要素の中から、最初の要素を指定することができます。
要素名：last-of-type
複数存在する特定の要素の中から、最後の要素を指定することができます。
See the Pen Untitled by NNC STUDIO (@NNC-STUDIO) on CodePen.
上の記述で偶数番目の背景色が#eee、奇数番目の文字色が#666、3番目の文字色が#f00、最初の文字色が#0f0、最後の文字色が#00fとなります。
その他CSSでできる様々なこと
flex-direction（flesでレイアウトしたコンテンツの方向指定）
CSSだけでOK！ transition・animationで動き・アニメーションを実装する
移動・拡大・回転・3D表現もできる！transformプロパティを学習しよう【CSSアニメーション】
