#14 デザインが楽しくなるCSS基礎知識！
CSS基礎知識（本当に基本部分です）
position:fixedの使い方
参考サイト
私のブログだと・・・
上のねねっちとメニューバー、あとは右サイドのサイドバーを固定しています！
上とサイドバーはある一定の位置までスクロールすると
入れ替わるように、上は非表示になり右は動き出します。
この入れ替わり動作自体はJavascriptになります。
ただ、固定自体に関して言えばこの
position:fixed;で問題ありません！
header { position: fixed; top: 0; left:0;}ちなみに、
top:0;
left:0;
これら二つで固定する位置を示しています。
例えば下固定にするのなら、
bottom:0;
右上固定にするのなら、
top:0;
right:0;
という風になりますので合わせて使うようにしてください！
border-radius:の使い方
参考サイト
これは一言で言えば、角を丸くするやつです！d(￣ ￣)
box { width:100px; height:100px; border-radius:10px;background-color:#000;}これで上のようなボックスになります。
分かります？角が丸いですよね！
これが４つの角を25pxずつ丸くする、ということになっています。
あとは・・・下記のような指定方法もあります！
合わせて確認してください！
水平方向と垂直方向の半径のセットは、スラッシュ（ / ）で区切ります。 スラッシュの前後に水平方向と垂直方向の半径の値を、左上・右上・右下・左下の順で指定します。border-radius: 100px 25px 50px 50px / 50px 25px 50px 25px;
ちなみに上の通り入力すると上のようないびつな形になります。笑
あと、、、
画像の角丸もできます。
border-radius:50%;
上の条件で画像を丸くしてみます！
ちょっと横広になっちゃいました。笑
これは元々横長の画像だったので、その50%ということです！
正方形の画像であればまん丸になります！
opacity:の使い方
参考サイト
上記のサイト通り、
opacityとは、要素を透過させます！
透明度は10段階で
（透明度高）０.０〜１.０（透明度低）
例：半分の透明がよければ
opacity:0.5
例：元に近い透明度がよければ
opacity:0.8
ちなみに、0.5とかの0.はこの界隈では.5とかで略します！！
何言っているか分かりませんよね！すみません！
つまり、0.5にしたければ・・・
opacity:.5
このように記述するわけです。٩( 'ω' )و
慣れたら楽・・・？なのかもしれません・・・。
話は戻りまして、では下記の記述でボックスを表示させてみますね。
box {
width:100px;
height:100px;
background-color:#000;
opacity:.5;
}
こんな感じに淡〜く薄〜くなります！
赤色の場合・・・
こんな感じになります！淡いですね！
他にも画像に適用できたりも・・・
このように用途は様々ですね。
淡くすれば基本オシャレに・・・なるかもしれません。笑
他にもいろんなものがありますが、
組み合わせることでより面白さは倍増しますよ！
皆さんもぜひCSSで色々いじってみてください！٩( 'ω' )و
あと！ついったー始めました！
フォローしていただけると幸いです！
