http://spiral-newspaper.jp/

WEB SPIRAL NEWSPAPER

お問い合わせ

CSS3とエロアプリ

Web

2013/12/3

記事の詳細

CSS3とエロアプリ

概要

はじめに

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

シェアはこちらから。

Spiral Newspaperメインビジュアル Spiral Newspaper広告掲載について

Popular Posts

2013/10/24

スマホのエロアプリ 概要 スマホのエロアプリは、iPhoneの「App Store」、Androidの「Google Play」のどちらも規制が厳しく、公式のマーケットではお目にかかる事ができません。稀に審査を上手くかい …

2013/10/7

昨日、私はブラック企業の経営者だったという記事を読んだ。はてなブックマーク経由で辿り着いたのですが、なかなか良い記事でした。 私はブラック企業の経営者だった 概要 現在は雇用される立場として過酷な労働環境の元働いているが …

2013/10/22

ハゲ・薄毛のブログまとめ 自身の治療経過をブログに画像付きでアップされておられるハゲ・薄毛の方も少なくありません。治療の奮闘記、といった感じでしょうか。 薄毛の方が頑張っておられる姿に仲間意識が芽生えますし、良い報告の記 …

2013/10/30

今日は先日公開されたまどマギの映画を見に行きました。 そのチケット購入の際の一幕。 私「魔法少女まどかマギカ大人一人お願いします」 チケット受付「はい、まどマギ大人一名様ですね」 …まどマギはチケット受付の人も略しちゃう …

2013/10/30

ガンホーの1〜9月期の営業利益が28倍の685億円に昇る事がわかりました。 ガンホーと言えばパズドラですが、今年も順調で2000万ダウンロードを突破するなど話題となりました。 ガンホー1~9月期、営業益28倍の685億円 …

2013/11/1

概要 スマホのエロゲー総合ページです。 目次 スマホにエロアプリがない理由 スマホにエロアプリがない理由 この記事を読む ●概要 そもそも、公式マーケットでエロゲーを検索されてエロゲーを検索してヒットしなかったからために …