CSS3 by Studio Lazuli

「HTML5+CSS3」とHTML5とセットで話題にされることが多いCSS3について解説します。そもそもCSSは「Cascading Style Sheets」の略で、Webサイトの装飾的要素を定義するためのプログラム言語のことを指します。装飾的な要素とは、例えばテキストのフォントの種類、サイズ、カラー、行間、マージン等といった要素を指し、こうした装飾的要素に関する指示をHTMLとは別のCSSファイルの方に既述しています。このCSS3もHTML5同様に、少し前まではあらゆるブラウザで完全対応されていた訳ではないため、PC用のWebサイトの制作では積極的に採用されていなかったのですが、ここ最近は各ブラウザでだいぶ対応されるようになってきたため、Webサイト制作の現場では採用するようになってきました。また、一昔前まで流行っていたFlashアニメーションがiPhoneやiPadといったデバイスで表示できないことから、そうしたアニメーションを可能にするCSS3が広く採用するようになってきています。

1. アニメーション表現

Studio Lazuliの当Webサイトでは、例えばHomeページで左下・真下・右下からコンテンツが現れて、中央の方に移動するアニメーションを採用していますが、これがまさにCSS3によるアニメーションに依るものです。こうしたアニメーションによって可愛らしい・印象に残る・スライリッシュな動きが実現できて、そのコンテンツに視線を集めることができるので、私は積極的に使用しています。こうしたアニメーション表現は一昔前まではFlashで構築する必要があったのですが、Flashはメンテナンス面、プラグインに依存する点、より複雑なプログラム知識を要する点からデメリットが多かったのですが、CSS3によってこうした問題を一気に解決することができました。

2. 角丸の枠

枠の角を丸くしようと思った時、従来はPhotoshop等の画像編集ソフトを駆使して、事前に角丸画像を準備する必要がありました。現在ではCSS3で角丸になるように既述するだけで枠の角を丸くすることが可能になり、制作プロセスの短縮・メンテナンスの向上といった恩恵を受けれるようになりました。

3. テキストやボックスにシャドー(影)

これも一昔前まではPhotoshop等で事前に角丸画像を準備する必要がありましたが、現在ではCSS3コードを追加するだけで簡単にシャドーを付けることができます。

 

オリジナル記事のURL : https://studiolazuli.com/blog/web/css3-merit.html