こんにちは！新人森田です。
師匠に影響を受けて土曜日にランニングシューズとジャージを買いました！
さっそくちょっと走ってみたらすぐお腹いたくなりました。
そういえば高校の時も、体育の授業のウォームアップランニング後にお腹いたくてしばらく休んでました。
前途多難です。

とはいえ、形だけでも整えてみるとちょっとモチベ上がりますよね。
NIKEの新品シューズなかなかいい感じです。
形…かたち…スタイル、といえばCSS？！

なかなか強引ですが今回はCSSの中でもCSS3についてまとめてみます。

CSS3とは

CSSはおなじみスタイルシートのことですが、3というのはそのバージョンを意味します。
偉い人たちが日々webの世界の仕組みを作り続けているんですね。
そのおかげで表現の幅も増えて、トレンドも変化していくわけです。

ただ、一言にCSS3といっても「CSS3はこういうものです」みたいに単純なものではありません。
色んな要素がありまくりますので、少しずつ切り分けて見ていきたいと思います。

CSSを使うにあたって

その前に、CSSを便利に使うためのツールについてご紹介します。イケメン揃いです。

イケメンその１：scss

css記述における革命児scssさん！
cssは指定するclass等に対して個々に設定を書き込まなければいけませんが、scssは１つのclassの下にある要素のスタイルを入れ子にしてまとめて書くことが出来ます。また、@import、@includeを用いてmixinを使い、記述をコンパクトに。収納上手にお掃除した気分です。

ここまではcssを知るべしの時に書きましたが、実はまだまだあります。

こんな風に$で変数を設定してそのまま使用することも出来ます。

他にも、スタイルの中に計算式を埋め込む関数や、複数classに使うスタイルを変数なしで設定出来る継承といった機能も備えています。なんかもうすごくすごいです。

イケメンその２：compass

scssに使うmixinをまとめてあるのがcompassさんです。
たとえばfloat解除。floatというのは要素を横に並べる時によく使うスタイルです。が、これは要素を浮かせて並べているイメージなので、その下に来る要素は浮いてるものを無視して重なってきたりします（レイアウトが崩れます）。なのでfloatとセットで使うのがfloat解除です。解除方法にも色々ありますが、便利なのがclearfixというもの。本来何行か書かなければいけないこのclearfixを、compassさんはあらかじめ用意しておいてくれているんです。

まるで…まるで、そう。炊飯ボタンを押したらご飯が炊けるまで全自動ですみたいな。
（繰り返しする作業をワンタッチでお気軽に的な意味で）

イケメンその３：scout

ここで満を持しての登場がscoutさん。私は師匠に教えてもらっていきなり使っちゃったりしてます。
compassなどを使って書いたscssを自動的にcssに変換してくれる最強（？）イケメンです。

scss書いただけではhtmlに「cssにして出直して来い」と突き返されてしまいます。この変換はscout以外だと手作業もしくはサーバーにやってもらうという手間や時間のかかる作業です。でもscoutならそんな工程をがっつり省略できちゃうんですね。

炊飯ボタンを押したら最短でご飯が炊けるみたいな。
（昨日作り置きで一気に５合炊いた時のインパクトが凄かったので米ネタがしつこいです）

CSS3の使用例（ハレノヒブログの場合）

では使う準備が出来たところで具体的に見てみましょう。
ハレノヒブログではCSS3の以下の機能を使っています。

• 角丸処理
• レスポンシブ対応
• 不透明度の変更

このへんです。さんざん前置きした割に地味です。
でもこういうちょっとしたところが全体の見え方にも影響してくるんです。

[角丸処理]

今までプロフィール画像といえば四角で、丸くするには丸い画像を用意しなければいけませんでした。規模が小さければそれでも対応出来ると思いますが、１つずつ丸く切り抜いて保存し直すっていうのをいちいちやるのは結構面倒です。
それが、border-radiusを使えば四角い画像を丸く見せちゃうことも出来るのです。

□い頭が○くなった！

[レスポンシブ対応]

前の記事でも書きましたが、画面サイズを設定してレスポンシブにするのがMedia Queriesです。
これがなかったらすごい複雑なプログラミングとかするんだろうなぁと思うと神機能。

[不透明度の変更]

ハレノヒブログでは画像のhover時にopacityを使って不透明度を変えています。
hoverというのは、リンクが貼られた箇所にカーソルを合わせた時の状態のことです。主にPCでの話になりますが、hover時にちょっと変化をつけることでこの先にリンクがあるよっていう目印になったり、面白い演出になったりします。

不透明度に関しては、差し替え用の画像を用意したり細かく色設定したりしなくても全然オッケーです。

compassさんにも助けられつつ、なんとこれだけ！

まとめ

というわけでCSS3の一部を見てみましたが、どれも以前までの作業を楽にしてくれるものばかりでしたね。
インターネット上にはすっごい数のサイトがあるわけで、その中でも目が留まるサイトを作るには沢山の工夫が必要です。そしてその工夫をもっと楽に作るための工夫がCSS3にたくさん搭載されたんだっていうのが、CSS3を実際に使ってみての私の感想です。

森田のweb知識は一昔前のものなので、今はこんなことが楽に出来るんだー！って日々驚きだらけです。
また新機能を使ったら報告したいと思います！ランニングの経過報告も成果があれば報告したいです…
ではでは今回はこの辺で！押忍！