みなさんこんにちは、53代のれしいです。
いや～今日も天気がよくて良いCSS日和ですね～！！
そんなわけで、新歓ブログ6日目になります。前半は初心者向け、後半は知っている人向けになっています。
そもそもCSSって？
有識者によると、
CSS（Cascading Style Sheets、カスケーディング・スタイル・シート）とは、ウェブページのスタイルを指定するための言語です。
だそうです。実に面白そうですね！！！
基本的には文字の色を変えたり、画像などの位置を調整したり、ボタンのデザインを変更したりするのに使います。要するにサイトの見た目をよくするための言語ってわけです。
例えば、CSSをなにもあてられていないボタンは次のように古いWebサイトで見るような簡素なものになります。
これにCSSをあてることで次のようなボタンをつくることができます。
かわいいですね、上のボタンよりも目立って押したくなるように感じませんか？感じますね。
いかがでしたか？CSSの役割についてはふんわりでも理解していただけたかと思います。
実際にCSSを見てみよう！
先ほど紹介したようにCSSには様々な機能、プロパティが存在します。
下のようにタブにCSSと書いてあるのがコードで、Resultと書いてあるのが実際に表示されるものになります。
今回使っているプロパティはtext-align、font-size、colorの3つですね。
text-alignは文字の揃え方、font-sizeは文字の大きさ、colorは文字の色を指定する役割をそれぞれ担っています。
See the Pen VwLJwoo by recy23 (@recy23) on CodePen.
このように様々なプロパティを使うことでWebサイトを見て楽しいようにデザインしていくっていうのが本来の使い方です。「面白そうかも！」と思った人や「自分のサイトを作ってみたい！」という人はWebデザイン班なるものがあるので入ってみるといいと思います。
用法・用量を守らないでCSSで遊ぶ！
ここまでの内容でそんな初歩的なこと知ってるよという人、お待たせしました。
今回はCSSの可能性を知ってもらいたいな！ということで普段使わないようなプロパティを簡単なアニメーションを用いて紹介しようと思います。
ブラウザはGoogleChrome推奨です。（他のブラウザでは動かない可能性があります）
・mix-blend-mode
後ろの背景に合わせて手間の色を指定した効果で調整してくれます。今回はoverlayを指定しています。
デジタルで絵を描く人には馴染み深いと思いますがレイヤーの合成モードと同じことをCSSでもできるというわけです。
ただ画像の上に文字を置いてしまうだけでは浮いて見えてしまう時に使うと綺麗に使えそうですね、これは結構実用的かもしれません。
See the Pen YzXoyEg by recy23 (@recy23) on CodePen.
・box-reflect
名前の通り、CSSだけで簡単に鏡面表現を実装することができます。
今回は文字を反射させていますが、画像も反射することができます。
See the Pen box-reflect by recy23 (@recy23) on CodePen.
・shape-outside
shape-outsideは指定した範囲に文字が入らないようにできるというものです。
本来は文章の右上に画像を挿入したい時などに用いるものです、がこの範囲を変えることで文字が自動で動いていくようなアニメーションを作ることができます。
右下のRerunを押してみてください（それでも動かない場合はごめんなさい…）。
See the Pen AA animation by recy23 (@recy23) on CodePen.
CSSだけでこのようなアニメーションを作れるんですよね。楽しい！楽しい！楽しい！！まだまだ色んな表現ができると思いませんか？可能性を無限に秘めていてわくわくしますよね！！！！大好き！！！！！！！
最後に
CSSに限った話ではないですが、なにか新しいものを作ってみたい！挑戦してみたい！という新入生は是非一度サークル見学に来てみてください。MISWは幅広い分野の創作をしているのであなたの興味をひくような創作物が見つかるかもしれませんよ
次回、「Kattuくんによる記事」お楽しみに！
