概要

はじめに

HTML5とエロアプリ記事が好評だったため、今回はCSS3とエロアプリと題しまして、その関係性を綴っていきたいと思います。

前提として、HTML5とエロアプリの親和性は高さと比較すると、CSS3とエロアプリの直接的な親和性はそれ程高いとは言えないのかもしれません。

しかしながら、HTML5とCSS3は組み合わせてセットで考えるのが理想的なため、記事として取り上げたいと思います。

HTML5とCSS3

CSSは、Cascading Style Sheetsの略で、HTML文書のデザイン部分を定義・指定するための仕様や技術の事です。「スタイルシート」や「シーエスエス」と呼ばれています。

HTML5との親和性については、下記の記事を参考にしていただければと思います。

HTML5とエロアプリ

どんな技術？

CSS3は革新的な技術ではありますが、全く新しい技術といったわけではありません。これまでのCSSとの互換性も保ちつつ、表現出来なかった事が実現出来るようになりました。

ここからは、CSS3で追加された主な技術を紹介していきたいと思います。
また下記の内容も今後変更が行われる可能性があります。

背景（background）

これまではあまり融通が効かずに、指定の細かい工夫が必要なbackgroundですが、CSS3では主に位置やサイズなども併せて指定する事が出来るようになりました。

backgroundを指定したセレクタのwidthそのものを変更して対応していた事が、CSSだけで出来るようになったのです。

位置についても、入れ子になっていたdivなども解消されるようになります。

ボーダー（border）

borderの変更で衝撃的だったのは角丸の実現です。border-radiusで指定する事が出来ます。

これまではborderの線を丸くするためだけに画像を作成していましたが、CSS3ではそれを必要としません。

これは、多くのデザイナー＋コーダーに衝撃を与えました。

2D・3D変更（transforms）

こちらはアニメーション要素として利用されるでしょうか。
これまでJavascriptを利用していた操作がCSS3だけで可能となりました。

特に『平行投影』『バースの3次元変換』を利用すると、要素の立体感が一気に強まります。

backface-visibilityが初心者には扱いやすいです。

時間的変化（transition）

こちらもアニメーション要素。私も多様しているプロパティです。当サイトSPIRAL NEWSPAPERのメニューでも利用しています。

例えばオンマウス時に背景色を変える時に、ゆっくり変えたりする事が可能になります。

アニメーション（animation）

こちらはまさしくアニメーション要素です。
Javascriptで行っていた要素の動きなどを、CSSで簡単に制御する事が可能です。

animation単独でもかなり使えるのですが、更にtransitionと組み合わせる事で、滑らかでヌルヌルなアニメーションを実現する事ができます。

透過色（opacityなど）

要素の透過を指定する事が可能です。画像などに少し指定するだけでも印象がかなり変わります。

こちらもimgのオンマウス時に透過をしていするなど、SPIRAL NEWSPAPERでも愛用しています。小さな変化が大きな印象をもたらす事がありますので、是非使ってみて下さい。

グラデーション（linear-gradient・radial-gradient）

こちらも、今まで画像で実現していたグラデーションがCSSだけで実現可能となりました。

グラデーションの性質上、細かく指定するとかなり複雑なCSSとなってしまいますが、でも大丈夫。

ことグラデーションにおいては、便利なジェネレーターが用意されています。

私のオススメはGrad3です。 Grad3

ポイントだけ指定すると、自動的にグラデーションのCSSコードを吐き出してくれます。
それをコピー＆ペーストで利用すればOKです。

テキスト（text-shadowなど）

テキストの装飾もかなりの数の追加がありました。
一番便利で多様性に富んでいるのは何と言ってもtext-shadowでしょうか？

文字にドロップシャドウや光彩をつける事が出来ます。
グラデーションや背景色との組み合わせも併用すれば、CSS3だけでグラフィカルなロゴの制作が可能です。

まとめ

CSS3の基本的な目的が、「画像を使わないとできなかったことの実現」だと思って下さい。上記のプロパティをご覧いただければわかる通り、デザイナー＋コーダーの作業がかなり短縮されます。

また、画像ではなくCSSで指定する事により、Webサイトの軽量化も実現されました。

HTML5の記事と今ページをお読みいただければ、この革新的な技術がエロアプリに多大な影響を与えている事がわかります。

シェアはこちらから。

関連記事